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

@@ -90,8 +90,7 @@ const _handelPaymentInfo = (d) => {
 
     _.forEach(d.goods_list, g => {
         // link to goods
-        g.linkToGoods = helper.urlFormat(`/product/pro_${g.product_id}_${g.goods_id}/${g.cn_alphabet}.html`,
-            '', 'item');
+        g.linkToGoods = helper.getUrlBySkc(g.product_id, g.goods_id, g.cn_alphabet);
     });
     resData.goodsList = d.goods_list;
 

@@ -41,8 +41,7 @@ const index = (skn, limit) => {
                     market_price: mp === sp ? '' : `¥${helper.round(mp, 2)}`,
                     price: `¥${helper.round(sp, 2)}`,
                     product_name: hp.product_name,
-                    url: helper.urlFormat(
-                        `/product/pro_${hp.product_id}_${defaultGoods.goods_id}/${hp.cn_alphabet}.html`, null, 'item'),
+                    url: helper.getUrlBySkc(hp.product_id, defaultGoods.goods_id, hp.cn_alphabet),
                     pic_url: helper.image(defaultGoods.images_url, 280, 382, 2, 70)
                 });
             });

@@ -30,8 +30,7 @@ const EXCHANGE_URI = '/home/returns/exchangeDetail';
 const getProductUrlBySkc = (pid, gid, cnAlphabet) => {
     cnAlphabet = cnAlphabet || 'cnalphabet';
 
-    return helpers.urlFormat(`/product/pro_${pid}_${gid}/${cnAlphabet}.html`,
-        {}, 'item');
+    return helpers.getUrlBySkc(pid, gid, cnAlphabet);
 };
 
 const setDetailGoods = (list) => {

+/*
+ * @Author: hongwei.gao
+ * @Date:   2016-12-28
+ */
+
+'use strict';
+
+const mRoot = '../models';
+const arrive = require(`${mRoot}/newArrive-service`);
+
+/**
+ * 新品到着首页加载
+ * @param  {[type]} req [description]
+ * @param  {[type]} res [description]
+ * @return {[type]}     [description]
+ */
+exports.index = (req, res, next) => {
+    let pjax = req.query._pjax;
+    //加载最新上架数据
+    if (pjax) {
+        arrive.getRecList(req).then(result => {
+            Object.assign(result, {layout: false});
+            res.render('list/new-pro-list', result);
+        }).catch(next);
+
+        return;
+    }
+    //加载所有
+    arrive.index(req).then(result => {
+        res.render('list/new-arrive', result);
+    }).catch(next);
+
+};

@@ -1642,7 +1642,7 @@ const recommendAsync = (skn, page, limit) => {
         }
 
         const formatPrice = p => `¥${p}`;
-        const productUrl = (pid, gid, cn) => helpers.urlFormat(`/product/pro_${pid}_${gid}/${cn}.html`, null, 'item');
+        const productUrl = (pid, gid, cn) => helpers.getUrlBySkc(pid, gid, cn);
         const productImageUrl = Fn.pipe(Fn.prop('default_images'), _.partial(helpers.image, _, 280, 382, 2, 70));
 
         let products = _.get(recommendData, 'data.product_list', []).map((rp) => {

+/**
+ * 新品到着相关接口
+ * @author: yyq<yanqing.yang@yoho.cn>
+ * @date: 2016/7/17
+ */
+
+'use strict';
+
+const api = global.yoho.API;
+
+/**
+ * 为您推荐店铺API
+ *
+ */
+const recShop = (params) => {
+    let finalParams = {
+        method: 'app.newproduct.recshop'
+    };
+
+    Object.assign(finalParams, params);
+    return api.get('', finalParams);
+};
+
+/**
+ * 为您推荐品牌API
+ *
+ */
+const recBrand = (params) => {
+    let finalParams = {
+        method: 'app.newproduct.recbrand'
+    };
+
+    Object.assign(finalParams, params);
+    return api.get('', finalParams);
+};
+
+/**
+ * 最新上架API
+ *
+ */
+const recList = (params) => {
+    let finalParams = {
+        method: 'app.newproduct.reclist',
+        limit: 60
+    };
+
+    Object.assign(finalParams, params);
+
+    return api.get('', finalParams);
+};
+
+module.exports = {
+    recShop,
+    recBrand,
+    recList
+};

+/*
+ * @Author: hongwei.gao
+ * @Date:   2016-12-28
+ */
+'use strict';
+
+const headerModel = require('../../../doraemon/models/header');
+const api = require('./newArrive-api');
+const _ = require('lodash');
+const searchHandler = require('./search-handler');
+const publicHandler = require('./public-handler');
+const helpers = global.yoho.helpers;
+const moment = require('moment');
+
+const channelMap = {
+    boys: {
+        code: '29ce9c740c452b97d421f9630893dfe6',
+        yh_channel: 1,
+        gender: '1,3'
+    },
+    girls: {
+        code: 'cc145b163edb010c5d6320a2c680f24a',
+        yh_channel: 2,
+        gender: '2,3'
+    }
+};
+
+/**
+ * 加载新品到着首页
+ * @param req
+ * @returns {Promise.<TResult>}
+ */
+const index = (req) => {
+
+    let channel = req.query.channel || req.cookies._Channel || 'boys';
+    let params = {
+        yh_channel: channelMap[channel].yh_channel,
+        uid: req.user.uid || ''
+    };
+    let shopParams = Object.assign({}, params, {contentCode: channelMap[channel].code});
+    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)
+    ];
+
+    return Promise.all(apiMethod).then(result => {
+        var respData = {
+            slide: {
+                list: []
+            },
+            recommond: {
+                name: '为您推荐',
+                dataList: []
+            },
+            newBrand: {
+                name: '新品牌入驻',
+                brandList: []
+            },
+            newProduct: {
+                name: '最新上架',
+                newProList: [],
+                ctyList: []
+            },
+            firstLook: {
+                name: '精彩抢先看',
+                lookBanner: {
+                    list: []
+                },
+                lookTwoImg: []
+            }
+        };
+
+        // 头部数据
+        Object.assign(respData, result[0]);
+
+        // 面包屑头部
+        Object.assign(respData, searchHandler.handlePathNavData({}, {}, 'new', channel));
+
+        if (result[1].code === 200 && result[1].data && result[1].data.shop_list) {
+            let shopsData = result[1].data.shop_list,
+                dataList = [];
+
+            _.forEach(shopsData, shop => {
+                dataList.push({
+                    url: helpers.urlFormat('', {shopId: shop.shops_id}, shop.shop_domain),
+                    src: shop.shop_logo,
+                    num: shop.new_product_num
+                });
+            });
+
+            // 为您推荐
+            Object.assign(respData.recommond.dataList, dataList);
+
+            _.forEach(result[1].data.ads, ads => {
+                // banner
+                if (ads.template_name === 'focus') {
+                    Object.assign(respData.slide.list, ads.data);
+                }
+
+                // 精彩想先看，左轮播右2图
+                if (ads.template_name === 'NL2R') {
+                    Object.assign(respData.firstLook.lookBanner.list, ads.data.left);
+                    Object.assign(respData.firstLook.lookTwoImg, ads.data.right);
+                }
+            });
+        }
+
+        // 新品牌入驻
+        if (result[2].code === 200 && result[2].data && result[2].data.new_brand_list) {
+            let brandsData = result[2].data.new_brand_list,
+                brandList = [];
+
+            _.forEach(brandsData, brand => {
+                brandList.push({
+                    url: helpers.urlFormat('', {shopId: brand.shops_id}, brand.shop_domain),
+                    src: brand.shop_logo
+                });
+            });
+
+            Object.assign(respData.newBrand.brandList, brandList);
+        }
+
+        // 最新上架
+        if (result[3].code === 200 && result[3].data) {
+            let groupSort = result[3].data.filter.group_sort || [],
+                ctyList = [];
+
+            // 推荐品类
+            _.forEach(groupSort, group =>{
+                _.forEach(group.sub, subSort =>{
+                    if (ctyList.length < 20) {
+                        ctyList.push({
+                            url: publicHandler.handleFilterUrl(params, {sort: subSort.relation_parameter.sort}),
+                            name: subSort.category_name
+                        });
+                    } else {
+                        return true;
+                    }
+                });
+            });
+            Object.assign(respData.newProduct.ctyList, ctyList);
+
+            // 列表数据
+            Object.assign(respData.newProduct, _proListHandler(result[3].data, Object.assign({}, params, {channel: channel})));
+        }
+
+        // 数据为空，不显示页面模块
+        if (_.isEmpty(respData.slide.list)) {
+            delete respData.slide;
+        }
+        if (_.isEmpty(respData.recommond.dataList)) {
+            delete respData.recommond;
+        }
+        if (_.isEmpty(respData.newBrand.brandList)) {
+            delete respData.newBrand;
+        }
+        if (_.isEmpty(respData.newProduct.newProList) && _.isEmpty(respData.newProduct.ctyList)) {
+            delete respData.newProduct;
+        }
+        if (_.isEmpty(respData.firstLook.lookBanner.list) && _.isEmpty(respData.firstLook.lookTwoImg)) {
+            delete respData.firstLook;
+        }
+        return respData;
+    });
+};
+
+/**
+ * 处理列表数据、及页码
+ * @param data
+ * @returns {{footPager: type[], newProList: Array}}
+ * @private
+ */
+const _proListHandler = (data, params) => {
+    let total = data.total || '',
+        proList = data.product_list || [],
+        newProList = [];
+
+    // 页码
+    let footPager = searchHandler.handlePagerData(total, params);
+
+    // 商品列表
+    _.forEach(proList, pro => {
+        let proObj = {};
+
+        // 应季热门
+        if (pro.recommend_type === 'seasonSort') {
+            let tags = [];
+
+            _.forEach(pro.data, subData => {
+                tags.push({
+                    url: helpers.urlFormat('', {sort: subData.relationParameter}, 'list'),
+                    name: subData.categoryName
+                });
+            });
+
+            proObj.tags = tags;
+            proObj.tagType = true;
+        }
+
+        // 热门搜索
+        if (pro.recommend_type === 'hotSearchTerm') {
+            let tags = [];
+
+            _.forEach(pro.data, subData => {
+                tags.push({
+                    url: helpers.urlFormat('', {query: subData}, 'search'),
+                    name: subData
+                });
+            });
+
+            proObj.tags = tags;
+            proObj.tagType = true;
+            proObj.hotSearch = true;
+        }
+
+        // 店铺
+        if (pro.recommend_type === 'hotShop') {
+
+            proObj = {
+                url: helpers.urlFormat('', {shopId: pro.data.shops_id}, pro.data.shop_domain),
+                src: pro.data.shop_logo,
+                newNum: pro.data.new_product_num,
+                collNum: pro.data.favorite_num
+            };
+            proObj.shopType = true;
+        }
+
+        // 文章
+        if (pro.recommend_type === 'fashionArticle') {
+
+            proObj = {
+                url: helpers.urlFormat('/' + pro.data.id + '.html', {channel: params.channel}, 'guang'),
+                src: pro.data.src,
+                title: pro.data.title,
+                publishTime: moment(parseInt(pro.data.publish_time_long)).format('YYYY年MM月DD HH:mm'),
+                num: pro.data.browse || 0
+            };
+            proObj.articalType = true;
+        }
+
+        // 普通商品
+        if (!pro.recommend_type) {
+            let defaultGoods = _.find(pro.goods_list, {is_default: 'Y'});
+
+            // 无默认商品取商品列表第一个
+            if (!defaultGoods) {
+                defaultGoods = pro.goods_list[0];
+            }
+            proObj = {
+                url: helpers.getUrlBySkc(pro.product_id, defaultGoods.goods_id, pro.cn_alphabet),
+                src: pro.default_images,
+                proName: pro.product_name,
+                salesPrice: pro.sales_price
+            };
+            proObj.goodsType = true;
+        }
+
+        newProList.push(proObj);
+    });
+
+    return {
+        footPager: footPager,
+        newProList: newProList
+    };
+};
+
+/**
+ * 加载最新上架数据
+ * @param req
+ * @returns {Promise.<TResult>}
+ */
+const getRecList = (req) => {
+    let channel = req.query.channel || req.cookies._Channel || 'boys';
+    let params = {
+        yh_channel: channelMap[channel].yh_channel,
+        uid: req.user.uid || ''
+    };
+    Object.assign(params, {
+        sort: req.query.sort || '',
+        page: req.query.page || 1
+    });
+
+    let apiMethod = [
+        api.recList(params)
+    ];
+
+    return Promise.all(apiMethod).then(result => {
+        let respData = {};
+        if (result[0].code === 200 && result[0].data) {
+            Object.assign(respData, _proListHandler(result[0].data, params));
+        }
+        return respData;
+    });
+};
+
+module.exports = {
+    index,
+    getRecList
+};

@@ -40,6 +40,9 @@ const search = require(`${cRoot}/search`);
 // 学生优惠controller
 const students = require(`${cRoot}/students`);
 
+// 新品到着controller
+const newArrive = require(`${cRoot}/newArrive`);
+
 // 商品促销routers
 router.get('/sale', sale.index); // sale 首页
 router.get('/sale/discount/detail', sale.discount); // 折扣专场详情页
@@ -112,4 +115,7 @@ router.get('/students/verify', students.verify); // 身份验证
 router.get('/students/userAcquireStatus', students.userAcquireStatus); // 获取优惠券领取状态
 router.get('/students/list', students.list); // 获取优惠券领取状态
 
+// 新品到着改版
+router.get('/newArrive', newArrive.index); // 获取优惠券领取状态
+
 module.exports = router;

+<div class="home-page yoho-page {{pageType}}" data-page="{{pageType}}">
+    {{> common/path-nav}}
+    {{! 头部banner}}
+    {{# slide}}
+        {{> banner}}
+    {{/ slide}}
+    {{#recommond}}
+        <div class="recommond-floor">
+            {{> common/floor-header}}
+            <div id="rec-swiper" class="swiper-container new-arrival-swiper rec-swiper">
+                <div class="swiper-wrapper">
+                    {{#dataList}}
+                        <div class="swiper-slide">
+                            <a class="rec-pro" href="{{url}}" target="_blank">
+                                <img src="{{image src 185 86}}">
+                                <p class="new-num">上新<span>{{num}}</span>款</p>
+                            </a>
+                        </div>
+                    {{/dataList}}
+                </div>
+
+                <a class="prev" href="javascript:;">
+                    <span class="iconfont">&#xe609;</span>
+                </a>
+                <a class="next" href="javascript:;">
+                    <span class="iconfont">&#xe608;</span>
+                </a>
+            </div>
+        </div>
+    {{/recommond}}
+    {{#newBrand}}
+        <div class="newBrand-floor">
+           {{> common/floor-header}}
+            <div id="brand-swiper" class="swiper-container new-arrival-swiper brand-swiper">
+                <div class="swiper-wrapper">
+                    {{#brandList}}
+                    <span class="swiper-slide">
+                        <a class="" href="{{url}}" target="_blank">
+                            <img src="{{image src 185 86}}">
+                        </a>
+                    </span>
+                    {{/brandList}}
+                </div>
+
+                <a class="prev" href="javascript:;">
+                    <span class="iconfont">&#xe609;</span>
+                </a>
+                <a class="next" href="javascript:;">
+                    <span class="iconfont">&#xe608;</span>
+                </a>
+            </div>
+        </div>
+    {{/newBrand}}
+    {{#firstLook}}
+        <div class="firstLook-floor clearfix">
+            {{> common/floor-header}}
+            {{#lookBanner}}
+            <div class="left-one">
+                <div class="slide-wrapper">
+                    <ul>
+                        {{# list}}
+                            <li style="{{#if bgColor}}background:{{bgColor}}{{/if}}">
+                                <a href="{{url}}" target= "_blank">
+                                    {{#if @first}}
+                                        <img src="{{image src 785 420}}">
+                                    {{^}}
+                                        <img class="lazy" data-original="{{image src 785 420}}" alt="">
+                                    {{/if}}
+                                </a>
+                                {{# tips}}
+                                    <div class="slide-tips">
+                                        <div class="g-mark"></div>
+                                        <p>{{.}}</p>
+                                    </div>
+                                {{/ tips}}
+                            </li>
+                        {{/ list}}
+                    </ul>
+                </div>
+            </div>
+            {{/lookBanner}}
+            <div class="right-two">
+                {{#lookTwoImg}}
+                <a class="first-right-img" href="{{url}}" target="_blank">
+                    <img class="lazy" data-original="{{image src 355 205}}" style="display: block; opacity: 1;">
+                </a>
+                {{/lookTwoImg}}
+            </div>
+        </div>
+    {{/firstLook}}
+    {{#newProduct}}
+        <div id="new-product-floor" class="newProduct-floor">
+            {{> common/floor-header}}
+            <div class="all-catagory clearfix">
+                <div class="catagory-text">推荐品类</div>
+                <ul class="catagory-navs clearfix">
+                    {{#ctyList}}
+                        <li {{#if active}} class="active" {{/if}}>
+                            <a href="{{url}}">{{name}}</a>
+                        </li>
+                    {{/ctyList}}
+                </ul>
+            </div>
+            <div  id="pjax-container" class="new-arrive-list clearfix">
+                {{> list/new-arrive-list}}
+            </div>
+        </div>
+    {{/newProduct}}
+    <div id="new-arrive-latest" class="product-detail-page new-arrive-latest">
+        <div class="bottom-tab">
+            <p>
+                <span class="bottom-title bottom-cur">最近浏览</span>
+            </p>
+        </div>
+        <div class="individual-comment info-block info-bottom">
+            <div class="latest-walk" style="display: block;">
+                <input id="latest-walk-count" type="hidden" value="5">
+                <div id="latest-walk-goods" class="goods clearfix"></div>
+            </div>
+            {{> product/latest-walk-tpl}}
+
+            <div class="lazy-load-object">
+                <textarea class="latest-walk-datalazyload" style="visibility: hidden;">
+                    <script> fetchLatestWalk(); </script>
+                </textarea>
+            </div>
+        </div>
+    </div>
+</div>

+{{> list/new-arrive-list}}

+{{#newProList }}
+    {{!应季热门、热门搜索}}
+    {{#if tagType}}
+        <div class="good-info imgopacity" data-skn="">
+            <div class="list-top-img {{#if hotSearch}}hot-search-img{{/if}}"></div>
+            <ul class="list-box clearfix">
+                {{#tags}}
+                    <li><a href="{{url}}" target="_blank">{{name}}</a></li>
+                {{/tags}}
+            </ul>
+        </div>
+    {{/if}}
+    {{!普通商品}}
+    {{#if goodsType}}
+        <div class="good-info imgopacity" data-skn="">
+            <div class="good-detail-img">
+                <a class="good-thumb" href="{{url}}" target="_blank">
+                    <img class="lazy" data-original="{{image src 222 300}}" style="display: block; opacity: 1;">
+                </a>
+            </div>
+            <div class="good-detail-text">
+                <a href="{{url}}" target="_blank">{{proName}}</a>
+                <p class="price">
+                    <span class="sale-priceprime-cost"> ¥{{salesPrice}}</span>
+                </p>
+            </div>
+        </div>
+    {{/if}}
+    {{!店铺}}
+    {{#if shopType}}
+        <div class="good-info imgopacity" data-skn="">
+            <div class="brand-box">
+                <div class="logo-wrap">
+                    <img class="lazy" data-original="{{image src 185 86}}" style="display: block; opacity: 1;">
+                </div>
+                <div class="brand-info clearfix">
+                    <p class="num-info">上新<span>{{newNum}}</span>件&nbsp;&nbsp;<span>{{collNum}}</span>人收藏</p>
+                    <span class="btn-tag tag-home">
+                         <a href="{{url}}" target="_blank"><i class="iconfont">&#xe61a;</i>  <em>进入店铺</em></a>
+                    </span>
+                </div>
+            </div>
+        </div>
+    {{/if}}
+    {{!SK商品}}
+    {{#if skGoodsType}}
+        <div class="good-info imgopacity" data-skn="">
+            <div class="good-detail-img">
+                <a class="good-thumb" href="" target="_blank">
+                    <img class="lazy" data-original="//img13.static.yhbimg.com/goodsimg/2016/11/08/16/0209f4293037c2c5ca85bf67991b691c9a.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90" src="//img13.static.yhbimg.com/goodsimg/2016/11/08/16/0209f4293037c2c5ca85bf67991b691c9a.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90" style="display: block; opacity: 1;">
+                </a>
+            </div>
+            <div class="ka-tag">
+                <p class="ka-name">STUSSY</p>
+            </div>
+            <div class="good-detail-text ka-detail-text">
+                <a href="" target="_blank">Preppy Elite 简约连帽棉衣【两色可选】</a>
+                <p class="price">
+                    <span class="sale-priceprime-cost"> ¥379.00</span>
+                </p>
+            </div>
+        </div>
+    {{/if}}
+    {{!文章}}
+    {{#if articalType}}
+        <div class="good-info imgopacity" data-skn="">
+            <div class="guang-box">
+                <div class="classification">
+                    潮品
+                </div>
+                <div class="type-icon fashion-good"></div>
+                <a class="guang-img" href="{{url}}" target="_blank">
+                    <img class="lazy" data-original="{{image src 222 140}}" style="display: block;">
+                </a>
+                <div class="msg-info">
+                    <a class="msg-title" href="{{url}}" target="_blank" style="word-wrap: break-word;">{{title}}</a>
+                    <p class="msg-app">
+                                    <span class="publish-time">
+                                        <i class="iconfont"></i>
+                                        {{publishTime}}
+                                    </span>
+                        <span class="page-view">
+                                        <i class="iconfont"></i>
+                                        <em>{{num}}</em>
+                                    </span>
+                    </p>
+                </div>
+            </div>
+        </div>
+    {{/if}}
+{{/newProList }}
+{{> common/foot-pager}}
+
+

@@ -16,18 +16,15 @@ module.exports = {
     siteUrl: 'http://www.yohobuy.com',
     cookieDomain: '.yohobuy.com',
     domains: {
-        // test3
-        singleApi: 'http://api-test3.yohops.com:9999/',
-        api: 'http://api-test3.yohops.com:9999/',
-        service: 'http://service-test3.yohops.com:9999/',
+        favApi: 'http://192.168.102.31:8092/brower',
+
+        api: 'http://api-test2.yohops.com:9999/',
+        service: 'http://service-test2.yohops.com:9999/',
 
         // singleApi: 'http://single.gray.yohops.com/',
         // api: 'http://api.yoho.cn/',
         // service: 'http://service.yoho.cn/',
 
-        // api: 'http://dev-api.yohops.com:9999/',
-        // service: 'http://dev-service.yohops.com:9999/',
-
         // api: 'http://192.168.102.205:8080/gateway/',
         // service: 'http://dev-service.yohops.com:9999/',
         // search: 'http://192.168.102.216:8080/yohosearch/',
@@ -112,7 +109,7 @@ module.exports = {
         }
     },
     apiCache: {
-        cache: false
+        cache: true
     },
     zookeeperServer: '192.168.102.168:2188'
 };
@@ -121,7 +118,6 @@ if (isProduction) {
     Object.assign(module.exports, {
         appName: 'www.yohobuy.com',
         domains: {
-            singleApi: 'http://single.yoho.cn/',
             api: 'http://api.yoho.yohoops.org/',
             service: 'http://service.yoho.yohoops.org/',
             search: 'http://search.yohoops.org/yohosearch/',
@@ -151,7 +147,7 @@ if (isProduction) {
     Object.assign(module.exports, {
         appName: 'www.yohobuy.com for test',
         domains: {
-            singleApi: process.env.TEST_API || 'http://192.168.102.31:8092/brower',
+            favApi: 'http://192.168.102.31:8092/brower',
             api: process.env.TEST_API || 'http://testapi.yoho.cn:28078/',
             service: process.env.TEST_SERVICE || 'http://testservice.yoho.cn:28077/',
             search: process.env.TEST_SEARCH || 'http://192.168.102.216:8080/yohosearch/',

@@ -112,6 +112,7 @@
     "yoho-jquery-pjax": "0.0.1",
     "yoho-jquery-placeholder": "^2.3.1",
     "yoho-jquery-qrcode": "^0.14.0",
-    "yoho-slider": "0.0.2"
+    "yoho-slider": "0.0.2",
+    "yoho-swiper": "^3.3.1"
   }
 }

@@ -23,7 +23,6 @@ function fetchLatestWalk() {
     }
 
     tpl = Handlebars.compile($('#latest-walk-tpl').html());
-
     $.ajax({
         url: 'http://www.yohobuy.com/common/recentReview',
         dataType: 'jsonp',
@@ -40,6 +39,7 @@ function fetchLatestWalk() {
                 // 若无最近浏览，请隐藏容器
                 if (res.length === 0) {
                     $('.latest-walk').addClass('hide');
+                    $('#new-arrive-latest').addClass('hide');
                     return;
                 }
                 for (i = 0; i < res.length; i++) {
@@ -62,6 +62,8 @@ function fetchLatestWalk() {
 
                     lazyLoad($('#latest-walk-goods .lazy'));
                 }
+
+
             }
         }
     });
@@ -70,4 +72,4 @@ function fetchLatestWalk() {
 window.fetchLatestWalk = fetchLatestWalk;
 
 // 数据懒加载
-dataLazyLoad.init({cls: '.latest-walk-datalazyload', threshold: 700});
+dataLazyLoad.init({cls: '.latest-walk-datalazyload', threshold: 0});

+/**
+ * Created by DELL on 2016.12.28.
+ */
+var $ = require('yoho-jquery'),
+    lazyLoad = require('yoho-jquery-lazyload');
+
+var Swiper = require('yoho-swiper');
+require('../common');
+require('../plugins/slider');
+require('yoho-jquery-pjax');
+
+$('.slide-container').slider();
+$('.left-one').slider();
+var recSwiper = new Swiper('.rec-swiper', {
+    pagination: '.swiper-pagination',
+    paginationClickable: true,
+    slidesPerView: 6,
+    slidesPerColumn: 2,
+    spaceBetween: 8,
+    lazyLoading: true,
+    nextButton: '.next',
+    prevButton: '.prev'
+});
+
+var brandSwiper = new Swiper('.brand-swiper', {
+    pagination: '.swiper-pagination',
+    paginationClickable: true,
+    slidesPerView: 6,
+    spaceBetween: 8,
+    lazyLoading: true,
+    nextButton: '.next',
+    prevButton: '.prev'
+});
+lazyLoad($('img.lazy'));
+
+require('./detail/latest-walk'); // 最近浏览
+
+$(document).pjax('.foot-pager .pager > a, .catagory-navs li.active > a', '#pjax-container', {
+    timeout: 2000
+});
+
+$(document).pjax('.catagory-navs li:not(.active) > a', '#pjax-container', {
+    url: '?',
+    timeout: 2000
+});
+
+$(document).on('pjax:complete', function() {
+    $('html,body').scrollTop($('#new-product-floor').offset().top);
+    lazyLoad($('img.lazy'));
+});
+
+$('#new-product-floor').on('click', '.catagory-navs li', function() {
+    var $li = $(this);
+
+    if (!$li.hasClass('active')) {
+        $li.addClass('active').siblings().removeClass('active');
+    } else {
+        $li.removeClass('active');
+    }
+
+});
+
+/*
+ * 页面加载完
+ */
+$(function() {
+    // 轮播数量不够隐藏左右箭头
+    var $recSwiper = $('#rec-swiper');
+    var recNum = $recSwiper.find('.swiper-wrapper > .swiper-slide').length;
+
+    if (recNum <= 12) {
+        $recSwiper.find('.prev,.next').addClass('hide');
+    }
+
+    var $brandSwiper = $('#brand-swiper');
+    var brandNum = $brandSwiper.find('.swiper-wrapper > .swiper-slide').length;
+
+    if (brandNum <= 6) {
+        $brandSwiper.find('.prev,.next').addClass('hide');
+    }
+});
+

+/**
+ * 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;
+}
+.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 {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
+  left: 10px;
+  right: auto;
+}
+.swiper-button-prev.swiper-button-black,
+.swiper-container-rtl .swiper-button-next.swiper-button-black {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
+}
+.swiper-button-prev.swiper-button-white,
+.swiper-container-rtl .swiper-button-next.swiper-button-white {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
+}
+.swiper-button-next,
+.swiper-container-rtl .swiper-button-prev {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
+  right: 10px;
+  left: auto;
+}
+.swiper-button-next.swiper-button-black,
+.swiper-container-rtl .swiper-button-prev.swiper-button-black {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
+}
+.swiper-button-next.swiper-button-white,
+.swiper-container-rtl .swiper-button-prev.swiper-button-white {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
+}
+/* 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;
+}
+.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-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+  background-position: 50%;
+  -webkit-background-size: 100%;
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+.swiper-lazy-preloader-white:after {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+@-webkit-keyframes swiper-preloader-spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes swiper-preloader-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}

@@ -14,7 +14,7 @@
 @import "shop-index";
 @import "students/index";
 @import "top-coupon";
-
+@import "new-arrive";
 .product-page {
     .list-left {
         width: 160px;

+@import "../common/swiper";
+
+.new-arrival-swiper {
+    width: 100%;
+
+    .prev, .next {
+        position: absolute;
+        top: 50%;
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        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;
+
+        > .iconfont {
+           font-size: 25px;
+        }
+    }
+
+    .prev {
+        left: 0;
+        right: auto;
+    }
+
+    .next {
+        right: 0;
+        left: auto;
+    }
+}
+
+.rec-swiper .prev, .rec-swiper .next {
+    background: #444;
+    color: #fff;
+}
+
+.brand-swiper .swiper-wrapper{
+    height: 86px;
+}
+
+.recommond-floor {
+    .rec-pro {
+        margin-bottom: 20px;
+        display: block;
+
+        .new-num {
+            background: #fb452c;
+            text-align: center;
+            line-height: 30px;
+            color: #fff;
+
+            > span {
+                margin: 0 5px;
+            }
+        }
+    }
+}
+
+.swiper-slide > a img {
+    width: 100%;
+    height: 100%;
+}
+
+.swiper-wrapper {
+
+}
+
+.firstLook-floor {
+    .left-one {
+        width: 785px;
+        height: 420px;
+        position: relative;
+        margin-right: 10px;
+        float: left;
+
+        .slide-wrapper {
+            height: 420px;
+        }
+
+        .slide-wrapper li a {
+            width: 100%;
+        }
+
+        .slide-switch a.prev {
+            margin-left: -393px;
+        }
+
+        .slide-switch a.next {
+            margin-right: -393px;
+        }
+    }
+
+    .right-two {
+        width: 355px;
+        float: left;
+
+        .first-right-img {
+            height: 205px;
+            margin-bottom: 10px;
+            display: block;
+
+            > img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
+
+.all-catagory {
+    line-height: 40px;
+    font-size: 14px;
+
+    .catagory-text {
+        float: left;
+        font-size: 16px;
+        color: #d0021b;
+        font-weight: bold;
+        padding: 0 15px 0 0;
+        border-right: 1px solid #000;
+    }
+
+    .catagory-navs {
+        float: left;
+        width: 1065px;
+        height: 40px;
+        overflow: hidden;
+    }
+
+    .catagory-navs li {
+        float: left;
+        padding: 0 15px;
+        line-height: 30px;
+        margin-top: 5px;
+
+        &.active {
+            background: #000;
+
+            a {
+                color: #fff;
+            }
+        }
+    }
+
+    .catagory-more {
+        float: right;
+
+        a:hover {
+            border-bottom: 1px solid #000;
+        }
+    }
+}
+
+.new-arrive-list {
+    margin-top: 20px;
+    margin-right: -10px;
+
+    .list-top-img {
+        width: 100%;
+        height: 110px;
+        background: resolve('product/season-sort.png') no-repeat;
+    }
+
+    .list-top-img.hot-search-img {
+        background: resolve('product/hot-search.png') no-repeat;
+    }
+
+    .list-box {
+        border: 1px solid #e6e6e6;
+        height: 163px;
+        padding-top: 25px;
+        overflow: hidden;
+
+        li {
+            float: left;
+            width: 90px;
+            height: 30px;
+            line-height: 30px;
+            background: #f8f8f8;
+            margin: 5px;
+            padding: 0 5px;
+            text-align: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    .logo-wrap {
+        width: 185px;
+        height: 86px;
+        margin: 35px auto;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .brand-box {
+        display: inline-block;
+        width: 100%;
+        background: #f5f5f5;
+    }
+
+    .brand-info {
+        padding: 0 15px;
+        text-align: center;
+
+        .num-info {
+            margin: 50px 0;
+
+            span {
+                color: #ee0011;
+            }
+        }
+
+        .btn-tag {
+            font-size: 14px;
+            color: #fff;
+            padding: 8px 6px;
+        }
+
+        .btn-tag.tag-col {
+            background: #ee0011;
+        }
+
+        .btn-tag.tag-home {
+            background: #000;
+        }
+
+        .btn-tag.tag-home > a {
+            color: #fff;
+        }
+}
+
+    .good-info {
+        position: relative;
+        height: 365px;
+    }
+
+    .good-detail-img, .guang-box, .brand-box {
+        height: 300px;
+    }
+
+    .good-detail-text {
+        height: 65px;
+
+        > a {
+            margin-top: 15px;
+            padding: 0 5px;
+            text-align: center;
+        }
+
+        .price {
+            text-align: center;
+        }
+    }
+
+    .ka-detail-text {
+        position: relative;
+        background: #fb452c;
+        color: #fff;
+
+        > a {
+            color: #fff;
+        }
+    }
+
+    .ka-tag {
+        text-align: center;
+        position: absolute;
+        width: 100%;
+        top: 285px;
+        z-index: 10;
+
+        .ka-name {
+            display: inline-block;
+            background: #000;
+            padding: 5px 10px;
+            color: #fff;
+        }
+    }
+
+    .guang-box {
+        position: relative;
+
+        .guang-img {
+            width: 100%;
+            height: 140px;
+            display: block;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .classification {
+            position: absolute;
+            background-color: #000;
+            color: #fff;
+            text-align: center;
+            width: 80px;
+            height: 32px;
+            line-height: 32px;
+            font-size: 13px;
+            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+            opacity: .9;
+            z-index: 99;
+        }
+
+        .type-icon {
+            position: absolute;
+            top: 0;
+            left: 66px;
+            height: 32px;
+            width: 32px;
+            background: resolve('guang/msg-reco.png') no-repeat;
+            background-size: 100% 100%;
+            z-index: 100;
+        }
+
+        .type-icon.fashion-good {
+            background: resolve('guang/fashion-good.png') no-repeat;
+        }
+
+        .msg-info {
+            position: relative;
+            height: 127px;
+            background: #027cf9;
+            color: #fff;
+            padding: 15px 10px 10px;
+
+            > a {
+                color: #fff;
+                line-height: 25px;
+            }
+
+            .msg-app {
+                position: absolute;
+                bottom: 15px;
+                font-size: 12px;
+
+                .page-view {
+                    margin-left: 10px;
+                }
+            }
+        }
+    }
+
+    .foot-pager {
+        display: inline-block;
+        width: 100%;
+    }
+}
+
+.new-arrive-latest {
+    margin-top: 30px;
+}
+
+.min-screen {
+    .firstLook-floor {
+        .left-one {
+            width: 675px;
+            height: 361px;
+
+            .slide-wrapper {
+                height: 361px;
+            }
+
+            .slide-switch a.prev {
+                margin-left: -338px;
+            }
+
+            .slide-switch a.next {
+                margin-right: -338px;
+            }
+        }
+
+        .right-two {
+            width: 305px;
+
+            .first-right-img {
+                height: 176px;
+            }
+        }
+    }
+
+    .all-catagory .catagory-navs {
+        width: 900px;
+    }
+}