fe / yoho-blk · Commits

Go to a project

Authored by htoooth
Commit b8c35d05f0e6ed0670d461de3214d85008732143 1 parent dcdde922

tips问题，第三方登录首页

Inline Side-by-side
Showing 3 changed files with 38 additions and 19 deletions
@@ -27,7 +27,7 @@ @@ -27,7 +27,7 @@
27 <input id="phone-num" name='mobile' class="phone-num" type="text" 27 <input id="phone-num" name='mobile' class="phone-num" type="text"
28 placeholder="Phone Number"> 28 placeholder="Phone Number">
29 29
30 - <div class="tips"> 30 + <div class="tips hide">
31 <div class="triangle"></div> 31 <div class="triangle"></div>
32 <div class="rectangle"></div> 32 <div class="rectangle"></div>
33 </div> 33 </div>
@@ -39,9 +39,18 @@ @@ -39,9 +39,18 @@
39 <li class="clearfix"> 39 <li class="clearfix">
40 40
41 <div id="img-captcha-component" class="img-captcha-component"> 41 <div id="img-captcha-component" class="img-captcha-component">
  42 +
  43 + <div class="img-captcha-wrapper">
42 <input id="verifyCode" name='verifyCode' class="input left" name="code" type="text" 44 <input id="verifyCode" name='verifyCode' class="input left" name="code" type="text"
43 placeholder="图形验证码"> 45 placeholder="图形验证码">
44 46
  47 + <div class="tips hide">
  48 + <div class="triangle"></div>
  49 + <div class="rectangle"></div>
  50 + </div>
  51 +
  52 + </div>
  53 +
45 <div class="refresh left"> 54 <div class="refresh left">
46 <img class="left img-captcha" src="{{imgCaptcha}}"> 55 <img class="left img-captcha" src="{{imgCaptcha}}">
47 <span class="img-captcha-refresh iconfont left ctrl">&#xe613;</span> 56 <span class="img-captcha-refresh iconfont left ctrl">&#xe613;</span>
@@ -51,9 +60,17 @@ @@ -51,9 +60,17 @@
51 60
52 <li class="clearfix"> 61 <li class="clearfix">
53 <div id="sms-captcha-component" class="sms-captcha-component"> 62 <div id="sms-captcha-component" class="sms-captcha-component">
  63 +
  64 + <div class="sms-captcha-wrapper">
54 <input id="sms-captcha-input" name='code' class="input left sms-captcha-input" type="text" 65 <input id="sms-captcha-input" name='code' class="input left sms-captcha-input" type="text"
55 placeholder="短信验证码"> 66 placeholder="短信验证码">
56 67
  68 + <div class="tips hide">
  69 + <div class="triangle"></div>
  70 + <div class="rectangle"></div>
  71 + </div>
  72 + </div>
  73 +
57 <div class="left"> 74 <div class="left">
58 <a class="btn send disable sms-captcha-send">获取短信验证码</a> 75 <a class="btn send disable sms-captcha-send">获取短信验证码</a>
59 </div> 76 </div>
@@ -68,11 +85,6 @@ @@ -68,11 +85,6 @@
68 </ul> 85 </ul>
69 </div> 86 </div>
70 87
71 - <div class="tips hide">  
72 - <div class="triangle"></div>  
73 - <div class="rectangle"></div>  
74 - </div>  
75 -  
76 <div> 88 <div>
77 <input id="openId" name='openId' type="hidden" value="{{openId}}"> 89 <input id="openId" name='openId' type="hidden" value="{{openId}}">
78 <input id="sourceType" name='sourceType' type="hidden" value="{{sourceType}}"> 90 <input id="sourceType" name='sourceType' type="hidden" value="{{sourceType}}">
@@ -13,7 +13,6 @@ var $regionCodeText = $('#region-code'), @@ -13,7 +13,6 @@ var $regionCodeText = $('#region-code'),
13 $imgCaptchaCtrl = $('.img-captcha-refresh'), 13 $imgCaptchaCtrl = $('.img-captcha-refresh'),
14 $smsCaptchaInput = $('#sms-captcha-input'), 14 $smsCaptchaInput = $('#sms-captcha-input'),
15 $smsCaptchaCtrl = $('.sms-captcha-send'), 15 $smsCaptchaCtrl = $('.sms-captcha-send'),
16 - $phone = $('#phone'),  
17 $nextBtn = $('#validate-phone-next'); 16 $nextBtn = $('#validate-phone-next');
18 17
19 var $bindsetpwdForm = $('#bindsetpwd'), 18 var $bindsetpwdForm = $('#bindsetpwd'),
@@ -27,19 +26,16 @@ var $refer = $('#refer'); @@ -27,19 +26,16 @@ var $refer = $('#refer');
27 var second = 60, 26 var second = 60,
28 ep = new EventProxy(); 27 ep = new EventProxy();
29 28
30 -var $errTip = $('.tips'),  
31 - $errMsg = $errTip.find('.rectangle');  
32 -  
33 function errTip(ele, msg) { 29 function errTip(ele, msg) {
34 - var topLeft = ele.offset(); 30 + var $errTip = ele.next('.tips');
  31 + var $errMsg = $errTip.find('.rectangle');
35 32
36 $errMsg.text(msg); 33 $errMsg.text(msg);
37 - return $errTip.css({  
38 - top: topLeft.top + ele.height() - 2,  
39 - left: topLeft.left,  
40 - width: ele.width() + 2,  
41 - height: ele.height  
42 - }).removeClass('hide'); 34 + return $errTip.removeClass('hide');
  35 +}
  36 +
  37 +function hideTip(ele) {
  38 + return ele.next('.tips').addClass('hide');
43 } 39 }
44 40
45 function disableSMSBtn() { 41 function disableSMSBtn() {
@@ -125,7 +121,7 @@ $phoneNumInput.on('blur', function() { @@ -125,7 +121,7 @@ $phoneNumInput.on('blur', function() {
125 var length = $phoneNumInput.val().length; 121 var length = $phoneNumInput.val().length;
126 122
127 if (length === 0) { 123 if (length === 0) {
128 - errTip($phone, '请输入手机号码'); 124 + errTip($phoneNumInput, '请输入手机号码');
129 ep.emit('phoneNum', false); 125 ep.emit('phoneNum', false);
130 return; 126 return;
131 } 127 }
@@ -139,7 +135,7 @@ $phoneNumInput.on('blur', function() { @@ -139,7 +135,7 @@ $phoneNumInput.on('blur', function() {
139 ep.emit('phoneNum', true); 135 ep.emit('phoneNum', true);
140 return; 136 return;
141 } else { 137 } else {
142 - errTip($phone, '手机号码不正确，请重新输入'); 138 + errTip($phoneNumInput, '手机号码不正确，请重新输入');
143 ep.emit('phoneNum', false); 139 ep.emit('phoneNum', false);
144 return; 140 return;
145 } 141 }
@@ -150,6 +146,8 @@ $phoneNumInput.on('blur', function() { @@ -150,6 +146,8 @@ $phoneNumInput.on('blur', function() {
150 ep.emit('phoneNum', false); 146 ep.emit('phoneNum', false);
151 return; 147 return;
152 } 148 }
  149 +}).on('focus', function() {
  150 + hideTip($phoneNumInput);
153 }); 151 });
154 152
155 $imgCaptchaInput.on('blur', function() { 153 $imgCaptchaInput.on('blur', function() {
@@ -178,6 +176,8 @@ $imgCaptchaInput.on('blur', function() { @@ -178,6 +176,8 @@ $imgCaptchaInput.on('blur', function() {
178 refreshImgCaptcha(); 176 refreshImgCaptcha();
179 } 177 }
180 }); 178 });
  179 +}).on('focus', function() {
  180 + hideTip($imgCaptchaInput);
181 }); 181 });
182 182
183 $imgCaptchaCtrl.on('click', function() { 183 $imgCaptchaCtrl.on('click', function() {
@@ -208,6 +208,8 @@ $smsCaptchaInput.on('blur', function() { @@ -208,6 +208,8 @@ $smsCaptchaInput.on('blur', function() {
208 errTip($smsCaptchaInput, '验证码不正确'); 208 errTip($smsCaptchaInput, '验证码不正确');
209 } 209 }
210 }); 210 });
  211 +}).on('focus', function() {
  212 + hideTip($smsCaptchaInput);
211 }); 213 });
212 214
213 $smsCaptchaCtrl.on('click', function() { 215 $smsCaptchaCtrl.on('click', function() {
@@ -10,6 +10,11 @@ $btn-width: 180px; @@ -10,6 +10,11 @@ $btn-width: 180px;
10 .pwd-page, 10 .pwd-page,
11 .relate-success-page { 11 .relate-success-page {
12 @mixin passport-page; 12 @mixin passport-page;
  13 +
  14 + .img-captcha-wrapper,
  15 + .sms-captcha-wrapper {
  16 + width: $captcha;
  17 + }
13 } 18 }
14 19
15 .bind-confirm-page { 20 .bind-confirm-page {