fe / YOHOBUYWAP · Commits

Go to a project

Authored by unknown
Commit 81ccd868b156b1776d363a22c76766f6485c5beb 1 parent 49503d94

girls前两部分

Inline Side-by-side
Showing 13 changed files with 648 additions and 141 deletions
1 {{> layout/header}} 1 {{> layout/header}}
2 -<div class="home-page yoho-page"> 2 +<div class="home-page yoho-page" data-page="boys">
3 {{# boy}} 3 {{# boy}}
4 4
5 {{! 头部banner}} 5 {{! 头部banner}}
6 {{# slide}} 6 {{# slide}}
7 - <div class="slide-container">  
8 - <div class="big-slide">  
9 - <ul>  
10 - {{# bigSlide}}  
11 - <li>  
12 - <a href="{{href}}">  
13 - <img class="lazy" data-original="{{img}}" alt="">  
14 - </a>  
15 - </li>  
16 - {{/ bigSlide}}  
17 - </ul>  
18 - <div class="slide-switch">  
19 - <a class="prev" href="javascript:;">  
20 - <span class="iconfont">&#xe60c;</span>  
21 - </a>  
22 - <a class="next" href="javascript:;">  
23 - <span class="iconfont">&#xe60b;</span>  
24 - </a>  
25 - </div>  
26 - </div>  
27 -  
28 - {{#if smallSlide}}  
29 - <div class="small-slide">  
30 - <ul class="clearfix">  
31 - {{# smallSlide}}  
32 - <li>  
33 - <a href="{{href}}"></a>  
34 - <img src="{{img}}" alt="">  
35 - </li>  
36 - {{/ smallSlide}}  
37 - </ul>  
38 - </div>  
39 - {{/if}}  
40 - </div> 7 + {{>index/slide-banner}}
41 {{/ slide}} 8 {{/ slide}}
42 9
43 {{! 新品速报}} 10 {{! 新品速报}}
@@ -70,7 +37,7 @@ @@ -70,7 +37,7 @@
70 {{/ newReport}} 37 {{/ newReport}}
71 38
72 {{! 优选品牌}} 39 {{! 优选品牌}}
73 - {{# preferenceBrand}} 40 + {{# preferenceBrands}}
74 <div class="preference-brand"> 41 <div class="preference-brand">
75 {{> index/floor-header}} 42 {{> index/floor-header}}
76 <div class="img-brand"> 43 <div class="img-brand">
@@ -94,7 +61,7 @@ @@ -94,7 +61,7 @@
94 </div> 61 </div>
95 <div class="logo-brand"></div> 62 <div class="logo-brand"></div>
96 </div> 63 </div>
97 - {{/ preferenceBrand}} 64 + {{/ preferenceBrands}}
98 65
99 {{! 单品/广告}} 66 {{! 单品/广告}}
100 {{# singlehot}} 67 {{# singlehot}}
1 {{> layout/header}} 1 {{> layout/header}}
2 -<div class="home-page yoho-page">  
3 - girls 2 +<div class="home-page yoho-page" data-page="girls">
  3 + {{# girl}}
  4 +
  5 + {{! 头部banner}}
  6 + {{# debrisSlider}}
  7 + <div class="debris-slider clearfix">
  8 + <div class="left-col col">
  9 + {{# left}}
  10 + <a href="{{href}}">
  11 + <img class="lazy" data-original="{{img}}">
  12 + </a>
  13 + {{/ left}}
  14 + </div>
  15 + <div class="center-col col">
  16 + <ul class="slide-wrapper">
  17 + {{# center}}
  18 + <li>
  19 + <a href="{{href}}">
  20 + <img class="lazy" data-original="{{img}}">
  21 + </a>
  22 + </li>
  23 + {{/ center}}
  24 + </ul>
  25 + <div class="slide-switch">
  26 + <a class="prev" href="javascript:;">
  27 + <span class="iconfont">&#xe60c;</span>
  28 + </a>
  29 + <a class="next" href="javascript:;">
  30 + <span class="iconfont">&#xe60b;</span>
  31 + </a>
  32 + </div>
  33 + </div>
  34 + <div class="right-col col">
  35 + {{# right}}
  36 + <a href="{{href}}">
  37 + <img class="lazy" data-original="{{img}}">
  38 + </a>
  39 + {{/ right}}
  40 + </div>
  41 + </div>
  42 + {{/ debrisSlider}}
  43 +
  44 + {{! 优选品牌}}
  45 + {{# preferenceBrands}}
  46 + {{> index/preference-brand}}
  47 + {{/ preferenceBrands}}
  48 + {{/ girl}}
4 </div> 49 </div>
5 {{> layout/footer}} 50 {{> layout/footer}}
1 {{> layout/header}} 1 {{> layout/header}}
2 -<div class="home-page yoho-page">  
3 - kids 2 +<div class="home-page yoho-page" data-page="kids">
  3 +{{# kids}}
  4 + {{! 头部banner}}
  5 + {{# slide}}
  6 + {{>index/slide-banner}}
  7 + {{/ slide}}
  8 +{{/ kids}}
4 </div> 9 </div>
5 {{> layout/footer}} 10 {{> layout/footer}}
  1 +{{> index/floor-header}}
  2 +<div class="preference-brand">
  3 + <div class="img-slider-wrapper clearfix">
  4 + <div class="img-brand-switch">
  5 + <a class="prev iconfont" href="javascript:;">&#xe60f;</a>
  6 + <a class="next iconfont" href="javascript:;">&#xe60e;</a>
  7 + </div>
  8 + <div class="img-container-landscape">
  9 + <ul class="img-list">
  10 + {{# slider}}
  11 + <li class="img-item">
  12 + <a href="{{href}}"> <img src="{{img}}" alt="{{alt}}"></a>
  13 + </li>
  14 + {{/ slider}}
  15 + </ul>
  16 + </div>
  17 + </div>
  18 + <div class="preference-brand-list clearfix">
  19 + {{#list}}
  20 + <div class="preference-brand-item">
  21 + <a href="{{href}}">
  22 + <img class="lazy" data-original="{{img}}"></a>
  23 + </div>
  24 + {{/list}}
  25 + <a class="preference-more" href="{{moreBrands}}">MORE&gt;</a>
  26 + </div>
  27 +</div>
  1 +<div class="slide-container">
  2 + <div class="slide-wrapper">
  3 + <ul>
  4 + {{# list}}
  5 + <li>
  6 + <a href="{{href}}">
  7 + <img class="lazy" data-original="{{img}}" alt="">
  8 + </a>
  9 + </li>
  10 + {{/ list}}
  11 + </ul>
  12 + <div class="slide-switch">
  13 + <a class="prev" href="javascript:;">
  14 + <span class="iconfont">&#xe60c;</span>
  15 + </a>
  16 + <a class="next" href="javascript:;">
  17 + <span class="iconfont">&#xe60b;</span>
  18 + </a>
  19 + </div>
  20 + </div>
  21 +
  22 + {{#if pagination}}
  23 + <div class="thumb-pagination">
  24 + <ul class="clearfix">
  25 + {{# pagination}}
  26 + <li>
  27 + <a href="{{href}}"></a>
  28 + <img src="{{img}}" alt="">
  29 + </li>
  30 + {{/ pagination}}
  31 + </ul>
  32 + </div>
  33 + {{/if}}
  34 +</div>
@@ -2,26 +2,42 @@ var $ = require('yoho.jquery'), @@ -2,26 +2,42 @@ var $ = require('yoho.jquery'),
2 lazyLoad = require('yoho.lazyload'); 2 lazyLoad = require('yoho.lazyload');
3 3
4 (function($) { 4 (function($) {
5 - var LinkageSlider = function(element, options) { 5 + var Slider = function(element, options) {
6 this.$element = $(element); 6 this.$element = $(element);
7 - this.options = $.extend({}, $.fn.linkageSlider.defaults, options);  
8 - this.bigItem = this.$element.find('.big-slide').find('li');  
9 - this.smallItem = this.$element.find('.small-slide').find('li'); 7 + this.options = $.extend({}, $.fn.slider.defaults, options);
  8 + this.bigItem = this.$element.find('.slide-wrapper').find('li');
  9 + this.smallItem = null;
10 this.len = this.bigItem.size(); 10 this.len = this.bigItem.size();
11 this.index = 0; 11 this.index = 0;
12 this.timer = null; 12 this.timer = null;
13 this.init(); 13 this.init();
14 }; 14 };
15 15
16 - LinkageSlider.prototype = { 16 + Slider.prototype = {
17 init: function() { 17 init: function() {
  18 + if (!!this.options.pagination) {
  19 + this.smallItem = $(this.options.pagination).find('li');
  20 + } else {
  21 + this._createPage();
  22 + }
18 this._slideShow(); 23 this._slideShow();
  24 + this._bindEvent();
  25 + this._autoplay();
  26 + },
  27 + _createPage: function() {
  28 + var pageHtml = '<div class="slide-pagination"><div class="slide-pagination-inner">' +
  29 + '<div class="slide-shade"></div><div class="slide-pagination-last">',
  30 + i = 0;
  31 +
19 if (this.len <= 1) { 32 if (this.len <= 1) {
20 - this.$element.find('.slide-switch').hide();  
21 return; 33 return;
22 } 34 }
23 - this._bindEvent();  
24 - this._autoplay(); 35 + for (i = 0; i < this.len; i++) {
  36 + pageHtml += '<span></span>';
  37 + }
  38 + pageHtml += '</div></div></div>';
  39 + this.$element.append($(pageHtml));
  40 + this.smallItem = $('.slide-pagination-inner').find('span');
25 }, 41 },
26 _bindEvent: function() { 42 _bindEvent: function() {
27 var that = this; 43 var that = this;
@@ -70,6 +86,9 @@ var $ = require('yoho.jquery'), @@ -70,6 +86,9 @@ var $ = require('yoho.jquery'),
70 if ($img.attr('src') !== $img.data('original')) { 86 if ($img.attr('src') !== $img.data('original')) {
71 lazyLoad($img.trigger('appear')); 87 lazyLoad($img.trigger('appear'));
72 } 88 }
  89 + if (this.len > 1) {
  90 + this.$element.find('.slide-switch').addClass('show');
  91 + }
73 this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus'); 92 this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus');
74 this.bigItem.eq(this.index).fadeIn().siblings().fadeOut(); 93 this.bigItem.eq(this.index).fadeIn().siblings().fadeOut();
75 }, 94 },
@@ -82,22 +101,23 @@ var $ = require('yoho.jquery'), @@ -82,22 +101,23 @@ var $ = require('yoho.jquery'),
82 }, this.options.time); 101 }, this.options.time);
83 } 102 }
84 }; 103 };
85 - $.fn.linkageSlider = function(option) { 104 + $.fn.slider = function(option) {
86 return this.each(function() { 105 return this.each(function() {
87 var $this = $(this), 106 var $this = $(this),
88 - data = $this.data('linkageSlider'), 107 + data = $this.data('Slider'),
89 options = typeof option === 'object' && option; 108 options = typeof option === 'object' && option;
90 109
91 if (!data) { 110 if (!data) {
92 - $this.data('linkageSlider', (data = new LinkageSlider(this, options))); 111 + $this.data('Slider', (data = new Slider(this, options)));
93 } 112 }
94 if (typeof option === 'string') { 113 if (typeof option === 'string') {
95 data[option](); 114 data[option]();
96 } 115 }
97 }); 116 });
98 }; 117 };
99 - $.fn.linkageSlider.Constructor = LinkageSlider;  
100 - $.fn.linkageSlider.defaults = {  
101 - time: 5000 118 + $.fn.slider.Constructor = Slider;
  119 + $.fn.slider.defaults = {
  120 + time: 5000,
  121 + pagination: null
102 }; 122 };
103 })($); 123 })($);
@@ -6,11 +6,11 @@ @@ -6,11 +6,11 @@
6 6
7 7
8 var $ = require('yoho.jquery'); 8 var $ = require('yoho.jquery');
9 -var $yohocookie = require('../plugin/yohocookie');  
10 -var $yohocart = require('../plugin/yohocart');  
11 var yohodoT = require('../plugin/yohodoT'); 9 var yohodoT = require('../plugin/yohodoT');
12 -  
13 var noticeSuccess = false; 10 var noticeSuccess = false;
  11 +
  12 +require('../plugin/yohocookie');
  13 +require('../plugin/yohocart');
14 /** 14 /**
15 * 获取头部banner的回调函数 15 * 获取头部banner的回调函数
16 * @param {[type]} data [description] 16 * @param {[type]} data [description]
@@ -560,7 +560,7 @@ function loadCartData() { @@ -560,7 +560,7 @@ function loadCartData() {
560 } 560 }
561 if ($('#miniCartBox .goods-list li').length < 1) { 561 if ($('#miniCartBox .goods-list li').length < 1) {
562 shoppingInfo = $.cookie('_g'); 562 shoppingInfo = $.cookie('_g');
563 - shoppingData = JSON.parse('(' + shoppingInfo + ')'); 563 + shoppingData = eval('(' + shoppingInfo + ')');
564 if (shoppingData !== null) { 564 if (shoppingData !== null) {
565 strK = '{"_k":"' + shoppingData._k + '","_nac":0' + ',"_ac":0,"_r":0}'; 565 strK = '{"_k":"' + shoppingData._k + '","_nac":0' + ',"_ac":0,"_r":0}';
566 $.setcookie('_g', strK, { 566 $.setcookie('_g', strK, {
@@ -588,7 +588,7 @@ function delCartGoods(id, isreduce) { @@ -588,7 +588,7 @@ function delCartGoods(id, isreduce) {
588 isreduce: isreduce 588 isreduce: isreduce
589 }, function(jsonData) { 589 }, function(jsonData) {
590 var shoppingInfo = $.cookie('_g'); 590 var shoppingInfo = $.cookie('_g');
591 - var shoppingData = JSON.parse('(' + shoppingInfo + ')'); 591 + var shoppingData = eval('(' + shoppingInfo + ')');
592 var strK = '{"_k":"' + shoppingData._k + '","_nac":' + jsonData.total_goods_num + ',"_ac":0,"_r":0}'; 592 var strK = '{"_k":"' + shoppingData._k + '","_nac":' + jsonData.total_goods_num + ',"_ac":0,"_r":0}';
593 593
594 $.setcookie('_g', strK, { 594 $.setcookie('_g', strK, {
@@ -803,8 +803,6 @@ exports.init = function() { @@ -803,8 +803,6 @@ exports.init = function() {
803 actionUpdateCartNum(); //更新购物车数量 803 actionUpdateCartNum(); //更新购物车数量
804 actionLoopUpdCartNum(); //循环检测购物车数量 804 actionLoopUpdCartNum(); //循环检测购物车数量
805 actionSearch(); //搜索执行 805 actionSearch(); //搜索执行
806 - delCartGoods();  
807 - clickMiniCartBox();  
808 - $yohocookie();  
809 - $yohocart(); 806 +
  807 +
810 }; 808 };
@@ -6,15 +6,26 @@ @@ -6,15 +6,26 @@
6 6
7 var $ = require('yoho.jquery'), 7 var $ = require('yoho.jquery'),
8 Handlebars = require('yoho.handlebars'), 8 Handlebars = require('yoho.handlebars'),
9 - lazyLoad = require('yoho.lazyload'); 9 + lazyLoad = require('yoho.lazyload'),
  10 + homePage = $('.home-page').data('page');
10 11
11 -require('../common/linkage-slider'); 12 +require('../common/slider');
12 require('../common/slider2'); 13 require('../common/slider2');
13 require('../common/new-arrivls'); 14 require('../common/new-arrivls');
14 15
15 lazyLoad($('img.lazy')); 16 lazyLoad($('img.lazy'));
16 -$('.slide-container').linkageSlider();  
17 -$('.img-brand').slider2(); 17 +if (homePage === 'boys') {
  18 + $('.slide-container').slider({
  19 + pagination: '.thumb-pagination'
  20 + });
  21 + $('.img-brand').slider2();
  22 +} else if (homePage === 'girls') {
  23 + $('.center-col').slider();
  24 +} else {
  25 + $('.slide-container').slider();
  26 +}
  27 +$('.center-col').slider();
  28 +$('.img-slider-wrapper').slider2();
18 29
19 30
20 $.ajax({ 31 $.ajax({
1 1
2 -var jQuery = require('jquery'); 2 +var jQuery = require('yoho.jquery');
3 var $yohocookie = require('./yohocookie'); 3 var $yohocookie = require('./yohocookie');
4 4
5 (function($) { 5 (function($) {
1 -var jQuery = require('jquery'); 1 +var jQuery = require('yoho.jquery');
2 2
3 (function($) { 3 (function($) {
4 $.extend({ 4 $.extend({
1 1
2 .home-page { 2 .home-page {
3 width: 1150px; 3 width: 1150px;
4 - margin: 0 auto;  
5 - 4 + margin: 10px auto 0;
  5 +
  6 + /*大banner*/
6 .slide-container { 7 .slide-container {
7 - margin: 10px 0 0; 8 + position: relative;
8 img { 9 img {
9 display: block; 10 display: block;
10 } 11 }
11 } 12 }
12 -  
13 - .big-slide { 13 +
  14 + /*大banner大图*/
  15 + .slide-wrapper {
14 position: relative; 16 position: relative;
15 height: 450px; 17 height: 450px;
16 overflow: hidden; 18 overflow: hidden;
@@ -21,8 +23,8 @@ @@ -21,8 +23,8 @@
21 } 23 }
22 24
23 &:hover { 25 &:hover {
24 - .slide-switch {  
25 - display: block; 26 + .slide-switch.show {
  27 + display: block;
26 } 28 }
27 } 29 }
28 30
@@ -38,46 +40,48 @@ @@ -38,46 +40,48 @@
38 display: block; 40 display: block;
39 } 41 }
40 } 42 }
  43 + }
  44 +
  45 + /*大图上的左右切换按钮*/
  46 + .slide-switch {
  47 + display: none;
  48 + /* @include opacity(0);
  49 + @include transition-property(opacity);
  50 + @include transition-duration(.2s);
  51 + @include transition-timing-function(ease-in); */
  52 + a {
  53 + position: absolute;
  54 + top: 50%;
  55 + margin: -30px 0 0;
  56 + width: 60px;
  57 + height: 60px;
  58 + line-height: 56px;
  59 + text-align: center;
  60 + z-index: 2;
  61 + background: #fff;
  62 + @include opacity(0.55);
41 63
42 - .slide-switch {  
43 - display: none;  
44 - /* @include opacity(0);  
45 - @include transition-property(opacity);  
46 - @include transition-duration(.2s);  
47 - @include transition-timing-function(ease-in); */  
48 - a {  
49 - position: absolute;  
50 - top: 50%;  
51 - margin: -30px 0 0;  
52 - width: 60px;  
53 - height: 60px;  
54 - line-height: 56px;  
55 - text-align: center;  
56 - z-index: 2;  
57 - background: #fff;  
58 - @include opacity(0.55);  
59 -  
60 - &.prev {  
61 - left: 0;  
62 - }  
63 -  
64 - &.next {  
65 - right: 0;  
66 - } 64 + &.prev {
  65 + left: 0;
  66 + }
67 67
68 - &:hover{  
69 - @include opacity(0.9);  
70 - }  
71 -  
72 - .iconfont {  
73 - font-size: 32px;  
74 - color: #59585a;  
75 - }  
76 - }  
77 - }  
78 - } 68 + &.next {
  69 + right: 0;
  70 + }
79 71
80 - .small-slide { 72 + &:hover{
  73 + @include opacity(0.9);
  74 + }
  75 +
  76 + .iconfont {
  77 + font-size: 32px;
  78 + color: #59585a;
  79 + }
  80 + }
  81 + }
  82 +
  83 + /*大banner缩略图*/
  84 + .thumb-pagination {
81 margin: 6px 0 0; 85 margin: 6px 0 0;
82 padding: 0 0 0 2px; 86 padding: 0 0 0 2px;
83 87
@@ -114,7 +118,122 @@ @@ -114,7 +118,122 @@
114 } 118 }
115 } 119 }
116 } 120 }
  121 +
  122 + /*大banner圆点*/
  123 + .slide-pagination {
  124 + position: absolute;
  125 + left: 0;
  126 + right: 0;
  127 + bottom: 12px;
  128 + text-align: center;
  129 + font-size: 0;
  130 + .slide-pagination-inner {
  131 + position: relative;
  132 + padding: 7px;
  133 + @include inline-block;
  134 + }
  135 + .slide-shade {
  136 + position: absolute;
  137 + left: 0;
  138 + right: 0;
  139 + top: 0;
  140 + bottom: 0;
  141 + background: #000;
  142 + @include opacity(0.3);
  143 + @include border-radius(13px);
  144 + }
  145 + span {
  146 + position: relative;
  147 + @include inline-block;
  148 + margin: 0 7px;
  149 + width: 12px;
  150 + height: 12px;
  151 + background: #fff;
  152 + cursor: pointer;
  153 + @include opacity(0.6);
  154 + @include border-radius(6px);
  155 + z-index: 2;
  156 +
  157 + &.focus {
  158 + @include opacity(1);
  159 + }
  160 + }
  161 + }
  162 +
  163 + /*女首碎片banner*/
  164 + .debris-slider {
  165 + width: 100%;
  166 +
  167 + .col {
  168 + float: left;
  169 +
  170 + a {
  171 + display: block;
  172 + }
  173 + }
  174 +
  175 + .left-col a,
  176 + .right-col a {
  177 + margin-bottom: 8px;
  178 +
  179 + &:last-child {
  180 + margin-bottom: 0;
  181 + }
  182 + }
  183 +
  184 + .right-col img,
  185 + .left-col img {
  186 + height: 100%;
  187 + width: 100%;
  188 + }
117 189
  190 + .left-col {
  191 + margin-right: 9px;
  192 +
  193 + a {
  194 + width: 240px;
  195 + height: 150px;
  196 + }
  197 +
  198 + a:first-child {
  199 + height: 230px;
  200 + }
  201 + }
  202 +
  203 + .center-col {
  204 + position: relative;
  205 + width: 492px;
  206 + height: 546px;
  207 + margin-right: 9px;
  208 + font-size: 0;
  209 +
  210 + &:hover {
  211 + .slide-switch.show {
  212 + display: block;
  213 + }
  214 + }
  215 +
  216 + .slide-wrapper {
  217 + height: 100%;
  218 + }
  219 +
  220 + img {
  221 + max-width: 100%;
  222 + max-height: 100%;
  223 + }
  224 + }
  225 +
  226 + .right-col a {
  227 + width: 240px;
  228 + height: 150px;
  229 + }
  230 +
  231 + .right-col a:first-child {
  232 + height: 388px;
  233 + }
  234 + }
  235 +
  236 + /*男首最新速报*/
118 .new-report { 237 .new-report {
119 img { 238 img {
120 display: block; 239 display: block;
@@ -146,7 +265,100 @@ @@ -146,7 +265,100 @@
146 overflow: hidden; 265 overflow: hidden;
147 } 266 }
148 } 267 }
  268 +
  269 + /*优选品牌*/
  270 + .preference-brand {
  271 + overflow: hidden;
  272 + }
  273 +
  274 + .preference-brand-list {
  275 + margin-top: 8px;
  276 + width: 998px;
  277 + }
  278 +
  279 + .preference-brand-item {
  280 + float: left;
  281 + margin-right: 7px;
  282 + margin-bottom: 8px;
149 283
  284 + a {
  285 + display: table-cell;
  286 + width: 159px;
  287 + height: 74px;
  288 + text-align: center;
  289 + vertical-align: middle;
  290 + }
  291 +
  292 + img {
  293 + display: block;
  294 + max-width: 100%;
  295 + max-height: 100%;
  296 + margin: 0 auto;
  297 + }
  298 + }
  299 +
  300 + .preference-more {
  301 + float: left;
  302 + width: 159px;
  303 + height: 74px;
  304 + line-height: 90px;
  305 + text-align: center;
  306 + color: black;
  307 + font-size: 16px;
  308 + }
  309 +
  310 + .img-slider-wrapper {
  311 + position: relative;
  312 + width: 100%;
  313 + height: 480px;
  314 + background: #8ae6e0;
  315 +
  316 + .img-brand-switch {
  317 + display: block;
  318 + a {
  319 + position: absolute;
  320 + top: 50%;
  321 + font-size: 36px;
  322 + color: #fff;
  323 +
  324 + &.next {
  325 + right: 30px;
  326 + }
  327 +
  328 + &.prev {
  329 + left: 30px;
  330 + }
  331 + }
  332 + }
  333 + }
  334 +
  335 + .img-container-landscape {
  336 + margin: 73px auto 0;
  337 + box-sizing: border-box;
  338 + width: 844px;
  339 + height: 370px;
  340 + overflow: hidden;
  341 +
  342 + .img-list {
  343 + width: 1000px;
  344 + height: 100%;
  345 + }
  346 +
  347 + .img-item {
  348 + float: left;
  349 + box-sizing: border-box;
  350 + width: 275px;
  351 + height: 100%;
  352 + margin-right: 9px;
  353 +
  354 + img {
  355 + width: 100%;
  356 + height: 100%;
  357 + }
  358 + }
  359 + }
  360 +
  361 + /*男首优选品牌 图片品牌*/
150 .img-brand { 362 .img-brand {
151 position: relative; 363 position: relative;
152 width: 100%; 364 width: 100%;
@@ -177,34 +389,39 @@ @@ -177,34 +389,39 @@
177 vertical-align: middle; 389 vertical-align: middle;
178 } 390 }
179 } 391 }
180 - .img-brand-switch {  
181 - display: none;  
182 - a {  
183 - position: absolute;  
184 - top: 50%;  
185 - margin: -20px 0 0;  
186 - width: 40px;  
187 - height: 40px;  
188 - line-height: 40px;  
189 - text-align: center;  
190 - z-index: 2;  
191 - background: #fff;  
192 - @include opacity(0.55);  
193 392
194 - &.prev {  
195 - left: 0;  
196 - }  
197 - &.next {  
198 - right: 0;  
199 - }  
200 - &:hover {  
201 - @include opacity(0.9); 393 + /*图片品牌左右切换按钮*/
  394 + .img-brand-switch {
  395 + display: none;
  396 + a {
  397 + position: absolute;
  398 + top: 50%;
  399 + margin: -20px 0 0;
  400 + width: 40px;
  401 + height: 40px;
  402 + line-height: 40px;
  403 + text-align: center;
  404 + z-index: 2;
  405 + background: #fff;
  406 + @include opacity(0.55);
  407 +
  408 + &.prev {
  409 + left: 0;
  410 + }
  411 + &.next {
  412 + right: 0;
  413 + }
  414 + &:hover {
  415 + @include opacity(0.9);
202 416
203 - }  
204 - }  
205 - } 417 + }
  418 + }
  419 + }
206 } 420 }
  421 +
  422 +
207 423
  424 + /*男首优选品牌 logo品牌*/
208 .logo-brand { 425 .logo-brand {
209 width: 100%; 426 width: 100%;
210 height: 282px; 427 height: 282px;
@@ -472,6 +689,70 @@ @@ -472,6 +689,70 @@
472 } 689 }
473 690
474 @media screen and (min-width: 1150px) { 691 @media screen and (min-width: 1150px) {
  692 + .debris-slider {
  693 + .left-col {
  694 + margin-right: 10px;
  695 +
  696 + a {
  697 + width: 280px;
  698 + height: 176px;
  699 + }
  700 +
  701 + a:first-child {
  702 + height: 265px;
  703 + }
  704 + }
  705 +
  706 + .center-col {
  707 + width: 570px;
  708 + height: 633px;
  709 + margin-right: 10px;
  710 + }
  711 +
  712 + .right-col {
  713 + a {
  714 + width: 280px;
  715 + height: 176px;
  716 + }
  717 +
  718 + a:first-child {
  719 + height: 449px;
  720 + }
  721 + }
  722 + }
  723 + .img-slider-wrapper {
  724 + height: 558px;
  725 + }
  726 +
  727 + .img-container-landscape {
  728 + margin: 86px auto 0;
  729 + width: 982px;
  730 + height: 433px;
  731 +
  732 + .img-item {
  733 + width: 320px;
  734 + margin-right: 10px;
  735 + }
  736 + }
  737 +
  738 + .preference-brand-list {
  739 + width: 1158px;
  740 + }
  741 +
  742 + .preference-brand-item {
  743 + margin-right: 8px;
  744 +
  745 + a {
  746 + width: 185px;
  747 + height: 86px;
  748 + }
  749 + }
  750 +
  751 + .preference-more {
  752 + width: 185px;
  753 + height: 86px;
  754 + line-height: 100px;
  755 + }
475 .floor-header { 756 .floor-header {
476 margin: 80px 0 40px; 757 margin: 80px 0 40px;
477 758
@@ -261,7 +261,7 @@ class BoysController extends AbstractAction @@ -261,7 +261,7 @@ class BoysController extends AbstractAction
261 'boy' => array( 261 'boy' => array(
262 array( 262 array(
263 'slide' => array( 263 'slide' => array(
264 - 'bigSlide' => array( 264 + 'list' => array(
265 array( 265 array(
266 'href' => '/?gender=1,3', 266 'href' => '/?gender=1,3',
267 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/26/12/01c3b99f554ad50d9e5a9900719715c94c.jpg' 267 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/26/12/01c3b99f554ad50d9e5a9900719715c94c.jpg'
@@ -295,7 +295,7 @@ class BoysController extends AbstractAction @@ -295,7 +295,7 @@ class BoysController extends AbstractAction
295 'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg' 295 'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg'
296 ) 296 )
297 ), 297 ),
298 - 'smallSlide' => array( 298 + 'pagination' => array(
299 array( 299 array(
300 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3', 300 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
301 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/11/26/12/024a810cfa89d67569c6c3bacedba8869a.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90' 301 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/11/26/12/024a810cfa89d67569c6c3bacedba8869a.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
@@ -371,7 +371,7 @@ class BoysController extends AbstractAction @@ -371,7 +371,7 @@ class BoysController extends AbstractAction
371 ) 371 )
372 ), 372 ),
373 array( 373 array(
374 - 'preferenceBrand' => array( 374 + 'preferenceBrands' => array(
375 'name' => '优选品牌 BRAND', 375 'name' => '优选品牌 BRAND',
376 'imgBrand' => array( 376 'imgBrand' => array(
377 array( 377 array(
@@ -216,6 +216,125 @@ class GirlsController extends AbstractAction @@ -216,6 +216,125 @@ class GirlsController extends AbstractAction
216 'headerdata' => $headerdata, 216 'headerdata' => $headerdata,
217 'boysHomePage' => true, 217 'boysHomePage' => true,
218 'girl' => array( 218 'girl' => array(
  219 + array(
  220 + 'debrisSlider' => array(
  221 + 'left' => array(
  222 + array(
  223 + 'href' => '/?gender=1,3',
  224 + 'img' => 'http://img13.static.yhbimg.com/adpic/2014/07/21/15/0210a3490eae2aad6ef8bf3b8133a49ca9.jpg'
  225 + ),
  226 + array(
  227 + 'href' => '/?gender=1,3',
  228 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/07/03/05/0228d8379c3d1f2fcde8ea01da2bc6c003.jpg'
  229 + ),
  230 + array(
  231 + 'href' => '/?gender=1,3',
  232 + 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/07/02/16/01b995aa117bd227bca14ccc93743bf4a2.jpg'
  233 + )
  234 + ),
  235 + 'center' => array(
  236 + array(
  237 + 'href' => '/?gender=1,3',
  238 + 'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/09/017932663fa898878c016ee6f2793e7efc.jpg?imageView/1/w/570/h/633'
  239 + ),
  240 + array(
  241 + 'href' => '/?gender=1,3',
  242 + 'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/12/03/06/013fc735bae24cbc92c0e9a98831a187d2.jpg?imageView/1/w/570/h/633'
  243 + )
  244 + ),
  245 + 'right' => array(
  246 + array(
  247 + 'href' => '/?gender=1,3',
  248 + 'img' => 'http://img11.static.yhbimg.com/taobaocms/2015/07/05/01/01b677be6bef92f988f04827db5f829488.jpg'
  249 + ),
  250 + array(
  251 + 'href' => '/?gender=1,3',
  252 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/07/03/10/02b8e3e89792b83c0a997a8d3712257f0e.gif'
  253 + )
  254 + )
  255 + )
  256 + ),
  257 + array(
  258 + 'preferenceBrands' => array(
  259 + 'name' => '优选品牌 BRAND',
  260 + 'slider' => array(
  261 + array(
  262 + 'href' => 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
  263 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/0240f288725106b408d8c524b4d0fba4b9.jpg'
  264 + ),
  265 + array(
  266 + 'href' => 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
  267 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
  268 + ),
  269 + array(
  270 + 'href' => 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
  271 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
  272 + ),
  273 + array(
  274 + 'href' => 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
  275 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
  276 + ),
  277 + array(
  278 + 'href' => 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
  279 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
  280 + ),
  281 + array(
  282 + 'href' => 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
  283 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
  284 + ),
  285 + array(
  286 + 'href' => 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
  287 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
  288 + ),
  289 + ),
  290 + 'list' => array(
  291 + array(
  292 + 'href' => '',
  293 + 'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
  294 + ),
  295 + array(
  296 + 'href' => '',
  297 + 'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
  298 + ),
  299 + array(
  300 + 'href' => '',
  301 + 'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
  302 + ),
  303 + array(
  304 + 'href' => '',
  305 + 'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
  306 + ),
  307 + array(
  308 + 'href' => '',
  309 + 'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
  310 + ),
  311 + array(
  312 + 'href' => '',
  313 + 'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
  314 + ),
  315 + array(
  316 + 'href' => '',
  317 + 'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
  318 + ),
  319 + array(
  320 + 'href' => '',
  321 + 'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
  322 + ),
  323 + array(
  324 + 'href' => '',
  325 + 'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
  326 + ),
  327 + array(
  328 + 'href' => '',
  329 + 'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
  330 + ),
  331 + array(
  332 + 'href' => '',
  333 + 'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
  334 + )
  335 + )
  336 + )
  337 + )
219 ) 338 )
220 ); 339 );
221 $this->_view->display('index', $data); 340 $this->_view->display('index', $data);