webfront / videoWeb · 提交

转到一个项目

作者 乔爽
提交 2b726d532cf8f9a9c330e1952ff8f36107773da0 1 个父辈 496de973

update

内嵌 并排对比
正在显示 11 个修改的文件 包含 1764 行增加 和 19 行删除
  1 +
  2 +
  3 +.container {
  4 + width: 100%;
  5 + display: flex;
  6 + flex-flow: column;
  7 + align-items: center;
  8 + justify-content: center;
  9 +
  10 +}
  11 +.top{
  12 + width: 7.5rem;
  13 + /*height: 1.5rem;*/
  14 + background-color: #F7F7F7;
  15 + display: flex;
  16 + flex-flow: column;
  17 + align-items: center;
  18 + justify-content: center;
  19 +}
  20 +.top_t{
  21 + width: 6.86rem;
  22 + height: 0.8rem;
  23 + display: flex;
  24 + align-items: center;
  25 + justify-content: space-between;
  26 +}
  27 +.top_t_left{
  28 + width: 1.2rem;
  29 + display: flex;
  30 + justify-content: space-between;
  31 + align-items: center;
  32 +}
  33 +.top_t_left_text{
  34 + font-size:0.3rem;
  35 + font-family:PingFang-SC-Medium;
  36 + font-weight:500;
  37 + color:rgba(166,16,16,1);
  38 +}
  39 +.icon-caidan{
  40 +
  41 +}
  42 +/*中部*/
  43 +.top_t_middle{
  44 + width: 1.2rem;
  45 + height: 0.5rem;
  46 + display: flex;
  47 +}
  48 +.top_t_middle img{
  49 + width: 100%;
  50 + height: 100%;
  51 +}
  52 +/*右边*/
  53 +.top_t_right{
  54 + width: 1.2rem;
  55 + display: flex;
  56 + justify-content: space-between;
  57 + align-items: center;
  58 +}
  59 +.icon-10{
  60 + position: relative;
  61 +}
  62 +.top_t_right_pic{
  63 + width: 0.4rem;
  64 + height: 0.4rem;
  65 + display: flex;
  66 + -webkit-border-radius: 50%;
  67 + -moz-border-radius: 50%;
  68 + border-radius: 50%;
  69 +}
  70 +.top_t_right_pic img{
  71 + width: 100%;
  72 + height: 100%;
  73 + -webkit-border-radius: 50%;
  74 + -moz-border-radius: 50%;
  75 + border-radius: 50%;
  76 +}
  77 +/*-----底部------*/
  78 +.top_d{
  79 + width: 5.56rem;
  80 + display: flex;
  81 + padding-bottom: 0.03rem;
  82 + border-bottom: 1px solid #999999;
  83 + margin: 0.3rem 0 0.2rem 0;
  84 +}
  85 +.top_d_input{
  86 + width: 5rem;
  87 + text-align: center;
  88 + border: none;
  89 + outline: none;
  90 + background-color: #F7F7F7;
  91 + font-size: 0.3rem;
  92 + box-sizing: border-box;
  93 + padding: 0 0.2rem;
  94 +}
  95 +.top_d_input::placeholder{
  96 + color: #999999;
  97 +}
  98 +.mid{
  99 + width: 6.86rem;
  100 + display: flex;
  101 + flex-flow: column;
  102 + margin-top: 0.13rem;
  103 +}
  104 +.mid_head{
  105 + width: 6.86rem;
  106 + height: 3rem;
  107 + display: flex;
  108 + border-radius: 0.08rem;
  109 +}
  110 +.mid_head img{
  111 + width: 100%;
  112 + height: 100%;
  113 + border-radius: 0.08rem;
  114 +}
  115 +.mid_title{
  116 + margin-top: 0.6rem;
  117 + width: 6.84rem;
  118 + height: 2.83rem;
  119 + background:rgba(255,222,37,0);
  120 + border:1px solid rgba(232, 232, 232, 1);
  121 + border-radius: 0.1rem;
  122 +
  123 +
  124 + font-size: 0.24rem;
  125 + font-family:PingFang-SC-Medium;
  126 + font-weight:500;
  127 + color:rgba(51,51,51,1);
  128 + line-height: 0.36rem;
  129 + -webkit-box-sizing: border-box;
  130 + -moz-box-sizing: border-box;
  131 + box-sizing: border-box;
  132 + padding: 0.25rem 0.35rem 0.19rem 0.35rem;
  133 + overflow-y: scroll;
  134 +}
  135 +/*文本框下的介绍内容*/
  136 +.mid_small{
  137 + display: flex;
  138 + justify-content: center;
  139 + margin-top: 0.25rem;
  140 +}
  141 +.mid_small_left{
  142 + width: 0.6rem;
  143 + font-size: 0.18rem;
  144 + font-family:PingFang-SC-Medium;
  145 + font-weight:500;
  146 + color:rgba(153,153,153,1);
  147 + line-height: 0.3rem;
  148 +
  149 +}
  150 +.mid_small_right{
  151 +
  152 + font-size: 0.18rem;
  153 + font-family:PingFang-SC-Medium;
  154 + font-weight:500;
  155 + color:rgba(153,153,153,1);
  156 + line-height: 0.3rem;
  157 +}
  158 +.mid_type{
  159 + display: flex;
  160 + margin-top: 0.42rem;
  161 + flex-flow: column;
  162 +}
  163 +.mid_type_title{
  164 + width: 1rem;
  165 + display: flex;
  166 + align-items: center;
  167 + justify-content: space-between;
  168 + font-size: 0.36rem;
  169 + font-family:PingFang-SC-Bold;
  170 + font-weight:bold;
  171 + color:rgba(51,51,51,1);
  172 + line-height: 0.3rem;
  173 +}
  174 +.mid_type_title_dot{
  175 + width: 0.14rem;
  176 + height: 0.14rem;
  177 + background:rgba(166,16,16,1);
  178 + border-radius:50%;
  179 +}
  180 +.mid_type_items{
  181 + width: 6rem;
  182 + display: flex;
  183 + flex-wrap: wrap;
  184 + margin-left: 0.4rem;
  185 + justify-content: space-between;
  186 +}
  187 +.mid_type_items_item{
  188 + width: 1.5rem;
  189 + height: 0.5rem;
  190 + background:rgba(166,16,16,0);
  191 + border:1px solid rgba(232, 232, 232, 1);
  192 + border-radius: 0.04rem;
  193 +
  194 + line-height: 0.5rem;
  195 + text-align: center;
  196 + font-size: 0.24rem;
  197 + font-family:MicrosoftYaHei;
  198 + font-weight:400;
  199 + color:rgba(51,51,51,1);
  200 +
  201 + margin-top: 0.2rem;
  202 +
  203 +}
  204 +.mid_type_items_title{
  205 + width: 100%;
  206 + display: flex;
  207 +}
  208 +.mid_type_items_title input{
  209 + width: 100%;
  210 +}
  211 +
@@ -262,6 +262,7 @@ @@ -262,6 +262,7 @@
262 margin-top: 0.2rem; 262 margin-top: 0.2rem;
263 display: flex; 263 display: flex;
264 justify-content: space-between; 264 justify-content: space-between;
  265 + position: relative;
265 } 266 }
266 .dynamic_item_title{ 267 .dynamic_item_title{
267 268
@@ -278,6 +279,15 @@ @@ -278,6 +279,15 @@
278 font-weight:500; 279 font-weight:500;
279 color:rgba(153,153,153,1); 280 color:rgba(153,153,153,1);
280 line-height: 0.3rem; 281 line-height: 0.3rem;
  282 + position: absolute;
  283 + right: 2rem;
  284 +}
  285 +.dynamic_item_date{
  286 + width: 1.8rem;
  287 + display: flex;
  288 + justify-content: space-around;
  289 + font-size: 0.24rem;
  290 + color: #333333;
281 } 291 }
282 .dynamic_name{ 292 .dynamic_name{
283 width: 5rem; 293 width: 5rem;
@@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
6 flex-flow: column; 6 flex-flow: column;
7 align-items: center; 7 align-items: center;
8 justify-content: center; 8 justify-content: center;
  9 + overflow-y: hidden;
9 10
10 } 11 }
11 .top{ 12 .top{
@@ -51,7 +52,7 @@ @@ -51,7 +52,7 @@
51 } 52 }
52 /*右边*/ 53 /*右边*/
53 .top_t_right{ 54 .top_t_right{
54 - width: 1.2rem; 55 + width: 1.5rem;
55 display: flex; 56 display: flex;
56 justify-content: space-between; 57 justify-content: space-between;
57 align-items: center; 58 align-items: center;
@@ -74,6 +75,11 @@ @@ -74,6 +75,11 @@
74 -moz-border-radius: 50%; 75 -moz-border-radius: 50%;
75 border-radius: 50%; 76 border-radius: 50%;
76 } 77 }
  78 +.top_t_right_text{
  79 + font-size: 0.2rem;
  80 + font-weight: 500;
  81 + color: #333333;
  82 +}
77 /*-----底部------*/ 83 /*-----底部------*/
78 .top_d{ 84 .top_d{
79 width: 5.56rem; 85 width: 5.56rem;
@@ -243,3 +249,566 @@ @@ -243,3 +249,566 @@
243 line-height: 0.36rem; 249 line-height: 0.36rem;
244 } 250 }
245 251
  252 +/*动态层*/
  253 +.mask{
  254 + width: 7.5rem;
  255 + height: 100%;
  256 + position: fixed;
  257 + top: 1.69rem;
  258 +
  259 + display: flex;
  260 + justify-content: center;
  261 + background:rgba(255,255,255,0.94);
  262 + margin-top: 0.46rem;
  263 +}
  264 +.mask_box{
  265 + width: 5.7rem;
  266 + height: 7rem;
  267 + display: flex;
  268 + flex-flow: column;
  269 +
  270 + align-items: center;
  271 + background:rgba(255,255,255,1);
  272 +
  273 + border-radius: 0.16rem;
  274 + box-shadow: 0 0.07rem 0.1rem 0.01rem rgba(0, 0, 0, 0.08);
  275 +}
  276 +.mask_text{
  277 + margin-top: 0.64rem;
  278 + font-size: 0.48rem;
  279 + font-family:PingFang-SC-Bold;
  280 + font-weight:bold;
  281 + color:rgba(51,51,51,1);
  282 +}
  283 +.mask_box_top{
  284 + margin-top: 0.64rem;
  285 + width: 3.5rem;
  286 + display: flex;
  287 + justify-content: space-between;
  288 + align-items: center;
  289 +}
  290 +.tel_size{
  291 + margin-top: 0;
  292 + font-size: 0.36rem;
  293 +}
  294 +.mask_email{
  295 + font-size: 0.24rem;
  296 + font-weight: bold;
  297 + color: #999999;
  298 + margin-top: 0.1rem;
  299 +}
  300 +.mask_box_mid{
  301 + margin-top: 0.9rem;
  302 + display: flex;
  303 + flex-flow: column;
  304 + position: relative;
  305 +}
  306 +.mask_box_text{
  307 + display: flex;
  308 + font-size: 0.24rem;
  309 + font-family:PingFang-SC-Medium;
  310 + font-weight:500;
  311 + color:rgba(51,51,51,1);
  312 + position: absolute;
  313 + left: -0.9rem;
  314 + top: 0.16rem;
  315 + align-items: center;
  316 +}
  317 +.mask_box_mid_input{
  318 + font-size: 0.24rem;
  319 + width: 3.5rem;
  320 + height: 0.6rem;
  321 + outline:none;
  322 + border: none;
  323 +
  324 + text-decoration: none;
  325 + box-sizing: border-box;
  326 + padding: 0.1rem;
  327 +}
  328 +.mask_box_mid_input::placeholder{
  329 + color: #999999;
  330 +}
  331 +.mask_box_mid_input_code{
  332 + font-size: 0.16rem;
  333 + color: #A61010;
  334 + position: absolute;
  335 + top: 0.8rem;
  336 + right: 0;
  337 +}
  338 +.mask_box_sub{
  339 + margin-top: 0.53rem;
  340 + width: 3.5rem;
  341 + height: 0.5rem;
  342 + line-height: 0.5rem;
  343 + text-align: center;
  344 + background:rgba(192,44,44,1);
  345 + border-radius: 0.04rem;
  346 + font-size: 0.26rem;
  347 + font-weight: bold;
  348 + color: #fff;
  349 +}
  350 +.mask_box_account{
  351 + width: 3.5rem;
  352 + display: flex;
  353 + justify-content: space-between;
  354 + font-size: 0.14rem;
  355 + color: #333333;
  356 + margin-top: 0.28rem;
  357 +}
  358 +.mask_box_underline{
  359 + margin-top: 0.29rem;
  360 + width: 4.8rem;
  361 + height: 0.02rem;
  362 + background-color: #e8e8e8;
  363 +}
  364 +.mask_box_third{
  365 + font-size: 0.18rem;
  366 + text-align: center;
  367 + color: #333333;
  368 + margin-top: 0.23rem;
  369 +}
  370 +
  371 +.mask_box_model{
  372 + width: 3.5rem;
  373 + margin-top: 0.7rem;
  374 + display: flex;
  375 + justify-content: space-between;
  376 +
  377 +}
  378 +.mask_box_model_sub{
  379 + width: 0.4rem;
  380 + height: 0.4rem;
  381 + display: flex;
  382 + border-radius: 50%;
  383 +}
  384 +.mask_box_model_sub img{
  385 + width: 100%;
  386 + height: 100%;
  387 + border-radius: 50%;
  388 +}
  389 +.mask_box_bottom{
  390 + margin-top: 0.59rem;
  391 + width: 3.5rem;
  392 + font-size: 0.18rem;
  393 + font-family:MicrosoftYaHei;
  394 + font-weight:400;
  395 + color:rgba(153,153,153,1);
  396 + display: flex;
  397 + justify-content: space-between;
  398 +}
  399 +.mask_box_t{
  400 + font-size: 0.14rem;
  401 + color: #333333;
  402 + margin-top: 0.28rem;
  403 +}
  404 +/*立即登录，10秒后进入登录界面*/
  405 +.now_sub{
  406 + width: 7.5rem;
  407 + height: 100%;
  408 + position: fixed;
  409 + top: 1.69rem;
  410 + flex-flow: column;
  411 + display: flex;
  412 + align-items: center;
  413 + background:rgba(255,255,255,0.94);
  414 +}
  415 +.mask_big{
  416 + margin-top: 2.97rem;
  417 + font-size: 0.48rem;
  418 + font-weight: bold;
  419 + color: #333333;
  420 +}
  421 +.mask_small{
  422 + margin-top: 0.88rem;
  423 + font-size: 0.48rem;
  424 + font-weight: 500;
  425 +}
  426 +/*邮箱注册*/
  427 +.tel_register{
  428 + font-size: 0.24rem;
  429 + font-weight: bold;
  430 + color: #999999;
  431 + margin-top: 0.1rem;
  432 +}
  433 +.email_register{
  434 + font-size: 0.36rem;
  435 + font-weight: bold;
  436 + color: #333333;
  437 +}
  438 +.sub_verity{
  439 + margin-top: 0.3rem;
  440 +}
  441 +.mask_box_mid_input_remind{
  442 + font-size: 0.12rem;
  443 + position: absolute;
  444 + top: 0.86rem;
  445 + color: #999999;
  446 +}
  447 +.mask_underline{
  448 + height: 0.8rem;
  449 +}
  450 +.height_input{
  451 + margin-top: 0.18rem;
  452 + width: 3.6rem;
  453 +}
  454 +/*发送至邮箱*/
  455 +.mask_middle{
  456 + font-size: 0.36rem;
  457 + font-weight: bold;
  458 + margin-top: 1rem;
  459 +}
  460 +.mask_s{
  461 + font-size: 0.3rem;
  462 + margin-top: 0.8rem;
  463 +}
  464 +/*密码找回*/
  465 +.find{
  466 + margin-top: 0;
  467 +}
  468 +.mask_find{
  469 + margin-top: 3.04rem;
  470 + width: 5.3rem;
  471 + display: flex;
  472 + flex-flow: column;
  473 +}
  474 +.mask_find_big{
  475 + font-size: 0.48rem;
  476 + font-weight: bold;
  477 + color: #333333;
  478 +}
  479 +.mask_find_small{
  480 + margin-top: 0.21rem;
  481 + font-size: 0.3rem;
  482 + color: #333333;
  483 +}
  484 +.mask_find_box{
  485 + width: 5.3rem;
  486 + height: 0.86rem;
  487 + display: flex;
  488 + justify-content: space-between;
  489 + border-bottom: 1px solid #A61010;
  490 + margin-top: 0.5rem;
  491 +}
  492 +.mask_find_box_input{
  493 + width: 5.3rem;
  494 + font-size: 0.36rem;
  495 + color: #333333;
  496 + outline: none;
  497 + border: none;
  498 +
  499 + background-color: transparent;
  500 +}
  501 +.mask_find_box_input::placeholder{
  502 + color: #999999;
  503 +}
  504 +/*下一步按钮*/
  505 +.mask_find_next{
  506 + margin-top: 0.79rem;
  507 + width: 5.3rem;
  508 + height: 0.6rem;
  509 + line-height: 0.6rem;
  510 + background:rgba(192,44,44,1);
  511 + border-radius: 0.04rem;
  512 + text-align: center;
  513 +
  514 + font-size: 0.3rem;
  515 + font-family:PingFang-SC-Bold;
  516 + font-weight:bold;
  517 + color:rgba(252,254,255,1);
  518 +}
  519 +/*验证手机有效性*/
  520 +.mask_find_box_small{
  521 +
  522 + font-size: 0.24rem;
  523 + font-family:MicrosoftYaHei;
  524 + font-weight:400;
  525 + color:rgba(153,153,153,1);
  526 + line-height:36px;
  527 +}
  528 +/*手机号设置*/
  529 +.width_input{
  530 + width: 3rem;
  531 +}
  532 +.m_top{
  533 + margin-top: 0.7rem;
  534 +}
  535 +.mask_tel{
  536 +
  537 + font-size: 0.48rem;
  538 + font-family:PingFang-SC-Bold;
  539 + font-weight:bold;
  540 + color:rgba(51,51,51,1);
  541 + /*line-height:24px;*/
  542 + margin-top: 1.03rem;
  543 +}
  544 +.mask_new{
  545 +
  546 + font-size: 0.24rem;
  547 + font-family:PingFang-SC-Medium;
  548 + font-weight:500;
  549 + color:rgba(153,153,153,1);
  550 + /*line-height:24px;*/
  551 + height: 0.8rem;
  552 +
  553 + display: flex;
  554 + border-bottom: 1px solid #e8e8e8;
  555 +}
  556 +.mask_box_i{
  557 + margin-top: 1rem;
  558 + }
  559 +
  560 +.mask_new_input{
  561 + width: 4rem;
  562 + font-size: 0.24rem;
  563 + outline: none;
  564 + border: none;
  565 +}
  566 +.mask_new_input::placeholder{
  567 + color: #999999;
  568 +}
  569 +.mask_new_small{
  570 + width: 2.7rem;
  571 + font-size: 0.24rem;
  572 + outline: none;
  573 + border: none;
  574 +}
  575 +.mask_new_small::placeholder{
  576 + color: #999999;
  577 +}
  578 +.mask_new_text{
  579 + font-size: 0.24rem;
  580 + font-family:PingFang-SC-Medium;
  581 + font-weight:500;
  582 + color:rgba(51,51,51,1);
  583 + /*line-height:24px;*/
  584 +}
  585 +.border_no{
  586 + border: none;
  587 + display: flex;
  588 + align-items: center;
  589 + justify-content: space-between;
  590 +}
  591 +.mask_tel_button{
  592 + display: flex;
  593 + justify-content: space-between;
  594 + font-size: 0.29rem;
  595 + color: #ffffff;
  596 + margin-top: 1.32rem;
  597 +}
  598 +.mask_tel_button_left{
  599 + width: 1.9rem;
  600 + height: 0.5rem;
  601 + background:rgba(232,232,232,1);
  602 + border-radius: 0.04rem;
  603 +
  604 + line-height: 0.5rem;
  605 + text-align: center;
  606 +}
  607 +.mask_tel_button_right{
  608 + width: 1.9rem;
  609 + height: 0.5rem;
  610 + background:rgba(192,44,44,1);
  611 + border-radius: 0.04rem;
  612 +
  613 + line-height: 0.5rem;
  614 + text-align: center;
  615 +}
  616 +.mask_ver_button{
  617 + width: 4rem;
  618 + height: 0.5rem;
  619 + background:rgba(192,44,44,1);
  620 + border-radius: 0.04rem;
  621 +
  622 + font-size: 0.3rem;
  623 + color: #ffffff;
  624 + margin-top: 1.1rem;
  625 + text-align: center;
  626 + line-height: 0.5rem;
  627 +}
  628 +/*设置昵称*/
  629 +.mask_name{
  630 + margin-top: 1.72rem;
  631 + width: 5.7rem;
  632 + height: 4.4rem;
  633 + background:rgba(255,255,255,1);
  634 + border-radius: 0.16rem;
  635 + display: flex;
  636 + flex-flow: column;
  637 + align-items: center;
  638 + box-shadow: 0 0.07rem 0.1rem 0.01rem rgba(0, 0, 0, 0.08);
  639 +}
  640 +.mask_name_title{
  641 + margin-top: 0.65rem;
  642 + font-size: 0.48rem;
  643 + font-family:PingFang-SC-Bold;
  644 + font-weight:bold;
  645 + color:rgba(51,51,51,1);
  646 + /*line-height:24px;*/
  647 +}
  648 +.mask_name_input{
  649 + height: 0.8rem;
  650 + width: 4.3rem;
  651 + display: flex;
  652 + border-bottom: 1px solid #e8e8e8;
  653 + margin-top: 0.5rem;
  654 +}
  655 +.mask_name_input input{
  656 + width: 100%;
  657 + border: none;
  658 + outline: none;
  659 + font-size: 0.24rem;
  660 +}
  661 +.mask_name_input input::placeholder{
  662 + color: #999999;
  663 +}
  664 +.mask_name_hint{
  665 + margin-top: 0.15rem;
  666 + width: 4.3rem;
  667 + font-size: 0.14rem;
  668 + font-family:PingFang-SC-Medium;
  669 + font-weight:500;
  670 + color:rgba(153,153,153,1);
  671 + /*line-height:36px;*/
  672 +}
  673 +.mask_name_sub{
  674 + margin-top: 0.5rem;
  675 + width: 4.2rem;
  676 + height: 0.5rem;
  677 + background:rgba(192,44,44,1);
  678 + border-radius: 0.04rem;
  679 +
  680 + color: #ffffff;
  681 + font-size: 0.3rem;
  682 + line-height: 0.5rem;
  683 + text-align: center;
  684 +}
  685 +/*绑定手机号继续*/
  686 +.tel_height{
  687 + margin-top: 0.7rem;
  688 + height: 7rem;
  689 +}
  690 +.mask_tel_box{
  691 + display: flex;
  692 + align-items: center;
  693 + flex-flow: column;
  694 +}
  695 +.mask_tel_box p{
  696 + margin-top: 0.23rem;
  697 + font-size: 0.24rem;
  698 + color: #333333;
  699 + text-align: center;
  700 +}
  701 +.mask_tel_box_pic{
  702 + margin-top: 0.44rem;
  703 + width: 1rem;
  704 + height: 0.99rem;
  705 + border-radius: 0.5rem;
  706 +}
  707 +.mask_tel_box_pic img{
  708 + width: 100%;
  709 + height: 100%;
  710 + border-radius: 0.5rem;
  711 +}
  712 +.margin_to{
  713 + margin-top: 0.9rem;
  714 +}
  715 +.mask_jump{
  716 + margin-top: 0.55rem;
  717 + font-size: 0.18rem;
  718 + font-family:PingFang-SC-Medium;
  719 + font-weight:500;
  720 + color:rgba(153,153,153,1);
  721 + /*line-height:24px;*/
  722 +}
  723 +.mask_name_way{
  724 + margin-top: 1.09rem;
  725 + font-size: 0.24rem;
  726 + font-family:PingFang-SC-Medium;
  727 + font-weight:500;
  728 + color:rgba(51,51,51,1);
  729 + line-height: 0.24rem;
  730 +}
  731 +.way_top{
  732 + margin-top: 0.97rem;
  733 +}
  734 +/*解绑账号2*/
  735 +.mask_way_sub{
  736 + width: 4rem;
  737 + display: flex;
  738 + justify-content: space-between;
  739 + margin-top: 0.96rem;
  740 +}
  741 +
  742 +.mask_way_sub_left{
  743 + width: 1.9rem;
  744 + height: 0.5rem;
  745 + line-height: 0.5rem;
  746 + background:rgba(232,232,232,1);
  747 + border-radius: 0.04rem;
  748 +
  749 + font-size: 0.3rem;
  750 + color: #ffffff;
  751 + text-align: center;
  752 +}
  753 +.mask_way_sub_right{
  754 + width: 1.9rem;
  755 + height: 0.5rem;
  756 + line-height: 0.5rem;
  757 + background:rgba(192,44,44,1);
  758 + border-radius:4px;
  759 +
  760 + font-size: 0.3rem;
  761 + color: #ffffff;
  762 + text-align: center;
  763 +}
  764 +.submit_height{
  765 + margin-top: 2.02rem;
  766 + height: 3rem;
  767 +}
  768 +.mask_submit_text{
  769 + display: flex;
  770 + flex-flow: column;
  771 + font-size: 0.3rem;
  772 + color: #333333;
  773 + margin-top: 0.73rem;
  774 +}
  775 +.mask_submit_bottom{
  776 + margin-top: 0.43rem;
  777 + width: 2.5rem;
  778 + height: 0.5rem;
  779 + background:rgba(192,44,44,1);
  780 + border-radius: 0.04rem;
  781 +
  782 + line-height: 0.5rem;
  783 + text-align: center;
  784 + font-size: 0.26rem;
  785 + color: #ffffff;
  786 +}
  787 +
  788 +/*隐私协议*/
  789 +.mask_title{
  790 + font-size: .48rem;
  791 + font-family:PingFang-SC-Bold;
  792 + font-weight:bold;
  793 + color:rgba(51,51,51,1);
  794 +}
  795 +.mask_small_text{
  796 + font-size: 0.24rem;
  797 + font-family:PingFang-SC-Medium;
  798 + font-weight:500;
  799 + color:rgba(51,51,51,1);
  800 + line-height: 0.36rem;
  801 + padding: 0.3rem 0.5rem;
  802 + margin-bottom: 2rem;
  803 +}
  804 +.privacy{
  805 + /*display: flex;*/
  806 + /*flex-flow: column;*/
  807 +}
  808 +.mask_box_a{
  809 + display: flex;
  810 + flex-flow: column;
  811 + align-items: center;
  812 + overflow-y: auto;
  813 + margin-bottom: 0.6rem;
  814 +}
@@ -185,7 +185,7 @@ @@ -185,7 +185,7 @@
185 .bottom_item{ 185 .bottom_item{
186 margin-top: 0.07rem; 186 margin-top: 0.07rem;
187 display: flex; 187 display: flex;
188 - flex-wrap: wrap-reverse; 188 + flex-wrap: wrap;
189 justify-content: space-between; 189 justify-content: space-between;
190 margin-bottom: 0.6rem; 190 margin-bottom: 0.6rem;
191 } 191 }
@@ -2,8 +2,9 @@ @@ -2,8 +2,9 @@
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 - <title>首页</title>  
6 - <meta name="viewport" content="width=device-width, initial-scale=1" /> 5 + <title>个人主页</title>
  6 + <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  7 +
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 <link rel="stylesheet" type="text/css" href="css/common.css"> 9 <link rel="stylesheet" type="text/css" href="css/common.css">
9 <link rel="stylesheet" type="text/css" href="css/grzy.css"> 10 <link rel="stylesheet" type="text/css" href="css/grzy.css">
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>个人主页</title>
  6 + <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  7 +
  8 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  9 + <link rel="stylesheet" type="text/css" href="css/common.css">
  10 + <link rel="stylesheet" type="text/css" href="css/gx.css">
  11 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_j5a2c541jh.css">
  12 + <script src="js/base.js"></script>
  13 + <script src="js/jquery.min.js"></script>
  14 +
  15 + <style>
  16 + .icon-caidan{
  17 + font-size: 0.5rem;
  18 + }
  19 + .icon-magnifier{
  20 + color: #999999;
  21 + }
  22 +
  23 + .f_size{
  24 + font-weight: normal;
  25 + font-size: 0.18rem;
  26 + }
  27 + .icon-xiugai{
  28 + margin-left: 0.15rem;
  29 + font-size: 0.3rem;
  30 + color: #999999;
  31 + display: flex;
  32 + font-weight: bold;
  33 + align-items: center;
  34 + }
  35 + .top_dot{
  36 + width: 0.08rem;
  37 + height: 0.08rem;
  38 + background:rgba(166,16,16,1);
  39 + border:1px solid rgba(255, 255, 255, 1);
  40 + border-radius: 50%;
  41 + position: absolute;
  42 + top: 0;
  43 + right: 0;
  44 + }
  45 + .color_black{
  46 + color: black;
  47 + }
  48 + .margin_t{
  49 + margin-top: 0.1rem;
  50 + }
  51 + </style>
  52 +</head>
  53 +
  54 +<body>
  55 +<div class="container">
  56 + <div class="top">
  57 + <!--顶部菜单-->
  58 + <div class="top_t">
  59 + <!--左-->
  60 + <div class="top_t_left">
  61 + <!--中文字-->
  62 + <div class="top_t_left_text">
  63 + 中
  64 + </div>
  65 + <!--菜单图标-->
  66 + <div class="iconfont icon-caidan"></div>
  67 + </div>
  68 + <!--中-->
  69 + <div class="top_t_middle">
  70 + <img src="images/peke.png">
  71 + </div>
  72 + <!--右-->
  73 + <div class="top_t_right">
  74 + <!--铃声-->
  75 + <div class="iconfont icon-10">
  76 + <!--小红点-->
  77 + <div class="top_dot"></div>
  78 + </div>
  79 + <!--头像-->
  80 + <div class="top_t_right_pic">
  81 + <img src="images/1.png">
  82 + </div>
  83 + </div>
  84 + </div>
  85 + <!--底部搜索-->
  86 + <div class="top_d">
  87 + <div class="iconfont icon-magnifier"></div>
  88 + <input class="top_d_input" placeholder="搜索音乐/作品/风格">
  89 + </div>
  90 + </div>
  91 + <!--主体内容-->
  92 + <div class="mid">
  93 + <!--头部图片-->
  94 + <div class="mid_head">
  95 + <img src="images/banner_1.png">
  96 + </div>
  97 + <!--头部文本框-->
  98 + <div class="mid_title">
  99 +
  100 + 我在这里享受着很多地区不曾有的体验，每一天都在过四季。为此，很是苦恼，不知道怎么穿戴，分不清是穿多了还是穿少了。这种特有的气候，每年都会让体弱的人进出医院好几回。年少时，总觉得那些因为天气而生病的人，是残弱群体，而今，自己也慢慢加入这个群体，深深懂得，岁月不会优待谁，生老病死都得走这么一遭。这么一说，我感到一丝悲哀
  101 +
  102 + </div>
  103 + <!--文本框下的介绍内容-->
  104 + <div class="mid_small">
  105 + <!--图标-->
  106 + <!--<div class="iconfont icongantanhao"></div>-->
  107 + <div class="mid_small_left">图标</div>
  108 + <!--文字-->
  109 + <div class="mid_small_right">
  110 + <p>包含图片/声音/视频或大附件内容请直接发送邮件至：</p>
  111 + <p>Musicofchina@outlook.com (后期会改成企业邮箱）</p>
  112 + </div>
  113 + </div>
  114 +
  115 + <!--类型-->
  116 + <div class="mid_type">
  117 + <!--标题-->
  118 + <div class="mid_type_title">
  119 + <!--圆点-->
  120 + <p class="mid_type_title_dot"></p>
  121 + <p>类型</p>
  122 + </div>
  123 + <!--内容-->
  124 + <div class="mid_type_items">
  125 + <div class="mid_type_items_item">人物</div>
  126 + <div class="mid_type_items_item">演出</div>
  127 + <div class="mid_type_items_item">文章</div>
  128 + <div class="mid_type_items_item">新闻</div>
  129 + <div class="mid_type_items_item">风格</div>
  130 + <div class="mid_type_items_item">乐器</div>
  131 + <div class="mid_type_items_item">其他</div>
  132 + </div>
  133 + </div>
  134 +
  135 + <!--内容-->
  136 + <div class="mid_type">
  137 + <!--标题-->
  138 + <div class="mid_type_title">
  139 + <!--圆点-->
  140 + <p class="mid_type_title_dot"></p>
  141 + <p>类型</p>
  142 + </div>
  143 + <!--内容-->
  144 + <div class="mid_type_items">
  145 + <!--标题-->
  146 + <div class="mid_type_items_title">
  147 + <input type="text">
  148 + </div>
  149 + </div>
  150 + </div>
  151 + </div>
  152 +
  153 +
  154 +</div>
  155 +</body>
  156 +<script>
  157 +
  158 +
  159 +</script>
  160 +</html>
@@ -3,7 +3,8 @@ @@ -3,7 +3,8 @@
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <title>首页</title> 5 <title>首页</title>
6 - <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 + <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  7 +
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 <link rel="stylesheet" type="text/css" href="css/common.css"> 9 <link rel="stylesheet" type="text/css" href="css/common.css">
9 <link rel="stylesheet" type="text/css" href="css/index.css"> 10 <link rel="stylesheet" type="text/css" href="css/index.css">
@@ -333,8 +334,8 @@ @@ -333,8 +334,8 @@
333 }, 334 },
334 }); 335 });
335 336
336 - $('.icon-magnifier').click(  
337 - window.location.href = 'grzy_1'  
338 - ) 337 + // $('.icon-magnifier').click(
  338 + // window.location.href = 'grzy_1'
  339 + // )
339 </script> 340 </script>
340 </html> 341 </html>
@@ -3,7 +3,8 @@ @@ -3,7 +3,8 @@
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <title>首页</title> 5 <title>首页</title>
6 - <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 + <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  7 + <!--<meta name="viewport" content="width=device-width, initial-scale=1" />-->
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 <link rel="stylesheet" type="text/css" href="css/common.css"> 9 <link rel="stylesheet" type="text/css" href="css/common.css">
9 <link rel="stylesheet" type="text/css" href="css/index.css"> 10 <link rel="stylesheet" type="text/css" href="css/index.css">
@@ -3,7 +3,8 @@ @@ -3,7 +3,8 @@
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <title>人物详情</title> 5 <title>人物详情</title>
6 - <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 + <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  7 + <!--<meta name="viewport" content="width=device-width, initial-scale=1" />-->
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 <link rel="stylesheet" type="text/css" href="css/common.css"> 9 <link rel="stylesheet" type="text/css" href="css/common.css">
9 <link rel="stylesheet" type="text/css" href="css/rwxq.css"> 10 <link rel="stylesheet" type="text/css" href="css/rwxq.css">
@@ -240,7 +241,12 @@ @@ -240,7 +241,12 @@
240 </div> 241 </div>
241 <div class="dynamic_item_time"> 242 <div class="dynamic_item_time">
242 时间 243 时间
243 - <div class="dynamic_item_date"></div> 244 +
  245 + </div>
  246 + <div class="dynamic_item_date">
  247 + <p><</p>
  248 + <p>2018</p>
  249 + <p>></p>
244 </div> 250 </div>
245 </div> 251 </div>
246 <!--演出名称--> 252 <!--演出名称-->
@@ -263,11 +269,16 @@ @@ -263,11 +269,16 @@
263 <!--事件--> 269 <!--事件-->
264 <div class="dynamic_item"> 270 <div class="dynamic_item">
265 <div class="dynamic_item_title"> 271 <div class="dynamic_item_title">
266 - 时间 272 + 事件
267 </div> 273 </div>
268 <div class="dynamic_item_time"> 274 <div class="dynamic_item_time">
269 时间 275 时间
270 - <div class="dynamic_item_date"></div> 276 +
  277 + </div>
  278 + <div class="dynamic_item_date">
  279 + <p><</p>
  280 + <p>2018</p>
  281 + <p>></p>
271 </div> 282 </div>
272 </div> 283 </div>
273 <!--演出名称--> 284 <!--演出名称-->
@@ -287,6 +298,7 @@ @@ -287,6 +298,7 @@
287 7月12日 298 7月12日
288 </div> 299 </div>
289 </div> 300 </div>
  301 +
290 </div> 302 </div>
291 <!------------ 作品 ------------> 303 <!------------ 作品 ------------>
292 <div class="production"> 304 <div class="production">
@@ -3,11 +3,13 @@ @@ -3,11 +3,13 @@
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <title>用户展示页面</title> 5 <title>用户展示页面</title>
6 - <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 + <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  7 + <!--<meta name="viewport" content="width=device-width, initial-scale=1" />-->
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 <link rel="stylesheet" type="text/css" href="css/common.css"> 9 <link rel="stylesheet" type="text/css" href="css/common.css">
9 <link rel="stylesheet" type="text/css" href="css/yhzs.css"> 10 <link rel="stylesheet" type="text/css" href="css/yhzs.css">
10 - <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_aj31y803pii.css"> 11 + <!--<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_st61h4y4sf8.css">-->
  12 + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_qenn9ltnfx.css">
11 <script src="js/base.js"></script> 13 <script src="js/base.js"></script>
12 <script src="js/jquery.min.js"></script> 14 <script src="js/jquery.min.js"></script>
13 15
@@ -47,6 +49,49 @@ @@ -47,6 +49,49 @@
47 .margin_t{ 49 .margin_t{
48 margin-top: 0.1rem; 50 margin-top: 0.1rem;
49 } 51 }
  52 + .icon-jinlingyingcaiwangtubiao22{
  53 + margin-left: 0.1rem;
  54 + font-size: 0.12rem;
  55 + }
  56 + .tel_top{
  57 + margin-top: 0.33rem;
  58 + }
  59 + .tel_margin{
  60 + margin-top: 0.53rem;
  61 + }
  62 + .register{
  63 + margin-top: 0.3rem;
  64 + width: 3.6rem;
  65 + }
  66 + .mask_underline{
  67 + border-bottom: 1px solid #E8E8E8;
  68 + display: flex;
  69 + }
  70 + .big_box{
  71 + height: 7.6rem;
  72 + }
  73 + /*弹框*/
  74 + .pop_fn{
  75 + position: fixed;
  76 + top: -2rem;
  77 + left: 0;
  78 + right: 0;
  79 + width: 3.74rem;
  80 + height: 0.82rem;
  81 + margin: 0 auto;
  82 + text-align: center;
  83 + line-height: 0.82rem;
  84 + color: #fff;
  85 + font-size: 0.24rem;
  86 + /*background: #352D32;*/
  87 + background:rgba(0,0,0,0.4);
  88 + transition: 1.2s;
  89 + border-radius: 0.36rem;
  90 + }
  91 + .iconguanbi{
  92 + position: absolute;
  93 + }
  94 +
50 </style> 95 </style>
51 </head> 96 </head>
52 97
@@ -76,9 +121,13 @@ @@ -76,9 +121,13 @@
76 <div class="top_dot"></div> 121 <div class="top_dot"></div>
77 </div> 122 </div>
78 <!--头像--> 123 <!--头像-->
79 - <div class="top_t_right_pic"> 124 + <div class="top_t_right_pic" style="display: none;">
80 <img src="images/1.png"> 125 <img src="images/1.png">
81 </div> 126 </div>
  127 + <!--注册 在用户为注册登录的情况下展示-->
  128 + <div class="top_t_right_text">
  129 + 注册/登录
  130 + </div>
82 </div> 131 </div>
83 </div> 132 </div>
84 <!--底部搜索--> 133 <!--底部搜索-->
@@ -152,10 +201,698 @@ @@ -152,10 +201,698 @@
152 </div> 201 </div>
153 </div> 202 </div>
154 203
  204 + <!--动态层 -> 密码登录-->
  205 + <div class="mask" style="display: none;">
  206 + <div class="mask_box">
  207 + <!--头部-->
  208 + <p class="mask_text">
  209 + 密码登录
  210 + </p>
  211 + <!--中部输入信息栏-->
  212 + <div class="mask_box_mid ">
  213 + <div class="mask_box_text">+86
  214 + <div class="iconfont icon-jinlingyingcaiwangtubiao22"></div>
  215 + </div>
  216 + <input class="mask_box_mid_input" type="number" placeholder="手机号">
  217 + <input class="mask_box_mid_input" type="password" placeholder="密码">
  218 + </div>
  219 + <!--登录按钮-->
  220 + <div class="mask_box_sub">登录</div>
  221 + <!--五种登录模式-->
  222 + <div class="mask_box_model">
  223 + <div class="mask_box_model_sub">
  224 + <img src="images/peke.png">
  225 + </div>
  226 + <div class="mask_box_model_sub">
  227 + <img src="images/peke.png">
  228 + </div>
  229 + <div class="mask_box_model_sub">
  230 + <img src="images/peke.png">
  231 + </div>
  232 + <div class="mask_box_model_sub">
  233 + <img src="images/peke.png">
  234 + </div>
  235 + <div class="mask_box_model_sub">
  236 + <img src="images/peke.png">
  237 + </div>
  238 + </div>
  239 + <!--忘记密码 & 立即注册-->
  240 + <div class="mask_box_bottom">
  241 + <div class="mask_box_bottom_text">
  242 + 忘记密码
  243 + </div>
  244 + <div class="mask_box_bottom_text">
  245 + 立即注册
  246 + </div>
  247 + </div>
  248 + </div>
  249 + </div>
  250 +
  251 + <!--动态层 -> 手机号注册-->
  252 + <div class="mask" style="display: none;">
  253 + <div class="mask_box">
  254 + <!--头部-->
  255 + <div class="mask_box_top">
  256 + <p class="mask_text tel_size">
  257 + 手机号注册
  258 + </p>
  259 + <p class="mask_email">
  260 + 邮箱注册
  261 + </p>
  262 + </div>
  263 + <!--中部输入信息栏-->
  264 + <div class="mask_box_mid tel_margin">
  265 + <div class="mask_box_text">+86
  266 + <div class="iconfont icon-jinlingyingcaiwangtubiao22"></div>
  267 + </div>
  268 + <input class="mask_box_mid_input" type="number" placeholder="手机号">
  269 + <input class="mask_box_mid_input" type="number" placeholder="短信验证码">
  270 + <!--获取验证码-->
  271 + <span class="mask_box_mid_input_code">获取验证码</span>
  272 + <input class="mask_box_mid_input" type="password" placeholder="密码">
  273 + </div>
  274 + <!--登录按钮-->
  275 + <div class="mask_box_sub register">注册</div>
  276 + <!--已有账号，立即登陆-->
  277 + <div class="mask_box_account">
  278 + <p></p>
  279 + <p>已有账号?立即登录</p>
  280 + </div>
  281 + <!--下划线-->
  282 + <div class="mask_box_underline">
  283 +
  284 + </div>
  285 + <!--使用第三方登录-->
  286 + <div class="mask_box_third">
  287 + 使用第三方登录
  288 + </div>
  289 + <!--四种登录模式-->
  290 + <div class="mask_box_model tel_top">
  291 + <div class="mask_box_model_sub">
  292 + <img src="images/peke.png">
  293 + </div>
  294 + <div class="mask_box_model_sub">
  295 + <img src="images/peke.png">
  296 + </div>
  297 + <div class="mask_box_model_sub">
  298 + <img src="images/peke.png">
  299 + </div>
  300 + <div class="mask_box_model_sub">
  301 + <img src="images/peke.png">
  302 + </div>
  303 + </div>
  304 + <!--底部协议确定-->
  305 + <div class="mask_box_t">
  306 + 注册表示您已阅读和同意《隐私协议》
  307 + </div>
  308 +
  309 + </div>
  310 + </div>
  311 +
  312 + <!--动态层 -> 邮箱登录-->
  313 + <div class="mask" style="display: none;">
  314 + <div class="mask_box">
  315 + <!--头部-->
  316 + <p class="mask_text">
  317 + 邮箱登录
  318 + </p>
  319 + <!--中部输入信息栏-->
  320 + <div class="mask_box_mid ">
  321 +
  322 + <input class="mask_box_mid_input" type="email" placeholder="邮箱">
  323 + <input class="mask_box_mid_input" type="password" placeholder="密码">
  324 + </div>
  325 + <!--登录按钮-->
  326 + <div class="mask_box_sub">登录</div>
  327 + <!--五种登录模式-->
  328 + <div class="mask_box_model">
  329 + <div class="mask_box_model_sub">
  330 + <img src="images/peke.png">
  331 + </div>
  332 + <div class="mask_box_model_sub">
  333 + <img src="images/peke.png">
  334 + </div>
  335 + <div class="mask_box_model_sub">
  336 + <img src="images/peke.png">
  337 + </div>
  338 + <div class="mask_box_model_sub">
  339 + <img src="images/peke.png">
  340 + </div>
  341 + <div class="mask_box_model_sub">
  342 + <img src="images/peke.png">
  343 + </div>
  344 + </div>
  345 + <!--忘记密码 & 立即注册-->
  346 + <div class="mask_box_bottom">
  347 + <div class="mask_box_bottom_text">
  348 + 忘记密码
  349 + </div>
  350 + <div class="mask_box_bottom_text">
  351 + 立即注册
  352 + </div>
  353 + </div>
  354 + </div>
  355 + </div>
  356 +
  357 + <!--动态层 -> 立即登录，10秒后进入登录页-->
  358 + <div class="now_sub" style="display: none;">
  359 + <div class="mask_big">
  360 + 立即登录
  361 + </div>
  362 + <div class="mask_small">
  363 + 10秒后进入登录界面
  364 + </div>
  365 + </div>
  366 +
  367 + <!--动态层 -> 邮箱注册-->
  368 + <div class="mask" style="display: none;">
  369 + <div class="mask_box big_box">
  370 + <!--头部-->
  371 + <div class="mask_box_top">
  372 + <p class="tel_register">
  373 + 手机号注册
  374 + </p>
  375 + <p class="email_register">
  376 + 邮箱注册
  377 + </p>
  378 + </div>
  379 + <!--中部输入信息栏-->
  380 + <div class="mask_box_mid tel_margin">
  381 +
  382 + <div class="mask_underline">
  383 + <input class="mask_box_mid_input height_input" type="number" placeholder="邮箱">
  384 + </div>
  385 + <span class="mask_box_mid_input_remind">
  386 + 不超过8个中文，不超过12个英文字母，不能有除了_-以外的字符
  387 + </span>
  388 + <div class="mask_underline">
  389 + <input class="mask_box_mid_input height_input" type="number" placeholder="8个字符以内的名称">
  390 + </div>
  391 + <div class="mask_underline">
  392 + <input class="mask_box_mid_input height_input" type="password" placeholder="密码">
  393 + </div>
  394 + </div>
  395 + <!--登录按钮-->
  396 + <div class="mask_box_sub register">点击验证</div>
  397 + <!--已有账号，立即登陆-->
  398 + <div class="mask_box_account">
  399 + <p></p>
  400 + <p>已有账号?立即登录</p>
  401 + </div>
  402 + <!--下划线-->
  403 + <div class="mask_box_underline">
  404 +
  405 + </div>
  406 + <!--使用第三方登录-->
  407 + <div class="mask_box_third">
  408 + 使用第三方登录
  409 + </div>
  410 + <!--四种登录模式-->
  411 + <div class="mask_box_model tel_top">
  412 + <div class="mask_box_model_sub">
  413 + <img src="images/peke.png">
  414 + </div>
  415 + <div class="mask_box_model_sub">
  416 + <img src="images/peke.png">
  417 + </div>
  418 + <div class="mask_box_model_sub">
  419 + <img src="images/peke.png">
  420 + </div>
  421 + <div class="mask_box_model_sub">
  422 + <img src="images/peke.png">
  423 + </div>
  424 + </div>
  425 + <!--底部协议确定-->
  426 + <div class="mask_box_t">
  427 + 注册表示您已阅读和同意《隐私协议》
  428 + </div>
  429 +
  430 + </div>
  431 + </div>
  432 +
  433 + <!--动态层 -> 我们已向你的邮箱:xx发送-->
  434 + <div class="now_sub" style="display: none;">
  435 + <div class="mask_big">
  436 + 我们已向你的邮箱:
  437 + </div>
  438 + <div class="mask_middle">
  439 + XXXXX发送一封验证邮箱
  440 + </div>
  441 + <div class="mask_s">
  442 + 请进入邮箱查看邮件，完成邮箱验证
  443 + </div>
  444 + </div>
  445 +
  446 + <!--动态层 -> 找回密码-->
  447 + <div class="mask find" style="display: none;">
  448 + <div class="mask_find">
  449 + <!--找回密码-->
  450 + <div class="mask_find_big">
  451 + 找回密码
  452 + </div>
  453 + <div class="mask_find_small">
  454 + 验证码将会发送到你的邮箱或者手机
  455 + </div>
  456 + <!--请输入手机号/邮箱-->
  457 + <div class="mask_find_box">
  458 + <input class="mask_find_box_input" placeholder="请输入手机号/邮箱">
  459 + </div>
  460 + <!--下一步-->
  461 + <div class="mask_find_next">
  462 + 下一步
  463 + </div>
  464 + </div>
  465 + </div>
  466 +
  467 + <!--动态层 -> 验证手机有效性-->
  468 + <div class="mask find" style="display: none;">
  469 + <div class="mask_find">
  470 + <!--找回密码-->
  471 + <div class="mask_find_big">
  472 + 验证手机有效性
  473 + </div>
  474 + <div class="mask_find_small">
  475 + 验证码已经发送至手机：13987654321
  476 + </div>
  477 + <!--请输入验证码-->
  478 + <div class="mask_find_box">
  479 + <input class="mask_find_box_input width_input" placeholder="请输入验证码">
  480 + <div class="mask_find_box_small">23秒后重新获取</div>
  481 + </div>
  482 + <!--请输入密码-->
  483 + <div class="mask_find_box">
  484 + <input class="mask_find_box_input" placeholder="请输入密码">
  485 + </div>
  486 + <!--下一步-->
  487 + <div class="mask_find_next">
  488 + 下一步
  489 + </div>
  490 + </div>
  491 + </div>
  492 +
  493 + <!--动态层 -> 验证邮箱有效性-->
  494 + <div class="mask find" style="display: none;">
  495 + <div class="mask_find">
  496 + <!--验证邮箱有效性-->
  497 + <div class="mask_find_big">
  498 + 验证邮箱有效性
  499 + </div>
  500 + <div class="mask_find_small">
  501 + 验证码已经发送至邮箱：maplestory@gmail.com
  502 + </div>
  503 + <!--请输入验证码-->
  504 + <div class="mask_find_box">
  505 + <input class="mask_find_box_input width_input" placeholder="请输入验证码">
  506 + <div class="mask_find_box_small">23秒后重新获取</div>
  507 + </div>
  508 + <!--请输入密码-->
  509 + <div class="mask_find_box">
  510 + <input class="mask_find_box_input" placeholder="请输入密码">
  511 + </div>
  512 + <!--下一步-->
  513 + <div class="mask_find_next">
  514 + 下一步
  515 + </div>
  516 + </div>
  517 + </div>
  518 +
  519 + <!--手机号设置-->
  520 + <div class="mask " style="display: none;">
  521 + <div class="mask_box m_top">
  522 + <!--标题-->
  523 + <div class="mask_tel">
  524 + 手机号设置
  525 + </div>
  526 + <!--输入框盒子-->
  527 + <div class="mask_box_i">
  528 + <!--新手机号-->
  529 + <div class="mask_new">
  530 + <input class="mask_new_input" type="text" placeholder="新手机号">
  531 + </div>
  532 + <!--输入验证码-->
  533 + <div class="mask_new border_no">
  534 + <div class="mask_new">
  535 + <input class="mask_new_small" type="text" placeholder="输入验证码">
  536 + </div>
  537 + <div class="mask_new_text">获取验证码</div>
  538 + </div>
  539 + <!--底部按钮-->
  540 + <div class="mask_tel_button">
  541 + <!--左边取消-->
  542 + <div class="mask_tel_button_left">
  543 + 取消
  544 + </div>
  545 + <!--右边保存-->
  546 + <div class="mask_tel_button_right">
  547 + 保存
  548 + </div>
  549 + </div>
  550 + </div>
  551 + </div>
  552 + </div>
  553 +
  554 + <!--安全验证-->
  555 + <div class="mask " style="display: none;">
  556 + <div class="mask_box m_top">
  557 + <!--标题-->
  558 + <div class="mask_tel">
  559 + 安全认证
  560 + </div>
  561 + <!--输入框盒子-->
  562 + <div class="mask_box_i">
  563 + <!--使用手机号-->
  564 + <div class="mask_new">
  565 + <input class="mask_new_input" type="text" value="使用手机号134****2359">
  566 + </div>
  567 + <!--输入验证码-->
  568 + <div class="mask_new border_no">
  569 + <div class="mask_new">
  570 + <input class="mask_new_small" type="text" placeholder="输入验证码">
  571 + </div>
  572 + <div class="mask_new_text">获取验证码</div>
  573 + </div>
  574 + <!--底部按钮-->
  575 + <div class="mask_ver_button">
  576 + 验证
  577 + </div>
  578 + </div>
  579 + </div>
  580 + </div>
  581 +
  582 + <!--设置昵称-->
  583 + <div class="mask " style="display: none;">
  584 + <div class="mask_name">
  585 + <!--关闭按钮-->
  586 + <!--<div class="iconfont iconguanbi"></div>-->
  587 + <!--设置昵称-->
  588 + <div class="mask_name_title">
  589 + 设置昵称
  590 + </div>
  591 + <!--昵称输入框-->
  592 + <div class="mask_name_input">
  593 + <input class="nickname" type="text" placeholder="请设置您的昵称" >
  594 + </div>
  595 + <!--提示文字-->
  596 + <div class="mask_name_hint">
  597 + 不超过8个中文，不超过12个英文字母，不能有除了_-以外的字符
  598 + </div>
  599 + <!--提交完成按钮-->
  600 + <div class="mask_name_sub">
  601 + 完成
  602 + </div>
  603 + </div>
  604 + </div>
  605 +
  606 + <!--绑定手机号继续-->
  607 + <div class="mask " style="display: none;">
  608 + <div class="mask_name tel_height">
  609 + <!--关闭按钮-->
  610 + <!--<div class="iconfont iconguanbi"></div>-->
  611 + <!--设置昵称-->
  612 + <div class="mask_name_title">
  613 + 绑定手机号继续
  614 + </div>
  615 + <!--头像-->
  616 + <div class="mask_tel_box">
  617 + <div class="mask_tel_box_pic">
  618 + <img src="images/1.png">
  619 + </div>
  620 + <p>你好啊小明同学</p>
  621 + </div>
  622 + <!--昵称输入框-->
  623 + <div class="mask_name_input">
  624 + <input class="nickname" type="text" placeholder="请设置您的昵称" >
  625 + </div>
  626 + <!--提示文字-->
  627 + <!--<div class="mask_name_hint">-->
  628 + <!--不超过8个中文，不超过12个英文字母，不能有除了_-以外的字符-->
  629 + <!--</div>-->
  630 + <!--提交完成按钮-->
  631 + <div class="mask_name_sub margin_to">
  632 + 下一步
  633 + </div>
  634 + <!--跳过-->
  635 + <div class="mask_jump">
  636 + 跳过这一步
  637 + </div>
  638 + </div>
  639 + </div>
  640 +
  641 + <!--解绑账号-->
  642 + <div class="mask " style="display: none;">
  643 + <div class="mask_name">
  644 + <!--关闭按钮-->
  645 + <!--<div class="iconfont iconguanbi"></div>-->
  646 + <!--设置昵称-->
  647 + <div class="mask_name_title">
  648 + 解绑账号
  649 + </div>
  650 + <!--设置其他登录方式-->
  651 + <div class="mask_name_way">
  652 + 请设置其他登录方式后再解绑
  653 + </div>
  654 + <!--提交完成按钮-->
  655 + <div class="mask_name_sub way_top">
  656 + 完成
  657 + </div>
  658 + </div>
  659 + </div>
  660 +
  661 + <!--解绑账号2-->
  662 + <div class="mask " style="display: none;">
  663 + <div class="mask_name">
  664 + <!--关闭按钮-->
  665 + <!--<div class="iconfont iconguanbi"></div>-->
  666 + <!--设置昵称-->
  667 + <div class="mask_name_title">
  668 + 解绑账号
  669 + </div>
  670 + <!--设置其他登录方式-->
  671 + <div class="mask_name_way">
  672 + 请设置其他登录方式后再解绑
  673 +
  674 + </div>
  675 + <!--提交完成按钮-->
  676 + <div class="mask_way_sub">
  677 + <div class="mask_way_sub_left">取消</div>
  678 + <div class="mask_way_sub_right">确定</div>
  679 + </div>
  680 + </div>
  681 + </div>
  682 +
  683 + <!--设置新密码-->
  684 + <div class="mask " style="display: none;">
  685 + <div class="mask_box m_top">
  686 + <!--标题-->
  687 + <div class="mask_tel">
  688 + 设置密码
  689 + </div>
  690 + <!--输入框盒子-->
  691 + <div class="mask_box_i">
  692 + <!--设置新密码-->
  693 + <div class="mask_new">
  694 + <input class="mask_new_input" type="text" placeholder="设置新密码">
  695 + </div>
  696 + <!--输入验证码-->
  697 + <div class="mask_new">
  698 + <input class="mask_new_input" type="text" placeholder="再次输入密码">
  699 + </div>
  700 + <!--底部按钮-->
  701 + <div class="mask_tel_button">
  702 + <!--左边取消-->
  703 + <div class="mask_tel_button_left">
  704 + 取消
  705 + </div>
  706 + <!--右边保存-->
  707 + <div class="mask_tel_button_right">
  708 + 确定
  709 + </div>
  710 + </div>
  711 + </div>
  712 + </div>
  713 + </div>
  714 +
  715 + <!--设置邮箱-->
  716 + <div class="mask " style="display: none;">
  717 + <div class="mask_box m_top">
  718 + <!--标题-->
  719 + <div class="mask_tel">
  720 + 设置邮箱
  721 + </div>
  722 + <!--输入框盒子-->
  723 + <div class="mask_box_i">
  724 + <!--新手机号-->
  725 + <div class="mask_new">
  726 + <input class="mask_new_input" type="text" placeholder="新增邮箱">
  727 + </div>
  728 + <!--输入验证码-->
  729 + <div class="mask_new border_no">
  730 + <div class="mask_new">
  731 + <input class="mask_new_small" type="text" placeholder="邮箱验证码">
  732 + </div>
  733 + <div class="mask_new_text">获取验证码</div>
  734 + </div>
  735 + <!--底部按钮-->
  736 + <div class="mask_tel_button">
  737 + <!--左边取消-->
  738 + <div class="mask_tel_button_left">
  739 + 取消
  740 + </div>
  741 + <!--右边保存-->
  742 + <div class="mask_tel_button_right">
  743 + 确定
  744 + </div>
  745 + </div>
  746 + </div>
  747 + </div>
  748 + </div>
  749 +
  750 + <!--内容提交-->
  751 + <div class="mask" style="display: none;">
  752 + <div class="mask_box submit_height">
  753 + <div class="mask_submit_text">
  754 + <p>
  755 + 内容已成功提交，我们将尽快审核。
  756 + </p>
  757 + <p>
  758 + （结果将通过站内信告知）
  759 + </p>
  760 + </div>
  761 + <div class="mask_submit_bottom">
  762 + 确定
  763 + </div>
  764 + </div>
  765 + </div>
  766 +
  767 + <!--隐私协议-->
  768 + <div class="mask" style="display: none;">
  769 + <div class="mask_box_a">
  770 + <!--大标题-->
  771 + <div class="mask_title">
  772 + 隐私协议
  773 + </div>
  774 + <!--小标题-->
  775 + <div class="mask_small_text">
  776 +
  777 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  778 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  779 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  780 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  781 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  782 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  783 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  784 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  785 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  786 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  787 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  788 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  789 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  790 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  791 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  792 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  793 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  794 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  795 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  796 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  797 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  798 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  799 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  800 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  801 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  802 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  803 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  804 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  805 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  806 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  807 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  808 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  809 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  810 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  811 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  812 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  813 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  814 +
  815 +
  816 + </div>
  817 + </div>
  818 + </div>
  819 +
  820 + <!--关于我们-->
  821 + <div class="mask" style="display: flex;">
  822 + <div class="mask_box_a">
  823 + <!--大标题-->
  824 + <div class="mask_title">
  825 + 关于我们
  826 + </div>
  827 + <!--小标题-->
  828 + <div class="mask_small_text">
  829 +
  830 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  831 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  832 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  833 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  834 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  835 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  836 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  837 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  838 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  839 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  840 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  841 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  842 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  843 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  844 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  845 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  846 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  847 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  848 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  849 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  850 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  851 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  852 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  853 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  854 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  855 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  856 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  857 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  858 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  859 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  860 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  861 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  862 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  863 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  864 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  865 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  866 + 一、我们可能收集的用户信息我们提供服务时，可能会收集、储存和使用下列与您有关
  867 +
  868 +
  869 + </div>
  870 + </div>
  871 + </div>
  872 +</div>
  873 +
  874 +<div class="pop_fn">
155 </div> 875 </div>
  876 +
156 </body> 877 </body>
  878 +<script src="js/jquery.min.js"></script>
157 <script> 879 <script>
  880 + function popup(message) {
  881 + $('.pop_fn').css('top', 3 + 'rem').html(message);
  882 + setTimeout(function() {
  883 + $('.pop_fn').css('top', '-' + 2 + 'rem').html(message);
  884 + }, 1800)
  885 + }
158 886
  887 + $(".mask_name_sub").click(function () {
  888 + var myreg = /^[\u4e00-\u9fa5]{1,8}|[a-zA-Z]{1,12}$/;
  889 + var newname = $(".nickname").val();
  890 + if (!myreg.test(newname)){
  891 + popup("请重新输入您的昵称")
  892 + }else {
  893 + popup("登录成功")
  894 + }
  895 + })
159 896
160 </script> 897 </script>
161 </html> 898 </html>
@@ -2,8 +2,9 @@ @@ -2,8 +2,9 @@
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 - <title>首页</title>  
6 - <meta name="viewport" content="width=device-width, initial-scale=1" /> 5 + <title>账号设置</title>
  6 + <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  7 + <!--<meta name="viewport" content="width=device-width, initial-scale=1" />-->
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 <link rel="stylesheet" type="text/css" href="css/common.css"> 9 <link rel="stylesheet" type="text/css" href="css/common.css">
9 <link rel="stylesheet" type="text/css" href="css/zhsz.css"> 10 <link rel="stylesheet" type="text/css" href="css/zhsz.css">
@@ -166,13 +167,55 @@ @@ -166,13 +167,55 @@
166 </div> 167 </div>
167 </div> 168 </div>
168 <!--下划线--> 169 <!--下划线-->
169 - <div class="bottom_item_box_mid"></div> 170 + <!--<div class="bottom_item_box_mid"></div>-->
170 <!--文字--> 171 <!--文字-->
171 <div class="bottom_item_box_bottom"> 172 <div class="bottom_item_box_bottom">
172 取消绑定 173 取消绑定
173 </div> 174 </div>
174 </div> 175 </div>
175 176
  177 + <div class="bottom_item_box">
  178 + <!--图片-->
  179 + <div class="bottom_item_box_top">
  180 + <div class="bottom_item_box_top_p">
  181 + <img src="images/peke.png">
  182 + </div>
  183 + <div class="bottom_item_box_top_t">
  184 + 微信
  185 + </div>
  186 + <!--<div class="bottom_item_box_top_t margin_t">-->
  187 + <!--已绑定"昵称"-->
  188 + <!--</div>-->
  189 + </div>
  190 + <!--下划线-->
  191 + <div class="bottom_item_box_mid"></div>
  192 + <!--文字-->
  193 + <div class="bottom_item_box_bottom">
  194 + 立即绑定
  195 + </div>
  196 + </div>
  197 +
  198 + <div class="bottom_item_box">
  199 + <!--图片-->
  200 + <div class="bottom_item_box_top">
  201 + <div class="bottom_item_box_top_p">
  202 + <img src="images/peke.png">
  203 + </div>
  204 + <div class="bottom_item_box_top_t">
  205 + 微信
  206 + </div>
  207 + <!--<div class="bottom_item_box_top_t margin_t">-->
  208 + <!--已绑定"昵称"-->
  209 + <!--</div>-->
  210 + </div>
  211 + <!--下划线-->
  212 + <div class="bottom_item_box_mid"></div>
  213 + <!--文字-->
  214 + <div class="bottom_item_box_bottom">
  215 + 立即绑定
  216 + </div>
  217 + </div>
  218 +
176 219
177 </div> 220 </div>
178 </div> 221 </div>