fe / YOHOBUYWAP · Commits

Go to a project

Authored by weiqingting
Commit 9f4ab7a8619f18a870fe8c1075eaaec70facc58f 1 parent 29fdd709

兼容990

Inline Side-by-side
Showing 6 changed files with 373 additions and 250 deletions
@@ -70,7 +70,7 @@ @@ -70,7 +70,7 @@
70 {{! 广告}} 70 {{! 广告}}
71 {{# adbanner}} 71 {{# adbanner}}
72 <div class="adbanner"> 72 <div class="adbanner">
73 - <a class="impo{{@index}}" href="{{url}}"><img class="lazy" data-original="{{img}}"/></a> 73 + <a href="{{url}}"><img class="lazy" data-original="{{img}}"/></a>
74 </div> 74 </div>
75 {{/ adbanner}} 75 {{/ adbanner}}
76 76
1 {{> index/floor-header}} 1 {{> index/floor-header}}
2 -<div class="slide-accordion">  
3 - <div class="slide-list"> 2 +<div class="slide-accordion clearfix">
4 <ul> 3 <ul>
5 {{#each slide}} 4 {{#each slide}}
6 <li><a title="{{name}}" href="{{href}}"><img class="lazy" data-original="{{img}}"/></a></li> 5 <li><a title="{{name}}" href="{{href}}"><img class="lazy" data-original="{{img}}"/></a></li>
7 {{/each}} 6 {{/each}}
8 </ul> 7 </ul>
9 - </div>  
10 </div> 8 </div>
11 9
1 var Slide = require('./yohoui/YH.slide'); 1 var Slide = require('./yohoui/YH.slide');
2 var $ = require('yoho.jquery'); 2 var $ = require('yoho.jquery');
3 3
4 -var $contain = $('.slide-list', '.slide-accordion'); 4 +var $contain = $('.slide-accordion');
5 var $item = $contain.find('li'); 5 var $item = $contain.find('li');
6 6
7 -var $width = 650; 7 +var $width = $item.width();
  8 +var $spn=parseInt($('.home-page').width())==1150 ? (120 + 5) : (102 + 5);
8 var slide; 9 var slide;
9 -  
10 function switchfun(to) { 10 function switchfun(to) {
11 $item.each(function(index) { 11 $item.each(function(index) {
12 if (index <= to) { 12 if (index <= to) {
13 $(this).stop().animate({ 13 $(this).stop().animate({
14 - left: index * (120 + 5) 14 + left: index * $spn
15 }); 15 });
16 } else { 16 } else {
17 $(this).stop().animate({ 17 $(this).stop().animate({
18 - left: (to) * (120 + 5) + $width + (120 + 5) * (index - to - 1) 18 + left: (to) * $spn + $width + $spn * (index - to - 1)
19 }); 19 });
20 } 20 }
21 }); 21 });
1 -.girls,.kids,.lifestyle{  
2 - .commodity{  
3 - .commodity-list{ 1 +/**
  2 +* 热门推荐模板样式
  3 +*/
  4 +.home-page{
  5 + //common样式
  6 + .tpl-recommend{
  7 + width: 100%;
  8 + position: relative;
  9 + a{
  10 + display: block;
  11 + img{display: block;width: 100%;height: 100%;}
  12 + }
  13 + .tpl-body{
  14 + margin-bottom:8px;
  15 + }
  16 + .tpl-nav{
  17 + float: left;
  18 + overflow: hidden;
  19 + .tpl-keywords{
  20 + margin-bottom: 8px;
  21 + }
  22 + .tpl-category{
  23 + padding: 10px 0;
  24 + }
  25 + .tpl-category{
  26 + padding: 10px 0;
  27 + background-color: #f8f8f8;
  28 + overflow: hidden;
  29 + a{
  30 + float: left;
  31 + width: 50%;
  32 + text-align: center;
  33 + color: #000;
  34 + overflow: hidden;
  35 + }
  36 + }
  37 + }
  38 + .tpl-brands{
  39 + float: left;
  40 + overflow: hidden;
  41 + margin-left: 8px;
4 li{ 42 li{
5 - width: 280px; 43 + margin-top: 8px;
  44 + }
  45 + }
  46 + .tpl-types{
  47 + float: left;
  48 + overflow: hidden;
  49 + margin-top: -8px;
  50 + li{
  51 + float: left;
  52 + margin-left: 8px;
  53 + margin-top: 8px;
  54 + }
  55 + }
  56 + .tpl-products{
  57 + overflow: hidden;
  58 + margin-left:-10px;
  59 + li{
  60 + float: left;
  61 + margin-left:10px;
  62 + }
  63 + }
  64 + //990样式
  65 +
  66 + .tpl-nav{
  67 + width: 158px;
  68 + .keywords0,.keywords1,.keywords2{
  69 + margin-bottom:8px;
  70 + height: 65px;
  71 + }
  72 + .keywords2{
  73 + margin-bottom:0px;
  74 + }
  75 + .tpl-category{
  76 + a{
  77 + height: 32px;
  78 + line-height: 32px;
  79 + font-size: 12px;
  80 + }
  81 + }
  82 + }
  83 + .tpl-brands{
  84 + width: 324px;
  85 + li a{
  86 + height: 212px;
  87 + }
  88 + }
  89 + .tpl-types{
  90 + width: 498px;
  91 + li a{
  92 + width: 158px;
  93 + height: 212px;
  94 + }
  95 + }
  96 + .tpl-products{
  97 + li a{
  98 + width: 190px;
  99 + height: 254px;
  100 + }
  101 + }
  102 + }
  103 +
  104 +}
  105 +
  106 +
  107 +
  108 +
  109 +/**
  110 +* 单品模板样式
  111 +*/
  112 +.home-page{
  113 + .singlehot{
6 a{ 114 a{
7 display: block; 115 display: block;
8 - width: 280px;  
9 - height: 465px;  
10 - position: relative; 116 + img{display: block;width: 100%;height: 100%;}
  117 + }
  118 + overflow: hidden;
  119 + margin-left:-8px;
  120 + li{
  121 + float: left;
  122 + margin-left:8px;
  123 + margin-bottom:8px;
  124 + }
  125 + }
  126 + .singlehot{
  127 + li a{
  128 + width: 158px;
  129 + height: 212px;
  130 + }
  131 + .impo1,.impo9{
  132 + width: 323px;
  133 + }
  134 + }
  135 + .adbanner{
  136 + a{
  137 + display: block;
  138 + img{display: block;width: 100%;height: 100%;}
  139 + }
  140 + a{
  141 + height: 129px;
  142 + }
  143 + }
  144 +}
  145 +
  146 +/**
  147 +* 新品上架模板样式
  148 +*/
  149 +.home-page{
  150 + .commodity{
  151 + a{
  152 + display: block;
  153 + img{display: block;width: 100%;height: 100%;}
  154 + }
  155 + .commodity-list{
  156 + margin-left: -10px;
  157 + li{
  158 + float: left;
  159 + margin-left: 10px;
11 } 160 }
12 i{ 161 i{
13 position: absolute; 162 position: absolute;
@@ -22,64 +171,244 @@ @@ -22,64 +171,244 @@
22 } 171 }
23 i.top{ 172 i.top{
24 position: absolute; 173 position: absolute;
25 - width: 60px;  
26 - height: 60px;  
27 top: 10px; 174 top: 10px;
28 right: 10px; 175 right: 10px;
29 - line-height: 60px;  
30 background-color: rgb(255,87,92); 176 background-color: rgb(255,87,92);
31 - font-size: 20px;  
32 color: #fff; 177 color: #fff;
33 border-radius: 30px; 178 border-radius: 30px;
34 } 179 }
35 .commodity-img{ 180 .commodity-img{
36 - img{  
37 - width: 280px;  
38 - height: 374px; 181 + position: relative;
39 } 182 }
  183 + p.commodity-name{
  184 + font-size: 12px;
  185 + color: #000;
  186 + text-align: center;
  187 + margin-top: 14px;
  188 + line-height: 18px;
40 } 189 }
  190 + p.commodity-price{
  191 + position: relative;
  192 + margin: 3px 0 0 0;
  193 + text-align: center;
  194 + line-height: 20px;
  195 + color: #000;
  196 + span{
  197 + display: inline-block;
  198 + font-size: 12px;
41 } 199 }
42 } 200 }
43 } 201 }
44 -}  
45 -.boys{  
46 - .commodity-list i{  
47 - position: absolute; 202 + .commodity-brands{
  203 + margin-left: -8px;
  204 + a{
  205 + float: left;
  206 + margin-left: 8px;
  207 + display: block;
  208 + }
  209 + }
  210 + .loading{
  211 + position: relative;
  212 + width: 100%;
  213 + text-align: center;
  214 + font-size: 16px;
48 top: -20px; 215 top: -20px;
  216 + }
  217 + }
  218 + //990
  219 + .commodity{
  220 + .commodity-list{
  221 + a{
  222 + height: 400px;
  223 + }
  224 + .commodity-img{
  225 + width: 240px;
  226 + height: 320px;
  227 + }
  228 + i.top{
  229 + height: 52px;
  230 + width: 52px;
  231 + line-height: 52px;
  232 + font-size: 14px;
  233 + }
  234 + }
  235 + .commodity-brands{
  236 + a{
  237 + width: 158px;
  238 + height: 74px;
  239 + }
  240 + }
  241 + }
  242 +}
  243 +
  244 +.home-page{
  245 + .slide-accordion{
  246 + overflow: hidden;
  247 + height: 342px;
  248 + position: relative;
  249 + a{
49 display: block; 250 display: block;
50 - width: 64px;  
51 - height: 20px; 251 + img{display: block;width: 100%;height: 100%;}
52 } 252 }
53 - .tpl-keywords{ 253 + ul{
  254 + position: absolute;
  255 + left: -5px;
  256 + }
  257 + li{
  258 + position: absolute;
  259 + a{
  260 + width: 558px;
  261 + height: 342px;
  262 + border-left: 5px solid #fff;
  263 + }
  264 + }
  265 + }
  266 +}
  267 +
  268 +.boys{
  269 + .tpl-nav{
54 .keywords0{ 270 .keywords0{
55 - img{  
56 - height: 152px; 271 + margin-bottom: 8px!important;
  272 + height: 130px!important;
57 } 273 }
  274 + .keywords1{
  275 + margin-bottom:0px!important;
  276 + height: 74px!important;
  277 + }
  278 + }
  279 + .tpl-brands{
  280 + margin-top:-8px!important;
  281 + }
  282 + .commodity{
  283 + .commodity-list{
  284 + a{
  285 + height: 360px!important;
  286 + }
  287 + .commodity-img{
  288 + width: 188px!important;
  289 + height: 255px!important;
  290 + }
  291 + i.top{
  292 + height: 52px!important;
  293 + width: 52px!important;
  294 + line-height: 52px!important;
  295 + font-size: 14px!important;
  296 + }
  297 + }
  298 + }
  299 +}
  300 +
  301 +
  302 +
  303 +
  304 +
  305 +//1150样式
  306 +@media screen and (min-width: 1150px) {
  307 + .home-page{
  308 + .tpl-recommend{
  309 + .tpl-nav{
  310 + width: 185px;
  311 + .keywords0{
58 margin-bottom: 10px; 312 margin-bottom: 10px;
  313 + height: 152px;
59 } 314 }
60 .keywords1{ 315 .keywords1{
61 - img{  
62 height: 86px; 316 height: 86px;
63 } 317 }
  318 + .tpl-category{
  319 + a{
  320 + height: 38px;
  321 + line-height: 38px;
  322 + font-size: 14px;
  323 + }
  324 + }
  325 + }
  326 + .tpl-brands{
  327 + width: 378px;
  328 + li a{
  329 + height: 248px;
  330 + }
  331 + }
  332 + .tpl-types{
  333 + width: 579px;
  334 + li a{
  335 + width: 185px;
  336 + height: 248px;
  337 + }
  338 + }
  339 + .tpl-products{
  340 + li a{
  341 + width: 222px;
  342 + height: 298px;
  343 + }
  344 + }
  345 + }
  346 + .singlehot{
  347 + li a{
  348 + width: 185px;
  349 + height: 284px;
  350 + }
  351 + .impo1,.impo9{
  352 + width: 378px;
  353 + }
  354 + }
  355 + .adbanner{
  356 + margin-top:12px;
  357 + a{
  358 + height: 150px;
  359 + }
  360 + }
  361 + .commodity{
  362 + .commodity-list{
  363 + a{
  364 + height: 465px;
  365 + }
  366 + .commodity-img{
  367 + height: 374px;
  368 + width: 280px;
  369 + }
  370 + i.top{
  371 + height: 60px;
  372 + width: 60px;
  373 + line-height: 60px;
  374 + font-size: 20px;
  375 + }
  376 + }
  377 + .commodity-brands{
  378 + a{
  379 + width: 185px;
  380 + height: 86px;
  381 + }
  382 + }
  383 + }
  384 + .slide-accordion{
  385 + height: 400px;
  386 + li{
  387 + a{
  388 + width: 650px;
  389 + height: 400px;
  390 + }
  391 + }
64 } 392 }
65 } 393 }
66 394
67 -}  
68 -.girls{  
69 - .tpl-keywords{  
70 - img{  
71 - height: 76px !important; 395 + .boys{
  396 + .commodity{
  397 + .commodity-list{
  398 + a{
  399 + height: 408px!important;
72 } 400 }
73 - .keywords0{  
74 - margin-bottom: 10px; 401 + .commodity-img{
  402 + height: 298px!important;
  403 + width: 222px!important;
  404 + }
  405 + i.top{
  406 + height: 60px!important;
  407 + width: 60px!important;
  408 + line-height: 60px!important;
  409 + font-size: 20px!important;
75 } 410 }
76 - .keywords1{  
77 - margin-bottom: 10px;  
78 } 411 }
79 } 412 }
80 - .tpl-brands img{  
81 - height: 502px !important;  
82 - width: 100% !important;  
83 } 413 }
84 } 414 }
85 -@import "_slide-accordion";  
@@ -510,185 +510,7 @@ @@ -510,185 +510,7 @@
510 } 510 }
511 } 511 }
512 512
513 - .tpl-recommend{  
514 - width: 1150px;  
515 - overflow: hidden;  
516 - a{  
517 - display: block;  
518 - background-color: #f8f8f8;  
519 - img{display: block;width: 100%;}  
520 - }  
521 - .tpl-nav{  
522 - float: left;  
523 - width: 185px;  
524 - height: 512px;  
525 - overflow: hidden;  
526 - .tpl-keywords{  
527 - margin-bottom: 8px;  
528 - }  
529 - .tpl-category{  
530 - height: 228px;  
531 - padding: 10px 0;  
532 - background-color: #f8f8f8;  
533 - overflow: hidden;  
534 - a{  
535 - float: left;  
536 - width: 50%;  
537 - height: 38px;  
538 - line-height: 38px;  
539 - text-align: center;  
540 - color: #000;  
541 - font-size: 14px;  
542 - overflow: hidden;  
543 - }  
544 - }  
545 - }  
546 - .tpl-brands{  
547 - float: left;  
548 - margin-left: 8px;  
549 - width: 378px;  
550 - height: 512px;  
551 - overflow: hidden;  
552 - li{  
553 - margin-bottom: 8px;  
554 - img{  
555 - height: 248px;  
556 - width: 100%;  
557 - }  
558 - }  
559 513
560 - }  
561 - .tpl-types{  
562 - float: left;  
563 - width: 579px;  
564 - height: 512px;  
565 - overflow: hidden;  
566 - li{  
567 - float: left;  
568 - margin-left: 8px;  
569 - margin-bottom: 8px;  
570 - img{  
571 - width: 185px;  
572 - height:248px;  
573 - }  
574 - }  
575 - }  
576 - .tpl-products{  
577 -  
578 - height: 298px;  
579 - overflow: hidden;  
580 - margin-left:-10px;  
581 - li{  
582 - float: left;  
583 - margin-left:10px;  
584 - img{  
585 - width: 222px;  
586 - height: 298px;  
587 - }  
588 - }  
589 - }  
590 - }  
591 -  
592 - .commodity{  
593 - position: relative;  
594 - width: 1150px;  
595 - margin-bottom:80px;  
596 - .commodity-list{  
597 - margin-left: -10px;  
598 - li{  
599 - float: left;  
600 - margin-left: 10px;  
601 - a{  
602 - display: block;  
603 - height: 408px;  
604 - width: 222px;  
605 - }  
606 - .commodity-img{  
607 - position: relative;  
608 - img{  
609 - display: block;  
610 - height: 298px;  
611 - width: 222px;  
612 - }  
613 - }  
614 - p.commodity-name{  
615 - font-size: 12px;  
616 - color: #000;  
617 - text-align: center;  
618 - margin-top: 14px;  
619 - line-height: 18px;  
620 - }  
621 - p.commodity-price{  
622 - position: relative;  
623 - margin: 3px 0 0 0;  
624 - text-align: center;  
625 - line-height: 20px;  
626 - color: #000;  
627 - span{  
628 - display: inline-block;  
629 - font-size: 12px;  
630 - }  
631 - }  
632 - }  
633 - }  
634 - .commodity-brands{  
635 - margin-left: -8px;  
636 - a{  
637 - float: left;  
638 - margin-left: 8px;  
639 - width: 185px;  
640 - height: 86px;  
641 - display: block;  
642 - img{  
643 - display: block;  
644 - width: 185px;  
645 - height: 86px;  
646 - }  
647 - }  
648 - }  
649 - .loading{  
650 - position: absolute;  
651 - bottom: 0;  
652 - width: 100%;  
653 - text-align: center;  
654 - font-size: 20px;  
655 - }  
656 - }  
657 - .singlehot{  
658 - width: 1150px;  
659 - height: 584px;  
660 - overflow: hidden;  
661 - ul{  
662 - margin-left:-8px;  
663 - }  
664 - li{  
665 - float: left;  
666 - margin-left:8px;  
667 - margin-bottom:8px;  
668 - }  
669 - a{  
670 - display: block;  
671 - background-color: #f8f8f8;  
672 - img{  
673 - display: block;  
674 - width: 185px;  
675 - height: 284px;  
676 - }  
677 - }  
678 - .impo1 img,.impo9 img{  
679 - width: 378px;  
680 - }  
681 - }  
682 - .adbanner{  
683 - width: 100%;  
684 - height: 150px;  
685 - margin-top:12px;  
686 - img{  
687 - display: block;  
688 - width: 1150px;  
689 - height: 150px;  
690 - }  
691 - }  
692 514
693 .floor-header { 515 .floor-header {
694 position: relative; 516 position: relative;
@@ -734,5 +556,4 @@ @@ -734,5 +556,4 @@
734 556
735 } 557 }
736 558
737 -  
738 @import "_index-pliffy", "index1150"; 559 @import "_index-pliffy", "index1150";
1 -.slide-accordion{  
2 - .slide-list{  
3 - width: 1150px;  
4 - height: 400px;  
5 - overflow: hidden;  
6 - position: relative;  
7 - }  
8 - ul{  
9 - position: absolute;  
10 - left: -5px;  
11 - }  
12 - li{  
13 - position: absolute;  
14 - width: 650px;  
15 - height: 400px;  
16 - display: block;  
17 - border-left: 5px solid #fff;  
18 - img{  
19 - display: block;  
20 - width: 650px;  
21 - height: 400px;  
22 - }  
23 - }  
24 -}  
25 -