fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit f975a01eb2f10d0539c325c5bf3a912358843b41 1 parent c9654783

image-verify-code-style-change

Inline Side-by-side
Showing 6 changed files with 42 additions and 61 deletions
... ... @@ -19,14 +19,13 @@
<label for="password" class="iconfont">&#xe723;</label><input type="password" name="password" placeholder="请输入密码">
<span id="passwordEyeIcon" class="eye"><i class="iconfont eye-close">&#xe716;</i><i class="iconfont eye-open hide">&#xe714;</i></span>
</div>
<div data-userverify="{{captchaShow}}" data-geetest="{{useGeetest}}" id="js-img-check"></div>
<button id="loginBtn" class="login-btn">登录</button>
<div class="other-info">
<a href="{{internationalUrl}}">海外账号</a>
<a href="{{smsLoginUrl}}">手机验证码</a>
<a id="getPswrdBtn" href="javascript:void(0);">忘记密码?</a>
</div>
{{!--图片验证--}}
<div data-userverify="{{captchaShow}}" data-geetest="{{useGeetest}}" id="js-img-check"></div>
<button id="loginBtn" class="login-btn">登录</button>
</div>
<div class="third-party-login">
<div class="tip-box">
... ...
... ... @@ -26,13 +26,13 @@
<label for="verifyCode" class="iconfont">&#xe71c;</label><input type="text" name="verifyCode" placeholder="请输入验证码"
class="verify-code-input"><button id="getVerifyCodeBtn" class="get-verify-code">获取验证码</button>
</div>
<div data-geetest="{{useGeetest}}" id="js-img-check" {{#unless useGeetest}} class="full-img-verify hide" {{/unless}}></div>
<button id="smsLoginBtn" class="sms-login-btn">登录</button>
<div class="other-info">
<a href="{{internationalUrl}}">海外账号</a>
<a href="{{loginUrl}}">账号密码登录</a>
<a id="getPswrdBtn" href="javascript:void(0);">忘记密码?</a>
</div>
<div data-geetest="{{useGeetest}}" id="js-img-check" {{#unless useGeetest}} class="full-img-verify hide" {{/unless}}></div>
<button id="smsLoginBtn" class="sms-login-btn">登录</button>
</div>
<div class="third-party-login">
<div class="tip-box">
... ...
... ... @@ -56,12 +56,8 @@ class RegisterNew {
}
validate.refresh();
$(document).off('click.refresh').on('click.refresh', '.img-check-refresh', this.imgVerifyInit.bind(this));
if (!$('#getVerifyCodeBtnByValidate').length) {
$captcha.append('<div class="validate-sub-btn"><button id="getVerifyCodeBtnByValidate">获取验证码</button></div>'); // eslint-disable-line
}
this.view.getVerifyCodeBtnByValidate = $('#getVerifyCodeBtnByValidate');
this.view.getVerifyCodeBtnByValidate.on('click', this.getVerifyCode.bind(this));
$captcha.removeClass('hide');
this.getVerifyCode();
}
/**
... ...
... ... @@ -60,12 +60,8 @@ class SmsLoginNew extends Page {
}
validate.refresh();
$(document).off('click.refresh').on('click.refresh', '.img-check-refresh', this.imgVerifyInit.bind(this));
if (!$('#getVerifyCodeBtnByValidate').length) {
$captcha.append('<div class="validate-sub-btn"><button id="getVerifyCodeBtnByValidate">获取验证码</button></div>'); // eslint-disable-line
}
this.selector.getVerifyCodeBtnByValidate = $('#getVerifyCodeBtnByValidate');
this.selector.getVerifyCodeBtnByValidate.on('click', this.getVerifyCode.bind(this));
$captcha.removeClass('hide');
this.getVerifyCode();
}
/**
... ...
@import "layout/img-check";
@define-extend padding-75 {
padding-left: 75px;
padding-right: 75px;
... ... @@ -157,41 +159,35 @@ $disableGray: #b0b0b0;
height: 70px;
border-radius: 4px;
background-color: $disableGray;
margin-top: 100px;
margin-top: 40px;
font-size: 32px;
color: #fff;
}
}
.full-img-verify {
padding-left: 30px;
padding-right: 30px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
margin-top: 70px;
.img-check {
background-color: #fff;
margin-top: 300px;
margin-top: 0;
margin-bottom: 0;
padding: 30px;
}
.validate-sub-btn {
width: 100%;
padding: 30px;
background-color: #fff;
.img-check-header > span {
color: #444;
font-size: 21.9px;
line-height: 1.5;
}
button {
width: 100%;
height: 70px;
border-radius: 4px;
background-color: #444;
font-size: 32px;
color: #fff;
.img-check-header > .img-check-refresh {
color: #d0021b;
}
.img-check-main > .img-check-pics > .img-check-pic {
width: 136.6px;
height: 136.8px;
background-color: #fff;
border: solid 1px #e0e0e0;
}
}
}
... ...
... ... @@ -215,7 +215,7 @@ $disable-gray: $b0b0b0;
height: 70px;
border-radius: 4px;
background-color: $disable-gray;
margin-top: 100px;
margin-top: 40px;
font-size: 32px;
color: #fff;
}
... ... @@ -275,34 +275,28 @@ $disable-gray: $b0b0b0;
}
.full-img-verify {
padding-left: 30px;
padding-right: 30px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
margin-top: 70px;
.img-check {
background-color: #fff;
margin-top: 300px;
margin-top: 0;
margin-bottom: 0;
padding: 30px;
}
.validate-sub-btn {
width: 100%;
padding: 30px;
background-color: #fff;
.img-check-header > span {
color: #444;
font-size: 21.9px;
line-height: 1.5;
}
button {
width: 100%;
height: 70px;
border-radius: 4px;
background-color: #444;
font-size: 32px;
color: #fff;
.img-check-header > .img-check-refresh {
color: #d0021b;
}
.img-check-main > .img-check-pics > .img-check-pic {
width: 136.6px;
height: 136.8px;
background-color: #fff;
border: solid 1px #e0e0e0;
}
}
}
... ...