Authored by lore-w

注册页面前端样式

{{> layout/header}}
<div class="login-page passport-page yoho-page clearfix">
{{# passport}}
{{> passport/cover}}
<div class="content">
<div class="register-page">
<form id="register-form" class="register-form" method="POST" action="/passport/register/mobileregister" autocomplete="off">
<ul>
<li class="clearfix">
<select id="region" class="region" name="region">
<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>
</li>
<li class="clearfix">
<span id="country-code" class="country-code">+86</span>
<input value="" id="phone-num" class="input va phone-num" type="text" name="phoneNum" placeholder="请输入手机号码" autocomplete="off">
</li>
<li class="w330 clearfix">
<input id="captcha" class="input va captcha" type="text" name="captcha" placeholder="图形验证码" autocomplete="off" maxlength="4">
<img id="captcha-img" class="captcha-img" src="http://www.yohobuy.com/passport/images?t=1449799445" alt="" onclick="imgcode()">
<a class="link change-captcha" onclick="imgcode()">换一张</a>
</li>
<li class="clearfix">
<input id="msg-captcha" class="input va msg-captcha" type="text" name="msgCaptcha" placeholder="短信验证码" autocomplete="off" maxlength="4">
<input id="send-captcha" class="btn send-captcha disable" type="button" value="获取短信验证码" disabled="">
<span id="msg-tip" class="hide msg-tip">
<img src="http://static.yohobuy.com/images/yohofamily/succ-info.png">
短信验证码已发送至您的手机,请查收
</span>
</li>
<li class="clearfix">
<input id="pwd" class="input va pwd" name="pwd" placeholder="设置密码" autocomplete="off" maxlength="20" type="password">
<div class="pwd-intensity-container">
<span class="pwd-intensity low">低</span>
<span class="pwd-intensity mid">中</span>
<span class="pwd-intensity high">高</span>
</div>
<div id="pwd-tips" class="hide pwd-tips">
<div class="default" id="pwd-tip1">密码只支持6-20位字符</div>
<div class="default" id="pwd-tip2">建议由字母、 数字、 符号两种以上组合</div>
</div>
</li>
<li class="items-container clearfix">
<input id="agree-terms" class="agree-terms" type="checkbox" checked="">
<span>
我已阅读并同意遵守
<a class="link go-yoho-items" href="http://www.yohobuy.com/help/?category_id=9" onclick="getSource('yoho_family_web','有货服务条款','homepage_man');">YOHO!有货服务条款</a>
</span>
</li>
<li class="clearfix">
<input name="refer" id="refer" type="hidden" value="http://www.yohobuy.com/">
<input id="register-btn" class="btn register-btn disable" type="submit" value="立即注册" disabled="">
</li>
<li class="quick-login-container">
我已注册YOHO!有货账号
<a class="link go-login" onclick="getSource('yoho_family_web','快速登录','homepage_man');" href="/signin.html?refer=http://www.yohobuy.com/">快速登录</a>
</li>
</ul>
<div id="err-tip" class="err-tip hide">
<span></span>
<b></b>
</div>
</form>
</div>
</div>
{{/ passport}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
@import "login";
@import "login", "register";
.passport-page {
width: 1150px;
... ... @@ -25,4 +25,10 @@
margin: 0 auto;
margin-top: 50px;
}
}
.content {
float: left;
padding-left: 85px;
margin-top: 107px;
}
\ No newline at end of file
... ...
/*
* @description 注册页样式
* @author chenglong.wang@yoho.cn
* @time 2015/12/11
*/
.content {
.register-page {
font-size: 14px;
color: #b9b9b9;
}
.register-form {
height: auto;
li {
margin-bottom: 25px;
width: 270px;
position: relative;
&.w330 {
width: 330px;
}
input, select {
outline: none;
}
input {
height: 43px;
line-height: 43px;
font-size: 16px;
width: 268px;
border: 1px solid #dbdbdb;
text-indent: 10px;
font-family: '黑体' Regular;
color: #9a9a9a;
padding: 0;
&.phone-num {
width: 209px;
display: block;
float: left;
}
&.captcha, &.msg-captcha{
width: 160px;
float: left;
}
&.send-captcha {
top: 0;
background: #555;
position: absolute;
width: 100px;
right: 0;
font-size: 12px;
text-indent: 0;
}
&.agree-terms {
width: initial;
height: initial;
vertical-align: middle;
}
}
.link {
text-decoration: underline;
color: #ff1901;
}
.btn {
height: 45px;
line-height: 45px;
color: #fff;
border: none;
padding: 0;
font-family: '黑体' Regular;
text-align: center;
}
//区域下拉选择框
select.region {
height: 30px;
padding: 4px 0;
width: 132px;
border-color: #c1c1c1;
color: #9a9a9a;
font-size: 16px;
font-family: '黑体' Regular;
}
//手机号
.country-code {
width: 58px;
height: 43px;
line-height: 43px;
text-align: center;
white-space: nowrap;
border: 1px solid #dbdbdb;
border-right: 0;
font-size: 16px;
display: block;
float: left;
}
//验证码
.captcha-img {
height: 37px;
width: 90px;
border: 0;
vertical-align: middle;
outline: none;
margin-left: 10px;
margin-top: 4px;
float: left;
}
.change-captcha {
margin-left: 10px;
cursor: pointer;
float: left;
height: 43px;
line-height: 43px;
}
//密码强度
.pwd-intensity-container {
width: 270px;
text-align: right;
margin-top: 5px;
.pwd-intensity {
height: 15px;
font-size: 12px;
background-color: #e8e8e8;
padding: 1px 10px;
text-align: center;
}
}
//服务条款
&.items-container {
font-size: 13px;
text-align: right;
white-space: nowrap;
}
//立即注册
.register-btn {
width: 270px;
font-size: 20px;
font-weight: bold;
&.disable {
background: #555;
}
}
//立即登录
&.quick-login-container {
width: 270px;
font-size: 13px;
text-align: right;
white-space: nowrap;
}
}
}
}
\ No newline at end of file
... ...
<?php
use Action\AbstractAction;
class RegisterController extends AbstractAction
{
/**
* 登录页
*/
public function indexAction()
{
$data = array(
'loginPage' => true,
'passport' => array(
'coverHref' => '/passport',
'coverImg' => 'http://img12.static.yhbimg.com/yhb-img01/2015/12/01/07/020a0b6e7ff908d0c2bc4045b4fef42b9f.png?imageView/2/w/252/h/190',
'countrys' => array()
)
);
$this->_view->display('index', $data);
}
}
\ No newline at end of file
... ...