fe / yohobuy-node · Commits

Go to a project

Authored by 周少峰
Commit 03e44e5716de8e920cd6f4215494c45e8888e4ff 2 parents 50001ae6 e551e361

Merge branch 'feature/new-product-arrive' into 'release/5.4' 

Feature/new product arrive



See merge request !64
Inline Side-by-side
Showing 4 changed files with 132 additions and 574 deletions
@@ -153,14 +153,19 @@ const index = (req) => { @@ -153,14 +153,19 @@ const index = (req) => {
153 yh_channel: channelMap[channel].yh_channel, 153 yh_channel: channelMap[channel].yh_channel,
154 uid: req.user.uid || '' 154 uid: req.user.uid || ''
155 }; 155 };
  156 +
156 let shopParams = Object.assign({}, params, {contentCode: channelMap[channel].code}); 157 let shopParams = Object.assign({}, params, {contentCode: channelMap[channel].code});
157 - let recParams = Object.assign({}, params); 158 + let recParams = Object.assign({}, params, {
  159 + sort: req.query.sort || '',
  160 + page: req.query.page || 1
  161 + });
158 162
159 let apiMethod = [ 163 let apiMethod = [
160 headerModel.requestHeaderData(channel), 164 headerModel.requestHeaderData(channel),
161 api.recShop(shopParams), 165 api.recShop(shopParams),
162 api.recBrand(params), 166 api.recBrand(params),
163 - api.recList(recParams) 167 + api.recList(Object.assign({}, params)),//获取品类
  168 + api.recList(recParams)//获取商品数据
164 ]; 169 ];
165 170
166 return Promise.all(apiMethod).then(result => { 171 return Promise.all(apiMethod).then(result => {
@@ -253,22 +258,32 @@ const index = (req) => { @@ -253,22 +258,32 @@ const index = (req) => {
253 // 推荐品类 258 // 推荐品类
254 _.forEach(groupSort, group =>{ 259 _.forEach(groupSort, group =>{
255 _.forEach(group.sub, subSort =>{ 260 _.forEach(group.sub, subSort =>{
  261 + let cateObj = {
  262 + cateId: subSort.category_id,
  263 + url: publicHandler.handleFilterUrl(params, {sort: subSort.relation_parameter.sort}),
  264 + name: subSort.category_name,
  265 + active: false
  266 + };
  267 +
256 if (ctyList.length < 20) { 268 if (ctyList.length < 20) {
257 - ctyList.push({  
258 - cateId: subSort.category_id,  
259 - url: publicHandler.handleFilterUrl(params, {sort: subSort.relation_parameter.sort}),  
260 - name: subSort.category_name  
261 - }); 269 + //默认选中判断
  270 + if (req.query.sort === subSort.relation_parameter.sort) {
  271 + cateObj.active = true;
  272 + }
  273 + ctyList.push(cateObj);
262 } else { 274 } else {
263 return true; 275 return true;
264 } 276 }
265 }); 277 });
266 }); 278 });
267 Object.assign(respData.newProduct.ctyList, ctyList); 279 Object.assign(respData.newProduct.ctyList, ctyList);
  280 + }
268 281
  282 + // 最新上架
  283 + if (result[4].code === 200 && result[4].data) {
269 // 列表数据 284 // 列表数据
270 - Object.assign(respData.newProduct, _proListHandler(result[3].data,  
271 - Object.assign({}, recParams, {channel: channel}))); 285 + Object.assign(respData.newProduct, _proListHandler(result[4].data,
  286 + Object.assign({}, recParams, {channel: channel})));
272 } 287 }
273 288
274 // 数据为空，不显示页面模块 289 // 数据为空，不显示页面模块
@@ -4,7 +4,6 @@ @@ -4,7 +4,6 @@
4 var $ = require('yoho-jquery'), 4 var $ = require('yoho-jquery'),
5 lazyLoad = require('yoho-jquery-lazyload'); 5 lazyLoad = require('yoho-jquery-lazyload');
6 6
7 -var Swiper = require('yoho-swiper');  
8 var yas = require('../common/data-yas'); 7 var yas = require('../common/data-yas');
9 var $arriveList = $('.new-arrive-list'); 8 var $arriveList = $('.new-arrive-list');
10 var $goodInfo = $arriveList.find('.good-info'); 9 var $goodInfo = $arriveList.find('.good-info');
@@ -55,7 +54,7 @@ function getProListData() { @@ -55,7 +54,7 @@ function getProListData() {
55 $good.find('.list-box li').each(function() { 54 $good.find('.list-box li').each(function() {
56 keys.push($(this).find('a').html()); 55 keys.push($(this).find('a').html());
57 }); 56 });
58 - goodObj.KEYWORD_WORD = keys.join(','); 57 + goodObj.KEYWORD = keys.join(',');
59 } 58 }
60 59
61 // 普通商品 60 // 普通商品
@@ -114,26 +113,60 @@ function fixAreaTop(scrollTop) { @@ -114,26 +113,60 @@ function fixAreaTop(scrollTop) {
114 }); 113 });
115 } 114 }
116 } 115 }
117 -new Swiper('.rec-swiper', {  
118 - pagination: '.swiper-pagination',  
119 - paginationClickable: true,  
120 - slidesPerView: 6,  
121 - slidesPerColumn: 2,  
122 - spaceBetween: 8,  
123 - lazyLoading: true,  
124 - nextButton: '.next',  
125 - prevButton: '.prev'  
126 -});  
127 116
128 -new Swiper('.brand-swiper', {  
129 - pagination: '.swiper-pagination',  
130 - paginationClickable: true,  
131 - slidesPerView: 6,  
132 - spaceBetween: 8,  
133 - lazyLoading: true,  
134 - nextButton: '.next',  
135 - prevButton: '.prev'  
136 -}); 117 +var SwiperSingle = {
  118 + getSwiperWidth: function ($swiper) {
  119 + var $wrap = $swiper.find('.swiper-wrapper'),
  120 + sliders = $wrap.find('.swiper-slide'),
  121 + sliderWidth = sliders.outerWidth(true);
  122 +
  123 + $wrap.css('width', sliderWidth*sliders.length + 'px');
  124 + },
  125 + next: function ($swiper) {
  126 + var that = this;
  127 + var $wrap = $swiper.find('.swiper-wrapper'),
  128 + wrapWidth = $wrap.width(),
  129 + actionIndex = $wrap.attr('actionIndex') || 1,
  130 + sliders = $wrap.find('.swiper-slide'),
  131 + sliderWidth = sliders.outerWidth(true),
  132 + left = parseInt($wrap.css('margin-left'), 10);
  133 +
  134 + if (!this.moving && wrapWidth - (-left) > $swiper.width() + sliderWidth) {
  135 + left = left - sliderWidth;
  136 + this.moving = true;
  137 + $wrap.animate({'margin-left': left}, function () {
  138 + that.moving = false;
  139 + });
  140 + $wrap.attr('actionIndex', ++actionIndex);
  141 + }
  142 + },
  143 + prev: function ($swiper) {
  144 + var that = this;
  145 + var $wrap = $swiper.find('.swiper-wrapper'),
  146 + actionIndex = $wrap.attr('actionIndex') || 1,
  147 + sliders = $wrap.find('.swiper-slide'),
  148 + sliderWidth = sliders.outerWidth(true),
  149 + left = parseInt($wrap.css('margin-left'), 10);
  150 +
  151 + if (!this.moving && actionIndex > 1) {
  152 + left = left + sliderWidth;
  153 + this.moving = true;
  154 + $wrap.animate({'margin-left': left}, function () {
  155 + that.moving = false;
  156 + });
  157 + $wrap.attr('actionIndex', --actionIndex);
  158 + }
  159 + },
  160 + resize: function ($swiper) {
  161 + var $wrap = $swiper.find('.swiper-wrapper'),
  162 + actionIndex = $wrap.attr('actionIndex') || 1,
  163 + sliders = $wrap.find('.swiper-slide'),
  164 + sliderWidth = sliders.outerWidth(true),
  165 + left = (actionIndex-1) * sliderWidth;
  166 +
  167 + $wrap.css('margin-left', left);
  168 + }
  169 +}
137 170
138 lazyLoad($('img.lazy')); 171 lazyLoad($('img.lazy'));
139 172
@@ -196,18 +229,33 @@ $('#new-product-floor').on('click', '.catagory-navs li', function() { @@ -196,18 +229,33 @@ $('#new-product-floor').on('click', '.catagory-navs li', function() {
196 $(function() { 229 $(function() {
197 // 轮播数量不够隐藏左右箭头 230 // 轮播数量不够隐藏左右箭头
198 var $recSwiper = $('#rec-swiper'), 231 var $recSwiper = $('#rec-swiper'),
199 - recNum = $recSwiper.find('.swiper-wrapper > .swiper-slide').length,  
200 $brandSwiper = $('#brand-swiper'), 232 $brandSwiper = $('#brand-swiper'),
  233 + recNum = $recSwiper.find('.swiper-wrapper > .swiper-slide').length,
201 brandNum = $brandSwiper.find('.swiper-wrapper > .swiper-slide').length; 234 brandNum = $brandSwiper.find('.swiper-wrapper > .swiper-slide').length;
202 235
203 - if (recNum <= 12) { 236 + if (recNum <= 6) {
204 $recSwiper.find('.prev,.next').addClass('hide'); 237 $recSwiper.find('.prev,.next').addClass('hide');
205 } 238 }
206 -  
207 if (brandNum <= 6) { 239 if (brandNum <= 6) {
208 $brandSwiper.find('.prev,.next').addClass('hide'); 240 $brandSwiper.find('.prev,.next').addClass('hide');
209 } 241 }
210 242
  243 + SwiperSingle.getSwiperWidth($('#rec-swiper'));//初始化宽度
  244 + SwiperSingle.getSwiperWidth($('#brand-swiper'));//初始化宽度
  245 +
  246 + $('.next').on('click', function () {
  247 + SwiperSingle.next($(this).parent());
  248 + });
  249 +
  250 + $('.prev').on('click', function () {
  251 + SwiperSingle.prev($(this).parent());
  252 + });
  253 +
  254 + $(window).resize(function() {
  255 + SwiperSingle.getSwiperWidth($('#rec-swiper'));//初始化宽度
  256 + SwiperSingle.getSwiperWidth($('#brand-swiper'));//初始化宽度
  257 + });
  258 +
211 fixAreaTop($(this).scrollTop()); 259 fixAreaTop($(this).scrollTop());
212 }); 260 });
213 261
@@ -442,7 +490,7 @@ $(function() { @@ -442,7 +490,7 @@ $(function() {
442 490
443 // 热门搜索 491 // 热门搜索
444 if (recType === 'hotSearchTerm') { 492 if (recType === 'hotSearchTerm') {
445 - goodData.KEYWORD_WORD = $(this).html(); 493 + goodData.KEYWORD = $(this).html();
446 } 494 }
447 $.extend(goodData, getProData($good)); 495 $.extend(goodData, getProData($good));
448 yas.givePoint('YB_NEW_ARRIVAL_FLR_C', goodData); 496 yas.givePoint('YB_NEW_ARRIVAL_FLR_C', goodData);
1 -/**  
2 - * Swiper 3.3.1  
3 - * Most modern mobile touch slider and framework with hardware accelerated transitions  
4 - *  
5 - * http://www.idangero.us/swiper/  
6 - *  
7 - * Copyright 2016, Vladimir Kharlampidi  
8 - * The iDangero.us  
9 - * http://www.idangero.us/  
10 - *  
11 - * Licensed under MIT  
12 - *  
13 - * Released on: February 7, 2016  
14 - */  
15 .swiper-container { 1 .swiper-container {
16 - margin: 0 auto;  
17 - position: relative;  
18 - overflow: hidden;  
19 - /* Fix of Webkit flickering */  
20 - z-index: 1;  
21 -}  
22 -.swiper-container-no-flexbox .swiper-slide {  
23 - float: left;  
24 -}  
25 -.swiper-container-vertical > .swiper-wrapper {  
26 - -webkit-box-orient: vertical;  
27 - -moz-box-orient: vertical;  
28 - -ms-flex-direction: column;  
29 - -webkit-flex-direction: column;  
30 - flex-direction: column;  
31 -}  
32 -.swiper-wrapper {  
33 - position: relative;  
34 - width: 100%;  
35 - height: 100%;  
36 - z-index: 1;  
37 - display: -webkit-box;  
38 - display: -moz-box;  
39 - display: -ms-flexbox;  
40 - display: -webkit-flex;  
41 - display: flex;  
42 - -webkit-transition-property: -webkit-transform;  
43 - -moz-transition-property: -moz-transform;  
44 - -o-transition-property: -o-transform;  
45 - -ms-transition-property: -ms-transform;  
46 - transition-property: transform;  
47 - -webkit-box-sizing: content-box;  
48 - -moz-box-sizing: content-box;  
49 - box-sizing: content-box;  
50 -}  
51 -.swiper-container-android .swiper-slide,  
52 -.swiper-wrapper {  
53 - -webkit-transform: translate3d(0px, 0, 0);  
54 - -moz-transform: translate3d(0px, 0, 0);  
55 - -o-transform: translate(0px, 0px);  
56 - -ms-transform: translate3d(0px, 0, 0);  
57 - transform: translate3d(0px, 0, 0);  
58 -}  
59 -.swiper-container-multirow > .swiper-wrapper {  
60 - -webkit-box-lines: multiple;  
61 - -moz-box-lines: multiple;  
62 - -ms-flex-wrap: wrap;  
63 - -webkit-flex-wrap: wrap;  
64 - flex-wrap: wrap;  
65 -}  
66 -.swiper-container-free-mode > .swiper-wrapper {  
67 - -webkit-transition-timing-function: ease-out;  
68 - -moz-transition-timing-function: ease-out;  
69 - -ms-transition-timing-function: ease-out;  
70 - -o-transition-timing-function: ease-out;  
71 - transition-timing-function: ease-out;  
72 - margin: 0 auto; 2 + position: relative;
  3 + overflow: hidden;
73 } 4 }
  5 +
74 .swiper-slide { 6 .swiper-slide {
75 - -webkit-flex-shrink: 0;  
76 - -ms-flex: 0 0 auto;  
77 - flex-shrink: 0;  
78 - width: 100%;  
79 - height: 100%;  
80 - position: relative;  
81 -}  
82 -/* Auto Height */  
83 -.swiper-container-autoheight,  
84 -.swiper-container-autoheight .swiper-slide {  
85 - height: auto;  
86 -}  
87 -.swiper-container-autoheight .swiper-wrapper {  
88 - -webkit-box-align: start;  
89 - -ms-flex-align: start;  
90 - -webkit-align-items: flex-start;  
91 - align-items: flex-start;  
92 - -webkit-transition-property: -webkit-transform, height;  
93 - -moz-transition-property: -moz-transform;  
94 - -o-transition-property: -o-transform;  
95 - -ms-transition-property: -ms-transform;  
96 - transition-property: transform, height;  
97 -}  
98 -/* a11y */  
99 -.swiper-container .swiper-notification {  
100 - position: absolute;  
101 - left: 0;  
102 - top: 0;  
103 - pointer-events: none;  
104 - opacity: 0;  
105 - z-index: -1000;  
106 -}  
107 -/* IE10 Windows Phone 8 Fixes */  
108 -.swiper-wp8-horizontal {  
109 - -ms-touch-action: pan-y;  
110 - touch-action: pan-y;  
111 -}  
112 -.swiper-wp8-vertical {  
113 - -ms-touch-action: pan-x;  
114 - touch-action: pan-x;  
115 -}  
116 -/* Arrows */  
117 -.swiper-button-prev,  
118 -.swiper-button-next {  
119 - position: absolute;  
120 - top: 50%;  
121 - width: 27px;  
122 - height: 44px;  
123 - margin-top: -22px;  
124 - z-index: 10;  
125 - cursor: pointer;  
126 - -moz-background-size: 27px 44px;  
127 - -webkit-background-size: 27px 44px;  
128 - background-size: 27px 44px;  
129 - background-position: center;  
130 - background-repeat: no-repeat;  
131 -}  
132 -.swiper-button-prev.swiper-button-disabled,  
133 -.swiper-button-next.swiper-button-disabled {  
134 - opacity: 0.35;  
135 - cursor: auto;  
136 - pointer-events: none;  
137 -}  
138 -.swiper-button-prev,  
139 -.swiper-container-rtl .swiper-button-next {  
140 - left: 10px;  
141 - right: auto;  
142 -}  
143 -.swiper-button-prev.swiper-button-black,  
144 -.swiper-container-rtl .swiper-button-next.swiper-button-black {  
145 - }  
146 -.swiper-button-prev.swiper-button-white,  
147 -.swiper-container-rtl .swiper-button-next.swiper-button-white {  
148 -}  
149 -.swiper-button-next,  
150 -.swiper-container-rtl .swiper-button-prev {  
151 - right: 10px;  
152 - left: auto;  
153 -}  
154 -.swiper-button-next.swiper-button-black,  
155 -.swiper-container-rtl .swiper-button-prev.swiper-button-black {  
156 - }  
157 -.swiper-button-next.swiper-button-white,  
158 -.swiper-container-rtl .swiper-button-prev.swiper-button-white {  
159 -}  
160 -/* Pagination Styles */  
161 -.swiper-pagination {  
162 - position: absolute;  
163 - text-align: center;  
164 - -webkit-transition: 300ms;  
165 - -moz-transition: 300ms;  
166 - -o-transition: 300ms;  
167 - transition: 300ms;  
168 - -webkit-transform: translate3d(0, 0, 0);  
169 - -ms-transform: translate3d(0, 0, 0);  
170 - -o-transform: translate3d(0, 0, 0);  
171 - transform: translate3d(0, 0, 0);  
172 - z-index: 10;  
173 -}  
174 -.swiper-pagination.swiper-pagination-hidden {  
175 - opacity: 0;  
176 -}  
177 -/* Common Styles */  
178 -.swiper-pagination-fraction,  
179 -.swiper-pagination-custom,  
180 -.swiper-container-horizontal > .swiper-pagination-bullets {  
181 - bottom: 10px;  
182 - left: 0;  
183 - width: 100%;  
184 -}  
185 -/* Bullets */  
186 -.swiper-pagination-bullet {  
187 - width: 8px;  
188 - height: 8px;  
189 - display: inline-block;  
190 - border-radius: 100%;  
191 - background: #000;  
192 - opacity: 0.2;  
193 -}  
194 -button.swiper-pagination-bullet {  
195 - border: none;  
196 - margin: 0;  
197 - padding: 0;  
198 - box-shadow: none;  
199 - -moz-appearance: none;  
200 - -ms-appearance: none;  
201 - -webkit-appearance: none;  
202 - appearance: none;  
203 -}  
204 -.swiper-pagination-clickable .swiper-pagination-bullet {  
205 - cursor: pointer;  
206 -}  
207 -.swiper-pagination-white .swiper-pagination-bullet {  
208 - background: #fff;  
209 -}  
210 -.swiper-pagination-bullet-active {  
211 - opacity: 1;  
212 - background: #007aff;  
213 -}  
214 -.swiper-pagination-white .swiper-pagination-bullet-active {  
215 - background: #fff;  
216 -}  
217 -.swiper-pagination-black .swiper-pagination-bullet-active {  
218 - background: #000;  
219 -}  
220 -.swiper-container-vertical > .swiper-pagination-bullets {  
221 - right: 10px;  
222 - top: 50%;  
223 - -webkit-transform: translate3d(0px, -50%, 0);  
224 - -moz-transform: translate3d(0px, -50%, 0);  
225 - -o-transform: translate(0px, -50%);  
226 - -ms-transform: translate3d(0px, -50%, 0);  
227 - transform: translate3d(0px, -50%, 0);  
228 -}  
229 -.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {  
230 - margin: 5px 0;  
231 - display: block;  
232 -}  
233 -.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {  
234 - margin: 0 5px;  
235 -}  
236 -/* Progress */  
237 -.swiper-pagination-progress {  
238 - background: rgba(0, 0, 0, 0.25);  
239 - position: absolute;  
240 -}  
241 -.swiper-pagination-progress .swiper-pagination-progressbar {  
242 - background: #007aff;  
243 - position: absolute;  
244 - left: 0;  
245 - top: 0;  
246 - width: 100%;  
247 - height: 100%;  
248 - -webkit-transform: scale(0);  
249 - -ms-transform: scale(0);  
250 - -o-transform: scale(0);  
251 - transform: scale(0);  
252 - -webkit-transform-origin: left top;  
253 - -moz-transform-origin: left top;  
254 - -ms-transform-origin: left top;  
255 - -o-transform-origin: left top;  
256 - transform-origin: left top;  
257 -}  
258 -.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {  
259 - -webkit-transform-origin: right top;  
260 - -moz-transform-origin: right top;  
261 - -ms-transform-origin: right top;  
262 - -o-transform-origin: right top;  
263 - transform-origin: right top; 7 + width: 185px;
  8 + margin-right: 8px;
  9 + float: left;
264 } 10 }
265 -.swiper-container-horizontal > .swiper-pagination-progress {  
266 - width: 100%;  
267 - height: 4px;  
268 - left: 0;  
269 - top: 0;  
270 -}  
271 -.swiper-container-vertical > .swiper-pagination-progress {  
272 - width: 4px;  
273 - height: 100%;  
274 - left: 0;  
275 - top: 0;  
276 -}  
277 -.swiper-pagination-progress.swiper-pagination-white {  
278 - background: rgba(255, 255, 255, 0.5);  
279 -}  
280 -.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {  
281 - background: #fff;  
282 -}  
283 -.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {  
284 - background: #000;  
285 -}  
286 -/* 3D Container */  
287 -.swiper-container-3d {  
288 - -webkit-perspective: 1200px;  
289 - -moz-perspective: 1200px;  
290 - -o-perspective: 1200px;  
291 - perspective: 1200px;  
292 -}  
293 -.swiper-container-3d .swiper-wrapper,  
294 -.swiper-container-3d .swiper-slide,  
295 -.swiper-container-3d .swiper-slide-shadow-left,  
296 -.swiper-container-3d .swiper-slide-shadow-right,  
297 -.swiper-container-3d .swiper-slide-shadow-top,  
298 -.swiper-container-3d .swiper-slide-shadow-bottom,  
299 -.swiper-container-3d .swiper-cube-shadow {  
300 - -webkit-transform-style: preserve-3d;  
301 - -moz-transform-style: preserve-3d;  
302 - -ms-transform-style: preserve-3d;  
303 - transform-style: preserve-3d;  
304 -}  
305 -.swiper-container-3d .swiper-slide-shadow-left,  
306 -.swiper-container-3d .swiper-slide-shadow-right,  
307 -.swiper-container-3d .swiper-slide-shadow-top,  
308 -.swiper-container-3d .swiper-slide-shadow-bottom {  
309 - position: absolute;  
310 - left: 0;  
311 - top: 0;  
312 - width: 100%;  
313 - height: 100%;  
314 - pointer-events: none;  
315 - z-index: 10;  
316 -}  
317 -.swiper-container-3d .swiper-slide-shadow-left {  
318 - background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));  
319 - /* Safari 4+, Chrome */  
320 - background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
321 - /* Chrome 10+, Safari 5.1+, iOS 5+ */  
322 - background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
323 - /* Firefox 3.6-15 */  
324 - background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
325 - /* Opera 11.10-12.00 */  
326 - background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
327 - /* Firefox 16+, IE10, Opera 12.50+ */  
328 -}  
329 -.swiper-container-3d .swiper-slide-shadow-right {  
330 - background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));  
331 - /* Safari 4+, Chrome */  
332 - background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
333 - /* Chrome 10+, Safari 5.1+, iOS 5+ */  
334 - background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
335 - /* Firefox 3.6-15 */  
336 - background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
337 - /* Opera 11.10-12.00 */  
338 - background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
339 - /* Firefox 16+, IE10, Opera 12.50+ */  
340 -}  
341 -.swiper-container-3d .swiper-slide-shadow-top {  
342 - background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));  
343 - /* Safari 4+, Chrome */  
344 - background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
345 - /* Chrome 10+, Safari 5.1+, iOS 5+ */  
346 - background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
347 - /* Firefox 3.6-15 */  
348 - background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
349 - /* Opera 11.10-12.00 */  
350 - background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
351 - /* Firefox 16+, IE10, Opera 12.50+ */  
352 -}  
353 -.swiper-container-3d .swiper-slide-shadow-bottom {  
354 - background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));  
355 - /* Safari 4+, Chrome */  
356 - background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
357 - /* Chrome 10+, Safari 5.1+, iOS 5+ */  
358 - background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
359 - /* Firefox 3.6-15 */  
360 - background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
361 - /* Opera 11.10-12.00 */  
362 - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));  
363 - /* Firefox 16+, IE10, Opera 12.50+ */  
364 -}  
365 -/* Coverflow */  
366 -.swiper-container-coverflow .swiper-wrapper,  
367 -.swiper-container-flip .swiper-wrapper {  
368 - /* Windows 8 IE 10 fix */  
369 - -ms-perspective: 1200px;  
370 -}  
371 -/* Cube + Flip */  
372 -.swiper-container-cube,  
373 -.swiper-container-flip {  
374 - overflow: visible;  
375 -}  
376 -.swiper-container-cube .swiper-slide,  
377 -.swiper-container-flip .swiper-slide {  
378 - pointer-events: none;  
379 - -webkit-backface-visibility: hidden;  
380 - -moz-backface-visibility: hidden;  
381 - -ms-backface-visibility: hidden;  
382 - backface-visibility: hidden;  
383 - z-index: 1;  
384 -}  
385 -.swiper-container-cube .swiper-slide .swiper-slide,  
386 -.swiper-container-flip .swiper-slide .swiper-slide {  
387 - pointer-events: none;  
388 -}  
389 -.swiper-container-cube .swiper-slide-active,  
390 -.swiper-container-flip .swiper-slide-active,  
391 -.swiper-container-cube .swiper-slide-active .swiper-slide-active,  
392 -.swiper-container-flip .swiper-slide-active .swiper-slide-active {  
393 - pointer-events: auto;  
394 -}  
395 -.swiper-container-cube .swiper-slide-shadow-top,  
396 -.swiper-container-flip .swiper-slide-shadow-top,  
397 -.swiper-container-cube .swiper-slide-shadow-bottom,  
398 -.swiper-container-flip .swiper-slide-shadow-bottom,  
399 -.swiper-container-cube .swiper-slide-shadow-left,  
400 -.swiper-container-flip .swiper-slide-shadow-left,  
401 -.swiper-container-cube .swiper-slide-shadow-right,  
402 -.swiper-container-flip .swiper-slide-shadow-right {  
403 - z-index: 0;  
404 - -webkit-backface-visibility: hidden;  
405 - -moz-backface-visibility: hidden;  
406 - -ms-backface-visibility: hidden;  
407 - backface-visibility: hidden;  
408 -}  
409 -/* Cube */  
410 -.swiper-container-cube .swiper-slide {  
411 - visibility: hidden;  
412 - -webkit-transform-origin: 0 0;  
413 - -moz-transform-origin: 0 0;  
414 - -ms-transform-origin: 0 0;  
415 - transform-origin: 0 0;  
416 - width: 100%;  
417 - height: 100%;  
418 -}  
419 -.swiper-container-cube.swiper-container-rtl .swiper-slide {  
420 - -webkit-transform-origin: 100% 0;  
421 - -moz-transform-origin: 100% 0;  
422 - -ms-transform-origin: 100% 0;  
423 - transform-origin: 100% 0;  
424 -}  
425 -.swiper-container-cube .swiper-slide-active,  
426 -.swiper-container-cube .swiper-slide-next,  
427 -.swiper-container-cube .swiper-slide-prev,  
428 -.swiper-container-cube .swiper-slide-next + .swiper-slide {  
429 - pointer-events: auto;  
430 - visibility: visible;  
431 -}  
432 -.swiper-container-cube .swiper-cube-shadow {  
433 - position: absolute;  
434 - left: 0;  
435 - bottom: 0px;  
436 - width: 100%;  
437 - height: 100%;  
438 - background: #000;  
439 - opacity: 0.6;  
440 - -webkit-filter: blur(50px);  
441 - filter: blur(50px);  
442 - z-index: 0;  
443 -}  
444 -/* Fade */  
445 -.swiper-container-fade.swiper-container-free-mode .swiper-slide {  
446 - -webkit-transition-timing-function: ease-out;  
447 - -moz-transition-timing-function: ease-out;  
448 - -ms-transition-timing-function: ease-out;  
449 - -o-transition-timing-function: ease-out;  
450 - transition-timing-function: ease-out;  
451 -}  
452 -.swiper-container-fade .swiper-slide {  
453 - pointer-events: none;  
454 - -webkit-transition-property: opacity;  
455 - -moz-transition-property: opacity;  
456 - -o-transition-property: opacity;  
457 - transition-property: opacity;  
458 -}  
459 -.swiper-container-fade .swiper-slide .swiper-slide {  
460 - pointer-events: none;  
461 -}  
462 -.swiper-container-fade .swiper-slide-active,  
463 -.swiper-container-fade .swiper-slide-active .swiper-slide-active {  
464 - pointer-events: auto;  
465 -}  
466 -/* Scrollbar */  
467 -.swiper-scrollbar {  
468 - border-radius: 10px;  
469 - position: relative;  
470 - -ms-touch-action: none;  
471 - background: rgba(0, 0, 0, 0.1);  
472 -}  
473 -.swiper-container-horizontal > .swiper-scrollbar {  
474 - position: absolute;  
475 - left: 1%;  
476 - bottom: 3px;  
477 - z-index: 50;  
478 - height: 5px;  
479 - width: 98%;  
480 -}  
481 -.swiper-container-vertical > .swiper-scrollbar {  
482 - position: absolute;  
483 - right: 3px;  
484 - top: 1%;  
485 - z-index: 50;  
486 - width: 5px;  
487 - height: 98%;  
488 -}  
489 -.swiper-scrollbar-drag {  
490 - height: 100%;  
491 - width: 100%;  
492 - position: relative;  
493 - background: rgba(0, 0, 0, 0.5);  
494 - border-radius: 10px;  
495 - left: 0;  
496 - top: 0;  
497 -}  
498 -.swiper-scrollbar-cursor-drag {  
499 - cursor: move;  
500 -}  
501 -/* Preloader */  
502 -.swiper-lazy-preloader {  
503 - width: 42px;  
504 - height: 42px;  
505 - position: absolute;  
506 - left: 50%;  
507 - top: 50%;  
508 - margin-left: -21px;  
509 - margin-top: -21px;  
510 - z-index: 10;  
511 - -webkit-transform-origin: 50%;  
512 - -moz-transform-origin: 50%;  
513 - transform-origin: 50%;  
514 - -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;  
515 - -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;  
516 - animation: swiper-preloader-spin 1s steps(12, end) infinite;  
517 -}  
518 -.swiper-lazy-preloader:after {  
519 - display: block;  
520 - content: "";  
521 - width: 100%;  
522 - height: 100%;  
523 - background-position: 50%;  
524 - -webkit-background-size: 100%;  
525 - background-size: 100%;  
526 - background-repeat: no-repeat;  
527 -}  
528 -.swiper-lazy-preloader-white:after {  
529 - }  
530 -@-webkit-keyframes swiper-preloader-spin {  
531 - 100% {  
532 - -webkit-transform: rotate(360deg);  
533 - }  
534 -}  
535 -@keyframes swiper-preloader-spin {  
536 - 100% {  
537 - transform: rotate(360deg);  
538 - } 11 +.swiper-wrapper {
  12 + margin-left: 0px;
539 } 13 }
@@ -40,8 +40,8 @@ @@ -40,8 +40,8 @@
40 color: #fff; 40 color: #fff;
41 } 41 }
42 42
43 -.rec-swiper .swiper-slide, .brand-swiper .swiper-slide {  
44 - width: 185px; 43 +.rec-swiper .swiper-wrapper{
  44 + height: 116px;
45 } 45 }
46 46
47 .brand-swiper .swiper-wrapper{ 47 .brand-swiper .swiper-wrapper{
@@ -50,7 +50,6 @@ @@ -50,7 +50,6 @@
50 50
51 .recommond-floor { 51 .recommond-floor {
52 .rec-pro { 52 .rec-pro {
53 - margin-bottom: 20px;  
54 display: block; 53 display: block;
55 54
56 .new-num { 55 .new-num {
@@ -71,7 +70,7 @@ @@ -71,7 +70,7 @@
71 70
72 .swiper-slide > a img { 71 .swiper-slide > a img {
73 width: 100%; 72 width: 100%;
74 - height: 100%; 73 + height: 86px;
75 } 74 }
76 75
77 .swiper-wrapper { 76 .swiper-wrapper {
@@ -137,6 +136,7 @@ @@ -137,6 +136,7 @@
137 width: 1150px; 136 width: 1150px;
138 font-size: 14px; 137 font-size: 14px;
139 background: #fff; 138 background: #fff;
  139 + padding: 10px 0;
140 z-index: 999; 140 z-index: 999;
141 141
142 .catagory-text { 142 .catagory-text {
@@ -350,9 +350,10 @@ @@ -350,9 +350,10 @@
350 background-color: #000; 350 background-color: #000;
351 color: #fff; 351 color: #fff;
352 text-align: center; 352 text-align: center;
353 - width: 80px; 353 + width: 75px;
354 height: 32px; 354 height: 32px;
355 line-height: 32px; 355 line-height: 32px;
  356 + padding-right: 5px;
356 font-size: 13px; 357 font-size: 13px;
357 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; 358 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
358 opacity: .9; 359 opacity: .9;
@@ -383,7 +384,7 @@ @@ -383,7 +384,7 @@
383 384
384 > a { 385 > a {
385 color: #fff; 386 color: #fff;
386 - line-height: 22px; 387 + line-height: 26px;
387 } 388 }
388 389
389 .msg-app { 390 .msg-app {
@@ -451,4 +452,24 @@ @@ -451,4 +452,24 @@
451 .all-catagory .catagory-navs { 452 .all-catagory .catagory-navs {
452 width: 900px; 453 width: 900px;
453 } 454 }
  455 +
  456 + .swiper-slide {
  457 + width: 158px;
  458 + }
  459 +
  460 + .rec-swiper .swiper-wrapper{
  461 + height: 104px;
  462 +
  463 + img {
  464 + height: 73px;
  465 + }
  466 + }
  467 +
  468 + .brand-swiper .swiper-wrapper{
  469 + height: 86px;
  470 +
  471 + img {
  472 + height: 73px;
  473 + }
  474 + }
454 } 475 }