Merge branch 'feature/sale' of http://git.dev.yoho.cn/web/yohobuy-node into feature/sale

 the commit.

@@ -583,7 +583,152 @@ exports.outletBanner = () => {
         ],
         ],
 
 
         hotBrands: {
         hotBrands: {
+            name: '热门品牌',
             brandUrl: 'www.baidu.com'
             brandUrl: 'www.baidu.com'
+        },
+
+        brandList: {
+            logoBrand: [{
+                href: 'www.baidu.com',
+                img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
+            },
+            {
+                href: 'www.baidu.com',
+                img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
+            },
+            {
+                href: 'www.baidu.com',
+                img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
+            },
+            {
+                href: 'www.baidu.com',
+                img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
+            },
+            {
+                href: 'www.baidu.com',
+                img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
+            },
+            {
+                href: 'www.baidu.com',
+                img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
+            },
+            {
+                href: 'www.baidu.com',
+                img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
+            },
+            {
+                href: 'www.baidu.com',
+                img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
+            },
+            {
+                href: 'www.baidu.com',
+                img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
+            },
+            {
+                href: 'www.baidu.com',
+                img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
+            }]
+        },
+
+        recommend: {
+            tplrecommend: {
+                name: '热门品类',
+                keyword: [{
+                    name: 'T-SHIRTS',
+                    herf: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/75',
+                    img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/75'
+                },
+                {
+                    name: 'T-SHIRTS',
+                    herf: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/75',
+                    img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/75'
+
+                },
+                {
+                    name: 'T-SHIRTS',
+                    herf: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/75',
+                    img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/75'
+                }],
+
+                category: [{
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/380/h/500',
+                    name: '衬衣'
+                },
+                {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
+                    name: '衬衣'
+                }, {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
+                    name: '衬衣'
+                }, {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
+                    name: '衬衣'
+                }, {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
+                    name: '衬衣'
+                }, {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
+                    name: '衬衣'
+                }, {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
+                    name: '衬衣'
+                }, {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
+                    name: '衬衣'
+                }, {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
+                    name: '衬衣'
+                }, {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
+                    name: '衬衣'
+                }, {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
+                    name: '衬衣'
+                }, {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
+                    name: '衬衣'
+                }, {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
+                    name: '衬衣'
+                }],
+
+                brands: [{
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/380/h/500',
+                    name: '衬衣',
+                    img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/380/h/500'
+                }],
+
+                types: [{
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250',
+                    name: '衬衣',
+                    img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250'
+                },
+                {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250',
+                    name: '衬衣',
+                    img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250'
+                },
+                {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250',
+                    name: '衬衣',
+                    img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250'
+                },
+                {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250',
+                    name: '衬衣',
+                    img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250'
+                },
+                {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250',
+                    name: '衬衣',
+                    img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250'
+                },
+                {
+                    href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250',
+                    name: '衬衣',
+                    img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250'
+                }]
+            }
         }
         }
     };
     };
 };
 };

@@ -34,6 +34,14 @@
 
 
     {{!热门品牌}}
     {{!热门品牌}}
     {{# hotBrands}}
     {{# hotBrands}}
-        {{> brand/hot-brand}}
+    {{> index/floor-header}}
+    <div class="logo-brand " data-url="{{brandUrl}}">
+    </div>
     {{/hotBrands}}
     {{/hotBrands}}
+
+    {{! 热门品类}}
+    {{# recommend}}
+        {{> index/outlets-recommend}}
+    {{/ recommend}}
+
 </div>
 </div>

-{{> index/floor-header}}
-<div class="preference-brand imgopacity">
-    <div class="logo-brand " data-url="{{brandUrl}}">
-    </div>
-</div>

+{{# tplrecommend}}
+<div class="tpl-recommend clearfix">
+    {{> index/floor-header}}
+    <div class="tpl-body clearfix">
+        <div class="tpl-nav">
+            <div class="tpl-keywords">
+                {{#each keyword}}
+                <a class="keywords{{@index}}" title="{{name}}" href="{{href}}" target= "_blank"><img src="{{img}}"/></a>
+                {{/each}}
+            </div>
+            <div class="tpl-category clearfix">
+                {{#each category}}
+                <a href="{{href}}" target= "_blank">{{name}}</a>
+                {{/each}}
+            </div>
+        </div>
+        <div class="tpl-brands imgopacity clearfix">
+            {{#each brands}}
+            <a title="{{name}}" href="{{href}}" target= "_blank"><img src="{{img}}"/></a>
+            {{/each}}
+        </div>
+        <div class="tpl-types imgopacity clearfix">
+            <ul>
+                {{#each types}}
+                <li><a title="{{name}}" href="{{href}}" target= "_blank"><img src="{{img}}"/></a></li>
+                {{/each}}
+            </ul>
+        </div>
+    </div>
+</div>
+{{/ tplrecommend}}

+var Slide = require('./yohoui/YH.slide');
+var $ = require('yoho.jquery');
+
+var $contain = $('.slide-accordion');
+var $item = $contain.find('li');
+
+var $width = $item.width();
+var $spn = parseInt($('.home-page').width()) === 1150 ? (120 + 5) : (102 + 5);
+var slide;
+
+function switchfun(to) {
+    $item.each(function(index) {
+        $(this).css('zIndex', index);
+        if (index <= to) {
+            $(this).stop().animate({
+                left: index * $spn
+            }, 400);
+        } else {
+            $(this).stop().animate({
+                left: (to) * $spn + $width + $spn * (index - to - 1)
+            }, 400);
+        }
+    });
+}
+
+switchfun(0);
+
+slide = new Slide({
+    length: 5,
+    loop: false,
+    auto: false,
+    timeout: 2,
+    index: 0
+});
+
+slide.on('change', function(data) {
+    switchfun(data.to);
+});
+
+$item.mouseover(function() {
+    slide.go($(this).index());
+});
+
+slide.init();

+/**
+ * 弹框公共组件
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2016/2/24
+ */
+
+var $ = require('yoho.jquery'),
+    Handlebars = require('yoho.handlebars');
+
+var defaultOptions = {
+    mask: true,
+    closeIcon: true
+};
+
+var tpl =
+    '<div class="yoho-dialog {{className}} hide">' +
+        '{{#if closeIcon}}' +
+            '<span class="close">' +
+                '<i class="iconfont">&#xe602;</i>' +
+            '</span>' +
+        '{{/if}}' +
+        '<div class="content">' +
+            '{{{content}}}' +
+        '</div>' +
+        '<div class="btns">' +
+            '{{# btns}}' +
+                '<span {{#if id}}id="dialog-{{id}}"{{/if}} class="btn{{#each btnClass}} {{.}}{{/each}}">' +
+                    '{{name}}' +
+                '</span>' +
+            '{{/ btns}}' +
+        '</div>' +
+    '</div>';
+
+var tplFn = Handlebars.compile(tpl);
+
+// 背景蒙版
+function createMask() {
+    if ($('.body-mask').length === 0) {
+        $('body').append('<div class="body-mask hide"></div>');
+    }
+
+    return $('.body-mask').css({
+        height: $(document).height(),
+        width: $(document).width()
+    });
+}
+
+function createDialog(data) {
+    $('body').append(tplFn(data));
+
+    return $('.yoho-dialog');
+}
+
+function Dialog(options) {
+    var opt = $.extend({}, defaultOptions, options);
+    var that = this,
+        i;
+
+    // 实现继承时，只返回实例，不生成html
+    if (opt.inherit) {
+        return this;
+    }
+
+    if (opt.mask) {
+        that.$mask = createMask();
+    }
+    that.$el = createDialog(opt);
+
+    // 绑定x关闭事件
+    that.$el.find('.close').click(function() {
+        that.close();
+    });
+
+    function bindBtnEvt(index) {
+        that.$el.find('#dialog-' + opt.btns[index].id).on('click', function() {
+            opt.btns[index].cb && opt.btns[index].cb();
+        });
+    }
+
+    // 绑定按钮事件
+    if (opt.btns) {
+        for (i = 0; i < opt.btns.length; i++) {
+            bindBtnEvt(i);
+        }
+    }
+}
+
+Dialog.prototype.close = function() {
+    this.$mask && this.$mask.addClass('hide');
+    this.$el.remove();
+};
+
+Dialog.prototype.show = function() {
+    this.$mask && this.$mask.removeClass('hide');
+    this.$el.removeClass('hide').css({
+        'margin-top': -this.$el.height() / 2,
+        'margin-left': -this.$el.width() / 2
+    });
+};
+
+exports.Dialog = Dialog;
+
+// Alert
+function Alert(content) {
+    var that = this;
+    var option = {
+        content: content,
+        className: 'alert-dialog',
+        btns: [
+            {
+                id: 'alert-sure',
+                btnClass: ['alert-sure'],
+                name: '确定',
+                cb: function() {
+                    that.close();
+                }
+            }
+        ]
+    };
+
+    Dialog.call(this, option);
+}
+
+Alert.prototype = new Dialog({
+    inherit: true
+});
+Alert.prototype.constructor = Alert;
+exports.Alert = Alert;
+
+// Confirm
+function Confirm(opt) {
+    var that = this;
+
+    var option = {
+        content: opt.content,
+        className: 'confirm-dialog',
+        btns: [
+            {
+                id: 'confirm-sure',
+                btnClass: ['confirm-sure'],
+                name: '确定',
+                cb: opt.cb
+            },
+            {
+                id: 'confirm-cancel',
+                btnClass: ['confirm-cancel'],
+                name: '取消',
+                cb: function() {
+                    that.close();
+                }
+            }
+        ]
+    };
+
+    Dialog.call(this, option);
+}
+
+Confirm.prototype = new Dialog({
+    inherit: true
+});
+Confirm.prototype.constructor = Confirm;
+exports.Confirm = Confirm;

@@ -83,7 +83,6 @@ var $ = require('yoho-jquery'),
                         return;
                         return;
                     }
                     }
 
 
-                    that._createHelper();
                     brandHtml = '\{{#brandList logoBrand}}' +
                     brandHtml = '\{{#brandList logoBrand}}' +
                         '<a href="\{{href}}" target="_blank"><img class="lazy" data-original="\{{img}}" alt=""></a>' +
                         '<a href="\{{href}}" target="_blank"><img class="lazy" data-original="\{{img}}" alt=""></a>' +
                         '\{{/brandList}}';
                         '\{{/brandList}}';

+var $ = require('yoho.jquery'),
+    lazyload = require('yoho.lazyload');
+var Handlebars = require('yoho.handlebars');
+
+function InfiniteLoad(options) {
+    var defaults = {
+        index: 0,
+        isload: true, // 是否正在加载
+        isrun: true, // 判断是否执行
+        offset: {
+            height: null,
+            width: null
+        }
+    };
+
+    this.registerEvent = {
+        before: [],
+        change: [],
+        after: []
+    };
+
+    this.options = $.extend(true, {}, defaults, options);
+
+    return this;
+}
+
+InfiniteLoad.prototype.on = function(name, callback) {
+    var g = this;
+    var _e = g.registerEvent[name];
+
+    if (_e) {
+        _e.push(callback);
+    }
+    return _e;
+};
+
+InfiniteLoad.prototype.exect = function(key, params) {
+    var g = this;
+    var e;
+
+    if (g.registerEvent[key] && g.registerEvent[key].length > 0) {
+        for (e in g.registerEvent[key]) {
+            if (g.registerEvent[key].hasOwnProperty(e)) {
+                g.registerEvent[key][e](params);
+            }
+        }
+    }
+};
+
+InfiniteLoad.prototype.init = function() {
+    var g = this;
+    var p = this.options;
+
+    function __loadMore() {
+
+        if (p.isrun && p.isload && g.__directionCalculation()) {
+            p.isload = false;
+            p.index++;
+            g.exect('after', p);
+        }
+
+        g.exect('change', p);
+    }
+
+    g.exect('before', p);
+
+    $(window).scroll(__loadMore);
+};
+
+InfiniteLoad.prototype.emit = function() {
+    var p = this.options;
+
+    p.isload = true;
+};
+
+InfiniteLoad.prototype.stop = function() {
+    var p = this.options;
+
+    p.isrun = false;
+    p.isload = false;
+};
+
+InfiniteLoad.prototype.__directionCalculation = function() {
+    var p = this.options;
+
+    if (p.offset.height && p.offset.height() > 0 && $(window).scrollTop() + $(window).height() >= p.offset.height()) {
+        return true;
+    }
+    return false;
+};
+
+module.exports = function(data) {
+    var $container = $('#newarrivals .goods-container');
+    var $load = $('.loading a');
+    var load = new InfiniteLoad({
+        index: 1,
+        isload: false,
+        offset: {
+            height: function() {
+                return parseFloat($container.offset().top) + parseFloat($container.height()) - 200;
+            }
+        }
+    });
+    var loadAjax;
+    var url = data.url,
+        count = data.count,
+        rows = data.rows;
+
+    data.pageIndex = 0;
+
+    delete data.url;
+    delete data.count;
+    delete data.rows;
+
+    loadAjax = function(url, data, count) {
+
+        var options = {
+            type: 'POST',
+            url: url,
+            success: function(result) {
+                var code = result.code;
+                var myTemplate, len, pos;
+
+                if (code === 200) {
+                    len = result.goods.length % count;
+                    pos = result.goods.length - len - 1;
+
+                    result.goods.splice(pos, len);
+
+                    myTemplate = Handlebars.compile(load.tpl);
+
+                    $container.append(myTemplate(result.goods));
+                    data.pageIndex = data.pageIndex + result.goods.length;
+
+                    // 懒加载插件貌似有点问题,图片先直接展示
+                    lazyload($container.find('img.lazy'));
+
+                    load.emit();
+                } else {
+
+                    load.stop();
+                    $load.html('查看更多');
+                }
+            },
+            error: function() {
+
+                load.stop();
+                $load.html('网络断开连接了~');
+            }
+        };
+
+        options.data = data;
+        $.ajax(options);
+    };
+
+
+    load.on('after', function(p) {
+
+        data.pageCount = count * rows[1];
+
+        loadAjax(url, data);
+    });
+
+    load.on('before', function(p) {
+
+
+        load.tpl = '{{#each this}}';
+        load.tpl += '<div class="good-info imgopacity" data-skn="{{skn}}">';
+        load.tpl += '    <div class="tag-container clearfix">';
+        load.tpl += '        {{# tags}}';
+        load.tpl += '            {{# isNew}}';
+        load.tpl += '                <span class="good-tag new-tag">NEW</span>';
+        load.tpl += '            {{/ isNew}}';
+        load.tpl += '            {{# isReNew}}';
+        load.tpl += '                <span class="good-tag renew-tag">再到着</span>';
+        load.tpl += '            {{/ isReNew}}';
+        load.tpl += '            {{# isSale}}';
+        load.tpl += '                <span class="good-tag sale-tag">SALE</span>';
+        load.tpl += '            {{/ isSale}}';
+        load.tpl += '            {{# isNewFestival}}';
+        load.tpl += '                <span class="good-tag new-festival-tag">新品节</span>';
+        load.tpl += '            {{/ isNewFestival}}';
+        load.tpl += '            {{# isLimit}}';
+        load.tpl += '                <span class="good-tag limit-tag">限量商品</span>';
+        load.tpl += '            {{/ isLimit}}';
+        load.tpl += '            {{# isYearEndPromotion}}';
+        load.tpl += '                <span class="good-tag yep-tag">年终大促</span>';
+        load.tpl += '            {{/ isYearEndPromotion}}';
+        load.tpl += '            {{# isYearMidPromotion}}';
+        load.tpl += '                <span class="good-tag ymp-tag">年中热促</span>';
+        load.tpl += '            {{/ isYearMidPromotion}}';
+        load.tpl += '        {{/ tags}}';
+        load.tpl += '    </div>';
+        load.tpl += '    <div class="good-detail-img">';
+        load.tpl += '        <a class="good-thumb" href="{{url}}" target= "_blank">';
+        load.tpl += '            <img class="lazy" data-original="{{thumb}}">';
+        load.tpl += '        </a>';
+        load.tpl += '        {{# isFew}}';
+        load.tpl += '            <p class="few-tag">即将售罄</p>';
+        load.tpl += '        {{/ isFew}}';
+
+        load.tpl += '        {{#if showColBtn}}';
+        load.tpl += '            <span class="col-btn iconfont{{#if coled}} coled{{/if}}">&#xe616;</span>';
+        load.tpl += '        {{/if}}';
+        load.tpl += '    </div>';
+        load.tpl += '    <div class="good-detail-text">';
+        load.tpl += '        <a href="{{url}}" target= "_blank">{{name}}</a>';
+        load.tpl += '        <p class="price">';
+        load.tpl += '            <span class="sale-price{{#unless marketPrice}}prime-cost{{/unless}}">';
+        load.tpl += '                ¥{{salePrice}}';
+        load.tpl += '            </span>';
+        load.tpl += '            {{# marketPrice}}';
+        load.tpl += '                <span class="market-price">¥{{.}}</span>';
+        load.tpl += '            {{/ marketPrice}}';
+        load.tpl += '        </p>';
+        load.tpl += '    </div>';
+        load.tpl += '</div>';
+        load.tpl += '{{/each}}';
+
+
+        data.pageCount = count * rows[0];
+
+        loadAjax(url, data, data.count);
+
+        // load.emit();
+    });
+
+    load.init();
+
+};

+/**
+ * 分享
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2016/3/1
+ */
+
+var $ = require('yoho.jquery');
+
+function shareBase(options) {
+    var openUrl = '';
+    var defOption = {
+        title: '',
+        url: window.location.href,
+        weixinUrl: '',
+        image: '',
+        desc: '',
+        channel: ''
+    };
+    var shareChannels = ['weibo', 'tweibo', 'qzone', 'renren', 'qq', 'douban', 'weixin'];
+    var sharebox;
+    var shareCon = '<em><i></i></em>';
+
+    defOption = $.extend(defOption, options);
+
+    if ($.inArray(defOption.channel, shareChannels) === -1) {
+        alert('不存在的分享平台!');
+        return false;
+    }
+
+    switch (defOption.channel) {
+        case 'weibo':
+            openUrl = 'http://service.weibo.com/share/share.php?url=' + defOption.url + '&title=' +
+                defOption.title + '&appkey=3739328910&searchPic=true&pic=' + defOption.image;
+            break;
+        case 'tweibo':
+            openUrl = 'http://share.v.t.qq.com/index.php?c=share&a=index&url=' + defOption.url + '&title=' +
+                defOption.title + '&appkey=c0af9c29e0900813028c2ccb42021792&pic=' + defOption.image;
+            break;
+        case 'qzone':
+            openUrl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + defOption.url + '&title=' +
+                defOption.title + '&desc=&summary=' + defOption.desc + '&site=YOHO!有货&pics=' + defOption.image;
+            break;
+        case 'renren':
+            openUrl = 'http://widget.renren.com/dialog/share?resourceUrl=' + defOption.url + '&srcUrl=' +
+                defOption.url + '&desc=' + defOption.desc + '&title=' + defOption.title + '&description=' +
+                defOption.desc + '&pic=' + defOption.image;
+            break;
+        case 'qq':
+            openUrl = 'http://connect.qq.com/widget/shareqq/index.html?url=' + defOption.url + '&desc=' +
+                defOption.desc + '&title=' + defOption.title.replace('%', '') + '&desc=&summary=' +
+                defOption.desc + '&site=YOHO!有货&pics=' + defOption.image;
+            break;
+        case 'weixin':
+            openUrl = 'http://s.jiathis.com/qrcode.php?url=' + defOption.weixinUrl + '&desc=' +
+                defOption.desc + '&title=' + defOption.title + '&description=' +
+                defOption.desc + '&pic=' + defOption.image;
+            break;
+        case 'douban':
+            openUrl = 'http://www.douban.com/share/service?href=' + defOption.url + '&text=' +
+                defOption.desc + '&image=' + defOption.image + '&title=' + defOption.title + '&comment=';
+            break;
+    }
+
+    if (defOption.channel === 'weixin') {
+        if (!defOption.self) {
+            return;
+        }
+
+        sharebox = defOption.self.closest('.share-to').find('.weixin-share-box');
+
+        if (sharebox.length > 0) {
+            shareCon += '<div class="con"><h2>分享到微信朋友圈</h2><p class="pic">' +
+            '<img src="' + openUrl + '" /></p><p class="w">打开微信，点击底部得“发现”，使用<br/>“扫一扫“即可将网页分享到我的朋友圈。</p>' +
+            '<a href="javascript:void(0)" class="close">x</a></div>';
+            sharebox.find('div').length > 0 ? sharebox.show() : sharebox.html(shareCon).show();
+
+            sharebox.find('.close').click(function() {
+                $(this).closest('.weixin-share-box').hide();
+            });
+        }
+    } else {
+        window.open(encodeURI(openUrl));
+    }
+}
+
+function share(channel, self) {
+    var title = document.title.replace(/(^\s*)|(\s*$)/g, '');
+    var desc = $('#share-desc').val();
+    var image = $('#share-img').val();
+    var weixinUrl = $('#weixin-url').val();
+
+
+    if (channel === 'weibo' || channel === 'tqq') {
+        shareBase({
+            channel: channel,
+            title: title,
+            image: image
+        });
+    } else {
+        shareBase({
+            channel: channel,
+            title: title,
+            desc: desc,
+            image: image,
+            self: self,
+            weixinUrl: weixinUrl
+        });
+    }
+}
+
+$('.share-wrapper').on('click', 'i', function() {
+    var $el = $(this),
+        type = $el.data('type');
+
+    if (type === 'weixin') {
+        share(type, $el);
+    } else {
+        share(type);
+    }
+});

+/**
+ * (品牌优选)图片幻灯片插件
+ * @author: wangqing(robin.wang@yoho.cn)
+ * @date: 205/7/2
+ */
+var $ = require('yoho-jquery');
+
+(function() {
+    $.fn.slider2 = function(options) {
+        function autoplay(index, limit, toright) {
+            if (toright === true) {
+                $('.next').trigger('click');
+                if (index === (limit - 3)) {
+                    autoplayrecycle(--index, limit, false);
+                } else {
+                    autoplayrecycle(++index, limit, true);
+                }
+            } else {
+                $('.prev').trigger('click');
+                if (index === 0) {
+                    autoplayrecycle(++index, limit, true);
+                } else {
+                    autoplayrecycle(--index, limit, false);
+                }
+            }
+        }
+
+        function autoplayrecycle(index, limit, toright) {
+            window.setTimeout(autoplay, $.fn.slider2.defaults.delaytime, index, limit, toright);
+        }
+
+        function changePic(index, width, callback) {
+            var offersetleft = -(index * width);
+
+            $('.img-list')
+                .animate({
+                    'margin-left': offersetleft + 'px'
+                }, 'slow', callback);
+
+        }
+        $.fn.slider2.defaults = {
+            index: 0,
+            shownum: 3,
+            autoplay: false,
+            delaytime: 3000
+        };
+        return this.each(function() {
+            var opts = $.extend({}, $.fn.slider2.defaults, options);
+            var mr = parseInt($('.img-item').css('margin-right'));
+            var $banneritems = $('.img-item');
+            var bannerarr = [];
+            var _width = $banneritems.outerWidth() + mr,
+                _size = $banneritems.length,
+                j = 0;
+
+            if (_size <= 3) {
+                $(this).find('.img-brand-switch').hide();
+                return;
+            }
+            for (j = 0; j < $banneritems.length; j++) {
+                bannerarr.push($banneritems[j]);
+            }
+            _size = bannerarr.length;
+            $(this).find('.img-list').css({
+                width: (_width * _size)
+            });
+            $(this).find('.next').on('click', function(e) {
+                var i = 0,
+                    _obj = null;
+
+                e.preventDefault();
+
+                changePic(3, _width, function() {
+                    for (i = 0; i < 3; i++) {
+                        _obj = bannerarr.shift();
+
+                        $('.img-item').parent().append(_obj.outerHTML);
+                        bannerarr.push(_obj);
+                    }
+                    $('.img-item').first().remove();
+                    $('.img-item').first().remove();
+                    $('.img-item').first().remove();
+                    $('.img-list').css({
+                        'margin-left': '0'
+                    });
+                });
+            });
+            $(this).find('.prev').on('click', function(e) {
+                var i = 0,
+                    _obj = null,
+                    offersetleft = '';
+
+                e.preventDefault();
+                for (i = 0; i < 3; i++) {
+                    _obj = bannerarr.pop();
+
+                    $('.img-item').parent().prepend(_obj.outerHTML);
+                    bannerarr.unshift(_obj);
+                }
+                offersetleft = 3 * _width;
+                $('.img-item').last().remove();
+                $('.img-item').last().remove();
+                $('.img-item').last().remove();
+                $('.img-list').css({
+                    'margin-left': -offersetleft + 'px'
+                });
+                changePic(0, _width);
+            });
+            if (opts.autoplay === true) {
+                autoplayrecycle(opts.index, _size, true);
+            }
+        });
+
+    };
+
+}());

+var assembly;
+var classtype = {
+    '[object Array]': 'array',
+    '[object Boolean]': 'boolean',
+    '[object Date]': 'date',
+    '[object Function]': 'function',
+    '[object Number]': 'number',
+    '[object Object]': 'object',
+    '[object RegExp]': 'regexp',
+    '[object String]': 'string'
+};
+var me = {
+    __Index: 0,
+    list: [],
+    get: function(id) {
+        return id === undefined ? this.list : this.list[id];
+    },
+    fn: function() { },
+    inherit: function(childClass, parentClass) {
+        var Constructor = me.fn;
+
+        Constructor.prototype = parentClass.prototype;
+        childClass.prototype = new Constructor();
+
+        childClass.prototype.constructor = childClass;
+        childClass.superclass = parentClass.prototype;
+
+        if (childClass.prototype.constructor === Object.prototype.constructor) {
+            childClass.prototype.constructor = parentClass;
+        }
+    },
+    extend: function(obj, newProperties) {
+        var key;
+
+        for (key in newProperties) {
+            if (newProperties.hasOwnProperty(key)) {
+                obj[key] = newProperties[key];
+            }
+        }
+        return obj;
+    },
+    copy: function(TargetClass, obj, newProperties) {
+        var value, o, key;
+
+        if (typeof obj !== 'object') {
+            return obj;
+        }
+        value = obj.valueOf();
+        if (obj !== value) {
+            return new obj.constructor(value);
+        }
+        if (obj instanceof obj.constructor && obj.constructor !== Object) {
+            if (TargetClass) {
+                o = new TargetClass();
+            } else {
+                o = me.clone(obj.constructor.prototype);
+            }
+
+            for (key in obj) {
+                if (TargetClass || obj.hasOwnProperty(key)) {
+                    o[key] = obj[key];
+                }
+            }
+        } else {
+            o = {};
+            for (key in obj) {
+                if (o.hasOwnProperty(key)) {
+                    o[key] = obj[key];
+                }
+            }
+        }
+        if (newProperties) {
+            for (key in newProperties) {
+                if (o.hasOwnProperty(key)) {
+                    o[key] = newProperties[key];
+                }
+            }
+        }
+
+        return o;
+    },
+    clone: function(obj) {
+        me.__cloneFunc.prototype = obj;
+        return new me.__cloneFunc();
+    },
+    __cloneFunc: function() {
+    },
+    delegate: function(func, scope) {
+        var args;
+
+        scope = scope || window;
+
+        if (arguments.length > 2) {
+            args = Array.prototype.slice.call(arguments, 2);
+
+            return function() {
+                return func.apply(scope, args);
+            };
+        } else {
+            return function() {
+                return func.call(scope);
+            };
+        }
+    },
+    dom: function($select, classCss) {
+        var wrap = $select;
+        var name, DOM = {
+                wrap: wrap
+            },
+            els = wrap[0].getElementsByTagName('*'),
+            elsLen = els.length;
+        var i;
+
+        for (i = 0; i < elsLen; i++) {
+            name = els[i].className;
+            if (name.indexOf(classCss) > -1) {
+                name = name.split(classCss)[1];
+            }
+            if (name) {
+                DOM[name] = wrap.find(els[i]);
+            }
+        }
+        return DOM;
+    },
+
+    // 模板引擎
+    template: function() {
+        var result, key, reg, i;
+        var args = arguments;
+
+        if (args.length > 0) {
+            if (me.isString(args[0])) {
+                result = args[0];
+                if (args.length === 2 && me.isObject(args[1])) {
+                    for (key in args[1]) {
+                        if (args[1][key] !== undefined) {
+                            reg = new RegExp('({' + key + '})', 'g');
+
+                            result = result.replace(reg, args[1][key]);
+                        }
+                    }
+                } else {
+                    for (i = 1; i < args.length; i++) {
+                        if (args[i] !== undefined) {
+                            reg = new RegExp('({[' + (i - 1) + ']})', 'g');
+
+                            result = result.replace(reg, args[i]);
+                        }
+                    }
+                }
+            }
+        }
+        return result;
+    },
+    __type: function(obj) {
+        return obj == null ? String(obj) : classtype[Object.prototype.toString.call(obj)] || 'object';
+    },
+    isObject: function(obj) {
+        return this.isFunction(obj) || !!(obj && 'object' === typeof obj);
+    },
+    isFunction: function(obj) {
+        return this.__type(obj) === 'function';
+    },
+    isArray: Array.isArray || function(obj) {
+        return this.__type(obj) === 'array';
+    },
+    isNum: function(obj) {
+        return !isNaN(parseFloat(obj)) && isFinite(obj);
+    },
+    isString: function(obj) {
+        return this.__type(obj) === 'string';
+    },
+    each: function(data, callback, args) {
+        var i, len;
+
+        if (me.isArray(data)) {
+            for (i = 0, len = data.length; i < len; i++) {
+                if (callback.call(data[i], i, data[i], args) === false) {
+                    break;
+                }
+            }
+        } else {
+
+            for (i in data) {
+                if (callback.call(data[i], i, data[i], args) === false) {
+                    break;
+                }
+            }
+        }
+    },
+    funManager: {
+        __loadList: {},
+        __loadFun: function(item, callback, win) {
+
+            if (item.methord && me.isFunction(item.methord())) {
+                win = win || window;
+                item.methord()(item, function() {
+                    callback();
+                }, win);
+            }
+        },
+        load: function(fns, statechange, win, __index) {
+            __index = __index || 0;
+
+            if (fns[__index]) {
+                me.funManager.__loadFun(fns[__index], function() {
+                    me.funManager.load(fns, statechange, win, __index + 1);
+                }, win);
+            }
+            statechange(__index, win);
+        },
+        get: function(id) {
+            return this.__loadList[id];
+        }
+    },
+    log: function(msg) {
+        var console = window.console || {
+            log: function() { }
+        };
+
+        console.log(msg);
+    },
+    Event: {
+        mousewheel: function(e) {
+            var _eoe = e.originalEvent;
+            var _de = _eoe.detail ? _eoe.detail * -1 : _eoe.wheelDelta / 40;
+            var _direction = _de < 0 ? -1 : 1;
+
+            return {
+                direction: _direction,
+                unit: _de
+            };
+        },
+        __: function(_e, el, event, handle) {
+            var key;
+
+            for (key in _e) {
+                if (window[_e[key].validator]) {
+                    el[_e[key].validator](_e[key].prefix + event, handle, false);
+                    break;
+                }
+            }
+        },
+        add: function(el, event, handle) {
+            var _e = [
+                {
+                    validator: 'addEventListener',
+                    prefix: ''
+                },
+                {
+                    validator: 'attachEvent',
+                    prefix: 'on'
+                }
+            ];
+
+            this.__(_e, el, event, handle);
+        },
+        remove: function(el, event, handle) {
+            var _e = [
+                {
+                    validator: 'removeEventListener',
+                    prefix: ''
+                },
+                {
+                    validator: 'detachEvent',
+                    prefix: 'on'
+                }
+            ];
+
+            this.__(_e, el, event, handle);
+        }
+    },
+    getUid: function(_name) {
+        return me.template('me-{0}{1}-{2}', _name, new Date().getTime(), me.__Index++);
+    },
+    Browser: {
+        isTouch: function() {
+            var msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture;
+
+            return (('ontouchstart' in window) || msGesture || window.DocumentTouch) ? true : false;
+        },
+        Prefix: function() {
+            var i;
+
+            var props = ['perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
+            var obj = document.createElement('div');
+
+            for (i in props) {
+                if (obj.style[props[i]] !== undefined) {
+                    return me.template('-{0}-', props[i].replace('Perspective', '').toLowerCase());
+                }
+            }
+        },
+        parseURL: function(url) {
+            var a = document.createElement('a');
+            var ret, seg, len, i, s;
+
+            a.href = url;
+            return {
+                source: url,
+                protocol: a.protocol.replace(':', ''),
+                host: a.hostname,
+                port: a.port,
+                query: a.search,
+                params: (function() {
+                    ret = {},
+                    seg = a.search.replace(/^\?/, '').split('&'),
+                    len = seg.length, i = 0, s;
+
+                    for (; i < len; i++) {
+                        if (!seg[i]) {
+                            continue;
+                        }
+                        s = seg[i].split('=');
+                        ret[s[0]] = s[1];
+                    }
+                    return ret;
+                })(),
+                file: (a.pathname.match(/\/([^\/?#]+)$/i) || [null, ''])[1],
+                hash: a.hash.replace('#', ''),
+                path: a.pathname.replace(/^([^\/])/, '/$1'),
+                relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [null, ''])[1],
+                segments: a.pathname.replace(/^\//, '').split('/')
+            };
+        }
+    },
+    Array: {
+        indexOf: function(array, val) {
+            var i;
+
+            for (i = 0; i < array.length; i++) {
+                if (this[i] === val) {
+                    return i;
+                }
+            }
+            return -1;
+        },
+        remove: function(array, val) {
+            var index = this.indexOf(array, val);
+
+            if (index > -1) {
+                array.splice(index, 1);
+            }
+            return array;
+        }
+    }
+};
+
+assembly = function(options) {
+    this.initialized = false;
+    this.registerEvent = {
+        before: [],
+        change: [],
+        after: []
+    };
+    this.options = options;
+
+    this.init(options);
+};
+
+assembly.output = function() {
+    me.log(me.list);
+};
+assembly.prototype.oninit = me.fn;
+
+assembly.prototype.init = function(cfg) {
+    this.initialized = true;
+
+    // function _getClassName(_constructor, _constr) {
+    //     var _constr = _constr || "";
+    //     if (_constructor.superclass) {
+    //         var args = /(\w+)\.superclass/.exec(_constructor.arguments.callee);
+    //         if (args != null) {
+    //             _constr += args[1] + "-";
+    //             // return _getClassName(_constructor.superclass.constructor, _constr);
+    //         }
+    //     }
+    //     return _constr;
+    // }
+    this.__Uid = me.getUid('me');
+    this.oninit(cfg);
+    me.list[this.__Uid] = this;
+};
+assembly.prototype.destory = function() {
+    this.initialized = false;
+    delete me.list[this.__Uid];
+};
+assembly.prototype.getUid = function() {
+    return this.__Uid;
+};
+assembly.prototype.getOptions = function() {
+    return this.options;
+};
+assembly.prototype.config = function() {
+    if (arguments.length > 0) {
+        if (typeof (arguments[0]) === 'string') {
+            if (arguments.length > 1) {
+                this.options[arguments[0]] = arguments[1];
+            } else {
+                return this.options[name];
+            }
+        }
+    } else {
+        return this.options;
+    }
+};
+assembly.prototype.on = function(name, callback) {
+    var __self = this;
+    var _e = __self.registerEvent[name];
+
+    if (_e) {
+        _e.push(callback);
+    }
+    return _e;
+};
+assembly.prototype.off = function(name, callback) {
+    var __self = this;
+    var _e = __self.registerEvent[name];
+    var e = [];
+
+    me.each(_e, function(name, _callback) {
+
+        if (_callback === callback) {
+            e.push(name);
+        }
+    });
+
+    me.each(e.reverse(), function(name, _callback) {
+        _e.splice(_callback, 1);
+    });
+};
+me.assembly = assembly;
+
+module.exports = me;

+var me = require('./YH.base');
+
+var slide = function(options) {
+    this.__lastTime = null;
+    this.__isStop = false;
+    options = me.extend(this.defaults, options);
+    slide.superclass.constructor.call(this, options);
+};
+
+me.inherit(slide, me.assembly);
+
+slide.prototype.oninit = function() {
+    var __self = this,
+        _o = __self.options;
+
+    if (_o.auto) {
+        __self.play();
+    }
+    __self.go(_o.index);
+    return this;
+};
+
+slide.prototype.go = function(_to, _from) {
+    var __self = this,
+        _o = __self.options;
+    var _direction, _loop, _current, _index, _originalto, o, key, _e;
+
+    if (__self.__lastTime) {
+        clearTimeout(__self.__lastTime);
+        __self.__lastTime = null;
+    }
+    _from = 'undefined' === typeof _from ? _o.index : _from;
+    _direction = _to === _from ? 0 : _to > _from ? 1 : -1;
+    _loop = _o.loop, _index = _o.length - 1, _originalto = _to;
+    if (_loop) {
+        if (_to > _index) {
+            _to = _to - _index - 1;
+        } else {
+            if (0 > _to) {
+                _to = _to + _index + 1;
+            } else {
+                _to = _to;
+            }
+        }
+    } else {
+        if (_to > _index) {
+            _to = _index;
+        } else {
+            if (0 > _to) {
+                _to = 0;
+            } else {
+                _to = _to;
+            }
+        }
+    }
+    _current = _o.index = _to;
+
+    o = {
+        from: _from,
+        to: _to,
+        originalto: _originalto,
+        direction: _direction
+    };
+
+    for (key in __self.registerEvent) {
+        if (__self.registerEvent[key].length > 0) {
+            for (_e in __self.registerEvent[key]) {
+                if (__self.registerEvent[key].hasOwnProperty(_e)) {
+                    __self.registerEvent[key][_e](o);
+                }
+            }
+        }
+    }
+
+    if (_current !== _index || _to) {
+        if (!__self.__isStop && _o.auto) {
+            __self.play();
+        }
+    } else {
+        if (__self.__lastTime) {
+            clearTimeout(__self.__lastTime);
+        }
+    }
+};
+
+slide.prototype.play = function() {
+    var __self = this,
+        _o = __self.options;
+
+    __self.__lastTime = setTimeout(function() {
+        __self.next();
+    }, 1000 * _o.timeout);
+    return this;
+};
+
+slide.prototype.next = function() {
+    var __self = this,
+        _o = __self.options;
+    var _from = _o.index;
+    var _to = _from + _o.step;
+
+    __self.go(_to, _from);
+};
+
+slide.prototype.prev = function() {
+    var __self = this,
+        _o = __self.options;
+    var _from = _o.index;
+    var _to = _from - _o.step;
+
+    __self.go(_to, _from);
+};
+
+slide.prototype.pause = function() {
+    var __self = this;
+
+    if (__self.__lastTime) {
+        clearTimeout(__self.__lastTime);
+    }
+    __self.__isStop = true;
+};
+
+slide.prototype.resume = function() {
+    var __self = this;
+
+    __self.__isStop = false;
+    __self.play();
+};
+
+slide.prototype.defaults = {
+    index: 0,
+    timeout: 5,
+    step: 1,
+    per: 1,
+    auto: false,
+    loop: false
+};
+
+module.exports = slide;

 
 
 var $ = require('yoho-jquery'),
 var $ = require('yoho-jquery'),
-    lazyLoad = require('yoho-jquery-lazyload'),
-    homePage = $('.home-page').data('page');
 
 
-lazyLoad($('img.lazy'));
+    // lazyLoad = require('yoho-jquery-lazyload'),
+    homePage = $('.home-page').data('page'),
+    brandUrl = $('.logo-brand').data('url');
 
 
+// lazyLoad($('img.lazy'));
+
+// require('../header');
 require('../common/slider');
 require('../common/slider');
 require('../common/slider2');
 require('../common/slider2');
 require('../common/logo-brand');
 require('../common/logo-brand');
@@ -19,15 +22,15 @@ if (homePage === 'boys') {
     $('.slide-container').slider();
     $('.slide-container').slider();
 }
 }
 
 
-// if (homePage === 'boys') {
-//     $('.logo-brand').logoBrand({
-//         url: brandUrl
-//     });
-//     $('.img-brand').slider2();
-// } else {
-//     $('.logo-brand').logoBrand({
-//         showNum: 10,
-//         url: brandUrl
-//     });
-//     $('.img-slider-wrapper').slider2();
-// }
+if (homePage === 'boys') {
+    $('.logo-brand').logoBrand({
+        url: brandUrl
+    });
+    $('.img-brand').slider2();
+} else {
+    $('.logo-brand').logoBrand({
+        showNum: 10,
+        url: brandUrl
+    });
+    $('.img-slider-wrapper').slider2();
+}

 .yoho-page {
 .yoho-page {
-
     .floor-header {
     .floor-header {
         position: relative;
         position: relative;
         margin: 80px 0 40px;
         margin: 80px 0 40px;
@@ -41,3 +40,115 @@
         }
         }
     }
     }
 }
 }
+
+/*
+热门推荐模板样式
+*/
+.home-page {
+    .tpl-recommend {
+        width: 100%;
+        position: relative;
+        a {
+            display: block;
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .tpl-body {
+            margin-bottom: 8px;
+        }
+        .tpl-nav {
+            float: left;
+            overflow: hidden;
+            .tpl-keywords {
+                margin-bottom: 8px;
+            }
+
+            .tpl-category {
+                padding: 10px 0;
+                background-color: #f8f8f8;
+                overflow: hidden;
+
+                a {
+                    float: left;
+                    width: 50%;
+                    text-align: center;
+                    color: #000;
+                    overflow: hidden;
+                }
+            }
+        }
+        .tpl-brands {
+            float: left;
+            overflow: hidden;
+            margin-left: 8px;
+            li {
+                margin-top: 8px;
+            }
+        }
+        .tpl-types {
+            float: left;
+            overflow: hidden;
+            margin-top: -8px;
+            width: 579px;
+
+            li {
+                float: left;
+                margin-left: 8px;
+                margin-top: 8px;
+
+                a {
+                    width: 185px;
+                    height: 248px;
+                }
+            }
+        }
+        .tpl-products {
+            overflow: hidden;
+            margin-left: -10px;
+            li {
+                float: left;
+                margin-left: 10px;
+
+                a {
+                    width: 222px;
+                    height: 298px;
+                }
+            }
+        }
+
+        .tpl-nav {
+            width: 185px;
+
+            .keywords0,
+            .keywords1,
+            .keywords2 {
+                margin-bottom: 10px;
+                height: 76px;
+            }
+            .keywords2 {
+                margin-bottom: 0;
+            }
+            .tpl-category {
+                height: 228px;
+
+                a {
+                    height: 38px;
+                    line-height: 38px;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        .tpl-brands {
+            width: 378px;
+            height: 512px;
+
+            li a {
+                height: 248px;
+            }
+        }
+    }
+}