fe / YOHOBUYPC · Commits

Go to a project

Authored by Lynnic
Commit ab8a5051f029488b98ad82d1766811fcf6f29383 1 parent 01744950

page optimization

Inline Side-by-side
Showing 4 changed files with 398 additions and 431 deletions
@@ -6,8 +6,11 @@ @@ -6,8 +6,11 @@
6 var $ = require('jquery'), 6 var $ = require('jquery'),
7 Swiper = require('yoho.iswiper'), 7 Swiper = require('yoho.iswiper'),
8 lazyLoad = require('yoho.lazyload'), 8 lazyLoad = require('yoho.lazyload'),
9 - Handlebars = require('yoho.handlebars'),  
10 - goodsSwiper, 9 + Handlebars = require('yoho.handlebars');
  10 +
  11 +var goodsSwiper,
  12 +
  13 + // winH = $(window).height(),
11 sizeSwiper, 14 sizeSwiper,
12 refSwiper, 15 refSwiper,
13 handleHelper; 16 handleHelper;
@@ -57,7 +60,9 @@ handleHelper = Handlebars.registerHelper('addOne', function(index) { @@ -57,7 +60,9 @@ handleHelper = Handlebars.registerHelper('addOne', function(index) {
57 return index + 1; 60 return index + 1;
58 }); 61 });
59 62
60 -// $('#iframe').load(function() {  
61 -// var mainheight = $(this).contents().find('body').height() + 30;  
62 -// $(this).height(mainheight);  
63 -// });  
  63 +
  64 +//srcoll to load more
  65 +// $(window).scroll(function () {
  66 +// if ($(window).scrollTop() + winH >= $(document).height() - 50) {
  67 +// }
  68 +// });
@@ -5,7 +5,7 @@ $tableCellC:#eee; @@ -5,7 +5,7 @@ $tableCellC:#eee;
5 $basicBtnC:#eb0313; 5 $basicBtnC:#eb0313;
6 6
7 .good-detail-page { 7 .good-detail-page {
8 - 8 +overflow: hidden;
9 /* basic component */ 9 /* basic component */
10 .page-block{ 10 .page-block{
11 box-sizing:border-box; 11 box-sizing:border-box;
@@ -14,7 +14,6 @@ $basicBtnC:#eb0313; @@ -14,7 +14,6 @@ $basicBtnC:#eb0313;
14 border-top: 1px solid $borderC; 14 border-top: 1px solid $borderC;
15 padding: 0 pxToRem(28px); 15 padding: 0 pxToRem(28px);
16 >.title{ 16 >.title{
17 - min-height: pxToRem(88px);  
18 line-height: pxToRem(88px); 17 line-height: pxToRem(88px);
19 color: $mainFontC; 18 color: $mainFontC;
20 font-size : pxToRem(28px); 19 font-size : pxToRem(28px);
@@ -23,7 +22,6 @@ $basicBtnC:#eb0313; @@ -23,7 +22,6 @@ $basicBtnC:#eb0313;
23 span{ 22 span{
24 color:#a0a0a0; 23 color:#a0a0a0;
25 font-size:pxToRem(18px); 24 font-size:pxToRem(18px);
26 - // vertical-align: baseline;  
27 } 25 }
28 } 26 }
29 .detail{ 27 .detail{
@@ -38,26 +36,17 @@ $basicBtnC:#eb0313; @@ -38,26 +36,17 @@ $basicBtnC:#eb0313;
38 .row{ 36 .row{
39 display: table-row; 37 display: table-row;
40 .column{ 38 .column{
41 - display: table-cell;  
42 - padding: 0.4em 0.8em;  
43 - border:1px solid white;  
44 - font-size: pxToRem(24px);  
45 - background-color: $tableCellC;  
46 - }  
47 - }  
48 - }  
49 -  
50 - // table {  
51 - // width: 100%;  
52 - // tbody td{  
53 - // padding: 0.4em 0.8em;  
54 - // border:3px solid white;  
55 - // font-size: pxToRem(24px);  
56 - // background-color: $tableCellC;  
57 - // }  
58 - // } 39 + display: table-cell;
  40 + padding: 0.4em 0.8em;
  41 + border:1px solid #fff;
  42 + font-size: pxToRem(24px);
  43 + background-color: $tableCellC;
  44 + }
  45 + }
  46 + }
59 } 47 }
60 } 48 }
  49 +
61 .gap-block{ 50 .gap-block{
62 min-height: 30rem/$pxConvertRem; 51 min-height: 30rem/$pxConvertRem;
63 background-color: #f0f0f0; 52 background-color: #f0f0f0;
@@ -162,23 +151,25 @@ $basicBtnC:#eb0313; @@ -162,23 +151,25 @@ $basicBtnC:#eb0313;
162 } 151 }
163 } 152 }
164 .periodOfMarket{ 153 .periodOfMarket{
165 - font-size: pxToRem(24px);  
166 - float: right;  
167 - h1{  
168 - display: inline-block;  
169 - line-height: pxToRem(88px);  
170 -} 154 + font-size: pxToRem(24px);
  155 + float: right;
  156 + h1{
  157 + display: inline-block;
  158 + line-height: pxToRem(88px);
  159 + }
171 } 160 }
172 .goodsName, 161 .goodsName,
173 .goodsSubtitle{ 162 .goodsSubtitle{
174 // width: 100%; 163 // width: 100%;
175 display:table; 164 display:table;
176 span{ 165 span{
177 - display: table-cell;  
178 - vertical-align: middle;  
179 - } 166 + display: table-cell;
  167 + vertical-align: middle;
  168 + }
180 } 169 }
181 - .vipLevel { 170 + .vipLevel {
  171 + width: 100%;
  172 + box-sizing:border-box;
182 display: table; 173 display: table;
183 min-height: pxToRem(88px); 174 min-height: pxToRem(88px);
184 padding-left:pxToRem(28px); 175 padding-left:pxToRem(28px);
@@ -213,17 +204,21 @@ $basicBtnC:#eb0313; @@ -213,17 +204,21 @@ $basicBtnC:#eb0313;
213 color: $mainFontC; 204 color: $mainFontC;
214 line-height: pxToRem(88px); 205 line-height: pxToRem(88px);
215 206
216 - border-bottom: 2px solid $borderC; 207 + border-bottom: 1px solid $borderC;
217 208
218 .iconfont{ 209 .iconfont{
219 - // padding-right:28rem/$pxConvertRem;  
220 - font-size: inherit; 210 + display: inline-block;
  211 + width: pxToRem(35px);
  212 + font-size: pxToRem(45px);
221 float: right; 213 float: right;
222 color:#e0e0e0; 214 color:#e0e0e0;
223 - text-align: right; 215 + // padding-left:pxToRem(50px);
224 } 216 }
225 } 217 }
226 - 218 +.goodsSubtitle,
  219 +.goodsDiscount{
  220 + text-indent: pxToRem(-14px);
  221 +}
227 .feedback-list-page { 222 .feedback-list-page {
228 padding-top: pxToRem(30px); 223 padding-top: pxToRem(30px);
229 background-color: #f0f0f0; 224 background-color: #f0f0f0;
@@ -254,30 +249,28 @@ $basicBtnC:#eb0313; @@ -254,30 +249,28 @@ $basicBtnC:#eb0313;
254 color: #000; 249 color: #000;
255 } 250 }
256 } 251 }
257 -  
258 .comment-nav { 252 .comment-nav {
259 border-right: 1px solid #ccc; 253 border-right: 1px solid #ccc;
260 } 254 }
261 -  
262 .comment-content{ 255 .comment-content{
263 - .comment-content-main{ 256 + .comment-content-main{
264 background-color: #fff; 257 background-color: #fff;
265 border-bottom: 1px solid $borderC; 258 border-bottom: 1px solid $borderC;
266 .user-name{ 259 .user-name{
267 - font-size: px2rem(24);  
268 - line-height: px2rem(62); 260 + font-size: pxToRem(24px);
  261 + line-height: pxToRem(62px);
269 color:$mainFontC; 262 color:$mainFontC;
270 - padding-left: px2rem(28);  
271 - padding-right: px2rem(18); 263 + padding-left: pxToRem(28px);
  264 + padding-right: pxToRem(18px);
272 } 265 }
273 .goods-spec, 266 .goods-spec,
274 .comment-time{ 267 .comment-time{
275 - font-size: px2rem(24);  
276 - line-height: px2rem(62); 268 + font-size: pxToRem(24px);
  269 + line-height: pxToRem(62px);
277 } 270 }
278 .detail-content{ 271 .detail-content{
279 - font-size: px2rem(28);  
280 - line-height: px2rem(36); 272 + font-size: pxToRem(28px);
  273 + line-height: pxToRem(36px);
281 font-size: pxToRem(24px); 274 font-size: pxToRem(24px);
282 line-height: pxToRem(62px); 275 line-height: pxToRem(62px);
283 color:$mainFontC; 276 color:$mainFontC;
@@ -299,17 +292,15 @@ $basicBtnC:#eb0313; @@ -299,17 +292,15 @@ $basicBtnC:#eb0313;
299 } 292 }
300 .detail-content, 293 .detail-content,
301 .comment-time{ 294 .comment-time{
302 - padding-left: px2rem(28); 295 + padding-left: pxToRem(28px);
303 296
304 } 297 }
305 .detail-content{ 298 .detail-content{
306 - padding-right: px2rem(28); 299 + padding-right: pxToRem(28px);
307 padding-left: pxToRem(28px); 300 padding-left: pxToRem(28px);
308 -  
309 } 301 }
310 .detail-content{ 302 .detail-content{
311 padding-right: pxToRem(28px); 303 padding-right: pxToRem(28px);
312 -  
313 } 304 }
314 .comment-time{ 305 .comment-time{
315 color:#c1c1c1; 306 color:#c1c1c1;
@@ -318,21 +309,21 @@ $basicBtnC:#eb0313; @@ -318,21 +309,21 @@ $basicBtnC:#eb0313;
318 309
319 .comment-content-footer{ 310 .comment-content-footer{
320 311
321 - min-height: pxToRem(88px);  
322 - text-align: center;  
323 - background-color: #fff; 312 + min-height: pxToRem(88px);
  313 + text-align: center;
  314 + background-color: #fff;
324 315
325 - border-bottom: 2px solid $borderC;  
326 - line-height: pxToRem(88px);  
327 - font-size: pxToRem(28px); 316 + border-bottom: 1px solid $borderC;
  317 + line-height: pxToRem(88px);
  318 + font-size: pxToRem(28px);
328 319
329 - a{  
330 - color: #e0e0e0;  
331 - .iconfont{  
332 - font-size: inherit;  
333 - }  
334 - }  
335 - } 320 + a{
  321 + color: #e0e0e0;
  322 + .iconfont{
  323 + font-size: inherit;
  324 + }
  325 + }
  326 +}
336 327
337 328
338 } 329 }
@@ -353,10 +344,8 @@ $basicBtnC:#eb0313; @@ -353,10 +344,8 @@ $basicBtnC:#eb0313;
353 .store-logo{ 344 .store-logo{
354 // padding-right: 35rem/$pxConvertRem; 345 // padding-right: 35rem/$pxConvertRem;
355 img{ 346 img{
356 -  
357 width: pxToRem(109px); 347 width: pxToRem(109px);
358 height: pxToRem(68px); 348 height: pxToRem(68px);
359 -  
360 margin-left: 0; 349 margin-left: 0;
361 margin-right: pxToRem(-25px); 350 margin-right: pxToRem(-25px);
362 } 351 }
@@ -374,33 +363,37 @@ $basicBtnC:#eb0313; @@ -374,33 +363,37 @@ $basicBtnC:#eb0313;
374 } 363 }
375 } 364 }
376 } 365 }
377 - .goods-desc{  
378 - .service{  
379 - margin-top: pxToRem(22px);  
380 - } 366 +.goods-desc{
  367 + .service{
  368 + width: pxToRem(489px);
  369 + height: pxToRem(28px);
  370 + margin-top: pxToRem(22px);
381 } 371 }
382 - .tips{  
383 - color:$subFontC;  
384 - font-size: pxToRem(18px);  
385 - margin-top: pxToRem(20px);  
386 - }  
387 - .materials{  
388 - .detail{  
389 - img{  
390 - display: block;  
391 - overflow: hidden;  
392 - width: pxToRem(90px);  
393 - height: pxToRem(120px);  
394 - padding-right: pxToRem(20px);  
395 - float: left;  
396 - }  
397 - .material-desc{  
398 - // float: left; 372 +}
  373 +.tips{
  374 + color:$subFontC;
  375 + font-size: pxToRem(18px);
  376 + margin-top: pxToRem(20px);
  377 +}
  378 +.materials{
  379 + .detail{
  380 + img{
  381 + display: block;
  382 + overflow: hidden;
  383 + width: pxToRem(90px);
  384 + height: pxToRem(120px);
  385 + padding-right: pxToRem(20px);
  386 + float: left;
  387 + }
  388 + .material-desc{
399 font-size: pxToRem(24px); 389 font-size: pxToRem(24px);
400 - 390 + overflow: hidden;
  391 +
401 } 392 }
402 } 393 }
403 .material-type{ 394 .material-type{
  395 + width: pxToRem(581px);
  396 + height: pxToRem(99px);
404 border-top: 1px solid $borderC; 397 border-top: 1px solid $borderC;
405 padding: pxToRem(17px) 0; 398 padding: pxToRem(17px) 0;
406 } 399 }
@@ -435,10 +428,15 @@ $basicBtnC:#eb0313; @@ -435,10 +428,15 @@ $basicBtnC:#eb0313;
435 } 428 }
436 429
437 #reference-swiper-container{ 430 #reference-swiper-container{
  431 +
438 .first-group{ 432 .first-group{
439 - width: pxToRem(58px);  
440 - >div{  
441 - height: pxToRem(67px); 433 + width: pxToRem(70px);
  434 + margin-top: pxToRem(66px);
  435 + .avatar{
  436 + line-height: pxToRem(40px);
  437 + width: pxToRem(40px);
  438 + height: pxToRem(40px);
  439 + margin: pxToRem(18px) 0;
442 } 440 }
443 } 441 }
444 } 442 }
@@ -446,103 +444,96 @@ $basicBtnC:#eb0313; @@ -446,103 +444,96 @@ $basicBtnC:#eb0313;
446 .measurement-method{ 444 .measurement-method{
447 .detail{ 445 .detail{
448 width: 100%; 446 width: 100%;
449 - height: pxToRem(300px); 447 + // height: pxToRem(300px);
450 img{ 448 img{
451 - float:left;  
452 - width: pxToRem(270px);  
453 - height: pxToRem(239px);  
454 - margin-top: pxToRem(18px);  
455 - margin-right: pxToRem(28px); 449 + float:left;
  450 + width: pxToRem(270px);
  451 + height: pxToRem(239px);
  452 + margin-top: pxToRem(18px);
  453 + margin-right: pxToRem(28px);
  454 + }
  455 + .right-part{
  456 + overflow: hidden;
  457 + .title{
  458 + >h1{
  459 + margin-top: pxToRem(10px);
  460 + display: inline-block;
  461 + padding-right: pxToRem(10px);
  462 + border-right: 1px solid $borderC;
  463 + line-height: 100%;
456 } 464 }
457 - .right-part{  
458 - float:left;  
459 - .title{  
460 - >h1{  
461 - margin-top: pxToRem(10px);  
462 - display: inline-block;  
463 - padding-right: pxToRem(10px);  
464 - border-right: 1px solid $borderC;  
465 - line-height: 100%;  
466 - }  
467 - >span{  
468 - font-size: pxToRem(12px);  
469 - }  
470 - }  
471 - ul.items{  
472 - margin-top: pxToRem(20px);  
473 - padding: 0;  
474 - line-height: pxToRem(30px);  
475 - font-size: pxToRem(13px);  
476 - li{  
477 - span{  
478 - display: inline-block;  
479 - width: pxToRem(15px);  
480 - height: pxToRem(15px);  
481 - background-color: $basicBtnC;  
482 - border-radius: 50%;  
483 - color:white;  
484 - text-align: center;  
485 - line-height: pxToRem(15px);  
486 - font-size: pxToRem(13px);  
487 - margin-right: pxToRem(12px);  
488 - vertical-align: text-bottom;  
489 - }  
490 - }  
491 - } 465 + >span{
  466 + font-size: pxToRem(12px);
492 } 467 }
493 - clear:both;  
494 } 468 }
495 - }  
496 - .cart-bar{  
497 - position: relative;  
498 - box-sizing:border-box;  
499 - width: 100%;  
500 - height: pxToRem(120px);  
501 - position:fixed;  
502 - bottom: 0;  
503 - background-color: white;  
504 - z-index: 64;  
505 - padding:pxToRem(20px) pxToRem(28px);  
506 - text-align: center;  
507 -  
508 -  
509 - a{  
510 - display: inline-block;  
511 - &.num-incart{  
512 - width: pxToRem(45px);  
513 - height: pxToRem(45px);  
514 - background: url(../img/product/cart.png) no-repeat;  
515 - }  
516 - &.favorite{  
517 - width: pxToRem(34px);  
518 - height: pxToRem(32px);  
519 - background:url(../img/product/favorite.png) no-repeat;  
520 - }  
521 - &.addto-cart{  
522 - height: pxToRem(80px);  
523 - width: pxToRem(260px);  
524 - margin:0 pxToRem(100px) 0 pxToRem(128px);  
525 - color: #fff;  
526 - background-color: $basicBtnC;  
527 - font-size: pxToRem(40px);  
528 - line-height: pxToRem(80px);  
529 - text-align: center;  
530 - } 469 + ul.items{
  470 + margin-top: pxToRem(20px);
  471 + padding: 0;
  472 + line-height: pxToRem(30px);
  473 + font-size: pxToRem(13px);
  474 + li{
  475 + span{
  476 + display: inline-block;
  477 + width: pxToRem(15px);
  478 + height: pxToRem(15px);
  479 + background-color: $basicBtnC;
  480 + border-radius: 50%;
  481 + color:#fff;
  482 + text-align: center;
  483 + line-height: pxToRem(15px);
  484 + font-size: pxToRem(13px);
  485 + margin-right: pxToRem(12px);
  486 + vertical-align: text-bottom;
  487 + }
  488 + }
  489 + }
  490 + }
  491 + clear:both;
  492 +}
  493 +}
  494 +.cart-bar{
  495 + position: relative;
  496 + box-sizing:border-box;
  497 + width: 100%;
  498 + height: pxToRem(120px);
  499 + position:fixed;
  500 + bottom: 0;
  501 + background-color: #fff;
  502 + z-index: 64;
  503 + padding:pxToRem(20px) pxToRem(28px);
  504 + text-align: center;
  505 + a{
  506 + display: inline-block;
  507 + &.num-incart{
  508 + font-size: pxToRem(47px);
  509 + color:#444;
531 } 510 }
532 - .num-tag{  
533 - position: absolute;  
534 - left:pxToRem(66px);  
535 - height: pxToRem(20px);  
536 - display: block;  
537 - width: pxToRem(36px);  
538 - height: pxToRem(36px);  
539 - background-color: $basicBtnC;  
540 - border-radius: 50%;  
541 - color:white;  
542 - font-size: pxToRem(24px); 511 + &.favorite{
  512 + font-size: pxToRem(34px);
  513 + color:$basicBtnC;
  514 + }
  515 + &.addto-cart{
  516 + height: pxToRem(80px);
  517 + width: pxToRem(260px);
  518 + margin:0 pxToRem(100px) 0 pxToRem(115px);
  519 + color: #fff;
  520 + background-color: $basicBtnC;
  521 + font-size: pxToRem(40px);
  522 + line-height: pxToRem(80px);
  523 + text-align: center;
543 } 524 }
544 -  
545 } 525 }
546 -  
547 - 526 + .num-tag{
  527 + position: absolute;
  528 + left:pxToRem(66px);
  529 + height: pxToRem(20px);
  530 + display: block;
  531 + width: pxToRem(36px);
  532 + height: pxToRem(36px);
  533 + background-color: $basicBtnC;
  534 + border-radius: 50%;
  535 + color:#fff;
  536 + font-size: pxToRem(24px);
  537 + }
  538 +}
548 } 539 }
1 -  
2 {{> layout/header}} 1 {{> layout/header}}
3 <div class="good-detail-page yoho-page"> 2 <div class="good-detail-page yoho-page">
4 -  
5 <div class="banner-container"> 3 <div class="banner-container">
6 -  
7 <h1 class="is-new-lable">NEW</h1> 4 <h1 class="is-new-lable">NEW</h1>
8 {{# bannerTop}} 5 {{# bannerTop}}
9 {{> product/banner_swiper_arrow}} 6 {{> product/banner_swiper_arrow}}
10 {{/ bannerTop}} 7 {{/ bannerTop}}
11 </div> 8 </div>
12 9
13 -  
14 -  
15 -  
16 {{# goodsName}} 10 {{# goodsName}}
17 <h2 class="goodsName"><span>{{.}}</span></h2> 11 <h2 class="goodsName"><span>{{.}}</span></h2>
18 {{/ goodsName}} 12 {{/ goodsName}}
@@ -21,272 +15,249 @@ @@ -21,272 +15,249 @@
21 <h1 class="goodsSubtitle"><span>{{.}}</span></h1> 15 <h1 class="goodsSubtitle"><span>{{.}}</span></h1>
22 {{/ goodsSubtitle}} 16 {{/ goodsSubtitle}}
23 17
24 - <!-- {{# goodsTitle}}  
25 - <h1 class="goodsTitle">{{.}}</h1>  
26 - {{/ goodsTitle}} -->  
27 -  
28 - <div class="price-date">  
29 - {{#goodsPrice}}  
30 - <div class="goodsPrice">  
31 - <h1 class="currentPrice">{{currentPrice}}</h1>  
32 - <h1 class="previousPrice">{{previousPrice}}</h1>  
33 - </div>  
34 - {{/goodsPrice}}  
35 -  
36 - {{#periodOfMarket}}  
37 - <div class="periodOfMarket">  
38 - <h1>上市期：</h1>  
39 - <h1 >{{.}}</h1>  
40 - </div>  
41 - {{/periodOfMarket}} 18 + <div class="price-date">
  19 + {{#goodsPrice}}
  20 + <div class="goodsPrice">
  21 + <h1 class="currentPrice">{{currentPrice}}</h1>
  22 + <h1 class="previousPrice">{{previousPrice}}</h1>
42 </div> 23 </div>
43 -  
44 - <!-- {{# vipLevel}}  
45 - <div class="vipLevel">  
46 - {{# list}}  
47 - {{#if @last}}  
48 - <span>{{text}}</span>  
49 - {{^}}  
50 - <span>{{text}}</span> |  
51 - {{/if}}  
52 - {{/ list}}  
53 - </div>  
54 - {{/ vipLevel}} -->  
55 -  
56 - {{# vipLevel}}  
57 - <div class="vipLevel">  
58 - {{# list}}  
59 - <span class="vip-img"><img src="{{img}}" alt=""></span>  
60 - <span class="vip-price">{{text}}</span>  
61 - {{/ list}}  
62 - </div>  
63 - {{/ vipLevel}}  
64 -  
65 - {{#goodsDiscount}}  
66 - <div class="goodsDiscount">  
67 - <h1>{{.}}<span class="iconfont">&#xe609;</span></h1> 24 + {{/goodsPrice}}
  25 + {{#periodOfMarket}}
  26 + <div class="periodOfMarket">
  27 + <h1>上市期：</h1>
  28 + <h1 >{{.}}</h1>
68 </div> 29 </div>
69 - {{/goodsDiscount}} 30 + {{/periodOfMarket}}
  31 +</div>
70 32
  33 +{{# vipLevel}}
  34 +<div class="vipLevel">
  35 + {{# list}}
  36 +<span class="vip-img">
  37 + <img class="lazy" data-original="{{img}}" alt="">
  38 +</span>
  39 + <span class="vip-price">{{text}}</span>
  40 + {{/ list}}
  41 +</div>
  42 +{{/ vipLevel}}
71 43
72 - <div class="feedback-list-page ">  
73 - {{# feedbacks}}  
74 - <ul id="nav-tab" class="nav-tab clearfix">  
75 - <li class="comment-nav focus">{{commentName}}</li>  
76 - <li class="consult-nav">{{consultName}}</li>  
77 - </ul>  
78 - <div id="feedback-content" >  
79 - <div class="comment-content content ">  
80 - <div class="comment-content-main">  
81 - {{# comments}}  
82 - <span class="user-name">  
83 - {{userName}}  
84 - </span>  
85 - <span class="goods-spec">  
86 - {{desc}}  
87 - </span>  
88 - <p class="detail-content">  
89 - {{content}}  
90 - </p>  
91 - <span class="comment-time">  
92 - {{time}}  
93 - </span>  
94 - {{/ comments}}  
95 - </div>  
96 - <div class="comment-content-footer">  
97 - <a href="{{moreComments}}">查看更多 <span class="iconfont">&#xe604;</span></a>  
98 - </div> 44 +{{#goodsDiscount}}
  45 +<div class="goodsDiscount">
  46 + <h1>{{.}}<span class="iconfont">&#xe609;</span></h1>
  47 +</div>
  48 +{{/goodsDiscount}}
  49 +
  50 +<div class="feedback-list-page ">
  51 + {{# feedbacks}}
  52 + <ul id="nav-tab" class="nav-tab clearfix">
  53 + <li class="comment-nav focus">{{commentName}}</li>
  54 + <li class="consult-nav">{{consultName}}</li>
  55 + </ul>
  56 + <div id="feedback-content" >
  57 + <div class="comment-content content ">
  58 + <div class="comment-content-main">
  59 + {{# comments}}
  60 + <span class="user-name">
  61 + {{userName}}
  62 + </span>
  63 + <span class="goods-spec">
  64 + {{desc}}
  65 + </span>
  66 + <p class="detail-content">
  67 + {{content}}
  68 + </p>
  69 + <span class="comment-time">
  70 + {{time}}
  71 + </span>
  72 + {{/ comments}}
99 </div> 73 </div>
100 - <div class="consult-content content hide">  
101 - {{# consults}}  
102 - <!-- {{> guang/ps_item}} -->  
103 - {{/ consults}} 74 + <div class="comment-content-footer">
  75 + <a href="{{moreComments}}">查看更多 <span class="iconfont">&#xe604;</span></a>
104 </div> 76 </div>
105 </div> 77 </div>
106 - {{/ feedbacks}} 78 + <div class="consult-content content hide">
  79 + {{# consults}}
  80 + <!-- {{> guang/ps_item}} -->
  81 + {{/ consults}}
  82 + </div>
107 </div> 83 </div>
108 - <div class="gap-block"></div> 84 + {{/ feedbacks}}
  85 +</div>
  86 +
  87 +<div class="gap-block"></div>
  88 +
  89 +{{# enterStore}}
  90 +<div class="enter-store page-block">
  91 + <a class="store-logo" href="{{url}}" style="">
  92 + <img class="lazy" data-original="{{img}}" alt="{{storeName}}">
  93 + </a>
  94 + <a class="store-name" href="{{url}}">{{storeName}}</a>
  95 + <a class="store-link" href="{{url}}">进入店铺<span class="iconfont">&#xe604;</span></a>
  96 +</div>
  97 +{{/ enterStore}}
109 98
110 - {{# enterStore}}  
111 - <div class="enter-store page-block">  
112 - <a class="store-logo" href="{{url}}" style="">  
113 - <img src="{{img}}" alt="{{storeName}}">  
114 - </a>  
115 - <a class="store-name" href="{{url}}">{{storeName}}</a>  
116 - <a class="store-link" href="{{url}}">进入店铺<span class="iconfont">&#xe604;</span></a> 99 +<div class="gap-block"></div>
  100 +
  101 +{{#goodsDescription}}
  102 +<div class="goods-desc page-block">
  103 + <img class="service lazy" data-original="http://static.dev.yohobuy.com/img/product/service.png" alt="">
  104 + <h1 class="title">
  105 + {{title}}
  106 + <span class="en-title">{{enTitle}}</span>
  107 +</h1>
  108 +{{#detail}}
  109 +<div class="detail table">
  110 + <div class="row">
  111 + <div class="column">编号：{{nubmer}}</div>
  112 + <div class="column">帽型：{{hatType}}</div>
  113 + </div>
  114 + <div class="row">
  115 + <div class="column">颜色：{{color}}</div>
  116 + <div class="column">帽檐：{{bongrace}}</div>
117 </div> 117 </div>
118 - {{/ enterStore}}  
119 - <div class="gap-block"></div>  
120 - <!-- <iframe src="http://www.baidu.com" id="main" width="320" height="300" frameborder="0" scrolling="auto"></iframe> --> 118 + <div class="row">
  119 + <div class="column">类型：{{type}}</div>
  120 + <div class="column">细节：{{goodsDetail}}</div>
  121 + </div>
  122 + <div class="row">
  123 + <div class="column">性别：{{gender}}</div>
  124 + <div class="column">风格：{{style}}</div>
  125 + </div>
  126 +</div>
  127 +{{/detail}}
  128 +</div>
  129 +{{/goodsDescription}}
121 130
122 - {{#goodsDescription}}  
123 - <div class="goods-desc page-block">  
124 - <img class="service" src="http://static.dev.yohobuy.com/img/product/service.png" alt="">  
125 - <h1 class="title">  
126 - {{title}}  
127 - <span class="en-title">{{enTitle}}</span>  
128 - </h1>  
129 - {{#detail}}  
130 - <div class="detail table">  
131 - <div class="row">  
132 - <div class="column">编号：{{nubmer}}</div>  
133 - <div class="column">帽型：{{hatType}}</div>  
134 - </div>  
135 - <div class="row">  
136 - <div class="column">颜色：{{color}}</div>  
137 - <div class="column">帽檐：{{bongrace}}</div>  
138 - </div>  
139 - <div class="row">  
140 - <div class="column">类型：{{type}}</div>  
141 - <div class="column">细节：{{goodsDetail}}</div>  
142 - </div>  
143 - <div class="row">  
144 - <div class="column">性别：{{gender}}</div>  
145 - <div class="column">风格：{{style}}</div>  
146 - </div> 131 +<div class="gap-block"></div>
  132 +
  133 +{{#sizeInfo}}
  134 +<div class="size-info page-block">
  135 + <h1 class="title">
  136 + {{title}}
  137 + <span class="en-title">{{enTitle}}</span>
  138 +</h1>
  139 +{{#detail}}
  140 +<div class="detail">
  141 + <div class="swiper-container detail-swiper" id="size-swiper-container">
  142 + <div class="swiper-wrapper">
  143 + {{#list}}
  144 + <div class="swiper-slide blue-slide" >
  145 + <div class="size-name cell">{{name}}</div>
  146 + <div class="size-m cell">{{sizem}}</div>
  147 + <div class="size-xl cell">{{sizexl}}</div>
147 </div> 148 </div>
148 - {{/detail}}  
149 - </div>  
150 - {{/goodsDescription}} 149 + {{/list}}
  150 + </div>
  151 +</div>
  152 +<p class="tips">提示：左滑查看完整表格信息</p>
  153 +</div>
  154 +{{/detail}}
  155 +</div>
  156 +{{/sizeInfo}}
151 157
152 - <div class="gap-block"></div> 158 +<div class="gap-block"></div>
153 159
154 - {{#sizeInfo}}  
155 - <div class="size-info page-block">  
156 - <h1 class="title">  
157 - {{title}}  
158 - <span class="en-title">{{enTitle}}</span>  
159 - </h1>  
160 - {{#detail}}  
161 - <div class="detail">  
162 - <div class="swiper-container detail-swiper" id="size-swiper-container">  
163 - <div class="swiper-wrapper">  
164 - {{#list}}  
165 - <div class="swiper-slide blue-slide" >  
166 - <div class="size-name cell">{{name}}</div>  
167 - <div class="size-m cell">{{sizem}}</div>  
168 - <div class="size-xl cell">{{sizexl}}</div>  
169 - </div>  
170 - {{/list}}  
171 - </div> 160 +{{#measurementMethod}}
  161 +<div class="measurement-method page-block">
  162 + <h1 class="title">
  163 + {{title}}
  164 + <span class="en-title">{{enTitle}}</span>
  165 + </h1>
  166 + {{#detail}}
  167 + <div class="detail" style="width:100%">
  168 + <img class="lazy" data-original="{{img}}" alt="">
  169 + <div class="right-part">
  170 + <div class="title">
  171 + <h1 >{{sort}}</h1>
  172 + <span>{{enSort}}</span>
172 </div> 173 </div>
173 - <p class="tips">提示：左滑查看完整表格信息</p>  
174 - </div>  
175 - {{/detail}}  
176 - </div>  
177 - {{/sizeInfo}}  
178 -  
179 - <div class="gap-block"></div>  
180 -  
181 - {{#measurementMethod}}  
182 - <div class="measurement-method page-block">  
183 - <h1 class="title">  
184 - {{title}}  
185 - <span class="en-title">{{enTitle}}</span>  
186 - </h1>  
187 - {{#detail}}  
188 - <div class="detail" style="width:100%">  
189 - <img src="{{img}}" alt="">  
190 - <div class="right-part">  
191 - <div class="title">  
192 - <h1 >{{sort}}</h1>  
193 - <span>{{enSort}}</span>  
194 - </div>  
195 - <ul class="items">  
196 - {{#each items}}  
197 - <li>  
198 - <span>{{@index}}</span>  
199 - {{this}}</li>  
200 - {{/items}} 174 + <ul class="items">
  175 + {{#each items}}
  176 + <li>
  177 + <span>{{@index}}</span>
  178 + {{this}}</li>
  179 + {{/items}}
201 </ul> 180 </ul>
202 </div> 181 </div>
203 </div> 182 </div>
204 {{/detail}} 183 {{/detail}}
205 - </div>  
206 - {{/measurementMethod}} 184 + </div>
  185 + {{/measurementMethod}}
207 186
208 - <div class="gap-block"></div> 187 + <div class="gap-block"></div>
209 188
210 - {{#reference}}  
211 - <div class="size-info page-block">  
212 - <h1 class="title"> 189 + {{#reference}}
  190 + <div class="size-info page-block">
  191 + <h1 class="title">
213 {{title}} 192 {{title}}
214 <span class="en-title">{{enTitle}}</span> 193 <span class="en-title">{{enTitle}}</span>
215 </h1> 194 </h1>
216 {{#detail}} 195 {{#detail}}
217 <div class="detail"> 196 <div class="detail">
218 - <div class="swiper-container detail-swiper" id="reference-swiper-container">  
219 - <div class="swiper-wrapper">  
220 - {{#list}}  
221 - {{#if @first}}  
222 - <div class="swiper-slide first-group" >  
223 - <div class="model-field" >{{fieldName}}</div>  
224 - <div class="first-model">  
225 - <img src="{{firstModel}}" alt="">  
226 - </div>  
227 - <div class="second-model">  
228 - <img src="{{secondModel}}" alt="">  
229 - </div>  
230 - </div>  
231 - {{^}}  
232 - <div class="swiper-slide" >  
233 - <div class="model-field cell">{{fieldName}}</div>  
234 - <div class="first-model cell">{{firstModel}}</div>  
235 - <div class="second-model cell">{{secondModel}}</div>  
236 - </div>  
237 - {{/if}}  
238 - {{/list}} 197 + <div class="swiper-container detail-swiper" id="reference-swiper-container">
  198 + <div class="swiper-wrapper">
  199 + {{#list}}
  200 + {{#if @first}}
  201 + <div class="swiper-slide first-group" >
  202 + <img class="lazy avatar" data-original="{{firstModel}}" alt="">
  203 + <img class="lazy avatar" data-original="{{secondModel}}" alt="">
239 </div> 204 </div>
  205 + {{^}}
  206 + <div class="swiper-slide" >
  207 + <div class="model-field cell">{{fieldName}}</div>
  208 + <div class="first-model cell">{{firstModel}}</div>
  209 + <div class="second-model cell">{{secondModel}}</div>
  210 + </div>
  211 + {{/if}}
  212 + {{/list}}
240 </div> 213 </div>
241 - <p class="tips">提示:左滑查看完整表格信息</p>  
242 - </div>  
243 - {{/detail}}  
244 - </div>  
245 - {{/reference}}  
246 -  
247 - <div class="gap-block"></div>  
248 -  
249 - {{#materials}}  
250 - <div class="materials page-block">  
251 - <h1 class="title">  
252 - {{title}}  
253 - <span class="en-title">{{enTitle}}</span>  
254 - </h1>  
255 - <div class="detail">  
256 - <img src="{{img}}" alt="">  
257 - <p class="material-desc"> 214 + </div>
  215 + <p class="tips">提示:左滑查看完整表格信息</p>
  216 + </div>
  217 + {{/detail}}
  218 +</div>
  219 +{{/reference}}
258 220
259 - {{desc}}  
260 - </p> 221 +<div class="gap-block"></div>
261 222
262 - </div>  
263 - <img src="{{materialType}}" alt="" class="material-type">  
264 - </div>  
265 - {{/materials}} 223 +{{#materials}}
  224 +<div class="materials page-block">
  225 + <h1 class="title">
  226 + {{title}}
  227 + <span class="en-title">{{enTitle}}</span>
  228 +</h1>
  229 +<div class="detail">
  230 + <img class="lazy" data-original="{{img}}" alt="">
  231 + <p class="material-desc">
  232 + {{desc}}
  233 + </p>
  234 +</div>
  235 +<img class="lazy material-type" data-original="{{materialType}}" alt="" >
  236 +</div>
  237 +{{/materials}}
266 238
267 - <div class="gap-block"></div> 239 +<div class="gap-block"></div>
268 240
269 - {{#productDetail}}  
270 - <div class="product-detail page-block">  
271 - <h1 class="title">  
272 - {{title}}  
273 - <span class="en-title">{{enTitle}}</span>  
274 - </h1>  
275 - <div class="detail">  
276 - <p>{{desc}}</p>  
277 - <img src="{{img}}" alt="">  
278 - </div>  
279 - </div>  
280 - {{/productDetail}}  
281 - 241 +{{#productDetail}}
  242 +<div class="product-detail page-block">
  243 + <h1 class="title">
  244 + {{title}}
  245 + <span class="en-title">{{enTitle}}</span>
  246 +</h1>
  247 +<div class="detail">
  248 + <p>{{desc}}</p>
  249 + <img class="lazy" data-original="{{img}}" alt="">
  250 +</div>
  251 +</div>
  252 +{{/productDetail}}
282 253
283 - {{#cartInfo}}  
284 - <div class="cart-bar">  
285 - <span class="num-tag">{{numInCart}}</span>  
286 - <a href="" class="num-incart"></a>  
287 - <a href="" class="addto-cart">加入购物车</a>  
288 - <a href="" class="favorite"></a>  
289 - </div>  
290 - {{/cartInfo}} 254 +{{#cartInfo}}
  255 +<div class="cart-bar">
  256 + <span class="num-tag">{{numInCart}}</span>
  257 + <a href="" class="num-incart iconfont">&#xe62c;</a>
  258 + <a href="" class="addto-cart ">加入购物车</a>
  259 + <a href="" class="favorite iconfont">&#xe605;</a>
  260 +</div>
  261 +{{/cartInfo}}
291 </div> 262 </div>
292 {{> layout/footer}} 263 {{> layout/footer}}
@@ -105,7 +105,7 @@ SHOE BQT KEN BLOCK', @@ -105,7 +105,7 @@ SHOE BQT KEN BLOCK',
105 105
106 'sizeInfo'=>array( 106 'sizeInfo'=>array(
107 'title' => '尺码信息', 107 'title' => '尺码信息',
108 - 'enTitle' =>'SIZE INFO', 108 + 'enTitle' =>'xSIZE INFO',
109 109
110 'detail' =>array( 110 'detail' =>array(
111 'list'=>array( 111 'list'=>array(
@@ -169,7 +169,7 @@ SHOE BQT KEN BLOCK', @@ -169,7 +169,7 @@ SHOE BQT KEN BLOCK',
169 'detail' =>array( 169 'detail' =>array(
170 'list'=>array( 170 'list'=>array(
171 array( 171 array(
172 - 'fieldName'=>' ', 172 + 'fieldName'=>'1 ',
173 'firstModel'=>'http://static.dev.yohobuy.com/img/product/avatar1.png', 173 'firstModel'=>'http://static.dev.yohobuy.com/img/product/avatar1.png',
174 'secondModel' =>'http://static.dev.yohobuy.com/img/product/avatar2.png' 174 'secondModel' =>'http://static.dev.yohobuy.com/img/product/avatar2.png'
175 ), 175 ),