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

Feature/new product arrive



See merge request !64

@@ -153,14 +153,19 @@ const index = (req) => {
         yh_channel: channelMap[channel].yh_channel,
         uid: req.user.uid || ''
     };
+
     let shopParams = Object.assign({}, params, {contentCode: channelMap[channel].code});
-    let recParams = Object.assign({}, params);
+    let recParams = Object.assign({}, params, {
+        sort: req.query.sort || '',
+        page: req.query.page || 1
+    });
 
     let apiMethod = [
         headerModel.requestHeaderData(channel),
         api.recShop(shopParams),
         api.recBrand(params),
-        api.recList(recParams)
+        api.recList(Object.assign({}, params)),//获取品类
+        api.recList(recParams)//获取商品数据
     ];
 
     return Promise.all(apiMethod).then(result => {
@@ -253,22 +258,32 @@ const index = (req) => {
             // 推荐品类
             _.forEach(groupSort, group =>{
                 _.forEach(group.sub, subSort =>{
+                    let cateObj = {
+                        cateId: subSort.category_id,
+                        url: publicHandler.handleFilterUrl(params, {sort: subSort.relation_parameter.sort}),
+                        name: subSort.category_name,
+                        active: false
+                    };
+                    
                     if (ctyList.length < 20) {
-                        ctyList.push({
-                            cateId: subSort.category_id,
-                            url: publicHandler.handleFilterUrl(params, {sort: subSort.relation_parameter.sort}),
-                            name: subSort.category_name
-                        });
+                        //默认选中判断
+                        if (req.query.sort === subSort.relation_parameter.sort) {
+                            cateObj.active = true;
+                        }
+                        ctyList.push(cateObj);
                     } else {
                         return true;
                     }
                 });
             });
             Object.assign(respData.newProduct.ctyList, ctyList);
+        }
 
+        // 最新上架
+        if (result[4].code === 200 && result[4].data) {
             // 列表数据
-            Object.assign(respData.newProduct, _proListHandler(result[3].data,
-                    Object.assign({}, recParams, {channel: channel})));
+            Object.assign(respData.newProduct, _proListHandler(result[4].data,
+                Object.assign({}, recParams, {channel: channel})));
         }
 
         // 数据为空，不显示页面模块

@@ -4,7 +4,6 @@
 var $ = require('yoho-jquery'),
     lazyLoad = require('yoho-jquery-lazyload');
 
-var Swiper = require('yoho-swiper');
 var yas = require('../common/data-yas');
 var $arriveList = $('.new-arrive-list');
 var $goodInfo = $arriveList.find('.good-info');
@@ -55,7 +54,7 @@ function getProListData() {
             $good.find('.list-box li').each(function() {
                 keys.push($(this).find('a').html());
             });
-            goodObj.KEYWORD_WORD = keys.join(',');
+            goodObj.KEYWORD = keys.join(',');
         }
 
         // 普通商品
@@ -114,26 +113,60 @@ function fixAreaTop(scrollTop) {
         });
     }
 }
-new Swiper('.rec-swiper', {
-    pagination: '.swiper-pagination',
-    paginationClickable: true,
-    slidesPerView: 6,
-    slidesPerColumn: 2,
-    spaceBetween: 8,
-    lazyLoading: true,
-    nextButton: '.next',
-    prevButton: '.prev'
-});
 
-new Swiper('.brand-swiper', {
-    pagination: '.swiper-pagination',
-    paginationClickable: true,
-    slidesPerView: 6,
-    spaceBetween: 8,
-    lazyLoading: true,
-    nextButton: '.next',
-    prevButton: '.prev'
-});
+var SwiperSingle = {
+    getSwiperWidth: function ($swiper) {
+        var $wrap = $swiper.find('.swiper-wrapper'),
+            sliders = $wrap.find('.swiper-slide'),
+            sliderWidth = sliders.outerWidth(true);
+
+        $wrap.css('width', sliderWidth*sliders.length + 'px');
+    },
+    next: function ($swiper) {
+        var that = this;
+        var $wrap = $swiper.find('.swiper-wrapper'),
+            wrapWidth = $wrap.width(),
+            actionIndex = $wrap.attr('actionIndex') || 1,
+            sliders = $wrap.find('.swiper-slide'),
+            sliderWidth = sliders.outerWidth(true),
+            left = parseInt($wrap.css('margin-left'), 10);
+
+        if (!this.moving && wrapWidth - (-left) > $swiper.width() + sliderWidth) {
+            left = left - sliderWidth;
+            this.moving = true;
+            $wrap.animate({'margin-left': left}, function () {
+                that.moving = false;
+            });
+            $wrap.attr('actionIndex', ++actionIndex);
+        }
+    },
+    prev: function ($swiper) {
+        var that = this;
+        var $wrap = $swiper.find('.swiper-wrapper'),
+            actionIndex = $wrap.attr('actionIndex') || 1,
+            sliders = $wrap.find('.swiper-slide'),
+            sliderWidth = sliders.outerWidth(true),
+            left = parseInt($wrap.css('margin-left'), 10);
+
+        if (!this.moving && actionIndex > 1) {
+            left = left + sliderWidth;
+            this.moving = true;
+            $wrap.animate({'margin-left': left}, function () {
+                that.moving = false;
+            });
+            $wrap.attr('actionIndex', --actionIndex);
+        }
+    },
+    resize: function ($swiper) {
+        var $wrap = $swiper.find('.swiper-wrapper'),
+            actionIndex = $wrap.attr('actionIndex') || 1,
+            sliders = $wrap.find('.swiper-slide'),
+            sliderWidth = sliders.outerWidth(true),
+            left = (actionIndex-1) * sliderWidth;
+
+        $wrap.css('margin-left', left);
+    }
+}
 
 lazyLoad($('img.lazy'));
 
@@ -196,18 +229,33 @@ $('#new-product-floor').on('click', '.catagory-navs li', function() {
 $(function() {
     // 轮播数量不够隐藏左右箭头
     var $recSwiper = $('#rec-swiper'),
-        recNum = $recSwiper.find('.swiper-wrapper > .swiper-slide').length,
         $brandSwiper = $('#brand-swiper'),
+        recNum = $recSwiper.find('.swiper-wrapper > .swiper-slide').length,
         brandNum = $brandSwiper.find('.swiper-wrapper > .swiper-slide').length;
 
-    if (recNum <= 12) {
+    if (recNum <= 6) {
         $recSwiper.find('.prev,.next').addClass('hide');
     }
-
     if (brandNum <= 6) {
         $brandSwiper.find('.prev,.next').addClass('hide');
     }
 
+    SwiperSingle.getSwiperWidth($('#rec-swiper'));//初始化宽度
+    SwiperSingle.getSwiperWidth($('#brand-swiper'));//初始化宽度
+
+    $('.next').on('click', function () {
+        SwiperSingle.next($(this).parent());
+    });
+
+    $('.prev').on('click', function () {
+        SwiperSingle.prev($(this).parent());
+    });
+
+    $(window).resize(function() {
+        SwiperSingle.getSwiperWidth($('#rec-swiper'));//初始化宽度
+        SwiperSingle.getSwiperWidth($('#brand-swiper'));//初始化宽度
+    });
+
     fixAreaTop($(this).scrollTop());
 });
 
@@ -442,7 +490,7 @@ $(function() {
 
         // 热门搜索
         if (recType === 'hotSearchTerm') {
-            goodData.KEYWORD_WORD = $(this).html();
+            goodData.KEYWORD = $(this).html();
         }
         $.extend(goodData, getProData($good));
         yas.givePoint('YB_NEW_ARRIVAL_FLR_C', goodData);

-/**
- * Swiper 3.3.1
- * Most modern mobile touch slider and framework with hardware accelerated transitions
- *
- * http://www.idangero.us/swiper/
- *
- * Copyright 2016, Vladimir Kharlampidi
- * The iDangero.us
- * http://www.idangero.us/
- *
- * Licensed under MIT
- *
- * Released on: February 7, 2016
- */
 .swiper-container {
-  margin: 0 auto;
-  position: relative;
-  overflow: hidden;
-  /* Fix of Webkit flickering */
-  z-index: 1;
-}
-.swiper-container-no-flexbox .swiper-slide {
-  float: left;
-}
-.swiper-container-vertical > .swiper-wrapper {
-  -webkit-box-orient: vertical;
-  -moz-box-orient: vertical;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-}
-.swiper-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-transition-property: -webkit-transform;
-  -moz-transition-property: -moz-transform;
-  -o-transition-property: -o-transform;
-  -ms-transition-property: -ms-transform;
-  transition-property: transform;
-  -webkit-box-sizing: content-box;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-}
-.swiper-container-android .swiper-slide,
-.swiper-wrapper {
-  -webkit-transform: translate3d(0px, 0, 0);
-  -moz-transform: translate3d(0px, 0, 0);
-  -o-transform: translate(0px, 0px);
-  -ms-transform: translate3d(0px, 0, 0);
-  transform: translate3d(0px, 0, 0);
-}
-.swiper-container-multirow > .swiper-wrapper {
-  -webkit-box-lines: multiple;
-  -moz-box-lines: multiple;
-  -ms-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-.swiper-container-free-mode > .swiper-wrapper {
-  -webkit-transition-timing-function: ease-out;
-  -moz-transition-timing-function: ease-out;
-  -ms-transition-timing-function: ease-out;
-  -o-transition-timing-function: ease-out;
-  transition-timing-function: ease-out;
-  margin: 0 auto;
+    position: relative;
+    overflow: hidden;
 }
+
 .swiper-slide {
-  -webkit-flex-shrink: 0;
-  -ms-flex: 0 0 auto;
-  flex-shrink: 0;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-/* Auto Height */
-.swiper-container-autoheight,
-.swiper-container-autoheight .swiper-slide {
-  height: auto;
-}
-.swiper-container-autoheight .swiper-wrapper {
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  -webkit-align-items: flex-start;
-  align-items: flex-start;
-  -webkit-transition-property: -webkit-transform, height;
-  -moz-transition-property: -moz-transform;
-  -o-transition-property: -o-transform;
-  -ms-transition-property: -ms-transform;
-  transition-property: transform, height;
-}
-/* a11y */
-.swiper-container .swiper-notification {
-  position: absolute;
-  left: 0;
-  top: 0;
-  pointer-events: none;
-  opacity: 0;
-  z-index: -1000;
-}
-/* IE10 Windows Phone 8 Fixes */
-.swiper-wp8-horizontal {
-  -ms-touch-action: pan-y;
-  touch-action: pan-y;
-}
-.swiper-wp8-vertical {
-  -ms-touch-action: pan-x;
-  touch-action: pan-x;
-}
-/* Arrows */
-.swiper-button-prev,
-.swiper-button-next {
-  position: absolute;
-  top: 50%;
-  width: 27px;
-  height: 44px;
-  margin-top: -22px;
-  z-index: 10;
-  cursor: pointer;
-  -moz-background-size: 27px 44px;
-  -webkit-background-size: 27px 44px;
-  background-size: 27px 44px;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-.swiper-button-prev.swiper-button-disabled,
-.swiper-button-next.swiper-button-disabled {
-  opacity: 0.35;
-  cursor: auto;
-  pointer-events: none;
-}
-.swiper-button-prev,
-.swiper-container-rtl .swiper-button-next {
-  left: 10px;
-  right: auto;
-}
-.swiper-button-prev.swiper-button-black,
-.swiper-container-rtl .swiper-button-next.swiper-button-black {
- }
-.swiper-button-prev.swiper-button-white,
-.swiper-container-rtl .swiper-button-next.swiper-button-white {
-}
-.swiper-button-next,
-.swiper-container-rtl .swiper-button-prev {
-  right: 10px;
-  left: auto;
-}
-.swiper-button-next.swiper-button-black,
-.swiper-container-rtl .swiper-button-prev.swiper-button-black {
- }
-.swiper-button-next.swiper-button-white,
-.swiper-container-rtl .swiper-button-prev.swiper-button-white {
-}
-/* Pagination Styles */
-.swiper-pagination {
-  position: absolute;
-  text-align: center;
-  -webkit-transition: 300ms;
-  -moz-transition: 300ms;
-  -o-transition: 300ms;
-  transition: 300ms;
-  -webkit-transform: translate3d(0, 0, 0);
-  -ms-transform: translate3d(0, 0, 0);
-  -o-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  z-index: 10;
-}
-.swiper-pagination.swiper-pagination-hidden {
-  opacity: 0;
-}
-/* Common Styles */
-.swiper-pagination-fraction,
-.swiper-pagination-custom,
-.swiper-container-horizontal > .swiper-pagination-bullets {
-  bottom: 10px;
-  left: 0;
-  width: 100%;
-}
-/* Bullets */
-.swiper-pagination-bullet {
-  width: 8px;
-  height: 8px;
-  display: inline-block;
-  border-radius: 100%;
-  background: #000;
-  opacity: 0.2;
-}
-button.swiper-pagination-bullet {
-  border: none;
-  margin: 0;
-  padding: 0;
-  box-shadow: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-}
-.swiper-pagination-clickable .swiper-pagination-bullet {
-  cursor: pointer;
-}
-.swiper-pagination-white .swiper-pagination-bullet {
-  background: #fff;
-}
-.swiper-pagination-bullet-active {
-  opacity: 1;
-  background: #007aff;
-}
-.swiper-pagination-white .swiper-pagination-bullet-active {
-  background: #fff;
-}
-.swiper-pagination-black .swiper-pagination-bullet-active {
-  background: #000;
-}
-.swiper-container-vertical > .swiper-pagination-bullets {
-  right: 10px;
-  top: 50%;
-  -webkit-transform: translate3d(0px, -50%, 0);
-  -moz-transform: translate3d(0px, -50%, 0);
-  -o-transform: translate(0px, -50%);
-  -ms-transform: translate3d(0px, -50%, 0);
-  transform: translate3d(0px, -50%, 0);
-}
-.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
-  margin: 5px 0;
-  display: block;
-}
-.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
-  margin: 0 5px;
-}
-/* Progress */
-.swiper-pagination-progress {
-  background: rgba(0, 0, 0, 0.25);
-  position: absolute;
-}
-.swiper-pagination-progress .swiper-pagination-progressbar {
-  background: #007aff;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  -webkit-transform: scale(0);
-  -ms-transform: scale(0);
-  -o-transform: scale(0);
-  transform: scale(0);
-  -webkit-transform-origin: left top;
-  -moz-transform-origin: left top;
-  -ms-transform-origin: left top;
-  -o-transform-origin: left top;
-  transform-origin: left top;
-}
-.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
-  -webkit-transform-origin: right top;
-  -moz-transform-origin: right top;
-  -ms-transform-origin: right top;
-  -o-transform-origin: right top;
-  transform-origin: right top;
+    width: 185px;
+    margin-right: 8px;
+    float: left;
 }
-.swiper-container-horizontal > .swiper-pagination-progress {
-  width: 100%;
-  height: 4px;
-  left: 0;
-  top: 0;
-}
-.swiper-container-vertical > .swiper-pagination-progress {
-  width: 4px;
-  height: 100%;
-  left: 0;
-  top: 0;
-}
-.swiper-pagination-progress.swiper-pagination-white {
-  background: rgba(255, 255, 255, 0.5);
-}
-.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
-  background: #fff;
-}
-.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
-  background: #000;
-}
-/* 3D Container */
-.swiper-container-3d {
-  -webkit-perspective: 1200px;
-  -moz-perspective: 1200px;
-  -o-perspective: 1200px;
-  perspective: 1200px;
-}
-.swiper-container-3d .swiper-wrapper,
-.swiper-container-3d .swiper-slide,
-.swiper-container-3d .swiper-slide-shadow-left,
-.swiper-container-3d .swiper-slide-shadow-right,
-.swiper-container-3d .swiper-slide-shadow-top,
-.swiper-container-3d .swiper-slide-shadow-bottom,
-.swiper-container-3d .swiper-cube-shadow {
-  -webkit-transform-style: preserve-3d;
-  -moz-transform-style: preserve-3d;
-  -ms-transform-style: preserve-3d;
-  transform-style: preserve-3d;
-}
-.swiper-container-3d .swiper-slide-shadow-left,
-.swiper-container-3d .swiper-slide-shadow-right,
-.swiper-container-3d .swiper-slide-shadow-top,
-.swiper-container-3d .swiper-slide-shadow-bottom {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-}
-.swiper-container-3d .swiper-slide-shadow-left {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
-  /* Safari 4+, Chrome */
-  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Chrome 10+, Safari 5.1+, iOS 5+ */
-  background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Firefox 3.6-15 */
-  background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Opera 11.10-12.00 */
-  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Firefox 16+, IE10, Opera 12.50+ */
-}
-.swiper-container-3d .swiper-slide-shadow-right {
-  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
-  /* Safari 4+, Chrome */
-  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Chrome 10+, Safari 5.1+, iOS 5+ */
-  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Firefox 3.6-15 */
-  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Opera 11.10-12.00 */
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Firefox 16+, IE10, Opera 12.50+ */
-}
-.swiper-container-3d .swiper-slide-shadow-top {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
-  /* Safari 4+, Chrome */
-  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Chrome 10+, Safari 5.1+, iOS 5+ */
-  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Firefox 3.6-15 */
-  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Opera 11.10-12.00 */
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Firefox 16+, IE10, Opera 12.50+ */
-}
-.swiper-container-3d .swiper-slide-shadow-bottom {
-  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
-  /* Safari 4+, Chrome */
-  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Chrome 10+, Safari 5.1+, iOS 5+ */
-  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Firefox 3.6-15 */
-  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Opera 11.10-12.00 */
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-  /* Firefox 16+, IE10, Opera 12.50+ */
-}
-/* Coverflow */
-.swiper-container-coverflow .swiper-wrapper,
-.swiper-container-flip .swiper-wrapper {
-  /* Windows 8 IE 10 fix */
-  -ms-perspective: 1200px;
-}
-/* Cube + Flip */
-.swiper-container-cube,
-.swiper-container-flip {
-  overflow: visible;
-}
-.swiper-container-cube .swiper-slide,
-.swiper-container-flip .swiper-slide {
-  pointer-events: none;
-  -webkit-backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  -ms-backface-visibility: hidden;
-  backface-visibility: hidden;
-  z-index: 1;
-}
-.swiper-container-cube .swiper-slide .swiper-slide,
-.swiper-container-flip .swiper-slide .swiper-slide {
-  pointer-events: none;
-}
-.swiper-container-cube .swiper-slide-active,
-.swiper-container-flip .swiper-slide-active,
-.swiper-container-cube .swiper-slide-active .swiper-slide-active,
-.swiper-container-flip .swiper-slide-active .swiper-slide-active {
-  pointer-events: auto;
-}
-.swiper-container-cube .swiper-slide-shadow-top,
-.swiper-container-flip .swiper-slide-shadow-top,
-.swiper-container-cube .swiper-slide-shadow-bottom,
-.swiper-container-flip .swiper-slide-shadow-bottom,
-.swiper-container-cube .swiper-slide-shadow-left,
-.swiper-container-flip .swiper-slide-shadow-left,
-.swiper-container-cube .swiper-slide-shadow-right,
-.swiper-container-flip .swiper-slide-shadow-right {
-  z-index: 0;
-  -webkit-backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  -ms-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
-/* Cube */
-.swiper-container-cube .swiper-slide {
-  visibility: hidden;
-  -webkit-transform-origin: 0 0;
-  -moz-transform-origin: 0 0;
-  -ms-transform-origin: 0 0;
-  transform-origin: 0 0;
-  width: 100%;
-  height: 100%;
-}
-.swiper-container-cube.swiper-container-rtl .swiper-slide {
-  -webkit-transform-origin: 100% 0;
-  -moz-transform-origin: 100% 0;
-  -ms-transform-origin: 100% 0;
-  transform-origin: 100% 0;
-}
-.swiper-container-cube .swiper-slide-active,
-.swiper-container-cube .swiper-slide-next,
-.swiper-container-cube .swiper-slide-prev,
-.swiper-container-cube .swiper-slide-next + .swiper-slide {
-  pointer-events: auto;
-  visibility: visible;
-}
-.swiper-container-cube .swiper-cube-shadow {
-  position: absolute;
-  left: 0;
-  bottom: 0px;
-  width: 100%;
-  height: 100%;
-  background: #000;
-  opacity: 0.6;
-  -webkit-filter: blur(50px);
-  filter: blur(50px);
-  z-index: 0;
-}
-/* Fade */
-.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-  -webkit-transition-timing-function: ease-out;
-  -moz-transition-timing-function: ease-out;
-  -ms-transition-timing-function: ease-out;
-  -o-transition-timing-function: ease-out;
-  transition-timing-function: ease-out;
-}
-.swiper-container-fade .swiper-slide {
-  pointer-events: none;
-  -webkit-transition-property: opacity;
-  -moz-transition-property: opacity;
-  -o-transition-property: opacity;
-  transition-property: opacity;
-}
-.swiper-container-fade .swiper-slide .swiper-slide {
-  pointer-events: none;
-}
-.swiper-container-fade .swiper-slide-active,
-.swiper-container-fade .swiper-slide-active .swiper-slide-active {
-  pointer-events: auto;
-}
-/* Scrollbar */
-.swiper-scrollbar {
-  border-radius: 10px;
-  position: relative;
-  -ms-touch-action: none;
-  background: rgba(0, 0, 0, 0.1);
-}
-.swiper-container-horizontal > .swiper-scrollbar {
-  position: absolute;
-  left: 1%;
-  bottom: 3px;
-  z-index: 50;
-  height: 5px;
-  width: 98%;
-}
-.swiper-container-vertical > .swiper-scrollbar {
-  position: absolute;
-  right: 3px;
-  top: 1%;
-  z-index: 50;
-  width: 5px;
-  height: 98%;
-}
-.swiper-scrollbar-drag {
-  height: 100%;
-  width: 100%;
-  position: relative;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 10px;
-  left: 0;
-  top: 0;
-}
-.swiper-scrollbar-cursor-drag {
-  cursor: move;
-}
-/* Preloader */
-.swiper-lazy-preloader {
-  width: 42px;
-  height: 42px;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin-left: -21px;
-  margin-top: -21px;
-  z-index: 10;
-  -webkit-transform-origin: 50%;
-  -moz-transform-origin: 50%;
-  transform-origin: 50%;
-  -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
-  -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
-  animation: swiper-preloader-spin 1s steps(12, end) infinite;
-}
-.swiper-lazy-preloader:after {
-  display: block;
-  content: "";
-  width: 100%;
-  height: 100%;
-  background-position: 50%;
-  -webkit-background-size: 100%;
-  background-size: 100%;
-  background-repeat: no-repeat;
-}
-.swiper-lazy-preloader-white:after {
- }
-@-webkit-keyframes swiper-preloader-spin {
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
-@keyframes swiper-preloader-spin {
-  100% {
-    transform: rotate(360deg);
-  }
+.swiper-wrapper {
+    margin-left: 0px;
 }

@@ -40,8 +40,8 @@
     color: #fff;
 }
 
-.rec-swiper .swiper-slide, .brand-swiper .swiper-slide {
-    width: 185px;
+.rec-swiper .swiper-wrapper{
+    height: 116px;
 }
 
 .brand-swiper .swiper-wrapper{
@@ -50,7 +50,6 @@
 
 .recommond-floor {
     .rec-pro {
-        margin-bottom: 20px;
         display: block;
 
         .new-num {
@@ -71,7 +70,7 @@
 
 .swiper-slide > a img {
     width: 100%;
-    height: 100%;
+    height: 86px;
 }
 
 .swiper-wrapper {
@@ -137,6 +136,7 @@
     width: 1150px;
     font-size: 14px;
     background: #fff;
+    padding: 10px 0;
     z-index: 999;
 
     .catagory-text {
@@ -350,9 +350,10 @@
             background-color: #000;
             color: #fff;
             text-align: center;
-            width: 80px;
+            width: 75px;
             height: 32px;
             line-height: 32px;
+            padding-right: 5px;
             font-size: 13px;
             -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
             opacity: .9;
@@ -383,7 +384,7 @@
 
             > a {
                 color: #fff;
-                line-height: 22px;
+                line-height: 26px;
             }
 
             .msg-app {
@@ -451,4 +452,24 @@
     .all-catagory .catagory-navs {
         width: 900px;
     }
+
+    .swiper-slide {
+        width: 158px;
+    }
+
+    .rec-swiper .swiper-wrapper{
+        height: 104px;
+
+        img {
+            height: 73px;
+        }
+    }
+
+    .brand-swiper .swiper-wrapper{
+        height: 86px;
+
+        img {
+            height: 73px;
+        }
+    }
 }