fe / YOHOBUYWAP · Commits

Go to a project

Authored by lore-w
Commit 0e8ce7364c58ecf3a4ff367eaf746051ae44cd1e 1 parent 0f2f2aec

注册页面前端样式

Inline Side-by-side
Showing 4 changed files with 268 additions and 1 deletions
  1 +{{> layout/header}}
  2 +<div class="login-page passport-page yoho-page clearfix">
  3 + {{# passport}}
  4 + {{> passport/cover}}
  5 + <div class="content">
  6 + <div class="register-page">
  7 + <form id="register-form" class="register-form" method="POST" action="/passport/register/mobileregister" autocomplete="off">
  8 + <ul>
  9 + <li class="clearfix">
  10 + <select id="region" class="region" name="region">
  11 + <option value="61">澳大利亚</option><option value="82">韩国</option><option value="1">加拿大</option><option value="60">马来西亚</option><option value="1">美国</option><option value="81">日本</option><option value="65">新加坡</option><option value="44">英国</option><option selected="selected" value="86">中国</option><option value="853">中国澳门</option><option value="886">中国台湾</option><option value="852">中国香港</option> </select>
  12 + </li>
  13 + <li class="clearfix">
  14 + <span id="country-code" class="country-code">+86</span>
  15 + <input value="" id="phone-num" class="input va phone-num" type="text" name="phoneNum" placeholder="请输入手机号码" autocomplete="off">
  16 + </li>
  17 + <li class="w330 clearfix">
  18 + <input id="captcha" class="input va captcha" type="text" name="captcha" placeholder="图形验证码" autocomplete="off" maxlength="4">
  19 + <img id="captcha-img" class="captcha-img" src="http://www.yohobuy.com/passport/images?t=1449799445" alt="" onclick="imgcode()">
  20 + <a class="link change-captcha" onclick="imgcode()">换一张</a>
  21 + </li>
  22 + <li class="clearfix">
  23 + <input id="msg-captcha" class="input va msg-captcha" type="text" name="msgCaptcha" placeholder="短信验证码" autocomplete="off" maxlength="4">
  24 + <input id="send-captcha" class="btn send-captcha disable" type="button" value="获取短信验证码" disabled="">
  25 + <span id="msg-tip" class="hide msg-tip">
  26 + <img src="http://static.yohobuy.com/images/yohofamily/succ-info.png">
  27 + 短信验证码已发送至您的手机，请查收
  28 + </span>
  29 + </li>
  30 + <li class="clearfix">
  31 + <input id="pwd" class="input va pwd" name="pwd" placeholder="设置密码" autocomplete="off" maxlength="20" type="password">
  32 + <div class="pwd-intensity-container">
  33 + <span class="pwd-intensity low">低</span>
  34 + <span class="pwd-intensity mid">中</span>
  35 + <span class="pwd-intensity high">高</span>
  36 + </div>
  37 + <div id="pwd-tips" class="hide pwd-tips">
  38 + <div class="default" id="pwd-tip1">密码只支持6-20位字符</div>
  39 + <div class="default" id="pwd-tip2">建议由字母、 数字、 符号两种以上组合</div>
  40 + </div>
  41 + </li>
  42 +
  43 +
  44 + <li class="items-container clearfix">
  45 + <input id="agree-terms" class="agree-terms" type="checkbox" checked="">
  46 + <span>
  47 + 我已阅读并同意遵守
  48 + <a class="link go-yoho-items" href="http://www.yohobuy.com/help/?category_id=9" onclick="getSource('yoho_family_web','有货服务条款','homepage_man');">YOHO!有货服务条款</a>
  49 + </span>
  50 + </li>
  51 + <li class="clearfix">
  52 + <input name="refer" id="refer" type="hidden" value="http://www.yohobuy.com/">
  53 + <input id="register-btn" class="btn register-btn disable" type="submit" value="立即注册" disabled="">
  54 + </li>
  55 + <li class="quick-login-container">
  56 + 我已注册YOHO!有货账号
  57 + <a class="link go-login" onclick="getSource('yoho_family_web','快速登录','homepage_man');" href="/signin.html?refer=http://www.yohobuy.com/">快速登录</a>
  58 + </li>
  59 + </ul>
  60 + <div id="err-tip" class="err-tip hide">
  61 + <span></span>
  62 + <b></b>
  63 + </div>
  64 + </form>
  65 + </div>
  66 + </div>
  67 + {{/ passport}}
  68 +</div>
  69 +{{> layout/footer}}
1 -@import "login"; 1 +@import "login", "register";
2 2
3 .passport-page { 3 .passport-page {
4 width: 1150px; 4 width: 1150px;
@@ -25,4 +25,10 @@ @@ -25,4 +25,10 @@
25 margin: 0 auto; 25 margin: 0 auto;
26 margin-top: 50px; 26 margin-top: 50px;
27 } 27 }
  28 +}
  29 +
  30 +.content {
  31 + float: left;
  32 + padding-left: 85px;
  33 + margin-top: 107px;
28 } 34 }
  1 +/*
  2 + * @description 注册页样式
  3 + * @author chenglong.wang@yoho.cn
  4 + * @time 2015/12/11
  5 + */
  6 +
  7 +.content {
  8 +
  9 + .register-page {
  10 + font-size: 14px;
  11 + color: #b9b9b9;
  12 + }
  13 +
  14 + .register-form {
  15 + height: auto;
  16 +
  17 + li {
  18 + margin-bottom: 25px;
  19 + width: 270px;
  20 + position: relative;
  21 +
  22 + &.w330 {
  23 + width: 330px;
  24 + }
  25 +
  26 + input, select {
  27 + outline: none;
  28 + }
  29 +
  30 + input {
  31 + height: 43px;
  32 + line-height: 43px;
  33 + font-size: 16px;
  34 + width: 268px;
  35 + border: 1px solid #dbdbdb;
  36 + text-indent: 10px;
  37 + font-family: '黑体' Regular;
  38 + color: #9a9a9a;
  39 + padding: 0;
  40 +
  41 + &.phone-num {
  42 + width: 209px;
  43 + display: block;
  44 + float: left;
  45 + }
  46 +
  47 + &.captcha, &.msg-captcha{
  48 + width: 160px;
  49 + float: left;
  50 + }
  51 +
  52 + &.send-captcha {
  53 + top: 0;
  54 + background: #555;
  55 + position: absolute;
  56 + width: 100px;
  57 + right: 0;
  58 + font-size: 12px;
  59 + text-indent: 0;
  60 + }
  61 +
  62 + &.agree-terms {
  63 + width: initial;
  64 + height: initial;
  65 + vertical-align: middle;
  66 + }
  67 + }
  68 +
  69 + .link {
  70 + text-decoration: underline;
  71 + color: #ff1901;
  72 + }
  73 +
  74 + .btn {
  75 + height: 45px;
  76 + line-height: 45px;
  77 + color: #fff;
  78 + border: none;
  79 + padding: 0;
  80 + font-family: '黑体' Regular;
  81 + text-align: center;
  82 + }
  83 +
  84 + //区域下拉选择框
  85 + select.region {
  86 + height: 30px;
  87 + padding: 4px 0;
  88 + width: 132px;
  89 + border-color: #c1c1c1;
  90 + color: #9a9a9a;
  91 + font-size: 16px;
  92 + font-family: '黑体' Regular;
  93 + }
  94 +
  95 + //手机号
  96 + .country-code {
  97 + width: 58px;
  98 + height: 43px;
  99 + line-height: 43px;
  100 + text-align: center;
  101 + white-space: nowrap;
  102 + border: 1px solid #dbdbdb;
  103 + border-right: 0;
  104 + font-size: 16px;
  105 + display: block;
  106 + float: left;
  107 + }
  108 +
  109 + //验证码
  110 + .captcha-img {
  111 + height: 37px;
  112 + width: 90px;
  113 + border: 0;
  114 + vertical-align: middle;
  115 + outline: none;
  116 + margin-left: 10px;
  117 + margin-top: 4px;
  118 + float: left;
  119 + }
  120 + .change-captcha {
  121 + margin-left: 10px;
  122 + cursor: pointer;
  123 + float: left;
  124 + height: 43px;
  125 + line-height: 43px;
  126 + }
  127 +
  128 + //密码强度
  129 + .pwd-intensity-container {
  130 + width: 270px;
  131 + text-align: right;
  132 + margin-top: 5px;
  133 +
  134 + .pwd-intensity {
  135 + height: 15px;
  136 + font-size: 12px;
  137 + background-color: #e8e8e8;
  138 + padding: 1px 10px;
  139 + text-align: center;
  140 + }
  141 + }
  142 +
  143 + //服务条款
  144 + &.items-container {
  145 + font-size: 13px;
  146 + text-align: right;
  147 + white-space: nowrap;
  148 + }
  149 +
  150 + //立即注册
  151 + .register-btn {
  152 + width: 270px;
  153 + font-size: 20px;
  154 + font-weight: bold;
  155 +
  156 + &.disable {
  157 + background: #555;
  158 + }
  159 + }
  160 +
  161 + //立即登录
  162 + &.quick-login-container {
  163 + width: 270px;
  164 + font-size: 13px;
  165 + text-align: right;
  166 + white-space: nowrap;
  167 + }
  168 + }
  169 + }
  170 +}
  1 +<?php
  2 +
  3 +use Action\AbstractAction;
  4 +
  5 +class RegisterController extends AbstractAction
  6 +{
  7 + /**
  8 + * 登录页
  9 + */
  10 + public function indexAction()
  11 + {
  12 + $data = array(
  13 + 'loginPage' => true,
  14 + 'passport' => array(
  15 + 'coverHref' => '/passport',
  16 + 'coverImg' => 'http://img12.static.yhbimg.com/yhb-img01/2015/12/01/07/020a0b6e7ff908d0c2bc4045b4fef42b9f.png?imageView/2/w/252/h/190',
  17 + 'countrys' => array()
  18 + )
  19 + );
  20 + $this->_view->display('index', $data);
  21 + }
  22 +}