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 @@ @@ -19,14 +19,13 @@
19 <label for="password" class="iconfont">&#xe723;</label><input type="password" name="password" placeholder="请输入密码"> 19 <label for="password" class="iconfont">&#xe723;</label><input type="password" name="password" placeholder="请输入密码">
20 <span id="passwordEyeIcon" class="eye"><i class="iconfont eye-close">&#xe716;</i><i class="iconfont eye-open hide">&#xe714;</i></span> 20 <span id="passwordEyeIcon" class="eye"><i class="iconfont eye-close">&#xe716;</i><i class="iconfont eye-open hide">&#xe714;</i></span>
21 </div> 21 </div>
  22 + <div data-userverify="{{captchaShow}}" data-geetest="{{useGeetest}}" id="js-img-check"></div>
  23 + <button id="loginBtn" class="login-btn">登录</button>
22 <div class="other-info"> 24 <div class="other-info">
23 <a href="{{internationalUrl}}">海外账号</a> 25 <a href="{{internationalUrl}}">海外账号</a>
24 <a href="{{smsLoginUrl}}">手机验证码</a> 26 <a href="{{smsLoginUrl}}">手机验证码</a>
25 <a id="getPswrdBtn" href="javascript:void(0);">忘记密码?</a> 27 <a id="getPswrdBtn" href="javascript:void(0);">忘记密码?</a>
26 </div> 28 </div>
27 - {{!--图片验证--}}  
28 - <div data-userverify="{{captchaShow}}" data-geetest="{{useGeetest}}" id="js-img-check"></div>  
29 - <button id="loginBtn" class="login-btn">登录</button>  
30 </div> 29 </div>
31 <div class="third-party-login"> 30 <div class="third-party-login">
32 <div class="tip-box"> 31 <div class="tip-box">
@@ -26,13 +26,13 @@ @@ -26,13 +26,13 @@
26 <label for="verifyCode" class="iconfont">&#xe71c;</label><input type="text" name="verifyCode" placeholder="请输入验证码" 26 <label for="verifyCode" class="iconfont">&#xe71c;</label><input type="text" name="verifyCode" placeholder="请输入验证码"
27 class="verify-code-input"><button id="getVerifyCodeBtn" class="get-verify-code">获取验证码</button> 27 class="verify-code-input"><button id="getVerifyCodeBtn" class="get-verify-code">获取验证码</button>
28 </div> 28 </div>
  29 + <div data-geetest="{{useGeetest}}" id="js-img-check" {{#unless useGeetest}} class="full-img-verify hide" {{/unless}}></div>
  30 + <button id="smsLoginBtn" class="sms-login-btn">登录</button>
29 <div class="other-info"> 31 <div class="other-info">
30 <a href="{{internationalUrl}}">海外账号</a> 32 <a href="{{internationalUrl}}">海外账号</a>
31 <a href="{{loginUrl}}">账号密码登录</a> 33 <a href="{{loginUrl}}">账号密码登录</a>
32 <a id="getPswrdBtn" href="javascript:void(0);">忘记密码?</a> 34 <a id="getPswrdBtn" href="javascript:void(0);">忘记密码?</a>
33 </div> 35 </div>
34 - <div data-geetest="{{useGeetest}}" id="js-img-check" {{#unless useGeetest}} class="full-img-verify hide" {{/unless}}></div>  
35 - <button id="smsLoginBtn" class="sms-login-btn">登录</button>  
36 </div> 36 </div>
37 <div class="third-party-login"> 37 <div class="third-party-login">
38 <div class="tip-box"> 38 <div class="tip-box">
@@ -56,12 +56,8 @@ class RegisterNew { @@ -56,12 +56,8 @@ class RegisterNew {
56 } 56 }
57 validate.refresh(); 57 validate.refresh();
58 $(document).off('click.refresh').on('click.refresh', '.img-check-refresh', this.imgVerifyInit.bind(this)); 58 $(document).off('click.refresh').on('click.refresh', '.img-check-refresh', this.imgVerifyInit.bind(this));
59 - if (!$('#getVerifyCodeBtnByValidate').length) {  
60 - $captcha.append('<div class="validate-sub-btn"><button id="getVerifyCodeBtnByValidate">获取验证码</button></div>'); // eslint-disable-line  
61 - }  
62 - this.view.getVerifyCodeBtnByValidate = $('#getVerifyCodeBtnByValidate');  
63 - this.view.getVerifyCodeBtnByValidate.on('click', this.getVerifyCode.bind(this));  
64 $captcha.removeClass('hide'); 59 $captcha.removeClass('hide');
  60 + this.getVerifyCode();
65 } 61 }
66 62
67 /** 63 /**
@@ -60,12 +60,8 @@ class SmsLoginNew extends Page { @@ -60,12 +60,8 @@ class SmsLoginNew extends Page {
60 } 60 }
61 validate.refresh(); 61 validate.refresh();
62 $(document).off('click.refresh').on('click.refresh', '.img-check-refresh', this.imgVerifyInit.bind(this)); 62 $(document).off('click.refresh').on('click.refresh', '.img-check-refresh', this.imgVerifyInit.bind(this));
63 - if (!$('#getVerifyCodeBtnByValidate').length) {  
64 - $captcha.append('<div class="validate-sub-btn"><button id="getVerifyCodeBtnByValidate">获取验证码</button></div>'); // eslint-disable-line  
65 - }  
66 - this.selector.getVerifyCodeBtnByValidate = $('#getVerifyCodeBtnByValidate');  
67 - this.selector.getVerifyCodeBtnByValidate.on('click', this.getVerifyCode.bind(this));  
68 $captcha.removeClass('hide'); 63 $captcha.removeClass('hide');
  64 + this.getVerifyCode();
69 } 65 }
70 66
71 /** 67 /**
  1 +@import "layout/img-check";
  2 +
1 @define-extend padding-75 { 3 @define-extend padding-75 {
2 padding-left: 75px; 4 padding-left: 75px;
3 padding-right: 75px; 5 padding-right: 75px;
@@ -157,41 +159,35 @@ $disableGray: #b0b0b0; @@ -157,41 +159,35 @@ $disableGray: #b0b0b0;
157 height: 70px; 159 height: 70px;
158 border-radius: 4px; 160 border-radius: 4px;
159 background-color: $disableGray; 161 background-color: $disableGray;
160 - margin-top: 100px; 162 + margin-top: 40px;
161 font-size: 32px; 163 font-size: 32px;
162 color: #fff; 164 color: #fff;
163 } 165 }
164 } 166 }
165 167
166 .full-img-verify { 168 .full-img-verify {
167 - padding-left: 30px;  
168 - padding-right: 30px;  
169 - position: fixed;  
170 - top: 0;  
171 - right: 0;  
172 - bottom: 0;  
173 - left: 0;  
174 - background-color: rgba(0, 0, 0, 0.4); 169 + margin-top: 70px;
175 170
176 .img-check { 171 .img-check {
177 background-color: #fff; 172 background-color: #fff;
178 - margin-top: 300px; 173 + margin-top: 0;
179 margin-bottom: 0; 174 margin-bottom: 0;
180 - padding: 30px;  
181 - }  
182 175
183 - .validate-sub-btn {  
184 - width: 100%;  
185 - padding: 30px;  
186 - background-color: #fff; 176 + .img-check-header > span {
  177 + color: #444;
  178 + font-size: 21.9px;
  179 + line-height: 1.5;
  180 + }
187 181
188 - button {  
189 - width: 100%;  
190 - height: 70px;  
191 - border-radius: 4px;  
192 - background-color: #444;  
193 - font-size: 32px;  
194 - color: #fff; 182 + .img-check-header > .img-check-refresh {
  183 + color: #d0021b;
  184 + }
  185 +
  186 + .img-check-main > .img-check-pics > .img-check-pic {
  187 + width: 136.6px;
  188 + height: 136.8px;
  189 + background-color: #fff;
  190 + border: solid 1px #e0e0e0;
195 } 191 }
196 } 192 }
197 } 193 }
@@ -215,7 +215,7 @@ $disable-gray: $b0b0b0; @@ -215,7 +215,7 @@ $disable-gray: $b0b0b0;
215 height: 70px; 215 height: 70px;
216 border-radius: 4px; 216 border-radius: 4px;
217 background-color: $disable-gray; 217 background-color: $disable-gray;
218 - margin-top: 100px; 218 + margin-top: 40px;
219 font-size: 32px; 219 font-size: 32px;
220 color: #fff; 220 color: #fff;
221 } 221 }
@@ -275,34 +275,28 @@ $disable-gray: $b0b0b0; @@ -275,34 +275,28 @@ $disable-gray: $b0b0b0;
275 } 275 }
276 276
277 .full-img-verify { 277 .full-img-verify {
278 - padding-left: 30px;  
279 - padding-right: 30px;  
280 - position: fixed;  
281 - top: 0;  
282 - right: 0;  
283 - bottom: 0;  
284 - left: 0;  
285 - background-color: rgba(0, 0, 0, 0.4); 278 + margin-top: 70px;
286 279
287 .img-check { 280 .img-check {
288 background-color: #fff; 281 background-color: #fff;
289 - margin-top: 300px; 282 + margin-top: 0;
290 margin-bottom: 0; 283 margin-bottom: 0;
291 - padding: 30px;  
292 - }  
293 284
294 - .validate-sub-btn {  
295 - width: 100%;  
296 - padding: 30px;  
297 - background-color: #fff; 285 + .img-check-header > span {
  286 + color: #444;
  287 + font-size: 21.9px;
  288 + line-height: 1.5;
  289 + }
298 290
299 - button {  
300 - width: 100%;  
301 - height: 70px;  
302 - border-radius: 4px;  
303 - background-color: #444;  
304 - font-size: 32px;  
305 - color: #fff; 291 + .img-check-header > .img-check-refresh {
  292 + color: #d0021b;
  293 + }
  294 +
  295 + .img-check-main > .img-check-pics > .img-check-pic {
  296 + width: 136.6px;
  297 + height: 136.8px;
  298 + background-color: #fff;
  299 + border: solid 1px #e0e0e0;
306 } 300 }
307 } 301 }
308 } 302 }