fe / yoho-blk · Commits

Go to a project

Authored by htoooth
Commit 7abd8f2a558bdcb9896066c8a73fc15f5d297dd1 1 parent 7b44a022

init

Inline Side-by-side
Showing 4 changed files with 49 additions and 23 deletions
{{> sign-header}}
<div class="passport-page yoho-page clearfix">
{{# passport}}
{{> reg/cover}}
<div class="content">
<div class="center-content">
{{> reg/register}}
</div>
{{/ passport}}
... ...
<div class="register-page">
<ul>
<li class="clearfix">
<li class="w330 clearfix">
<div class="title">
JOIN YOHO!BLK
</div>
</li>
<li class="w330 clearfix" data-index="0">
<select id="region" class="region" name="region">
{{#each region}}
<option {{#if selected}}selected="selected"{{/if}} value="{{areaCode}}">{{name}}</option>
<option {{#if selected}}selected="selected"{{/if}} value="{{areaCode}}">{{name}}</option>
{{/each}}
</select>
</li>
<li class="clearfix" data-index="0">
<span id="country-code" class="country-code">{{location}}</span>
<input value="" id="phone-num" class="input va phone-num" type="text" name="phoneNum" placeholder="请输入手机号码" autocomplete="off">
<div id="phone" class="phone" >
<span id="country-code" class="country-code">{{location}}</span>
<input value="" id="phone-num" class="input va phone-num" type="text" name="phoneNum"
placeholder="Phone Number" autocomplete="off">
</div>
</li>
<li class="w330 clearfix" data-index="1">
<input id="captcha" class="input va captcha" type="text" name="captcha" placeholder="图形验证码" autocomplete="off" maxlength="4">
<img id="captcha-img" class="captcha-img" src="{{captchaUrl}}" alt="">
<a class="link change-captcha">换一张</a>
<input id="captcha" class="input va captcha" type="text" name="captcha" placeholder="图形验证码"
autocomplete="off" maxlength="4">
<div>
<img id="captcha-img" class="captcha-img" src="{{captchaUrl}}" alt="">
<a class="link change-captcha"><img src="" alt=""></a>
</div>
</li>
<li class="clearfix" data-index="2">
<input id="msg-captcha" class="input va msg-captcha" type="text" name="msgCaptcha" placeholder="短信验证码" autocomplete="off" maxlength="4">
<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="获取短信验证码">
<span id="msg-tip" class="hide msg-tip">短信验证码已发送至您的手机，请查收</span>
</li>
<li class="clearfix" data-index="3">
<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>
<input id="pwd" class="input va pwd" name="pwd" placeholder="Password" autocomplete="off" maxlength="20"
type="password">
<div id="pwd-tips" class="hide pwd-tips">
<div class="default" id="pwd-tip1"><i></i>密码只支持6-20位字符</div>
<div class="default" id="pwd-tip2"><i></i>由字母、 数字组合，不能包含特殊符号</div>
... ... @@ -46,16 +59,16 @@
<input id="register-btn" class="btn register-btn disable" type="submit" value="{{regBtnText}}" disabled="">
</li>
{{# loginUrl}}
<li class="quick-login-container">
我已注册YOHO!BUY 有货账号
<a class="link go-login" href="{{.}}">快速登录</a>
</li>
<li class="quick-login-container">
已注册YOHO!BLK账号
<a class="link go-login" href="{{.}}">快速登录</a>
</li>
{{/loginUrl}}
{{# skipUrl}}
<li class="skip-user-info">
<a href="{{.}}">跳过此步</a>
</li>
<li class="skip-user-info">
<a href="{{.}}">跳过此步</a>
</li>
{{/skipUrl}}
</ul>
... ...
... ... @@ -10,4 +10,5 @@ module.exports = app => {
app.use('/partial', require('./apps/partial')); // 组件demo
// 业务模块
app.use('/passport', require('./apps/passport'));
};
... ...
$theme-color: #ffffff !default;
$inactive-color: #grey !default;
.register-page {
font-size: 14px;
color: #b9b9b9;
background-color: red;
li {
margin-bottom: 25px;
... ... @@ -16,6 +20,14 @@
outline: none;
}
.titile {
font-size:30px;
}
.phone{
display: inline;
}
.input {
height: 43px;
line-height: 43px;
... ... @@ -52,16 +64,16 @@
.send-captcha {
top: 0;
background: #ff1901;
background: $theme-color;
position: absolute;
width: 100px;
width: 200px;
right: 0;
font-size: 12px;
text-indent: 0;
letter-spacing: 0;
&.disable {
background: #555;
background: $inactive-color;
}
}
... ...