Authored by unknown

hot-rank css修改 @review by 王成龙

  1 +{{> layout/simple-header}}
  2 +<div class="login-page passport-page yoho-page clearfix">
  3 + <div class="bindwrapper">
  4 + <h3 class="welcomeword">欢迎加入<span class="yoho">YOHO!FAMILY</span></h3>
  5 + <p class="safeword">为了您的账户安全,请您完善账户信息,以便为您提供更优质的服务</p>
  6 + <form action="" id="bindmobileform">
  7 + <div class="yohobindrow">
  8 + <div class="name areatag">地区</div>
  9 + <div class="content">
  10 + <div class="yohoselectarea">
  11 + <div class="optionshow">
  12 + <span class="areaname" id="areaname">中国</span><span class="righttag"></span>
  13 + </div>
  14 + <div class="optionslist hide">
  15 + <div class="optionitem" areanum="+88">中国香港</div>
  16 + <div class="optionitem" areanum="+87">中国台湾</div>
  17 + <div class="optionitem" areanum="+86">中国</div>
  18 + </div>
  19 + </div>
  20 + </div>
  21 + </div>
  22 + <div class="yohobindrow">
  23 + <div class="name phonetag">手机号码</div>
  24 + <div class="content">
  25 + <div class="yohophonewrapper"><div class="areanum" id="areanum">+86</div><input type="text" class="phonenum" /></div>
  26 + </div>
  27 + </div>
  28 + </form>
  29 +
  30 + <div class="protoctolwrapper">
  31 + <div class="choosewrapper"><input type="checkbox" class="choosetag"></div>
  32 + <span>我已阅读并同意遵守<a href="" class="protoctol">YOHO!有货服务条款</a></span>
  33 + </div>
  34 + <div class="btnwrapper">
  35 + <a href="javascript:void(0)" class="yohobindbtn" id="bindfirststep">下一步</a>
  36 + </div>
  37 + </div>
  38 +</div>
  39 +{{> layout/footer}}
1 $tip: sprite-map("passport/tip/*.png", $spacing: 10px); 1 $tip: sprite-map("passport/tip/*.png", $spacing: 10px);
2 2
3 -@import "login", "register", "back", "welcome";  
4 -  
5 .passport-page { 3 .passport-page {
6 width: 1150px; 4 width: 1150px;
7 margin-left: auto; 5 margin-left: auto;
@@ -207,4 +205,6 @@ $tip: sprite-map("passport/tip/*.png", $spacing: 10px); @@ -207,4 +205,6 @@ $tip: sprite-map("passport/tip/*.png", $spacing: 10px);
207 margin: 0 auto; 205 margin: 0 auto;
208 margin-top: 50px; 206 margin-top: 50px;
209 } 207 }
210 -}  
  208 +}
  209 +
  210 +@import "login", "register", "back", "welcome", "third";
  1 +.yohobindbtn {
  2 + display: block;
  3 + width:210px;
  4 + height: 45px;
  5 + line-height: 45px;
  6 + background-color: #f02200;
  7 + color: #fff;
  8 + font-size: 16px;
  9 + text-align: center;
  10 +}
  11 +.hide {
  12 + display: none;
  13 +}
  14 +.novisiable {
  15 + visibility: hidden;
  16 +}
  17 +.actlevel {
  18 + background-color: #f02200 !important;
  19 + color: white !important;
  20 +}
  21 +.mask {
  22 + position: fixed;
  23 + top: 0;
  24 + right: 0;
  25 + bottom: 0;
  26 + left: 0;
  27 + z-index: 1050;
  28 + overflow-x: hidden;
  29 + -webkit-overflow-scrolling: touch;
  30 + outline: 0;
  31 +}
  32 +
  33 +.bindwrapper {
  34 + margin: 0 auto;
  35 + width: 980px;
  36 + min-height: 450px;
  37 + padding-top: 122px;
  38 +}
  39 +.welcomeword {
  40 + width: 100%;
  41 + text-align: center;
  42 + font-size: 22px;
  43 + line-height: 22px;
  44 + color: #545454;
  45 + margin-bottom: 15px;
  46 + .yoho {
  47 + color: #e12000;
  48 + }
  49 +}
  50 +.safeword {
  51 + width: 100%;
  52 + text-align: center;
  53 + font-size: 16px;
  54 + line-height: 16px;
  55 + color: #545454;
  56 + margin-bottom: 63px;
  57 +}
  58 +.yohobindrow {
  59 + width: 480px;
  60 + margin: 0 auto 22px;
  61 + height: 40px;
  62 + .name {
  63 + float: left;
  64 + text-align: right;
  65 + margin-right: 14px;
  66 + width: 96px;
  67 + }
  68 + .areatag {
  69 + height: 30px;
  70 + line-height: 30px;
  71 + }
  72 + .phonetag,
  73 + .setpwdtag {
  74 + height: 47px;
  75 + line-height: 47px;
  76 + }
  77 + .content {
  78 + float: left;
  79 + text-align: left;
  80 + margin-top: 0;
  81 + padding-left: 0;
  82 + }
  83 +
  84 + &::after {
  85 + display: block;
  86 + content: '';
  87 + clear: both;
  88 + }
  89 +}
  90 +.sendnotify {
  91 + width: 260px;
  92 + text-align: left;
  93 + margin: 0 auto 18px;
  94 +}
  95 +.validaterow {
  96 + overflow: hidden;
  97 + margin: 0 auto 22px;
  98 + padding-left: 250px;
  99 + .name {
  100 + float: left;
  101 + text-align: right;
  102 + margin-right: 14px;
  103 + width: 96px;
  104 + }
  105 + .areatag {
  106 + height: 30px;
  107 + line-height: 30px;
  108 + }
  109 + .phonetag {
  110 + height: 47px;
  111 + line-height: 47px;
  112 + }
  113 + .content {
  114 + float: left;
  115 + text-align: left;
  116 + }
  117 + &::after {
  118 + display: block;
  119 + content: '';
  120 + clear: both;
  121 + }
  122 + .validatewrapper {
  123 + float: left;
  124 + height: 45px;
  125 + width: 133px;
  126 + text-align: center;
  127 + line-height: 45px;
  128 + background-color: #d8d8d8;
  129 + color: #000;
  130 + font-size: 13px;
  131 + .yohobindbtn{
  132 + width: 133px;
  133 + font-size: 13px;
  134 + }
  135 + margin-left: 18px;
  136 + }
  137 +}
  138 +.validatepicrow {
  139 + overflow: hidden;
  140 + margin: 0 auto 22px;
  141 + padding-left: 250px;
  142 + .name {
  143 + float: left;
  144 + text-align: right;
  145 + margin-right: 14px;
  146 + width: 96px;
  147 + }
  148 + .areatag {
  149 + height: 30px;
  150 + line-height: 30px;
  151 + }
  152 + .yohophonewrapper {
  153 +
  154 + }
  155 + .phonetag {
  156 + height: 47px;
  157 + line-height: 47px;
  158 + }
  159 + .content {
  160 + float: left;
  161 + text-align: left;
  162 + }
  163 + &::after {
  164 + display: block;
  165 + content: '';
  166 + clear: both;
  167 + }
  168 + .validatewrapper {
  169 + float: left;
  170 + height: 45px;
  171 + text-align: center;
  172 + line-height: 45px;
  173 + color: #000;
  174 + font-size: 13px;
  175 + .yohobindbtn{
  176 + width: 133px;
  177 + font-size: 13px;
  178 + }
  179 + margin-left: 18px;
  180 + }
  181 + .change-captcha {
  182 + cursor: pointer;
  183 + color: #f02200;
  184 + text-decoration: underline;
  185 + }
  186 +}
  187 +.setpwdwrapper {
  188 + margin-bottom: 10px;
  189 + height: 45px;
  190 +}
  191 +.safelevel {
  192 + width: 291px;
  193 + height: 15px;
  194 + margin: 0 auto;
  195 + text-align: right;
  196 + font-size: 10px;
  197 + color: #000;
  198 +
  199 + span {
  200 + width: 28px;
  201 + height: 15px;
  202 + line-height: 15px;
  203 + background-color: #e5e5e5;
  204 + font-size: 10px;
  205 + color: #000;
  206 + margin-right: 4px;
  207 + padding: 1px 8px;
  208 + }
  209 +}
  210 +.green .color {
  211 + background-color: #0f0;
  212 + color: #fff;
  213 +}
  214 +.yellow .color {
  215 + background-color: #ff0;
  216 + color: #fff;
  217 +}
  218 +.red .color {
  219 + background-color: #f00;
  220 + color: #fff;
  221 +}
  222 +.yohoselectarea {
  223 + position: relative;
  224 + box-sizing: border-box;
  225 + width: 131px;
  226 + height: 33px;
  227 + .optionshow {
  228 + width: 100%;
  229 + height: 100%;
  230 + padding-left: 16px;
  231 + border: 1px solid #d9d9d9;
  232 + .areaname {
  233 + display: block;
  234 + float: left;
  235 + width: 110px;
  236 + height: 100%;
  237 + line-height: 33px;
  238 + font-size: 13px;
  239 + color: #000;
  240 + }
  241 + .righttag {
  242 + display: block;
  243 + float: left;
  244 + width: 21px;
  245 + height: 100%;
  246 + line-height: 33px;
  247 + background-color: #d8d8d8;
  248 + background-image: url('../img/arrowbottom.png');
  249 + background-repeat: no-repeat;
  250 + background-position: center center;
  251 + }
  252 + }
  253 + .optionslist {
  254 + background-color: white;
  255 + position: absolute;
  256 + top: 35px;
  257 + left: 0;
  258 + width: 149px;
  259 + z-index: 2;
  260 + .optionitem {
  261 + height: 33px;
  262 + line-height: 33px;
  263 + padding-left: 16px;
  264 + font-size: 13px;
  265 + &:hover {
  266 + background-color: #dfdfdf;
  267 + }
  268 + }
  269 + }
  270 +}
  271 +.yohophonewrapper {
  272 + width: 271px;
  273 + height: 47px;
  274 + border: 1px solid #d9d9d9;
  275 + position: relative;
  276 + .areanum {
  277 + float: left;
  278 + height: 100%;
  279 + width: 63px;
  280 + line-height: 47px;
  281 + text-align: center;
  282 + color: #000;
  283 + background-color: #d8d8d8;
  284 + }
  285 + .phonenum {
  286 + outline: none;
  287 + box-sizing: border-box;
  288 + float: left;
  289 + height: 45px;
  290 + width: 205px;
  291 + line-height: 38px;
  292 + padding-left: 8px;
  293 + border: none;
  294 + color: #000;
  295 + }
  296 +}
  297 +.protoctolwrapper{
  298 + width: 350px;
  299 + margin: 38px auto 0;
  300 + padding-left: 85px;
  301 + overflow: hidden;
  302 + .choosewrapper {
  303 + float: left;
  304 + width: 13px;
  305 + height: 13px;
  306 + background-color: #4c4c4c;
  307 + background-image: none;
  308 + background-position: center center;
  309 + background-repeat: no-repeat;
  310 + margin-right: 14px;
  311 + }
  312 + .choosetag {
  313 + width: 100%;
  314 + height: 100%;
  315 + display: block;
  316 + opacity: 0;
  317 + filter: alpha(opacity=0);
  318 + }
  319 + span {
  320 + float: left;
  321 + }
  322 + .protoctol {
  323 + color: #f02200;
  324 + text-decoration: underline;
  325 + }
  326 + &::after {
  327 + display: block;
  328 + content: '';
  329 + clear: both;
  330 + }
  331 +}
  332 +.confirmwrapper {
  333 + overflow: hidden;
  334 + margin-top: 47px !important;
  335 +}
  336 +.btnwrapper{
  337 + width: 350px;
  338 + margin: 20px auto 0;
  339 + padding-left: 85px;
  340 +}
  341 +.thirdloginwrapper {
  342 + margin: 0 auto;
  343 + width: 1150px;
  344 + min-height: 450px;
  345 + padding-top: 160px;
  346 + .safeword {
  347 + margin-bottom: 30px;
  348 + }
  349 + .left {
  350 + box-sizing: border-box;
  351 + float: left;
  352 + width: 450px;
  353 + height: 318px;
  354 + border-right: 1px solid #e5e5e5;
  355 + }
  356 + .right {
  357 + box-sizing: border-box;
  358 + float: right;
  359 + width: 696px;
  360 + padding-top: 64px;
  361 + height: 318px;
  362 + }
  363 + .gobuy,
  364 + .completeprofile {
  365 + float: left;
  366 + display: inline-block;
  367 + width: 94px;
  368 + height: 94px;
  369 + line-height: 94px;
  370 + text-align: center;
  371 + border-radius: 50%;
  372 + background-color: #f02200;
  373 + color: white;
  374 + }
  375 + .gobuy {
  376 + margin-left: 228px;
  377 + margin-right: 80px;
  378 + }
  379 +}
  380 +.bindsuccesswrapper {
  381 + margin: 0 auto;
  382 + width: 1150px;
  383 + min-height: 450px;
  384 + padding-top: 160px;
  385 + .successwrapper {
  386 + width: 320px;
  387 + height: 29px;
  388 + margin: 0 auto 16px;
  389 + .successtag {
  390 + display: inline-block;
  391 + margin-right: 28px;
  392 + float: left;
  393 + width: 29px;
  394 + height: 29px;
  395 + background-image: url('../img/bindsuccess.png');
  396 + background-repeat: no-repeat;
  397 + }
  398 + .congratulation {
  399 + display: inline-block;
  400 + height: 29px;
  401 + line-height: 29px;
  402 + font-size: 22px;
  403 + }
  404 + }
  405 + .info {
  406 + text-align: center;
  407 + font-size: 16px;
  408 + margin-bottom: 48px;
  409 + }
  410 + .gobuynow {
  411 + margin: 0 auto;
  412 + }
  413 +}
  414 +.bindconfrimwrapper {
  415 + width: 900px;
  416 + height: 439px;
  417 + margin: 153px auto;
  418 + background-color: #fff;
  419 + box-sizing: border-box;
  420 + padding-top: 37px;
  421 + .topwrapper {
  422 + width: 281px;
  423 + height: 90px;
  424 + margin: 0 auto 32px;
  425 + .userphoto {
  426 + width: 90px;
  427 + height: 90px;
  428 + vertical-align: middle;
  429 + border-radius: 50%;
  430 + margin-right: 22px;
  431 + }
  432 + .username{
  433 + vertical-align: middle;
  434 + }
  435 + }
  436 + .usertaginfo {
  437 + text-align: center;
  438 + font-size: 16px;
  439 + color: #545454;
  440 + margin-bottom: 10px;
  441 + }
  442 + .usertagremind {
  443 + text-align: center;
  444 + font-size: 14px;
  445 + color: #000;
  446 + margin-bottom: 47px;
  447 + }
  448 + .otherphone{
  449 + margin: 0 auto 64px;
  450 + }
  451 + .logindirectly {
  452 + display: block;
  453 + text-align: center;
  454 + text-decoration: underline;
  455 + color: #f02200;
  456 + }
  457 +}
  458 +.yohobindbtn[disabled] {
  459 + background-color: #e5e5e5;
  460 + cursor: not-allowed;
  461 +}
  462 +.gobindwrapper {
  463 + width: 100%;
  464 + height: 45px;
  465 + margin-bottom: 70px;
  466 + &::after {
  467 + display: block;
  468 + content: '';
  469 + clear: both;
  470 + }
  471 + .myphone {
  472 + float: left;
  473 + margin-left: 20px;
  474 + width: 193px;
  475 + }
  476 + .logindirectly {
  477 + display: inline-block;
  478 + }
  479 + .validaterow {
  480 + overflow: hidden;
  481 + margin: 0 auto 22px;
  482 + padding-left: 222px;
  483 + float: left;
  484 + .name {
  485 + float: left;
  486 + text-align: right;
  487 + margin-right: 14px;
  488 + width: 96px;
  489 + }
  490 + .areatag {
  491 + height: 30px;
  492 + line-height: 30px;
  493 + }
  494 + .phonetag {
  495 + height: 47px;
  496 + line-height: 47px;
  497 + }
  498 + .content {
  499 + float: left;
  500 + text-align: left;
  501 + .validatacode {
  502 + outline: none;
  503 + box-sizing: border-box;
  504 + float: left;
  505 + height: 45px;
  506 + width: 113px;
  507 + line-height: 38px;
  508 + padding-left: 8px;
  509 + border: 1px solid #d9d9d9;
  510 + color: #000;
  511 + }
  512 + }
  513 + .validatewrapper {
  514 + float: left;
  515 + height: 45px;
  516 + width: 133px;
  517 + text-align: center;
  518 + line-height: 45px;
  519 + background-color: #d8d8d8;
  520 + color: #000;
  521 + font-size: 13px;
  522 + margin-left: 18px;
  523 + .yohobindbtn{
  524 + width: 133px;
  525 + font-size: 13px;
  526 + }
  527 +
  528 + }
  529 +}
  530 +
  531 +}
  532 +.gobindbottomwrapper {
  533 + width: 100%;
  534 + padding-left: 341px;
  535 + .logindirectly {
  536 + display: inline-block;
  537 + float: left;
  538 + margin-right: 36px;
  539 + text-decoration: underline;
  540 + color: #f02200;
  541 + }
  542 +}
  543 +.pwd-tips {
  544 + position: absolute;
  545 + top: -10px;
  546 + left: 285px;
  547 + width: 158px !important;
  548 + height: 70px;
  549 + padding-top: 7px;
  550 + font-size: 12px;
  551 + background: url(http://6.url.cn/zc/chs/img/pwd_sprite.png?v=10069) no-repeat;
  552 +}
  553 +.pwd-tips {
  554 + position: absolute;
  555 + top: -10px;
  556 + left: 285px;
  557 + width: 158px !important;
  558 + height: 70px;
  559 + padding-top: 7px;
  560 + font-size: 12px;
  561 + background: url(http://6.url.cn/zc/chs/img/pwd_sprite.png?v=10069) no-repeat
  562 +}
  563 +
  564 +.pwd-tips div {
  565 + height: 22px;
  566 + line-height: 22px;
  567 + margin-left: 15px;
  568 + padding-left: 18px;
  569 +}
  570 +
  571 +.pwd-tips .default {
  572 + background: url(http://6.url.cn/zc/chs/img/pwd_sprite.png?v=10069) 0 -215px no-repeat;
  573 +}
  574 +
  575 +.pwd-tips .yes {
  576 + background: url(http://6.url.cn/zc/chs/img/pwd_sprite.png?v=10069) 0 -247px no-repeat;
  577 +}
  578 +
  579 +.pwd-tips .no {
  580 + background: url(http://6.url.cn/zc/chs/img/pwd_sprite.png?v=10069) 0 -281px no-repeat;
  581 +}
  582 +
  583 +.pwd-tips .red {
  584 + color: red !important;
  585 +}
  586 +
  587 +.msg-tip {
  588 + position: absolute;
  589 + top: 17px;
  590 + left: 285px;
  591 + white-space: nowrap;
  592 +}
  593 +
  594 +.msg-tip img {
  595 + height: 12px;
  596 + width: 12px;
  597 +}
  598 +.backdrop {
  599 + position: fixed;
  600 + background: #000;
  601 + width: 100%;
  602 + height: 100%;
  603 + left: 0 ;
  604 + top: 0 ;
  605 + bottom: 0;
  606 + right: 0;
  607 + opacity: .5;
  608 + filter: alpha(opacity=50);
  609 +}
@@ -185,9 +185,7 @@ @@ -185,9 +185,7 @@
185 color: #000; 185 color: #000;
186 186
187 .sale-price { 187 .sale-price {
188 - text-decoration: line-through;  
189 margin: 0 10px 0 0; 188 margin: 0 10px 0 0;
190 - color: #999;  
191 } 189 }
192 } 190 }
193 } 191 }
@@ -231,4 +231,12 @@ class LoginController extends WebAction @@ -231,4 +231,12 @@ class LoginController extends WebAction
231 return $str; 231 return $str;
232 } 232 }
233 233
  234 + public function thirdPartyAction() {
  235 + $data = array(
  236 + 'thirdParty' => array(
  237 + )
  238 + );
  239 + $this->_view->display('third-party', $data);
  240 + }
  241 +
234 } 242 }