YOHOBUY / yohobuy-activity · Commits

Go to a project

Authored by ping
Commit 0f5c4d790288bf73fdaad6df56387f4bbfb5833e 1 parent 9db49e06

update

Inline Side-by-side
Showing 2 changed files with 72 additions and 28 deletions
@@ -23,6 +23,7 @@ @@ -23,6 +23,7 @@
23 height: 100%; 23 height: 100%;
24 overflow: hidden; 24 overflow: hidden;
25 background: #e10c1e; 25 background: #e10c1e;
  26 +
26 } 27 }
27 .banner{ 28 .banner{
28 width: 100%; 29 width: 100%;
@@ -39,6 +40,7 @@ @@ -39,6 +40,7 @@
39 overflow: hidden; 40 overflow: hidden;
40 padding-top: 2rem; 41 padding-top: 2rem;
41 padding-bottom: .6rem; 42 padding-bottom: .6rem;
  43 + background: #e10c1e;
42 } 44 }
43 .centent p{ 45 .centent p{
44 width: 100%; 46 width: 100%;
@@ -78,6 +80,7 @@ @@ -78,6 +80,7 @@
78 .dialog .close{ 80 .dialog .close{
79 width: 1.4rem; 81 width: 1.4rem;
80 height: 1.4rem; 82 height: 1.4rem;
  83 + overflow: hidden;
81 background: #444; 84 background: #444;
82 color: #f1f1f1; 85 color: #f1f1f1;
83 border-radius: 50%; 86 border-radius: 50%;
@@ -87,6 +90,10 @@ @@ -87,6 +90,10 @@
87 line-height: 1.4rem; 90 line-height: 1.4rem;
88 text-align: center; 91 text-align: center;
89 } 92 }
  93 + .dialog .close img{
  94 + width: 100%;
  95 + height: auto;
  96 + }
90 .dialog .inform{ 97 .dialog .inform{
91 width: 100%; 98 width: 100%;
92 height: 6rem; 99 height: 6rem;
@@ -117,6 +124,10 @@ @@ -117,6 +124,10 @@
117 text-align: center; 124 text-align: center;
118 font-size: 1.2rem; 125 font-size: 1.2rem;
119 } 126 }
  127 + .btn-list a{
  128 + text-decoration:none;
  129 + color: #000;
  130 + }
120 .hidden{ 131 .hidden{
121 display: none; 132 display: none;
122 } 133 }
@@ -155,9 +166,9 @@ @@ -155,9 +166,9 @@
155 overflow: hidden; 166 overflow: hidden;
156 } 167 }
157 .footer .btn{ 168 .footer .btn{
158 - width: 81.25%; 169 + width: 75.25%;
159 height:auto; 170 height:auto;
160 - margin: 0 auto .6rem; 171 + margin: 0 auto 1.6rem;
161 } 172 }
162 .footer .btn img{ 173 .footer .btn img{
163 width: 100%; 174 width: 100%;
@@ -172,10 +183,6 @@ @@ -172,10 +183,6 @@
172 color: #fff; 183 color: #fff;
173 margin: 0 40%; 184 margin: 0 40%;
174 } 185 }
175 - .btn-list a{  
176 - text-decoration:none;  
177 - color: #000;  
178 - }  
179 </style> 186 </style>
180 </head> 187 </head>
181 <body> 188 <body>
@@ -211,7 +218,7 @@ @@ -211,7 +218,7 @@
211 </div> 218 </div>
212 <div class="keep-out hidden"></div> 219 <div class="keep-out hidden"></div>
213 <div class="dialog hidden" id="message"> 220 <div class="dialog hidden" id="message">
214 - <span class="close">X</span> 221 + <span class="close"><img src="/activity/cocacola/images/close.png"></span>
215 <div class="activity-message"> 222 <div class="activity-message">
216 <h3>活动说明</h3> 223 <h3>活动说明</h3>
217 <div class="message"> 224 <div class="message">
@@ -21,7 +21,6 @@ @@ -21,7 +21,6 @@
21 .page{ 21 .page{
22 width: 100%; 22 width: 100%;
23 height: 100%; 23 height: 100%;
24 - overflow: hidden;  
25 background: #e10c1e; 24 background: #e10c1e;
26 } 25 }
27 .banner{ 26 .banner{
@@ -49,14 +48,15 @@ @@ -49,14 +48,15 @@
49 width: 100%; 48 width: 100%;
50 height: auto; 49 height: auto;
51 overflow: hidden; 50 overflow: hidden;
52 - padding-top: 4rem; 51 + padding-top: 2.4rem;
  52 + background: #e10c1e;
53 } 53 }
54 .centent div{ 54 .centent div{
55 width: 81.25%; 55 width: 81.25%;
56 height: 4rem; 56 height: 4rem;
57 overflow: hidden; 57 overflow: hidden;
58 margin: 0 auto; 58 margin: 0 auto;
59 - padding-bottom: 1.2rem; 59 + padding-bottom: 1rem;
60 } 60 }
61 .centent input{ 61 .centent input{
62 width: 68%; 62 width: 68%;
@@ -102,6 +102,7 @@ @@ -102,6 +102,7 @@
102 .dialog .close{ 102 .dialog .close{
103 width: 1.4rem; 103 width: 1.4rem;
104 height: 1.4rem; 104 height: 1.4rem;
  105 + overflow: hidden;
105 background: #444; 106 background: #444;
106 color: #f1f1f1; 107 color: #f1f1f1;
107 border-radius: 50%; 108 border-radius: 50%;
@@ -111,6 +112,10 @@ @@ -111,6 +112,10 @@
111 line-height: 1.4rem; 112 line-height: 1.4rem;
112 text-align: center; 113 text-align: center;
113 } 114 }
  115 + .dialog .close img{
  116 + width: 100%;
  117 + height: auto;
  118 + }
114 .hidden{ 119 .hidden{
115 display: none; 120 display: none;
116 } 121 }
@@ -147,6 +152,21 @@ @@ -147,6 +152,21 @@
147 margin:0 auto; 152 margin:0 auto;
148 line-height: 2rem; 153 line-height: 2rem;
149 } 154 }
  155 + .messages{
  156 + width: 82%;
  157 + height: 4rem;
  158 + position: absolute;
  159 + background: rgba(0,0,0,.9);
  160 + border-radius: .6rem;
  161 + left:9%;
  162 + top: 45%;
  163 + margin-top: -2rem;
  164 + z-index: 2;
  165 + color: #fff;
  166 + }
  167 + .messages p{
  168 + line-height: 4rem;
  169 + }
150 </style> 170 </style>
151 </head> 171 </head>
152 <body> 172 <body>
@@ -169,13 +189,12 @@ @@ -169,13 +189,12 @@
169 <span></span> 189 <span></span>
170 </div> 190 </div>
171 </div> 191 </div>
172 - <div class="dialog hidden" id="dialog">  
173 - <span class="close">X</span> 192 + <div class="messages hidden" id="dialog">
174 <div class="content"></div> 193 <div class="content"></div>
175 </div> 194 </div>
176 <div class="keep-out hidden"></div> 195 <div class="keep-out hidden"></div>
177 <div class="dialog hidden" id="message"> 196 <div class="dialog hidden" id="message">
178 - <span class="close">X</span> 197 + <span class="close"><img src="/activity/cocacola/images/close.png"></span>
179 <div class="activity-message"> 198 <div class="activity-message">
180 <h3>活动说明</h3> 199 <h3>活动说明</h3>
181 <div class="message"> 200 <div class="message">
@@ -214,22 +233,20 @@ @@ -214,22 +233,20 @@
214 233
215 var num = 0; 234 var num = 0;
216 235
217 - $('#phone').focus(function(){ 236 +$('#phone').bind('input propertychange', function(){
  237 + if ($(this).val().length === 11) {
218 $('.centent span').eq('0').addClass('verification-code'); 238 $('.centent span').eq('0').addClass('verification-code');
219 - })  
220 - $('#phone').blur(function(){  
221 - if (!$(this).val()) {  
222 - $('.centent span').eq('0').removeClass();  
223 - }  
224 - })  
225 - $('#verification').focus(function(){ 239 + }else{
  240 + $('.centent span').eq('0').removeClass();
  241 + }
  242 +})
  243 +$('#verification').bind('input propertychange', function(){
  244 + if ($(this).val().length === 4) {
226 $('.centent span').eq('1').addClass('get'); 245 $('.centent span').eq('1').addClass('get');
227 - })  
228 - $('#verification').blur(function(){  
229 - if (!$(this).val()) {  
230 - $('.centent span').eq('1').removeClass();  
231 - }  
232 - }) 246 + }else{
  247 + $('.centent span').eq('1').removeClass();
  248 + }
  249 +})
233 $('.centent').on('click', '.verification-code', function(){ 250 $('.centent').on('click', '.verification-code', function(){
234 $('.centent span').eq('0').removeClass('verification-code'); 251 $('.centent span').eq('0').removeClass('verification-code');
235 var phone = $(this).siblings('input').val(); 252 var phone = $(this).siblings('input').val();
@@ -238,6 +255,11 @@ var num = 0; @@ -238,6 +255,11 @@ var num = 0;
238 $('#dialog').removeClass('hidden'); 255 $('#dialog').removeClass('hidden');
239 $('.keep-out').removeClass('hidden'); 256 $('.keep-out').removeClass('hidden');
240 $('#dialog .content').html('<p class="phone-error">手机号错误，请重新输入。<p>'); 257 $('#dialog .content').html('<p class="phone-error">手机号错误，请重新输入。<p>');
  258 + setTimeout(function(){
  259 + $('.messages').addClass('hidden');
  260 + $('.keep-out').addClass('hidden');
  261 + $('#dialog .content').html(' ')
  262 + }, 1400);
241 return; 263 return;
242 } 264 }
243 $.ajax({ 265 $.ajax({
@@ -263,6 +285,11 @@ var num = 0; @@ -263,6 +285,11 @@ var num = 0;
263 $('#dialog').removeClass('hidden'); 285 $('#dialog').removeClass('hidden');
264 $('.keep-out').removeClass('hidden'); 286 $('.keep-out').removeClass('hidden');
265 $('#dialog .content').html('<p class="phone-error">'+ data.message +'<p>'); 287 $('#dialog .content').html('<p class="phone-error">'+ data.message +'<p>');
  288 + setTimeout(function(){
  289 + $('.messages').addClass('hidden');
  290 + $('.keep-out').addClass('hidden');
  291 + $('#dialog .content').html(' ')
  292 + }, 1400);
266 } 293 }
267 } 294 }
268 }); 295 });
@@ -285,6 +312,11 @@ var num = 0; @@ -285,6 +312,11 @@ var num = 0;
285 $('#dialog').removeClass('hidden'); 312 $('#dialog').removeClass('hidden');
286 $('.keep-out').removeClass('hidden'); 313 $('.keep-out').removeClass('hidden');
287 $('#dialog .content').html('<p class="phone-error">'+ data.message +'<p>'); 314 $('#dialog .content').html('<p class="phone-error">'+ data.message +'<p>');
  315 + setTimeout(function(){
  316 + $('.messages').addClass('hidden');
  317 + $('.keep-out').addClass('hidden');
  318 + $('#dialog .content').html(' ')
  319 + }, 1400);
288 } 320 }
289 } 321 }
290 }) 322 })
@@ -292,6 +324,11 @@ var num = 0; @@ -292,6 +324,11 @@ var num = 0;
292 $('#dialog').removeClass('hidden'); 324 $('#dialog').removeClass('hidden');
293 $('.keep-out').removeClass('hidden'); 325 $('.keep-out').removeClass('hidden');
294 $('#dialog .content').html('<p class="phone-error">验证码错误，请重新输入。<p>'); 326 $('#dialog .content').html('<p class="phone-error">验证码错误，请重新输入。<p>');
  327 + setTimeout(function(){
  328 + $('.messages').addClass('hidden');
  329 + $('.keep-out').addClass('hidden');
  330 + $('#dialog .content').html(' ')
  331 + }, 1400);
295 } 332 }
296 }); 333 });
297 $('.close').on('click', function(){ 334 $('.close').on('click', function(){
@@ -350,7 +387,7 @@ var num = 0; @@ -350,7 +387,7 @@ var num = 0;
350 _signature = json.signature.toString(); 387 _signature = json.signature.toString();
351 388
352 wx.config({ 389 wx.config({
353 - debug: false, 390 + debug: true,
354 appId: _appId, 391 appId: _appId,
355 timestamp: _timestamp, 392 timestamp: _timestamp,
356 nonceStr: _nonceStr, 393 nonceStr: _nonceStr,