上线预告

@@ -5,7 +5,7 @@
             <ul class="list-page">
                 {{# brands}}
                     <li class="brand-item">
-                        <img class="lazy" data-original="{{image logo 126 87}}">
+                        <img class="lazy" data-original="{{image logo 112 77}}">
                     </li>
                 {{/ brands}}
             </ul>

@@ -8,6 +8,7 @@ var $ = require('yoho-jquery'),
     lazyLoad = require('yoho-jquery-lazyload');
 
 var $limitList = $('.limit-main .good-list'),
+    $limitBrand = $('.limit-main .brand-list'),
     $fixNav = $('.sort-layer .full-line'),
     $navPar,
     homePage = $('.outlets-page').data('page');
@@ -65,31 +66,29 @@ function setPageTime() {
     }
 }
 
-function limitPageSwitch(num) {
-    $limitList.animate({
+function limitPageSwitch(dom, num) {
+    dom.animate({
         'margin-left': (-num * 10) + '0%'
-    }, 'fast');
-
-    $limitList.data({
+    }, 'fast').data({
         page: num
     });
 }
 
-function formatExtraGood() {
-    var $item = $limitList.find('.good-item'),
-        html = '',
+// 上线预告&潮品推荐 公共处理方法
+function formatExtraList(items, num) {
+    var html = '',
         list = [],
         i = 0;
 
-    if (!$limitList.length) {
+    if (!items.length) {
         return;
     }
 
-    $item.each(function() {
-        if ((i % 5) === 0) {
+    items.each(function() {
+        if ((i % num) === 0) {
             list.push('');
         }
-        list[list.length - 1] += $item[i].outerHTML;
+        list[list.length - 1] += items[i].outerHTML;
         i++;
     });
 
@@ -97,15 +96,63 @@ function formatExtraGood() {
         list.length = 3;
     }
 
-    $limitList.data({max: list.length});
-
     for (i = 0; i < list.length; i++) {
         html += '<div class="list-page">' + list[i] + '</div>';
     }
 
-    $limitList.html(html);
+    return {
+        length: list.length,
+        html: html
+    };
+}
+
+function extraInfo() {
+    var good = formatExtraList($limitList.find('.good-item'), 5),
+        brand = formatExtraList($limitBrand.find('.brand-item'), 9);
+
+    if (good && good.length > 1) {
+        $limitList.html(good.html).data({max: good.length});
+        $limitList.siblings('.page-btns').show();
+    }
+
+    if (brand && brand.length > 1) {
+        $limitBrand.html(brand.html).data({max: brand.length});
+        $limitBrand.siblings('.page-btns').show();
+    }
 }
 
+// // 处理潮品推荐商品
+// function formatExtraGood() {
+//     var $item = $limitList.find('.good-item'),
+//         html = '',
+//         list = [],
+//         i = 0;
+
+//     if (!$limitList.length) {
+//         return;
+//     }
+
+//     $item.each(function() {
+//         if ((i % 5) === 0) {
+//             list.push('');
+//         }
+//         list[list.length - 1] += $item[i].outerHTML;
+//         i++;
+//     });
+
+//     if (list.length > 3) {
+//         list.length = 3;
+//     }
+
+//     $limitList.data({max: list.length});
+
+//     for (i = 0; i < list.length; i++) {
+//         html += '<div class="list-page">' + list[i] + '</div>';
+//     }
+
+//     $limitList.html(html);
+// }
+
 //
 if ($fixNav.length) {
     $navPar = $fixNav.parent();
@@ -134,17 +181,25 @@ $('.time').each(function() {
     }
 });
 
-$('.good-page-btns > label').click(function() {
+$('.page-btns > label').click(function() {
     var nowTime = new Date().getTime(),
-        data = $limitList.data(),
-        max = data.max ? data.max : 1,
-        page = data.page ? data.page : 0;
+        $dom, data, max, page;
+
+    if ($(this).closest('.good-page-btns').length) {
+        $dom = $limitList;
+    } else {
+        $dom = $limitBrand;
+    }
+
+    data = $dom.data();
+    max = data.max ? data.max : 1;
+    page = data.page ? data.page : 0;
 
     if (data.time && nowTime - data.time < 500) {
         return;
     }
 
-    $limitList.data({
+    $dom.data({
         time: nowTime
     });
 
@@ -156,7 +211,7 @@ $('.good-page-btns > label').click(function() {
 
     page = page % max;
 
-    limitPageSwitch(page);
+    limitPageSwitch($dom, page);
 });
 
 setInterval(setPageTime, 1000);
@@ -171,6 +226,6 @@ if (homePage) {
     });
 }
 
-formatExtraGood();
+extraInfo();
 
 lazyLoad($('img.lazy'));

@@ -113,6 +113,8 @@
 
         .brand-list {
             width: 300%;
+            max-height: 273px;
+            overflow: hidden;
 
             .list-page {
                 width: 378px;
@@ -134,8 +136,13 @@
 
             .brand-item img {
                 width: 90%;
-                margin-top: 20px;
+                margin-top: 6px;
             }
+
+        }
+
+        .brand-page-btns {
+            margin-top: 10px;
         }
 
         .good-list {
@@ -204,7 +211,7 @@
         .page-btns {
             text-align: center;
             padding-bottom: 10px;
-            user-select: none;
+            display: none;
 
             label {
                 width: 40px;