product files rebuild

@@ -70,6 +70,10 @@
                         {{#each goods}}
                         {{#each goods}}
                             {{> product/good}}
                             {{> product/good}}
                         {{/each}}
                         {{/each}}
+                        <div class="good-item-wrapper">
+                            <div class="good-info-main"></div>
+                            <div class="good-select-color"></div>
+                        </div>
                     </div>
                     </div>
                 </div>
                 </div>
             {{/ brandAbout}}
             {{/ brandAbout}}

+/**
+ * 商品筛选逻辑
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/12/4
+ */
+
+var $ = require('yoho.jquery');
+
+var checkUnicode = {
+    unchecked: '&#xe613;',
+    checked: '&#xe612;'
+},
+moreUnicode = {
+    up: '&#xe610;',
+    down: '&#xe600;'
+};
+
+//品牌相关变量
+var $brandDefault = $('.brand .default'),
+    $brandPanel = $('.brand .brand-panel'),
+    $brandAttrs = $('.brand .attr'),
+    $brandMore = $('#brand-more'),
+    $brandMulti = $('#brand-multi');
+
+var $brandMoreTxt, $brandMoreIcon;
+
+//价格相关变量
+var $udPrice = $('.ud-price-range'),
+    interReg = /^\d+$/,
+    $limit, $min, $max, $btn;
+
+//分类相关变量
+var $sortSub = $('.sort-sub-wrap');
+
+//高级选项相关变量
+var $seniorSubWrap = $('.senior-sub-wrap'),
+    $seniorAttrWrap = $('.senior-attr-wrap');
+
+var seniorHoverTime, hoveredIndex;
+
+//清除checkbox选中状态
+function clearChecked($checkbox) {
+    $checkbox.removeClass('checked').html(checkUnicode.unchecked);
+}
+
+//显示更多品牌面板
+function brandShowMore() {
+    $brandDefault.addClass('hide');
+    $brandPanel.removeClass('hide');
+}
+
+//隐藏更多品牌面板
+function brandHideMore() {
+    $brandPanel.addClass('hide');
+    $brandDefault.removeClass('hide');
+}
+
+//url构造&跳转
+function uriLoc(attr, val) {
+    var href = decodeURIComponent(window.location.search),
+        query = attr + '=' + val,
+        newHref;
+
+    if (href === '') {
+        newHref = '?' + query;
+    } else {
+        newHref = href + '&' + query;
+    }
+
+    window.location.href = newHref;
+}
+
+//隐藏高级选项面板
+function hideSeniorPanel(index) {
+    $seniorSubWrap.children('.senior-sub:eq(' + hoveredIndex + ')').addClass('hide');
+    $seniorAttrWrap.children('.attr:eq(' + hoveredIndex + ')').removeClass('hover');
+    hoveredIndex = -1;
+}
+
+//屏蔽筛选项双击文字选中
+$('.filter-box').on('selectstart', '.attr, .brands-index span', function() {
+    return false;
+});
+
+//【分类】
+$('.sort-pre').on('click', 'li', function() {
+    var $this = $(this),
+        index = $this.index();
+
+    $this.siblings('.active').removeClass('active');
+    $this.addClass('active');
+
+    $sortSub.children(':not(.hide)').addClass('hide');
+    $sortSub.children(':eq(' + index + ')').removeClass('hide');
+});
+
+//【品牌】
+if ($brandMore.length > 0) {
+    $brandMoreTxt = $brandMore.children('em');
+    $brandMoreIcon = $brandMore.children('.iconfont');
+}
+
+//【品牌】多选
+$brandMulti.click(function() {
+    if ($brandPanel.css('display') === 'none') {
+
+        //显示品牌面板
+        brandShowMore();
+    }
+
+    $brandPanel.addClass('multi'); //显示出checkbox
+    $(this).addClass('hide');
+});
+
+//【品牌】更多
+$brandMore.click(function() {
+    var $this = $(this);
+
+    if ($this.hasClass('more')) {
+        brandHideMore();
+
+        $brandMoreTxt.text('更多');
+        $brandMoreIcon.html(moreUnicode.down);
+    } else {
+        brandShowMore();
+
+        $brandMoreTxt.text('收起');
+        $brandMoreIcon.html(moreUnicode.up);
+    }
+
+    $(this).toggleClass('more');
+});
+
+//【品牌】索引
+$('.brands-index').on('click', 'span', function() {
+    var $this = $(this),
+        index = $this.data('index');
+
+    if ($this.index() === 0) {
+
+        //全部
+        $brandAttrs.removeClass('hide');
+    } else {
+        $brandAttrs.addClass('hide').filter('[data-index=' + index + ']').removeClass('hide');
+    }
+});
+
+//【品牌】搜索
+$('#brand-search-input').keyup(function() {
+    var val = $(this).val().toLowerCase();
+
+    if (val === '') {
+        $brandAttrs.removeClass('hide');
+    } else {
+        $brandAttrs.addClass('hide').filter('[data-key*=' + val + ']').removeClass('hide');
+    }
+});
+
+//【品牌】多选确定
+$('#brand-multi-ok').click(function() {
+    var val = '';
+
+    if ($(this).hasClass('dis')) {
+        return;
+    }
+
+    $brandPanel.find('.checked').each(function() {
+        var id = $(this).data('id');
+
+        val += (val === '') ? id : (',' + id);
+    });
+
+    uriLoc('brand', val);
+});
+
+//【品牌/高级选项】多选取消
+$('.multi-select-cancel').click(function() {
+    var $panel = $(this).closest('.multi');
+
+    if ($panel.hasClass('brand-panel')) {
+        brandHideMore();
+
+        $brandMulti.removeClass('hide'); //显示多选按钮
+    }
+
+    $panel.removeClass('multi');
+    clearChecked($panel.find('.checkbox.checked')); //清除选中状态
+});
+
+//【品牌/高级选项】checkbox
+$('.check-container').on('click', '.attr', function() {
+    var $this = $(this),
+        $check = $this.find('.checkbox'),
+        $btnOk = $this.parent('.check-container').next('.btns').find('.multi-select-ok');
+
+    $check.toggleClass('checked');
+
+    if ($check.hasClass('checked')) {
+        $check.html(checkUnicode.checked);
+    } else {
+        $check.html(checkUnicode.unchecked);
+    }
+
+    //更新按钮状态
+    if ($check.hasClass('checked') ||
+        $this.siblings('.attr').find('.checked').length > 0) {
+        $btnOk.removeClass('dis');
+    } else {
+        $btnOk.addClass('dis');
+    }
+});
+
+//【品牌/高级选项】当多选时阻止链接默认跳转
+$('.brand, .senior').on('click', '.attr > a', function(e) {
+    if ($(this).closest('.multi').length > 0) {
+        e.preventDefault();
+    }
+});
+
+//【价格】用户定义价格处理
+if ($udPrice.length > 0) {
+    $limit = $udPrice.find('.limit');
+    $min = $limit.filter('.min');
+    $max = $limit.filter('.max');
+    $btn = $udPrice.find('.price-sure');
+
+    //【价格】输入
+    $limit.keyup(function() {
+        var min = $.trim($min.val()),
+            max = $.trim($max.val()),
+            isMinInt = interReg.test(min),
+            isMaxInt = interReg.test(max);
+
+        if (isMaxInt && (min === '' || isMinInt) ||
+            isMinInt && (max === '' || isMaxInt)
+            ) {
+            $btn.removeClass('hide');
+        } else {
+            $btn.addClass('hide');
+        }
+    });
+
+    //【价格】多项查询
+    $btn.click(function() {
+        var min = $.trim($min.val()),
+            max = $.trim($max.val()),
+            tmp;
+
+        //对于min大于max的情况，交换位置
+        if (min !== '' && max !== '' && +min > +max) {
+            tmp = max;
+            max = min;
+            min = tmp;
+        }
+
+        uriLoc('price', min + ',' + max);
+    });
+}
+
+//【高级选项】鼠标移入显示子项
+$seniorAttrWrap.on('mouseenter', '.attr', function() {
+    var index = $(this).addClass('hover').index();
+
+    $seniorSubWrap.children('.senior-sub:eq(' + index + ')').removeClass('hide');
+}).on('mouseleave', '.attr', function() {
+    var $this = $(this),
+        index = $this.index();
+
+    hoveredIndex = index;
+
+    seniorHoverTime = setTimeout(function() {
+        hideSeniorPanel();
+    }, 100);
+});
+
+//【高级选项】多选
+$('.senior-sub').on('click', '.multi-select', function() {
+    $(this).closest('.senior-sub').addClass('multi');
+}).on('click', '.multi-select-ok', function() {
+    var $btn = $(this),
+        $sub = $btn.closest('.senior-sub'),
+        val = '';
+
+    if ($btn.hasClass('dis')) {
+        return;
+    }
+
+    $sub.find('.checked').each(function() {
+        var id = $(this).data('id');
+
+        val += (val === '') ? id : (',' + id);
+    });
+
+    uriLoc($sub.data('attr'), val);
+}).on('mouseenter', function() {
+    clearTimeout(seniorHoverTime);
+}).on('mouseleave', function() {
+    hideSeniorPanel();
+});

@@ -4,320 +4,8 @@
  * @date: 2015/11/23
  * @date: 2015/11/23
  */
  */
 
 
-var $ = require('yoho.jquery');
+require('./filter');
 
 
-var checkUnicode = {
-    unchecked: '',
-    checked: ''
-},
-moreUnicode = {
-    up: '',
-    down: ''
-};
+require('./sort-pager');
 
 
-//品牌相关变量
-var $brandDefault = $('.brand .default'),
-    $brandPanel = $('.brand .brand-panel'),
-    $brandAttrs = $('.brand .attr'),
-    $brandMore = $('#brand-more'),
-    $brandMulti = $('#brand-multi');
-
-var $brandMoreTxt, $brandMoreIcon;
-
-//价格相关变量
-var $udPrice = $('.ud-price-range'),
-    interReg = /^\d+$/,
-    $limit, $min, $max, $btn;
-
-//分类相关变量
-var $sortSub = $('.sort-sub-wrap');
-
-//高级选项相关变量
-var $seniorSubWrap = $('.senior-sub-wrap'),
-    $seniorAttrWrap = $('.senior-attr-wrap');
-
-var seniorHoverTime, hoveredIndex;
-
-//清除checkbox选中状态
-function clearChecked($checkbox) {
-    $checkbox.removeClass('checked').html(checkUnicode.unchecked);
-}
-
-//显示更多品牌面板
-function brandShowMore() {
-    $brandDefault.addClass('hide');
-    $brandPanel.removeClass('hide');
-}
-
-//隐藏更多品牌面板
-function brandHideMore() {
-    $brandPanel.addClass('hide');
-    $brandDefault.removeClass('hide');
-}
-
-//url构造&跳转
-function uriLoc(attr, val) {
-    var href = decodeURIComponent(window.location.search),
-        query = attr + '=' + val,
-        newHref;
-
-    if (href === '') {
-        newHref = '?' + query;
-    } else {
-        newHref = href + '&' + query;
-    }
-
-    window.location.href = newHref;
-}
-
-//隐藏高级选项面板
-function hideSeniorPanel(index) {
-    $seniorSubWrap.children('.senior-sub:eq(' + hoveredIndex + ')').addClass('hide');
-    $seniorAttrWrap.children('.attr:eq(' + hoveredIndex + ')').removeClass('hover');
-    hoveredIndex = -1;
-}
-
-//屏蔽筛选项双击文字选中
-$('.filter-box').on('selectstart', '.attr, .brands-index span', function() {
-    return false;
-});
-
-//【分类】
-$('.sort-pre').on('click', 'li', function() {
-    var $this = $(this),
-        index = $this.index();
-
-    $this.siblings('.active').removeClass('active');
-    $this.addClass('active');
-
-    $sortSub.children(':not(.hide)').addClass('hide');
-    $sortSub.children(':eq(' + index + ')').removeClass('hide');
-});
-
-//【品牌】
-if ($brandMore.length > 0) {
-    $brandMoreTxt = $brandMore.children('em');
-    $brandMoreIcon = $brandMore.children('.iconfont');
-}
-
-//【品牌】多选
-$brandMulti.click(function() {
-    if ($brandPanel.css('display') === 'none') {
-
-        //显示品牌面板
-        brandShowMore();
-    }
-
-    $brandPanel.addClass('multi'); //显示出checkbox
-    $(this).addClass('hide');
-});
-
-//【品牌】更多
-$brandMore.click(function() {
-    var $this = $(this);
-
-    if ($this.hasClass('more')) {
-        brandHideMore();
-
-        $brandMoreTxt.text('更多');
-        $brandMoreIcon.html(moreUnicode.down);
-    } else {
-        brandShowMore();
-
-        $brandMoreTxt.text('收起');
-        $brandMoreIcon.html(moreUnicode.up);
-    }
-
-    $(this).toggleClass('more');
-});
-
-//【品牌】索引
-$('.brands-index').on('click', 'span', function() {
-    var $this = $(this),
-        index = $this.data('index');
-
-    if ($this.index() === 0) {
-
-        //全部
-        $brandAttrs.removeClass('hide');
-    } else {
-        $brandAttrs.addClass('hide').filter('[data-index=' + index + ']').removeClass('hide');
-    }
-});
-
-//【品牌】搜索
-$('#brand-search-input').keyup(function() {
-    var val = $(this).val().toLowerCase();
-
-    if (val === '') {
-        $brandAttrs.removeClass('hide');
-    } else {
-        $brandAttrs.addClass('hide').filter('[data-key*=' + val + ']').removeClass('hide');
-    }
-});
-
-//【品牌】多选确定
-$('#brand-multi-ok').click(function() {
-    var val = '';
-
-    if ($(this).hasClass('dis')) {
-        return;
-    }
-
-    $brandPanel.find('.checked').each(function() {
-        var id = $(this).data('id');
-
-        val += (val === '') ? id : (',' + id);
-    });
-
-    uriLoc('brand', val);
-});
-
-//【品牌/高级选项】多选取消
-$('.multi-select-cancel').click(function() {
-    var $panel = $(this).closest('.multi');
-
-    if ($panel.hasClass('brand-panel')) {
-        brandHideMore();
-
-        $brandMulti.removeClass('hide'); //显示多选按钮
-    }
-
-    $panel.removeClass('multi');
-    clearChecked($panel.find('.checkbox.checked')); //清除选中状态
-});
-
-//【品牌/高级选项】checkbox
-$('.check-container').on('click', '.attr', function() {
-    var $this = $(this),
-        $check = $this.find('.checkbox'),
-        $btnOk = $this.parent('.check-container').next('.btns').find('.multi-select-ok');
-
-    $check.toggleClass('checked');
-
-    if ($check.hasClass('checked')) {
-        $check.html(checkUnicode.checked);
-    } else {
-        $check.html(checkUnicode.unchecked);
-    }
-
-    //更新按钮状态
-    if ($check.hasClass('checked') ||
-        $this.siblings('.attr').find('.checked').length > 0) {
-        $btnOk.removeClass('dis');
-    } else {
-        $btnOk.addClass('dis');
-    }
-});
-
-//【品牌/高级选项】当多选时阻止链接默认跳转
-$('.brand, .senior').on('click', '.attr > a', function(e) {
-    if ($(this).closest('.multi').length > 0) {
-        e.preventDefault();
-    }
-});
-
-//【价格】用户定义价格处理
-if ($udPrice.length > 0) {
-    $limit = $udPrice.find('.limit');
-    $min = $limit.filter('.min');
-    $max = $limit.filter('.max');
-    $btn = $udPrice.find('.price-sure');
-
-    //【价格】输入
-    $limit.keyup(function() {
-        var min = $.trim($min.val()),
-            max = $.trim($max.val()),
-            isMinInt = interReg.test(min),
-            isMaxInt = interReg.test(max);
-
-        if (isMaxInt && (min === '' || isMinInt) ||
-            isMinInt && (max === '' || isMaxInt)
-            ) {
-            $btn.removeClass('hide');
-        } else {
-            $btn.addClass('hide');
-        }
-    });
-
-    //【价格】多项查询
-    $btn.click(function() {
-        var min = $.trim($min.val()),
-            max = $.trim($max.val()),
-            tmp;
-
-        //对于min大于max的情况，交换位置
-        if (min !== '' && max !== '' && +min > +max) {
-            tmp = max;
-            max = min;
-            min = tmp;
-        }
-
-        uriLoc('price', min + ',' + max);
-    });
-}
-
-//【高级选项】鼠标移入显示子项
-$seniorAttrWrap.on('mouseenter', '.attr', function() {
-    var index = $(this).addClass('hover').index();
-
-    $seniorSubWrap.children('.senior-sub:eq(' + index + ')').removeClass('hide');
-}).on('mouseleave', '.attr', function() {
-    var $this = $(this),
-        index = $this.index();
-
-    hoveredIndex = index;
-
-    seniorHoverTime = setTimeout(function() {
-        hideSeniorPanel();
-    }, 100);
-});
-
-//【高级选项】多选
-$('.senior-sub').on('click', '.multi-select', function() {
-    $(this).closest('.senior-sub').addClass('multi');
-}).on('click', '.multi-select-ok', function() {
-    var $btn = $(this),
-        $sub = $btn.closest('.senior-sub'),
-        val = '';
-
-    if ($btn.hasClass('dis')) {
-        return;
-    }
-
-    $sub.find('.checked').each(function() {
-        var id = $(this).data('id');
-
-        val += (val === '') ? id : (',' + id);
-    });
-
-    uriLoc($sub.data('attr'), val);
-}).on('mouseenter', function() {
-    clearTimeout(seniorHoverTime);
-}).on('mouseleave', function() {
-    hideSeniorPanel();
-});
-
-//操作栏
-(function() {
-    var $countPerPage = $('#count-per-page'),
-        $countChose = $countPerPage.next('ul');
-
-    var SLIDETIME = 200;
-
-    $(document).click(function(e) {
-        if ($(e.target).closest('.page-count').length > 0) {
-            return;
-        }
-
-        $countChose && $countChose.slideUp(SLIDETIME);
-    });
-
-    $countPerPage.click(function() {
-        if ($countChose.css('display') === 'none') {
-            $countChose.slideDown(SLIDETIME);
-        } else {
-            $countChose.slideUp(SLIDETIME);
-        }
-    });
-}());
+require('./product');

+/**
+ * 筛选页和列表页操作banner中的每页N个商品选择逻辑
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/12/4
+ */
+
+var $ = require('yoho.jquery');
+
+var $countPerPage = $('#count-per-page'),
+    $countChose = $countPerPage.next('ul');
+
+var SLIDETIME = 200;
+
+$(document).click(function(e) {
+    if ($(e.target).closest('.page-count').length > 0) {
+        return;
+    }
+
+    $countChose && $countChose.slideUp(SLIDETIME);
+});
+
+$countPerPage.click(function() {
+    if ($countChose.css('display') === 'none') {
+        $countChose.slideDown(SLIDETIME);
+    } else {
+        $countChose.slideUp(SLIDETIME);
+    }
+});

+.good-info {
+    height: 400px; //todo
+    margin-bottom: 35px;
+    width: 222px;
+    margin-right: 10px;
+    float: left;
+
+    //图片
+    .good-detail-img {
+        width: 100%;
+        height: 300px;
+        position: relative;
+
+        .good-thumb, img.lazy {
+            display: block;
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+        }
+        .few-tag {
+            width: 100%;
+            position: absolute;
+            left: 0;
+            height: 16px;
+            line-height: 16px;
+            background: #ffac5b;
+            color: #fff;
+            font-size: 12px;
+            text-align: center;
+            bottom: 0;
+        }
+    }
+
+    //文本
+    .good-detail-text {
+        color: #222;
+        font-size: 12px;
+        text-align: center;
+
+        > a {
+            margin-top: 16px;
+            line-height: 1.5;
+            display: block;
+        }
+
+        > .price {
+            margin-top: 10px;
+        }
+    }
+
+    .col-btn {
+        position: absolute;
+        top: 15px;
+        right: 15px;
+        color: #ccc;
+        font-size: 12px;
+        display: none;
+    }
+
+    .tag-container {
+        font-size: 12px;
+        height: 22px;
+        line-height: 22px;
+
+        .good-tag {
+            padding: 0 7px;
+            display: block;
+            float: left;
+            margin-right: 3px;
+
+            &:nth-last-of-type(1) {
+                margin-right: 0;
+            }
+
+            @each $tag, $tagColor, $tagBackground in (new-tag, #fff, #78dc7d),
+                    (renew-tag, #fff, #78dc7e),
+                    (new-festival-tag, #fff, #000000),
+                    (yep-tag, #fff, #ff565b),
+                    (ymp-tag, #fff, #ff565b),
+                    (sale-tag, #fff, #ff565b) {
+                &.#{$tag} {
+                    color: $tagColor;
+                    background: $tagBackground;
+                }
+            }
+            &.limit-tag {
+                color: #4e4e4e;
+                border: 1px solid #4e4e4e;
+            }
+        }
+    }
+}
+
+//弹层
+.good-item-wrapper {
+    border: 1px solid #dddddd;
+    padding-left: 20px;
+    padding-top: 18px;
+    padding-right: 20px;
+    position: absolute;
+    background: #fff;
+    display: none;
+
+    .good-info-main{
+        float: left;
+
+        .col-btn {
+            display: block;
+
+            &:hover {
+                color: #f95b4f;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .good-select-color {
+        float: left;
+        margin-top: 22px;
+
+        ul {
+            display: block;
+            float: left;
+            margin-left: 15px;
+        }
+
+        li {
+            width: 50px;
+            margin-bottom: 15px;
+
+            a, img {
+                display: block;
+                overflow: hidden;
+                width: 100%;
+            }
+        }
+    }
+
+    .good-info {
+        margin-right: 10px;
+    }
+}

-@import "search", "list", "filter-box", "sort-pager";
-.products-page {
-    .filter-box {
-        border: 1px solid #dfdfdf;
-    }
-
-    .section {
-        padding: 10px 15px;
-        font-size: 14px;
-        border-top: 1px solid #dfdfdf;
-
-        &:first-child {
-            border-top: none;
-            background: #eaeceb;
-        }
-    }
-
-    .title {
-        float: left;
-        width: 90px;
-        line-height: 30px;
-    }
-
-    .attr-content {
-        margin-left: 90px;
-    }
-
-    .multi-select {
-        display: inline-block;
-        width: 60px;
-        height: 18px;
-        line-height: 18px;
-        border: 1px solid #000;
-        text-align: center;
-        cursor: pointer;
-    }
-
-    .attr {
-        display: block;
-        float: left;
-        padding: 0 10px;
-        margin-right: 30px;
-        line-height: 30px;
-        cursor: pointer;
-
-        &:first-child {
-            margin-left: 0;
-        }
-
-        -moz-user-select: none;
-    }
-
-    .checked-conditions {
-        line-height: 30px;
-
-        .tag {
-            display: block;
-            float: left;
-            padding: 0 10px;
-            margin-right: 30px;
-            background: #000;
-            color: #fff;
-            cursor: pointer;
-        }
-
-        .color-block {
-            height: 14px;
-            width: 14px;
-            border: 1px solid #fff;
-            margin-bottom: -3px;
-        }
-
-        .clear-checked {
-            color: #999;
-            float: right;
-        }
-    }
-
-    .sort-sub-wrap {
-        width: 100%;
-
-        .sort-sub {
-            padding: 15px 0;
-        }
-    }
-
-    .brand {
-        position: relative;
-
-        .attr {
-            box-sizing: border-box;
-            width: 20%;
-            margin: 0;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-
-        .attr-content {
-            max-width: 900px;
-        }
-
-        .brand-opt {
-            position: absolute;
-            right: 20px;
-            top: 15px;
-        }
-
-        .brand-more {
-            margin-right: 20px;
-            cursor: pointer;
-        }
-
-        .brands-index {
-            float: left;
-            line-height: 30px;
-
-            span {
-                margin: 0 5px;
-                cursor: pointer;
-                -moz-user-select: none;
-
-                &:first-child {
-                    margin-left: 10px;
-                }
-            }
-        }
-
-        .brand-search {
-            float: left;
-            height: 18px;
-            line-height: 18px;
-            border: 1px solid #b0b0b0;
-            margin-top: 5px;
-            margin-left: 15px;
-
-            input {
-                float: left;
-                border: none;
-                width: 100px;
-                height: 18px;
-                padding: 0;
-            }
-
-            .btn {
-                display: inline-block;
-                width: 55px;
-                height: 18px;
-                background: #b0b0b0;
-                color: #fff;
-                text-align: center;
-                cursor: default;
-            }
-        }
-
-        .panel-body {
-            padding: 15px 20px;
-            margin-top: 5px;
-            background: #f4f7f6;
-            min-height: 30px;
-            border: 1px solid #000;
-        }
-    }
-
-    .btns {
-        display: none;
-        margin-top: 10px;
-        text-align: center;
-    }
-
-    .multi .btns {
-        display: block;
-    }
-
-    .multi-select-ok, .multi-select-cancel {
-        width: 55px;
-        height: 24px;
-        border: none;
-        background: #000;
-        color: #fff;
-        font-size: 15px;
-        margin-right: 15px;
-        cursor: pointer;
-
-        &.dis {
-            background: #ccc;
-        }
-    }
-
-    .ud-price-range {
-        margin-top: 2px;
-    }
-
-    .limit {
-        height: 22px;
-        width: 42px;
-        border: 1px solid #ccc;
-        padding: 0;
-    }
-
-    .price-sep {
-        margin: 0 5px;
-    }
-
-    .price-sure {
-        height: 24px;
-        width: 44px;
-        border: 1px solid #e0e0e0;
-        background: #fff;
-        color: #666;
-        margin-left: 10px;
-    }
-
-    .color-block {
-        display: inline-block;
-        height: 22px;
-        width: 22px;
-        border: 1px solid #ccc;
-        margin-bottom: -6px;
-        margin-right: 5px;
-    }
-
-    .senior {
-        padding-bottom: 6px;
-
-        .attr-content {
-            position: relative;
-        }
-    }
-
-    .senior-attr-wrap {
-        position: relative;
-    }
-
-    .senior-attr-wrap > .attr:hover,
-    .senior-attr-wrap > .attr.hover {
-        > .iconfont {
-            visibility: hidden;
-        }
-
-        .senior-up-icon {
-            visibility: visible;
-        }
-    }
-
-    .senior-sub {
-        box-sizing: border-box;
-        position: absolute;
-        padding: 15px 0;
-        left: 0;
-        right: 0;
-        top: 39px;
-        background: #fff;
-        border: 1px solid #eaeceb;
-
-        ul {
-            max-width: 950px;
-        }
-
-        &.multi .multi-select {
-            display: none;
-        }
-
-        .multi-select {
-            position: absolute;
-            top: 20px;
-            right: 15px;
-        }
-    }
-
-    .senior-up-icon {
-        width: 100%;
-        height: 9px;
-        z-index: 1;
-        margin-left: -11px;
-        visibility: hidden;
-
-        background: image-url('product/senior-up.png') no-repeat;
-        background-position-x: 50%;
-    }
-
-    .checkbox {
-        display: none;
-    }
-
-    .multi .checkbox {
-        display: inline;
-    }
-    .opt-banner {
-        height: 48px;
-        background: #f5f7f6;
-        line-height: 48px;
-        margin: 10px 0;
-
-        .sort-type,
-        .checks {
-            color: #ccc;
-            font-size: 14px;
-            padding: 0 10px;
-
-            .iconfont {
-                font-size: 14px;
-            }
-
-            &.active,
-            &.checked {
-                color: #000;
-            }
-        }
-
-        .pager-wrap {
-            float: right;
-            padding: 15px 0;
-        }
-
-        .line-count {
-            float: left;
-            padding: 3px 1px 3px 3px;
-            border: 1px solid #ccc;
-            margin-right: 10px;
-
-            span {
-                float: left;
-                width: 5px;
-                height: 10px;
-                background: #ccc;
-                margin-right: 2px;
-            }
-
-            &.active {
-                border-color: #222;
-                span {
-                    background: #222;
-                }
-            }
-        }
-
-        .page-count {
-            position: relative;
-            height: 18px;
-            float: left;
-            font-size: 12px;
-            line-height: 18px;
-
-            > span {
-                float: left;
-                display: block;
-                width: 42px;
-                height: 10px;
-                line-height: 10px;
-                padding: 3px;
-                border: 1px solid #ccc;
-                color: #222;
-                cursor: pointer;
-                margin-right: 10px;
-            }
-
-            .iconfont {
-                font-size: 14px;
-                color: #ccc;
-                float: right;
-            }
-
-            > ul {
-                position: absolute;
-                display: none;
-                width: 42px;
-                padding: 0 3px;
-                border-left: 1px solid #ccc;
-                border-right: 1px solid #ccc;
-            }
-
-            li {
-                border-bottom: 1px solid #ccc;
-            }
-
-            a {
-                display: block;
-                width: 100%;
-            }
-        }
-
-        .pager {
-            float: left;
-            font-size: 14px;
-            line-height: 15px;
-            margin: 0 20px;
-
-            .dis-icon {
-                color: #e6e6e6;
-            }
-
-            i {
-                color: #f00;
-            }
-        }
-    }
-}
+@import "search", "list", "filter-box", "sort-pager", "good";

@@ -93,4 +93,11 @@
             }
             }
         }
         }
     }
     }
+
+    .goods-container {
+        height: auto;
+        padding: 25px 0 0 0;
+        position: relative;
+        width: 1150px + 10px;//每列增加右边距
+    }
 }
 }

@@ -13,150 +13,5 @@
         padding: 25px 0 0 0;
         padding: 25px 0 0 0;
         position: relative;
         position: relative;
         width: 1150px + 10px;//每列增加右边距
         width: 1150px + 10px;//每列增加右边距
-
-        //标签
-        .tag-container {
-            font-size: 12px;
-            height: 22px;
-            line-height: 22px;
-
-            .good-tag {
-                padding: 0 7px;
-                display: block;
-                float: left;
-                margin-right: 3px;
-
-                &:nth-last-of-type(1) {
-                    margin-right: 0;
-                }
-
-                @each $tag, $tagColor, $tagBackground in (new-tag, #fff, #78dc7d),
-                        (renew-tag, #fff, #78dc7e),
-                        (new-festival-tag, #fff, #000000),
-                        (yep-tag, #fff, #ff565b),
-                        (ymp-tag, #fff, #ff565b),
-                        (sale-tag, #fff, #ff565b) {
-                    &.#{$tag} {
-                        color: $tagColor;
-                        background: $tagBackground;
-                    }
-                }
-                &.limit-tag {
-                    color: #4e4e4e;
-                    border: 1px solid #4e4e4e;
-                }
-            }
-        }
-
-        //商品列表
-        .good-info {
-            height: 400px; //todo
-            margin-bottom: 35px;
-            width: 222px;
-            margin-right: 10px;
-            float: left;
-
-            //图片
-            .good-detail-img {
-                width: 100%;
-                height: 300px;
-                position: relative;
-
-                .good-thumb, img.lazy {
-                    display: block;
-                    overflow: hidden;
-                    width: 100%;
-                    height: 100%;
-                }
-                .few-tag {
-                    width: 100%;
-                    position: absolute;
-                    left: 0;
-                    height: 16px;
-                    line-height: 16px;
-                    background: #ffac5b;
-                    color: #fff;
-                    font-size: 12px;
-                    text-align: center;
-                    bottom: 0;
-                }
-            }
-
-            //文本
-            .good-detail-text {
-                color: #222;
-                font-size: 12px;
-                text-align: center;
-
-                > a {
-                    margin-top: 16px;
-                    line-height: 1.5;
-                    display: block;
-                }
-
-                > .price {
-                    margin-top: 10px;
-                }
-            }
-
-            .col-btn {
-                position: absolute;
-                top: 15px;
-                right: 15px;
-                color: #ccc;
-                font-size: 12px;
-                display: none;
-            }
-        }
-
-        //弹层
-        .good-item-wrapper {
-            border: 1px solid #dddddd;
-            padding-left: 20px;
-            padding-top: 18px;
-            padding-right: 20px;
-            position: absolute;
-            background: #fff;
-            display: none;
-
-            .good-info-main{
-                float: left;
-
-                .col-btn {
-                    display: block;
-
-                    &:hover {
-                        color: #f95b4f;
-                        cursor: pointer;
-                    }
-                }
-            }
-
-            .good-select-color {
-                float: left;
-                margin-top: 22px;
-
-                ul {
-                    display: block;
-                    float: left;
-                    margin-left: 15px;
-                }
-
-                li {
-                    width: 50px;
-                    margin-bottom: 15px;
-
-                    a, img {
-                        display: block;
-                        overflow: hidden;
-                        width: 100%;
-                    }
-                }
-            }
-
-            .good-info {
-                margin-right: 10px;
-            }
-        }
     }
     }
 }
 }