Merge branch 'feature/newHome' into 'release/6.1'

Feature/new home



See merge request !888

+'use strict';
+
+const mRoot = '../models';
+const headerModel = require('../../../doraemon/models/header'); // 头部model
+const footerModel = require('../../../doraemon/models/footer_tab'); // 底部tab
+const newHomeModel = require(`${mRoot}/new-home`);
+
+let yhchannels = {
+    '1,3': 1,
+    '2,3': 2
+};
+
+let channels = {
+    boys: 1,
+    girls: 2,
+    kids: 3,
+    lifestyle: 4
+};
+
+exports.index = (req, res, next) => {
+    let responseData = {
+        isLogin: req.user.uid ? true : false,
+        module: 'home',
+        page: 'new-home',
+        pageHeader: headerModel.setNav({
+            navTitle: '个人中心'
+        }),
+        title: '个人中心 | Yoho!Buy有货 | 潮流购物逛不停',
+        showFooterTab: footerModel.getUrlData('mine'),
+        width750: true,
+        localCss: true,
+        pageFooter: true,
+        isWechat: req.yoho.isWechat
+    };
+
+    if (req.yoho.isWechat) {
+        responseData.pageFooter = false;
+    }
+
+    let params = {
+        uid: req.user.uid,
+        udid: require('yoho-md5')(req.ip),
+        contentCode: 'b2b5cde8144aff3073573c3b323344ab',
+        channel: (req.query.gender && yhchannels[req.query.gender]) ||
+        (req.cookies._Channel && channels[req.cookies._Channel]) || 1
+    };
+
+    req.ctx(newHomeModel).index(params).then(result => {
+        res.render('new-home', Object.assign(responseData, result));
+    }).catch(next);
+};

+'use strict';
+
+const _ = require('lodash');
+const camelCase = global.yoho.camelCase;
+const utils = '../../../utils';
+const resourcesProcess = require(`${utils}/resources-process`);
+const helpers = global.yoho.helpers;
+
+class newHome extends global.yoho.BaseModel {
+    constructor(ctx) {
+        super(ctx);
+    }
+
+    // 基本信息
+    _userData(params) {
+        if (params.uid) {
+            let options = {
+                data: {
+                    method: 'app.passport.profile',
+                    uid: params.uid
+                },
+                param: {
+                    code: 200
+                }
+            };
+
+            return this.get(options).then(result => {
+                return result;
+            });
+        } else {
+            return Promise.resolve({});
+        }
+    }
+
+    // 潮流口令
+    _getCode(params) {
+        if (params.uid) {
+            let options = {
+                data: {
+                    method: 'app.invitecode.my',
+                    uid: params.uid
+                },
+                param: {
+                    code: 200
+                }
+            };
+
+            return this.get(options);
+        } else {
+            return Promise.resolve({});
+        }
+    }
+
+    // 待付款，待发货，待收货，浏览记录，收藏商品，收藏店铺
+    _infoNum(params) {
+        if (params.uid) {
+            let options = {
+                data: {
+                    method: 'app.home.getInfoNum',
+                    uid: params.uid,
+                    udid: params.udid
+                },
+                param: {
+                    code: 200
+                }
+            };
+
+            return this.get(options);
+        } else {
+            return Promise.resolve({});
+        }
+    }
+
+    // 收藏商品
+    _favoriteData(params) {
+        if (params.uid) {
+            let options = {
+                url: 'favorite',
+                data: {
+                    method: 'app.favorite.getFavoriteCount',
+                    uid: params.uid
+                },
+                param: {
+                    code: 200
+                },
+                api: global.yoho.SingleAPI
+            };
+
+            return this.get(options);
+        } else {
+            return Promise.resolve({});
+        }
+    }
+
+    // 潮流口令
+    _getTrendPop(params) {
+        let options = {
+            url: 'operations/api/v5/resource/get',
+            data: {
+                content_code: params.contentCode,
+            },
+            api: global.yoho.ServiceAPI
+        };
+
+        return this.get(options).then(result => {
+            if (result && result.code === 200 && result.data) {
+                return result.data[0];
+            } else {
+                return result;
+            }
+        });
+    }
+
+    // 资源位
+    _getRes() {
+        let options = {
+            url: '/operations/api/v5/resource/home',
+            data: {
+                content_code: '5d05d443a557783b1489d328c127e9bf',
+            },
+            api: global.yoho.ServiceAPI
+        };
+
+        return this.get(options).then(result => {
+            if (result && result.code === 200 && result.data && result.data.list) {
+                for (let item of result.data.list) {
+                    item.template_name === 'single_image' &&
+                        item.data.length === 1 &&
+                        (item.singleOne = true);
+                }
+                return resourcesProcess(result.data.list);
+            } else {
+                return result;
+            }
+        });
+    }
+
+    // 公告
+    _noticeData() {
+        let options = {
+            url: 'favorite',
+            data: {
+                method: 'app.resources.getNotices'
+            },
+            param: {
+                code: 200
+            }
+        };
+
+        return this.get(options);
+    }
+
+    index(params) {
+        return Promise.all([
+            this._userData(params),
+            this._getCode(params),
+            this._infoNum(params),
+            this._favoriteData(params),
+            this._getTrendPop(params),
+            this._getRes()
+        ]).then((result) => {
+            let resu = {
+                baseInfo: {},
+                infoNum: {},
+                signinUrl: helpers.urlFormat('/signin.html', {
+                    refer: helpers.urlFormat('/home/new-home')
+                }),
+                referUrl: helpers.urlFormat('/home/new-home'),
+                channel: {
+                    boys: params.channel === 1,
+                    girls: params.channel === 2,
+                    kids: params.channel === 3,
+                    lifestyle: params.channel === 4
+                }
+            };
+
+            if (_.get(result, '[0].data')) {
+                resu.baseInfo = result[0].data;
+            }
+
+            if (_.get(result, '[1].data')) {
+                resu.baseInfo.trendCode = _.get(result[1].data, 'trendWord', false);
+                resu.trendWord = _.get(result[1].data, 'trendWord', false);
+                resu.inviteCode = _.get(result[1].data, 'inviteCode', '');
+                resu.trendGuidePopUpDesc = _.get(result[1].data, 'trendGuidePopUpDesc', '');
+            }
+
+            if (_.get(result, '[2].data')) {
+                resu.infoNum = result[2].data;
+            }
+
+            if (_.get(result, '[3].data.product_favorite_total')) {
+                resu.infoNum.product_favorite_total = result[3].data.product_favorite_total;
+            }
+
+            if (_.get(result, '[4].data[0].src')) {
+                resu.bannerSrc = result[4].data[0].src;
+            }
+
+            if (_.get(result, '[5]')) {
+                resu.content = result[5];
+            }
+
+            resu = camelCase(resu);
+
+            return resu;
+        });
+    }
+}
+
+module.exports = newHome;

@@ -32,6 +32,8 @@ const refund = require(`${cRoot}/refund`);
 const exchange = require(`${cRoot}/exchange`);
 const tideCommand = require(`${cRoot}/tide-command`);
 
+const newHome = require(`${cRoot}/new-home`);
+
 // const myDetail = require(`${cRoot}/myDetail);
 
 
@@ -176,4 +178,6 @@ router.post('/return/exchange/cancel-apply', auth, exchange.cancelApply); // AJA
 router.get('/return/exchange/refreshDelivery', auth, exchange.refreshDelivery); // 获取商品的退换货方式
 
 router.get('/tide-command', auth, tideCommand.tideCommand); // 设置潮流口令
+
+router.get('/new-home', newHome.index); // 设置潮流口令
 module.exports = router;

+<div class="new-home-c yoho-page">
+    <div class="header">
+        {{#if isLogin}}
+            {{# baseInfo}}
+            <a href="/home/mydetails">
+                <div class="left">
+                    <div class="user-avatar" data-avatar="{{image2 headIco mode=2 w=100 h=100 q=90}}"></div>
+                    <div class="level level-{{vipInfo/curLevel}}"></div>
+                </div>
+                <div class="right">
+                    <div class="name eps">{{nickname}}</div>
+                    <div class="trend-code-c">
+                        <div class="dot">#&nbsp;</div>
+                        <div class="scroll-c go-scroll">
+                            <div class="scroll-words trend-code">{{trendCode}}</div>
+                        </div>
+                        <div class="dot">&nbsp;#</div>
+                        <div class="iconfont edit code-set">&#xe731;</div>
+                    </div>
+                </div>
+            </a>
+            <a class="iconfont qrcode">&#xe64d;</a>
+            <div class="gif-part hide"></div>
+            {{/ baseInfo}}
+        {{else}}
+            <a class="login-btn" href="{{signinUrl}}" data-refer="{{referUrl}}">
+                登录&nbsp;/&nbsp;注册
+            </a>
+        {{/if}}
+    </div>
+    <div class="list s-list">
+        <div class="list-item">
+            <div class="body">
+                <div class="main eps">默认购物频道</div>
+                <a href="//m.yohobuy.com/">
+                    {{# channel}}
+                    <div class="value">
+                        {{#if boys}}男士MEN{{/if}}
+                        {{#if girls}}女士WOMEN{{/if}}
+                        {{#if kids}}潮童KIDS{{/if}}
+                        {{#if lifestyle}}创意生活LIFESTYLE{{/if}}
+                    </div>
+                    {{/ channel}}
+                </a>
+                <div class="arr iconfont">&#xe604;</div>
+            </div>
+        </div>
+    </div>
+    <div class="notice-c hide">
+        <div class="title">
+            <span>有货</span>
+            <span class="red">公告</span>
+        </div>
+        <div class="main eps">礼品卡功能上线，需要采购请联系有货客服</div>
+    </div>
+    <div class="list s-list">
+        <div class="list-item">
+            <div class="body">
+                <div class="main eps">我的订单</div>
+                <a href="/home/orders">
+                    <div class="value">全部订单</div>
+                </a>
+                <div class="arr iconfont">&#xe604;</div>
+            </div>
+        </div>
+    </div>
+    {{# infoNum}}
+    <div class="service">
+        <a href="/home/orders?type=2">
+            <div class="service-item">
+                <div class="iconfont pic">&#xe634;</div>
+                <p class="name">待付款</p>
+                {{#if waitPayNum}}
+                <div class="val">{{waitPayNum}}</div>
+                {{/if}}
+            </div>
+        </a>
+        <a href="/home/orders?type=3">
+            <div class="service-item">
+                <div class="iconfont pic">&#xe63b;</div>
+                <p class="name">待发货</p>
+                {{#if waitCargoNum}}
+                <div class="val">{{waitCargoNum}}</div>
+                {{/if}}
+            </div>
+        </a>
+        <a href="/home/orders?type=4">
+            <div class="service-item">
+                <div class="iconfont pic">&#xe633;</div>
+                <p class="name">待收货</p>
+                {{#if sendCargoNum}}
+                <div class="val">{{sendCargoNum}}</div>
+                {{/if}}
+            </div>
+        </a>
+        <div class="service-item">
+            <a href="/home/favorite">
+                <p class="num">{{#if productFavoriteTotal}}{{productFavoriteTotal}}{{else}}0{{/if}}</p>
+                <p class="name">商品收藏</p>
+            </a>
+        </div>
+        <div class="service-item">
+            <a href="/home/favorite?tab=brand">
+                <p class="num">{{#if brandFavoriteTotal}}{{brandFavoriteTotal}}{{else}}0{{/if}}</p>
+                <p class="name">品牌收藏</p>
+            </a>
+        </div>
+        <div class="service-item">
+            <a href="/home/record">
+                <p class="num">{{#if productBrowse}}{{productBrowse}}{{else}}0{{/if}}</p>
+                <p class="name">浏览记录</p>
+            </a>
+        </div>
+    </div>
+    <div class="list">
+        <a class="list-item" href="/home/coupons">
+            <div class="pic iconfont">&#xe63a;</div>
+            <div class="body">
+                <div class="main eps">优惠券</div>
+                <div class="value">{{#if couponNum}}{{couponNum}}张{{/if}}</div>
+                <div class="arr iconfont">&#xe604;</div>
+            </div>
+        </a>
+        <a class="list-item" href="/home/mycurrency">
+            <div class="pic iconfont">&#xe732;</div>
+            <div class="body">
+                <div class="main eps">有货币</div>
+                <div class="value">{{#if yohoCoinNum}}{{yohoCoinNum}}个{{/if}}</div>
+                <div class="arr iconfont">&#xe604;</div>
+            </div>
+        </a>
+    </div>
+    <div class="list">
+        <a class="list-item" href="/home/message">
+            <div class="pic iconfont">&#xe63f;</div>
+            <div class="body">
+                <div class="main eps">消息</div>
+                <div class="value">{{#if inboxTotal}}{{inboxTotal}}条未读{{/if}}</div>
+                <div class="arr iconfont">&#xe604;</div>
+            </div>
+        </a>
+        <a class="list-item" href="/service/chatQaList">
+            <div class="pic iconfont">&#xe730;</div>
+            <div class="body">
+                <div class="main eps">服务与反馈</div>
+                <div class="value"></div>
+                <div class="arr iconfont">&#xe604;</div>
+            </div>
+        </a>
+    </div>
+    {{/ infoNum}}
+    <div class="ad-pic res-c clearfix">
+        <div class="resource-content">
+            {{> content}}
+        </div>
+    </div>
+    <div id="new-recommend-c">
+        <div class="toper">
+            <div class="title">为你优选</div>
+        </div>
+        <div class="container clearfix"></div>
+    </div>
+    {{> common/set-trend-world}}
+    {{#if @root.isWechat}}
+    <div class="yoho-logo-c">
+        <div class="yoho-logo"></div>
+    </div>
+    {{/if}}
+</div>
+{{#if @root.isWechat}}
+{{> footer-tab}}
+{{/if}}
\ No newline at end of file

+'use strict';
+
+const newRecommendModel = require('../models/new-recommend');
+
+exports.getRecommend = (req, res, next) => {
+    let params = {
+        yh_channel: req.query.yh_channel || '1',
+        udid: req.sessionID,
+        limit: 30,
+        rec_pos: '100004',
+        uid: req.user.uid || 0,
+        client_id: req.cookies._yasvd || ''
+    };
+
+    req.ctx(newRecommendModel).getRecommend(params).then(result => {
+        res.json(result);
+    }).catch(next);
+};

+'use strict';
+
+const helpers = global.yoho.helpers;
+const _ = require('lodash');
+const utils = '../../../utils';
+const productNameProcess = require(`${utils}/product-name-process`);
+
+class storeHome extends global.yoho.BaseModel {
+    constructor(ctx) {
+        super(ctx);
+    }
+
+    getPreferenceData(data) {
+        let dest = {
+            goods: []
+        };
+
+        let list = data.data || {};
+
+        _.forEach(list && list.product_list, value => {
+
+            if (!value.product_skn || !value.goods_list || !value.goods_list.length) {
+                return;
+            }
+            value.goodsId = value.goods_list && value.goods_list[0] && value.goods_list[0].goods_id;
+
+            if (value.cn_alphabet) {
+                value.cn_alphabet = productNameProcess(value.cn_alphabet);
+            }
+
+            let goods = {
+                product_skn: value.product_skn,
+                product_name: value.product_name,
+                default_images: value.default_images,
+                is_soon_sold_out: value.is_soon_sold_out === 'Y',
+                url: helpers.urlFormat(`/product/${value.product_skn}.html`), // 商品url改版
+                market_price: value.market_price === value.sales_price ? false : value.market_price,
+                sales_price: value.sales_price
+            };
+
+            let tags = {};
+
+            _.forEach(value.tags, tag => {
+                tags[tag] = true;
+            });
+
+            goods.tags = tags;
+            goods.similar = true;
+
+            if (tags.is_solded === true) {
+                goods.is_solded = true;
+            }
+
+            dest.goods.push(goods);
+        });
+
+
+
+        dest.code = data.code;
+        dest.rec_id = list.rec_id;
+        dest.message = data.message;
+
+        return dest;
+    }
+
+    getRecommend(params) {
+        let options = {
+            data: {
+                method: 'app.home.newPreference',
+                yh_channel: params.yh_channel,
+                udid: params.udid,
+                limit: params.limit,
+                rec_pos: params.rec_pos,
+                uid: params.uid,
+                client_id: params.client_id
+            }
+        };
+
+        return this.get(options).then(result => {
+            return this.getPreferenceData(result);
+        });
+    }
+}
+
+module.exports = storeHome;

@@ -59,6 +59,8 @@ const globalPro = require(`${cRoot}/global`);
 // 找相似
 const similar = require(`${cRoot}/similar`);
 
+const newRecommend = require(`${cRoot}/new-recommend`);
+
 // routers
 
 // /pro_136349_455445/HEARTSOFARMianMaShuJiaoXiuXianKuPS1684.html
@@ -217,4 +219,6 @@ router.get('/global/gethtml', globalPro.gethtml); // 全球购商品信息
 
 router.get('/similar', similar.index); // 找相似
 
+router.get('/new-recommend/getRecommend', newRecommend.getRecommend); // 新为你优选
+
 module.exports = router;

@@ -11,15 +11,14 @@ const isProduction = process.env.NODE_ENV === 'production';
 const isTest = process.env.NODE_ENV === 'test';
 
 const domains = {
-    api: 'http://api-test3.yohops.com:9999/',
-    service: 'http://service-test3.yohops.com:9999/',
-    singleApi: 'http://api-test3.yohops.com:9999/',
-    global: 'http://global-test-soa.yohops.com:9999',
+    api: 'http://api.yoho.cn/',
+    service: 'http://service.yoho.cn/',
     liveApi: 'http://testapi.live.yohops.com:9999/',
+    singleApi: 'http://api-test3.yohops.com:9999/',
     imSocket: 'ws://socket.yohobuy.com:10240',
     imCs: 'http://im.yohobuy.com/api',
-    platformApi: 'http://192.168.102.48:8088/',
-    store: 'http://192.168.102.47:8080/portal-gateway/wechat/'
+    global: 'http://api-global.yohobuy.com',
+    store: 'http://192.168.102.47:8080/portal-gateway/'
 };
 
 module.exports = {

@@ -2,7 +2,7 @@
 <footer id="yoho-footer" class="yoho-footer {{#isErr}}bottom{{/isErr}}">
     <p class="op-row">
         <span class="back-to-top">
-            Back to top
+            回到顶部
             <i class="iconfont">&#xe608;</i>
         </span>
         <div class="float-top "></div>

@@ -258,6 +258,9 @@ t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-
     <glyph glyph-name="shanchu" unicode="&#58956;" d="M911.36 725.333333l-242.346667 0L669.013333 848.213333c0 27.306667-20.48 47.786667-47.786667 47.786667L375.466667 896c-27.306667 0-47.786667-20.48-47.786667-47.786667L327.68 725.333333 81.92 725.333333C54.613333 725.333333 34.133333 704.853333 34.133333 677.546667s20.48-47.786667 47.786667-47.786667L375.466667 629.76l242.346667 0 293.546667 0c27.306667 0 47.786667 20.48 47.786667 47.786667S938.666667 725.333333 911.36 725.333333zM423.253333 725.333333 423.253333 797.013333l146.773333 0L570.026667 725.333333 423.253333 725.333333zM764.586667 578.56c-27.306667 0-47.786667-20.48-47.786667-47.786667l0-559.786667L276.48-29.013333 276.48 530.773333c0 27.306667-20.48 47.786667-47.786667 47.786667s-47.786667-20.48-47.786667-47.786667l0-610.986667c0-27.306667 20.48-47.786667 47.786667-47.786667l535.893333 0c27.306667 0 47.786667 20.48 47.786667 47.786667L812.373333 530.773333C815.786667 558.08 791.893333 578.56 764.586667 578.56zM447.146667 66.56 447.146667 455.68c0 27.306667-20.48 47.786667-47.786667 47.786667s-47.786667-20.48-47.786667-47.786667l0-389.12c0-27.306667 20.48-47.786667 47.786667-47.786667S447.146667 39.253333 447.146667 66.56zM645.12 66.56 645.12 455.68c0 27.306667-20.48 47.786667-47.786667 47.786667S546.133333 482.986667 546.133333 455.68l0-389.12c0-27.306667 20.48-47.786667 47.786667-47.786667S645.12 39.253333 645.12 66.56z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="facebook" unicode="&#58958;" d="M435.959 524.089l0-96.095-76.888 0 0-115.239 76.888 0 0-268.953 115.26 0L551.219 312.755l115.281 0L666.5 427.994l-115.26 0 0 76.867c0 23.064 15.369 38.413 38.372 38.413l76.888 0 0 115.26-96.136 0C497.416 658.535 435.959 597.078 435.959 524.089L435.959 524.089zM512.032 861.888C248.096 861.888 34.144 648 34.144 384c0-263.936 213.952-477.888 477.888-477.888S989.856 120.128 989.856 384C989.856 648 775.968 861.888 512.032 861.888zM830.496 65.472c-41.344-41.344-89.472-73.856-143.104-96.512-55.488-23.488-114.432-35.392-175.296-35.392-60.8 0-119.808 11.904-175.36 35.392-53.632 22.656-101.824 55.104-143.168 96.512-41.344 41.344-73.856 89.6-96.512 143.232C73.504 264.128 61.6 323.2 61.6 384s11.904 119.744 35.392 175.296c22.656 53.632 55.168 101.76 96.512 143.168 41.344 41.344 89.536 73.856 143.168 96.512 55.552 23.424 114.56 35.392 175.36 35.392 60.864 0 119.808-11.968 175.296-35.392 53.632-22.656 101.76-55.168 143.104-96.512 41.344-41.408 73.856-89.536 96.64-143.168 23.424-55.488 35.392-114.432 35.392-175.296s-12.032-119.936-35.392-175.296C904.352 155.136 871.84 106.88 830.496 65.472z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="wenhao" unicode="&#59033;" d="M512 886.272c-277.504 0-502.272-224.768-502.272-502.272s224.768-502.272 502.272-502.272 502.272 224.768 502.272 502.272S789.504 886.272 512 886.272zM520.704-14.848c-45.568 0-82.432 36.864-82.432 82.432 0 45.568 36.864 82.432 82.432 82.432 45.568 0 82.432-36.864 82.432-82.432C603.648 22.528 566.272-14.848 520.704-14.848zM737.792 477.184c-11.264-23.552-33.28-50.688-67.072-83.456-37.376-35.84-52.736-52.736-59.392-60.928-7.68-9.728-13.824-20.992-17.408-34.816-4.096-14.336-6.144-35.328-5.632-61.44l0.512-30.72-141.824 0 0 30.208c0 37.376 3.072 67.072 9.216 90.112 6.656 24.064 16.384 45.568 29.696 63.488 12.288 16.896 32.768 39.936 62.464 71.168 33.792 34.816 47.104 51.712 51.712 59.904 3.072 5.12 8.192 16.896 8.192 44.544 0 18.944-6.656 35.328-20.48 50.688-13.312 14.336-33.28 20.992-60.928 20.992-81.408 0-92.672-58.368-92.672-115.712l0-30.208-142.336 0 1.024 30.72c1.536 48.128 7.168 84.48 17.92 111.104 10.752 27.136 28.672 51.712 52.224 73.216 23.04 20.992 49.664 36.352 77.824 46.08 28.16 9.728 57.856 14.336 88.576 14.336 62.976 0 116.736-18.944 159.744-56.832l0 0c43.52-38.912 66.048-90.624 66.048-154.112C755.2 527.872 749.568 501.248 737.792 477.184z"  horiz-adv-x="1024" />
 
     
@@ -339,6 +342,15 @@ t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-
     <glyph glyph-name="sanjiao2-center-view-copy" unicode="&#59183;" d="M511.999488 140.58653800000013L72.8374 755.413462 951.1626 755.413462Z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="gm" unicode="&#59184;" d="M192.86016 414.72a30.72 30.72 0 0 0-30.72 30.72l0.02048 23.87968C163.98336 665.37472 324.03456 824.32 520.54016 824.32h13.66016c197.61152 0 358.4-160.78848 358.4-358.4v-47.77984h-61.44V465.92c0 163.7376-133.2224 296.96-296.96 296.96h-13.66016c-163.7376 0-296.96-133.2224-296.96-296.96v-20.48a30.72 30.72 0 0 0-30.72-30.72zM541.85984-101.53984h-13.66016a30.72 30.72 0 1 0 0 61.44h13.66016c163.7376 0 296.96 103.13728 296.96 229.92896h61.44v-8.37632c0-1.59744-0.12288-3.15392-0.36864-4.68992-8.43776-154.624-165.7856-278.30272-358.03136-278.30272zM200.54016 155.29984h-13.66016A105.94304 105.94304 0 0 0 81.05984 261.12v102.4a105.94304 105.94304 0 0 0 105.82016 105.82016h13.66016A105.94304 105.94304 0 0 0 306.36032 363.52v-102.4a105.96352 105.96352 0 0 0-105.82016-105.82016z m-13.66016 252.60032A44.4416 44.4416 0 0 1 142.49984 363.52v-102.4a44.4416 44.4416 0 0 1 44.38016-44.38016h13.66016A44.4416 44.4416 0 0 1 244.92032 261.12v102.4a44.4416 44.4416 0 0 1-44.38016 44.38016h-13.66016zM869.13024 155.29984h-13.66016A105.92256 105.92256 0 0 0 749.6704 261.12v102.4a105.92256 105.92256 0 0 0 105.79968 105.82016h13.66016A105.94304 105.94304 0 0 0 974.9504 363.52v-102.4a105.96352 105.96352 0 0 0-105.82016-105.82016z m-13.66016 252.60032A44.4416 44.4416 0 0 1 811.1104 363.52v-102.4a44.4416 44.4416 0 0 1 44.35968-44.38016h13.66016A44.4416 44.4416 0 0 1 913.5104 261.12v102.4a44.4416 44.4416 0 0 1-44.38016 44.38016h-13.66016zM614.7072-60.37504l-83.57888-9.76896a20.54144 20.54144 0 0 0-22.71232 17.96096l-3.64544 31.232a20.54144 20.54144 0 0 0 17.96096 22.71232l83.57888 9.76896a20.54144 20.54144 0 0 0 22.71232-17.96096l3.64544-31.232a20.52096 20.52096 0 0 0-17.96096-22.71232zM528.73216-101.00736a51.28192 51.28192 0 0 0-50.83136 45.24032l-3.64544 31.232a50.83136 50.83136 0 0 0 10.71104 37.70368 50.95424 50.95424 0 0 0 34.22208 19.10784l83.53792 9.78944a51.34336 51.34336 0 0 0 56.81152-44.9536l3.66592-31.17056a51.28192 51.28192 0 0 0-44.87168-56.79104l-0.04096-0.02048-83.57888-9.76896a49.07008 49.07008 0 0 0-5.98016-0.36864z m85.99552 40.63232h0.2048-0.2048z m-78.27456 32.80896l1.26976-10.87488 63.24224 7.3728-1.26976 10.89536-63.24224-7.39328z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="edit1" unicode="&#59185;" d="M512 896a512 512 0 1 1 512-512A512 512 0 0 1 512 896z m148.992-146.176l97.024-97.024a43.264 43.264 0 0 0 1.28-61.184l-51.2-51.2-163.84 156.16 55.552 55.552a43.264 43.264 0 0 0 61.184-2.304z m-406.528-435.2l29.184 109.056a56.32 56.32 0 0 0 18.944 28.928l2.048 2.56 195.84 197.12 164.864-153.6-201.728-201.728-3.328-2.56-2.816-3.584a56.064 56.064 0 0 0-27.136-15.104l-107.264-28.672a56.32 56.32 0 0 0-69.12 69.12z m540.928-179.2a25.6 25.6 0 0 0-25.6-25.6h-512a25.6 25.6 0 0 0-25.6 25.6v10.24a25.6 25.6 0 0 0 25.6 25.6h512a25.6 25.6 0 0 0 25.6-25.6z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yoho-coin" unicode="&#59186;" d="M512 153.6h-40.96a195.87072 195.87072 0 0 0-45.4656 5.34528l14.29504 59.76064a134.5536 134.5536 0 0 1 31.15008-3.66592h40.96c73.40032 0 133.12 59.71968 133.12 133.12V592.40448h61.44V348.16c0.02048-107.27424-87.26528-194.56-194.53952-194.56zM512 296.96c-107.27424 0-194.56 87.28576-194.56 194.56v101.56032h61.44v-101.56032c0-73.40032 59.71968-133.12 133.12-133.12s133.12 59.71968 133.12 133.12v103.1168h61.44v-103.1168c0-107.27424-87.28576-194.56-194.56-194.56zM512-51.2c-242.7904 0-440.32 197.5296-440.32 440.32S269.2096 829.44 512 829.44s440.32-197.5296 440.32-440.32-197.5296-440.32-440.32-440.32z m0 819.2c-208.91648 0-378.88-169.96352-378.88-378.88s169.96352-378.88 378.88-378.88 378.88 169.96352 378.88 378.88S720.91648 768 512 768z"  horiz-adv-x="1024" />
+
+    
 
 
   </font>

+{{#if this}} {{!-- 剔除值为false的项 --}}
+    {{# goods}}
+    <div class="good-info {{#if @root.sale_vip_login}}sale-vip{{/if}}" data-good-id="{{product_id}}"
+         data-id="{{product_skn}}" data-bp-id="guang_goodList_{{product_name}}_false">
+        <div class="tag-container clearfix">
+            {{# tags}}
+                {{# is_new}}
+                    <p class="good-tag new-tag">NEW</p>
+                {{/ is_new}}
+                {{# is_hot}}
+                    <p class="good-tag hot-tag">HOT</p>
+                {{/ is_hot}}
+                {{# is_advance}}
+                    <p class="good-tag renew-tag">再到着</p>
+                {{/ is_advance}}
+                {{# is_discount}}
+                    <p class="good-tag sale-tag">SALE</p>
+                {{/ is_discount}}
+                {{# is_yohood}}
+                    <p class="good-tag new-festival-tag">新品节</p>
+                {{/ is_yohood}}
+                {{# is_limited}}
+                    <p class="good-tag limit-tag">限量</p>
+                {{/ is_limited}}
+                {{# is_presell}}
+                    <p class="good-tag is-presell">预售</p>
+                {{/ is_presell}}
+                {{# is_global}}
+                    <p class="good-tag is-global">
+                        <span>{{../tbl_country_name}}</span>
+                    </p>
+                {{/ is_global}}
+            {{/ tags}}
+        </div>
+        <div class="good-detail-img">
+            <a class="good-thumb" href="{{url}}">
+                {{#if @root._noLazy}}
+                    <img src="{{image2 default_images w=235 h=314 q=60}}"/>
+                {{else}}
+                    <img class="lazy" data-original="{{image2 default_images w=235 h=314 q=60}}"/>
+                {{/if}}
+            </a>
+            {{# is_soon_sold_out}}
+                <p class="few-tag">即将售罄</p>
+            {{/ is_soon_sold_out}}
+
+            {{# is_solded}}
+            <p class="out-tag">已售罄</p>
+            {{/ is_solded}}
+
+            {{!-- {{# noStorage}}
+                <div class="no-storage">
+                    <div class="no-storage-img"></div>
+                </div>
+            {{/ noStorage}} --}}
+            {{#if similar}}
+            {{> common/similar}}
+            {{/if}}
+        </div>
+        <div class="good-detail-text">
+            <div class="name">
+                <a href="{{url}}">{{product_name}}</a>
+            </div>
+            <div class="price">
+                {{#if @root.saleViplogin}}
+                    <i class="vip-grade vip-grade-{{@root.vipLevel}}"></i>
+                    <span class="sale-price {{^market_price}}no-price{{/market_price}}">¥
+                        {{#if @root.vipPrice1}}{{round vip1_price}}{{/if}}
+                        {{#if @root.vipPrice2}}{{round vip2_price}}{{/if}}
+                        {{#if @root.vipPrice3}}{{round vip3_price}}{{/if}}
+                    </span>
+                {{else}}
+                    <span class="sale-price {{^market_price}}no-price{{/market_price}}">¥{{round sales_price}}</span>
+                {{/if}}
+                {{#market_price}}
+                    <span class="market-price">¥{{round .}}</span>
+                {{/market_price}}
+            </div>
+            {{#if @root.saleVip}}
+                <div class="vip-info">
+                    <i class="vip-icon"></i>更优惠
+                </div>
+            {{/if}}
+            {{#if similar}}
+            <a class="similar-btn iconfont">&#xe606;</a>
+            {{/if}}
+        </div>
+    </div>
+    {{/ goods}}
+{{/if}}

+import 'home/new-home.page.css';
+import 'product/new-recommend/new-recommend';
+import $ from 'yoho-jquery';
+import Page from 'yoho-page';
+import 'common/set-trend-world';
+import Swiper from 'yoho-swiper2';
+import yoho from 'yoho-app';
+
+class NewHome extends Page {
+    constructor() {
+        super();
+
+        this.selector = {
+            $scrollC: $('.scroll-c'),
+            $scrollWords: $('.scroll-words'),
+            $userAvatar: $('.user-avatar'),
+            $codeSet: $('.code-set'),
+            $resYas: $('.res-c').find('a'),
+            $trendCode: $('.trend-code')
+        };
+
+        this.time = 6000;
+        this.containerWidth = 0;
+        this.innerWidth = 0;
+        this.moveLength = 0;
+        this.interval = '';
+        this.init();
+    }
+
+    init() {
+        this.autoScroll();
+        this.defaultPic();
+        this.bindEvents();
+        this.swiper();
+        this.showTrend();
+        window.reMarginFooter('.footer-tab');
+    }
+
+    // 首次进入个人中心，且登陆，且没有设置潮流口令，打开弹框子
+    showTrend() {
+        if (yoho.isLogin() && (!this.selector.$trendCode.html()) && !window.cookie('first-trend')) {
+            $('.set-trend-world').removeClass('set-trend-hide');
+            window.setCookie('first-trend', true, {
+                path: '/home',
+                expires: 1
+            });
+        }
+    }
+
+    bindEvents() {
+        this.selector.$codeSet.on('click', this.codeSet.bind(this));
+        this.selector.$resYas.on('click', this.yas.bind(this));
+        this.selector.$scrollWords.on('DOMNodeInserted', this.chanScroll.bind(this));
+    }
+
+    // 资源位
+    swiper() {
+        if ($('.banner-center-swiper').length > 0) {
+            new Swiper('.banner-center-swiper', {
+                pagination: '.swiper-pagination',
+                lazyLoading: true,
+                lazyLoadingInPrevNext: true,
+                paginationClickable: true,
+                autoplay: 3000
+            });
+        }
+    }
+
+    // 埋点
+    yas(e) {
+        let $this = $(e.currentTarget);
+        let index = $this.index() + 1;
+        let pIndex = $this.parent('div').index() + 1;
+        let url = $this.attr('href');
+        let name = $this.attr('name');
+        let id = $this.attr('id');
+        let status = $this.parent('li').hasClass('swiper-slide');
+
+        if (status) {
+            index = $this.parent('li').index() + 1;
+            pIndex = 1;
+        }
+
+        if (window._yas && window._yas.sendCustomInfo) {
+            window._yas.sendCustomInfo && window._yas.sendCustomInfo({
+                op: 'YB_MY_BANNER_C',
+                param: JSON.stringify({
+                    I_INDEX: index,
+                    F_URL: encodeURIComponent(url),
+                    F_NAME: name,
+                    F_INDEX: pIndex,
+                    F_ID: id
+                })
+            }, true);
+        }
+    }
+
+    // 默认头像
+    defaultPic() {
+        let myImage = new Image(),
+            avatar;
+
+        avatar = this.selector.$userAvatar.data('avatar') || '';
+        myImage.src = avatar;
+        myImage.onload = () => {
+            this.selector.$userAvatar.css('background-image', 'url(' + avatar + ')');
+        };
+    }
+
+    // 修改潮流口令
+    codeSet(e) {
+        e.preventDefault();
+        $('.set-trend-world').show();
+        return false;
+    }
+
+    // 触发修改滚动
+    chanScroll() {
+        this.selector.$scrollWords.stop(true, true);
+        clearInterval(this.interval);
+        setTimeout(() => {
+            this.autoScroll();
+        }, 500);
+    }
+
+    // 判断滚动
+    autoScroll() {
+        this.containerWidth = this.selector.$scrollC.width();
+        this.innerWidth = this.selector.$scrollWords.width();
+        this.moveLength = this.innerWidth - this.containerWidth;
+        if (this.innerWidth > (this.containerWidth + 1)) {
+            this.goScroll();
+            this.interval = setInterval(() => {
+                this.goScroll();
+            }, this.time);
+        } else {
+            clearInterval(this.interval);
+        }
+    }
+
+    // 滚动
+    goScroll() {
+        let $animateObj = this.selector.$scrollWords;
+
+        $animateObj.animate({left: `-${this.moveLength}px`}, this.time / 2, 'linear', () => {
+            $animateObj.animate({left: '0'}, this.time / 2, 'linear');
+        });
+    }
+}
+
+$(() => {
+    new NewHome();
+});

+import 'product/new-recommend/new-recommend.css';
+import $ from 'yoho-jquery';
+import Page from 'yoho-page';
+import goodsRender from 'product/new-recommend/goods.hbs';
+import lazyLoad from 'yoho-jquery-lazyload';
+
+class NewRecommend extends Page {
+    constructor() {
+        super();
+
+        this.selector = {
+            $goodsContainer: $('#new-recommend-c').find('.container'),
+            $goodInfo: $('.good-info'),
+            $recommendC: $('#new-recommend-c')
+        };
+
+        this.view = {
+            goodsRender
+        };
+
+        this.init();
+    }
+
+    init() {
+        this.getRecommend();
+    }
+
+    moreGoods() {
+        this.getRecommend();
+    }
+
+    getRecommend() {
+        this.ajax({
+            url: '/product/new-recommend/getRecommend',
+        }).then((result) => {
+            if (result) {
+                if (result.goods.length > 0) {
+                    let goodsData = {
+                        goods: result.goods
+                    };
+                    let $goodsData = $(this.view.goodsRender(goodsData));
+
+                    this.selector.$goodsContainer.append($goodsData);
+                    lazyLoad($goodsData.find('img.lazy'));
+                } else {
+                    this.selector.$recommendC.hide();
+                }
+            }
+        }).catch(error => {
+            console.error(error);
+        });
+    }
+}
+
+$(() => {
+    new NewRecommend();
+});

@@ -79,3 +79,21 @@
         }
     }
 }
+
+.width750 {
+    .footer-tab {
+        height: 120px;
+        width: 750px;
+        max-width: 750px;
+        margin-left: -375px;
+        padding-top: 25px;
+
+        .tab-icon {
+            font-size: 45px;
+        }
+
+        .tab-name {
+            font-size: 24px;
+        }
+    }
+}

+@import "common/set-trend-world";
+@import "channel/thumb-row";
+@import "channel/divide-image";
+@import "channel/banner-center";
+@import "layout/swiper";
+@import "channel/footer-tab";
+
+.new-home-c {
+    background-color: #f0f0f0;
+
+    .eps {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .header {
+        width: 750px;
+        height: 204px;
+        background-image: resolve("home/index/header-bg.jpg");
+        background-size: cover;
+        padding: 46px 30px 58px;
+        position: relative;
+
+        .login-btn {
+            display: block;
+            width: 260px;
+            height: 70px;
+            line-height: 70px;
+            text-align: center;
+            border: solid 2px #fff;
+            color: #fff;
+            font-size: 28px;
+            margin: 15px auto;
+        }
+
+        .left {
+            width: 100px;
+            height: 100px;
+            float: left;
+            position: relative;
+
+            .user-avatar {
+                width: 100%;
+                height: 100%;
+                background-size: cover;
+                background-position: center center;
+                border-radius: 50%;
+                overflow: hidden;
+                border: solid 3px #fff;
+                background-image: resolve("home/index/user-avatar.png");
+            }
+
+            .level {
+                width: 60px;
+                height: 25px;
+                background-size: 100% 100%;
+                position: absolute;
+                bottom: -12px;
+                left: 20px;
+            }
+
+            .level-1 {
+                background-image: resolve("home/new-home/vip-1.png");
+            }
+
+            .level-2 {
+                background-image: resolve("home/new-home/vip-2.png");
+            }
+
+            .level-3 {
+                background-image: resolve("home/new-home/vip-3.png");
+            }
+        }
+
+        .right {
+            width: 450px;
+            height: 100px;
+            float: left;
+            color: #fff;
+            margin-left: 20px;
+
+            .name {
+                line-height: 50px;
+                font-size: 32px;
+            }
+
+            .trend-code-c {
+                line-height: 50px;
+                float: left;
+
+                div {
+                    float: left;
+                }
+
+                .scroll-c {
+                    max-width: 190px;
+                    height: 50px;
+                    overflow: hidden;
+                    position: relative;
+                }
+
+                .scroll-words {
+                    position: relative;
+                    top: 0;
+                    left: 0;
+                    white-space: nowrap;
+                }
+
+                .dot {
+                    width: 30px;
+                }
+
+                .edit {
+                    width: 30px;
+                    font-size: 30px;
+                    vertical-align: middle;
+                    margin-left: 10px;
+                }
+            }
+        }
+
+        .gif-part {
+            width: 140px;
+            height: 140px;
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            background-image: resolve("home/new-home/arr-page.gif");
+            background-size: 100% 100%;
+        }
+
+        .qrcode {
+            width: 37px;
+            height: 37px;
+            font-size: 37px;
+            position: absolute;
+            top: 20px;
+            right: 30px;
+            color: #fff;
+            display: block;
+        }
+    }
+
+    .notice-c {
+        height: 80px;
+        line-height: 80px;
+        background-color: #fff;
+        margin-bottom: 20px;
+        padding: 0 30px;
+
+        .title {
+            float: left;
+            font-size: 0;
+            color: #444;
+            line-height: 0;
+            width: 140px;
+
+            span {
+                font-size: 28px;
+                line-height: 40px;
+                margin: 20px 0;
+                display: inline-block;
+                font-weight: bold;
+            }
+
+            .red {
+                color: #df1b24;
+                border-right: solid 1px #e0e0e0;
+                padding-right: 20px;
+            }
+        }
+
+        .main {
+            margin-left: 18px;
+            width: 530px;
+            float: left;
+            font-size: 24px;
+            color: #444;
+            line-height: 80px;
+            height: 80px;
+        }
+    }
+
+    .list {
+        width: 750px;
+        background-color: #fff;
+        margin-bottom: 20px;
+        clear: both;
+
+        .list-item {
+            display: block;
+            width: 750px;
+            height: 88px;
+            line-height: 88px;
+            padding: 0 30px;
+
+            div {
+                float: left;
+                font-size: 28px;
+                color: #444;
+                height: 88px;
+            }
+
+            .pic {
+                font-size: 45px;
+                width: 60px;
+            }
+
+            .body {
+                width: 630px;
+                border-bottom: solid 1px #e0e0e0;
+
+                .main {
+                    width: 400px;
+                }
+
+                .value {
+                    width: 200px;
+                    text-align: right;
+                }
+
+                .arr {
+                    color: #e0e0e0;
+                    font-size: 24px;
+                    width: 30px;
+                    text-align: right;
+                }
+            }
+
+            &:last-child {
+                .body {
+                    border-bottom: 0;
+                }
+            }
+        }
+    }
+
+    .s-list {
+        .list-item {
+            height: 80px;
+            line-height: 80px;
+
+            div {
+                height: 80px;
+            }
+
+            .body {
+                width: 690px;
+                border-bottom: 0;
+
+                .main {
+                    width: 360px;
+                    font-size: 32px;
+                }
+
+                .value {
+                    width: 300px;
+                    text-align: right;
+                }
+            }
+        }
+    }
+
+    .service {
+        float: left;
+        background-color: #fff;
+        margin-bottom: 20px;
+        margin-top: -20px;
+
+        .service-item {
+            float: left;
+            padding: 20px 75px;
+            width: 250px;
+            text-align: center;
+            color: #444;
+            height: 145px;
+            border-top: solid 1px #e0e0e0;
+            position: relative;
+
+            .name {
+                font-size: 24px;
+                line-height: 55px;
+                height: 55px;
+            }
+
+            .num {
+                font-size: 30px;
+                line-height: 50px;
+                height: 50px;
+            }
+
+            .pic {
+                font-size: 45px;
+                line-height: 45px;
+                height: 55px;
+                padding-top: 10px;
+            }
+
+            .val {
+                width: 28px;
+                height: 28px;
+                border-radius: 14px;
+                color: #fff;
+                background: #d0021b;
+                line-height: 28px;
+                text-align: center;
+                position: absolute;
+                top: 15px;
+                right: 75px;
+                font-size: 18px;
+            }
+        }
+    }
+
+    .ad-pic {
+        width: 750px;
+        margin-bottom: 20px;
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+    }
+
+    .thumb-row {
+        padding-top: 0;
+
+        .thumb-row-box {
+            display: block;
+            float: left;
+            width: 355px;
+            margin: 0 10px;
+            max-height: 260px;
+        }
+    }
+
+    .banner-center-swiper {
+        height: 260px;
+
+        .banner-list {
+            height: 260px;
+
+            li {
+                height: 260px;
+
+                img {
+                    height: 260px;
+                }
+            }
+        }
+    }
+
+    .yoho-logo-c {
+        height: 80px;
+        padding-top: 22px;
+        margin-bottom: 120px;
+
+        .yoho-logo {
+            width: 180px;
+            height: 35px;
+            margin: 0 auto;
+            background-size: 100% 100%;
+            background-image: resolve("yohologo02.png");
+        }
+    }
+}

 .width750 {
     .yoho-footer {
         font-size: 28px;
+        border-top: solid 1px #e0e0e0;
     }
 
     .op-row {
@@ -24,8 +25,8 @@
     }
 
     .copyright {
-        height: 140px;
-        line-height: 140px;
+        height: 110px !important;
+        line-height: 110px !important;
     }
 }
 
@@ -62,12 +63,15 @@
         }
 
         .user-name {
-            margin-right: 1em;
-            margin-left: 0.3em;
             max-width: 200px;
-            text-decoration: underline;
+            text-decoration: none;
             text-overflow: ellipsis;
             white-space: nowrap;
+            border-right: solid 1px #e0e0e0;
+            margin: 45px 1em 45px 0.3em;
+            padding-right: 30px;
+            height: 30px;
+            line-height: 30px;
         }
 
         .back-to-top {
@@ -107,12 +111,11 @@
 
     .copyright {
         height: 60PX;
-        border-top: 1px solid #ccc;
         background-color: #eee;
         color: #666;
         text-align: center;
         line-height: 60PX;
-        font-size: 12PX;
+        font-size: 24px;
     }
 
     &.bottom {

@@ -17,14 +17,14 @@
         line-height: 105px;
 
         .nav-back {
-            left: 12px;
+            left: 0;
             width: 105px;
             height: 105px;
             line-height: 105px;
         }
 
         .nav-home {
-            right: 12px;
+            right: 0;
             width: 105px;
             height: 105px;
             line-height: 105px;
@@ -184,79 +184,82 @@
 
 .width750 {
     .homebuttom {
-        height: 105px;
-
-        ul {
-            padding-top: 14px;
-
-            li {
-                i {
-                    margin-bottom: 9px;
-                }
-
-                span {
-                    line-height: 47px;
-                    font-size: 16px;
-                }
-            }
-        }
+        height: 355px;
+        top: 105px;
     }
 }
 
 .homebuttom {
-    position: relative;
+    width: 280px;
+    height: 355px;
+    position: absolute;
+    top: 90px;
+    right: 12px;
     z-index: 2;
     overflow: hidden;
-    width: 100%;
-    height: 90px;
-    border-top: 1px solid rgba(255, 255, 255, 0.5);
     color: #fff;
+    background-size: 100% 100%;
+    padding-top: 17px;
 
     &.boys {
-        background-image: linear-gradient(#323232, #414141);
+        background-image: resolve("common/homebuttom-bg.png");
+
+        li {
+            span {
+                border-bottom: solid 1px #444;
+            }
+        }
     }
 
     &.girls {
-        background: #ff88ae;
+        background-image: resolve("common/homebuttom-bg-1.png");
     }
 
     &.kids {
-        background: #7ad9f9;
+        background-image: resolve("common/homebuttom-bg-2.png");
     }
 
     &.life-style {
-        background: #4f4138;
+        background-image: resolve("common/homebuttom-bg-3.png");
     }
 
     ul {
         overflow: hidden;
-        padding-top: 12px;
         width: 100%;
-        height: 90%;
+        height: 338px;
+        padding: 1px 0;
 
         li {
             float: left;
             overflow: hidden;
-            width: 25%;
-            height: 100%;
-            text-align: center;
+            width: 100%;
+            height: 84px;
+            line-height: 84px;
+            padding-left: 40px;
 
             i {
                 display: block;
-                margin-bottom: 8px;
-                width: 100%;
-                height: 40%;
+                float: left;
+                font-size: 30px;
                 color: #fff;
+                width: 70px;
             }
 
             span {
                 display: block;
-                overflow: hidden;
-                width: 100%;
-                height: auto;
+                float: left;
+                font-size: 28px;
                 color: #fff;
-                line-height: 40px;
-                font-size: 14PX;
+                width: 170px;
+                height: 84px;
+                border-bottom: solid 1px #fff;
+                padding-left: 20px;
+            }
+        }
+
+        li:last-child {
+            span {
+                border-bottom: 0;
             }
         }
     }

+@import "common/good";
+
+#new-recommend-c {
+    width: 750px;
+    background-color: #fff;
+
+    .toper {
+        padding: 24px 30px;
+        line-height: 32px;
+        height: 80px;
+        border-bottom: solid 1px #e0e0e0;
+
+        .title {
+            font-size: 32px;
+            color: #444;
+            padding-left: 20px;
+            border-left: solid 4px #444;
+        }
+    }
+
+    .container {
+        padding-left: 15px;
+    }
+}