css 整理

@@ -8,13 +8,8 @@ module.exports = app => {
 
 
     // 公共服务
     // 公共服务
 
 
-    // 专题活动等活动页面
-    // app.use(require('./apps/activity'));
-
     // 业务模块
     // 业务模块
-    // app.use('/', require('./apps/index'));
+    app.use(require('./apps/channel')); // 频道页
+    app.use(require('./apps/activity')); // 专题活动等活动页面
     app.use('/product', require('./apps/product'));
     app.use('/product', require('./apps/product'));
-
-    // 频道页
-    // app.use('/', require('./apps/channel'));
 };
 };

 <div class="slide-container {{#if pagination}}slide-thumb-container{{/if}}">
 <div class="slide-container {{#if pagination}}slide-thumb-container{{/if}}">
-    <div class="slide-wrapper">
     <ul>
     <ul>
         {{# list}}
         {{# list}}
         <li style="{{#if bgColor}}background:{{bgColor}}{{/if}}">
         <li style="{{#if bgColor}}background:{{bgColor}}{{/if}}">
@@ -19,13 +18,12 @@
         </li>
         </li>
         {{/ list}}
         {{/ list}}
     </ul>
     </ul>
-    </div>
 
 
     {{#if pagination}}
     {{#if pagination}}
     <div class="thumb-pagination">
     <div class="thumb-pagination">
         <ul class="clearfix">
         <ul class="clearfix">
             {{# pagination}}
             {{# pagination}}
-            <li>
+            <li data-slide="{{@index}}">
                 <a href="{{href}}" target="_blank"></a>
                 <a href="{{href}}" target="_blank"></a>
                 <img src="{{image img 138 54}}" alt="">
                 <img src="{{image img 138 54}}" alt="">
             </li>
             </li>

@@ -93,6 +93,7 @@
     "yoho-handlebars": "^4.0.5",
     "yoho-handlebars": "^4.0.5",
     "yoho-jquery": "^1.12.4",
     "yoho-jquery": "^1.12.4",
     "yoho-jquery-lazyload": "^1.9.7",
     "yoho-jquery-lazyload": "^1.9.7",
+    "yoho-slider": "0.0.2",
     "yoho-swiper": "^3.3.1"
     "yoho-swiper": "^3.3.1"
   }
   }
 }
 }

@@ -12,8 +12,8 @@ var homePage = $('.home-page').data('page'),
 
 
 require('../common');
 require('../common');
 
 
-require('../plugins/slider');
-require('../plugins/slider2');
+// require('../plugins/slider');
+// require('../plugins/slider2');
 require('../plugins/logo-brand');
 require('../plugins/logo-brand');
 
 
 require('../plugins/accordion');
 require('../plugins/accordion');
@@ -39,13 +39,9 @@ if ($.inArray(homePage, ['boys', 'girls', 'kids', 'lifestyle']) > -1) {
     });
     });
 }
 }
 
 
-
-
 lazyLoad($('img.lazy'));
 lazyLoad($('img.lazy'));
 if (homePage === 'boys') {
 if (homePage === 'boys') {
-    $('.slide-container').slider({
-        pagination: '.thumb-pagination'
-    });
+    require('../common/top-slider');
 } else {
 } else {
     $('.center-col').slider();
     $('.center-col').slider();
     $('.slide-container').slider();
     $('.slide-container').slider();
@@ -55,11 +51,13 @@ if (homePage === 'boys') {
     $('.logo-brand').logoBrand({
     $('.logo-brand').logoBrand({
         url: brandUrl
         url: brandUrl
     });
     });
-    $('.img-brand').slider2();
+
+    // $('.img-brand').slider2();
 } else {
 } else {
     $('.logo-brand').logoBrand({
     $('.logo-brand').logoBrand({
         showNum: 10,
         showNum: 10,
         url: brandUrl
         url: brandUrl
     });
     });
-    $('.img-slider-wrapper').slider2();
+
+    // $('.img-slider-wrapper').slider2();
 }
 }

+var $ = require('yoho-jquery');
+
+window.jQuery = $;
+require('yoho-slider');
+
+$(function() {
+    var topSlider = $('.slide-container').unslider({
+        autoplay: true,
+        delay: 5000,
+        arrows: {
+
+        },
+        nav: false,
+        animate: 'fade',
+        pagination: '.thumb-pagination'
+    });
+
+    var $thumbPagination = $('.thumb-pagination');
+
+    $thumbPagination.on('mouseenter', 'li', function() {
+        var $this = $(this);
+
+        topSlider.unslider('animate:' + $this.data('slide'));
+    });
+
+    topSlider.on('unslider.change', function(event, index) {
+        $thumbPagination.find('[data-slide="' + index + '"]').addClass('focus').siblings().removeClass('focus');
+    });
+
+    $thumbPagination.find('li').first().addClass('focus');
+});

@@ -2,6 +2,7 @@
     width: 1150px;
     width: 1150px;
     margin: 10px auto 0;
     margin: 10px auto 0;
 
 
+    /*
     .slide-container {
     .slide-container {
         position: absolute;
         position: absolute;
         left: 0;
         left: 0;
@@ -99,6 +100,7 @@
         }
         }
     }
     }
 
 
+    */
     .thumb-pagination {
     .thumb-pagination {
         width: 1148px;
         width: 1148px;
         margin: 6px auto 0;
         margin: 6px auto 0;
@@ -169,6 +171,7 @@
         }
         }
     }
     }
 
 
+    */
     .debris-slider {
     .debris-slider {
         height: 510px;
         height: 510px;
         width: 100%;
         width: 100%;

+@use postcss-clearfix ;
+
+/* Reset End */
+.clearfix {
+    clear: fix;
+}
+
+body {
+    font-family: arial, "Microsoft YaHei";
+}
+
+@font-face {
+    font-family: "iconfont";
+    src: resolve('iconfont.eot');
+    src: resolve('iconfont.eot?#iefix') format('embedded-opentype'), resolve('iconfont.woff') format('woff'), resolve('iconfont.ttf') format('truetype'), resolve('iconfont.svg#iconfont') format('svg');
+}
+
+.iconfont {
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+    text-decoration: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke-width: 0.2px;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.center-content {
+    width: 1150px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.min-screen .center-content {
+    width: 990px;
+}
+
+.left,
+.pull-left {
+    float: left;
+}
+
+.right,
+.pull-right {
+    float: right;
+}
+
+.center {
+    text-align: center;
+}
+
+.hide {
+    display: none !important;
+}
+
+a:focus,
+input,
+textarea {
+    outline: none;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
+}
+
+.body-mask {
+    position: absolute;
+    z-index: 100;
+    background: #000;
+    opacity: 0.2;
+    top: 0;
+    left: 0;
+}
+
+@define-mixin ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/*
+公共样式
+*/
+.g-list {
+    li {
+        float: left;
+        a {
+            position: relative;
+            display: block;
+            overflow: hidden;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
+
+.yoho-page {
+    .floor-header {
+        position: relative;
+        margin: 80px 0 40px;
+
+        .floor-title {
+            margin: 0 auto;
+            width: 298px;
+            height: 31px;
+            line-height: 31px;
+            border: 1px solid #000;
+            font-size: 16px;
+            text-align: center;
+        }
+
+        .header-navs {
+            position: absolute;
+            padding: 10px 0;
+            top: 0;
+            right: 0;
+            font-size: 14px;
+
+            li {
+                float: left;
+                padding: 1px 15px;
+                border-left: 1px solid #ccc;
+
+                &:first-child {
+                    border-left: none;
+                }
+
+                &:hover {
+                    text-decoration: underline;
+                }
+
+                a {
+                    color: #333;
+                }
+            }
+        }
+    }
+}
+
+/*
+热门推荐模板样式
+*/
+.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;
+            }
+        }
+    }
+}
+
+/*
+人气单品
+*/
+.home-page .flash-sale {
+    .flash-sale-list {
+        margin-left: -10px;
+        a {
+            height: 340px;
+            width: 560px;
+        }
+        li {
+            margin: 10px;
+        }
+
+        .flash-sale-banner {
+            position: relative;
+            height: 260px;
+        }
+
+        .flash-sale-bottom {
+            height: 78px;
+            position: relative;
+            border: 1px solid #000;
+            border-top-style: none;
+        }
+        p.flash-sale-count {
+            position: absolute;
+            left: 50px;
+            top: 20px;
+        }
+
+        p.flash-sale-name {
+            position: absolute;
+            left: 120px;
+            top: 20px;
+        }
+        p.flash-sale-timer {
+            position: absolute;
+            left: 50px;
+            top: 50px;
+        }
+
+        .flash-sale-logo {
+            position: absolute;
+            right: 50px;
+            width: 100px;
+            height: 80px;
+            img {
+                width: 100px;
+                height: 50px;
+                margin-top: 15px;
+            }
+        }
+    }
+}

-/*
-公共样式
-*/
-.g-list {
-    li {
-        float: left;
-        a {
-            position: relative;
-            display: block;
-            overflow: hidden;
-            img {
-                width: 100%;
-                height: 100%;
-            }
-        }
-    }
-}
-
-.yoho-page {
-    .floor-header {
-        position: relative;
-        margin: 80px 0 40px;
-
-        .floor-title {
-            margin: 0 auto;
-            width: 298px;
-            height: 31px;
-            line-height: 31px;
-            border: 1px solid #000;
-            font-size: 16px;
-            text-align: center;
-        }
-
-        .header-navs {
-            position: absolute;
-            padding: 10px 0;
-            top: 0;
-            right: 0;
-            font-size: 14px;
-
-            li {
-                float: left;
-                padding: 1px 15px;
-                border-left: 1px solid #ccc;
-
-                &:first-child {
-                    border-left: none;
-                }
-
-                &:hover {
-                    text-decoration: underline;
-                }
-
-                a {
-                    color: #333;
-                }
-            }
-        }
-    }
-}
-
-/*
-热门推荐模板样式
-*/
-.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;
-            }
-        }
-    }
-}
-
-/*
-人气单品
-*/
-.home-page .flash-sale {
-    .flash-sale-list {
-        margin-left: -10px;
-        a {
-            height: 340px;
-            width: 560px;
-        }
-        li {
-            margin: 10px;
-        }
-
-        .flash-sale-banner {
-            position: relative;
-            height: 260px;
-        }
-
-        .flash-sale-bottom {
-            height: 78px;
-            position: relative;
-            border: 1px solid #000;
-            border-top-style: none;
-        }
-        p.flash-sale-count {
-            position: absolute;
-            left: 50px;
-            top: 20px;
-        }
-
-        p.flash-sale-name {
-            position: absolute;
-            left: 120px;
-            top: 20px;
-        }
-        p.flash-sale-timer {
-            position: absolute;
-            left: 50px;
-            top: 50px;
-        }
-
-        .flash-sale-logo {
-            position: absolute;
-            right: 50px;
-            width: 100px;
-            height: 80px;
-            img {
-                width: 100px;
-                height: 50px;
-                margin-top: 15px;
-            }
-        }
-    }
-}
-
+@import "reset";
+@import "common";
+@import "header";
+@import "footer";
+@import "slider";
+@import "404";

+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    font-size: 100%;
+    vertical-align: baseline;
+}
+
+html {
+    line-height: 1;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+caption,
+th,
+td {
+    text-align: left;
+    font-weight: normal;
+    vertical-align: middle;
+}
+
+q,
+blockquote {
+    quotes: none;
+}
+
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+    content: "";
+    content: none;
+}
+
+a img {
+    border: none;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+    display: block;
+}

+.unslider{overflow:auto;margin:0;padding:0}.unslider-wrap{position:relative}.unslider-wrap.unslider-carousel>li{float:left}.unslider-vertical>ul{height:100%}.unslider-vertical li{float:none;width:100%}.unslider-fade{position:relative}.unslider-fade .unslider-wrap li{position:absolute;left:0;top:0;right:0;z-index:8}.unslider-fade .unslider-wrap li.unslider-active{z-index:10}.unslider li,.unslider ol,.unslider ul{list-style:none;margin:0;padding:0;border:none}.unslider-arrow{position:absolute;left:20px;z-index:2;cursor:pointer}.unslider-arrow.next{left:auto;right:20px}

 @charset "utf-8";
 @charset "utf-8";
-@use postcss-clearfix ;
-
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font: inherit;
-    font-size: 100%;
-    vertical-align: baseline;
-}
-
-html {
-    line-height: 1;
-}
-
-ol,
-ul {
-    list-style: none;
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-caption,
-th,
-td {
-    text-align: left;
-    font-weight: normal;
-    vertical-align: middle;
-}
-
-q,
-blockquote {
-    quotes: none;
-}
-
-q:before,
-q:after,
-blockquote:before,
-blockquote:after {
-    content: "";
-    content: none;
-}
-
-a img {
-    border: none;
-}
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
-    display: block;
-}
-
-/* Reset End */
-.clearfix {
-    clear: fix;
-}
-
-body {
-    font-family: arial, "Microsoft YaHei";
-}
-
-@font-face {
-    font-family: "iconfont";
-    src: resolve('iconfont.eot');
-    src: resolve('iconfont.eot?#iefix') format('embedded-opentype'), resolve('iconfont.woff') format('woff'), resolve('iconfont.ttf') format('truetype'), resolve('iconfont.svg#iconfont') format('svg');
-}
-
-.iconfont {
-    font-family: "iconfont" !important;
-    font-size: 16px;
-    font-style: normal;
-    text-decoration: none;
-    -webkit-font-smoothing: antialiased;
-    -webkit-text-stroke-width: 0.2px;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.center-content {
-    width: 1150px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.min-screen .center-content {
-    width: 990px;
-}
-
-.left,
-.pull-left {
-    float: left;
-}
-
-.right,
-.pull-right {
-    float: right;
-}
-
-.center {
-    text-align: center;
-}
-
-.hide {
-    display: none !important;
-}
-
-a:focus,
-input,
-textarea {
-    outline: none;
-}
-
-a {
-    text-decoration: none;
-    color: #000;
-}
-
-.body-mask {
-    position: absolute;
-    z-index: 100;
-    background: #000;
-    opacity: 0.2;
-    top: 0;
-    left: 0;
-}
-
-@define-mixin ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
 
 
 /* 公共 */
 /* 公共 */
-@import "header";
-@import "footer";
-@import "404";
-@import "index/index";
-@import "product/index";
-@import "plugins/slider";
+@import "common/index";
 
 
 /* 模块 */
 /* 模块 */
-@import "index/index";
+@import "channel/index";
 @import "product/index";
 @import "product/index";

@@ -320,6 +320,6 @@
     }
     }
 }
 }
 
 
-@import "channel";
+/* @import "channel"; */
 @import "special";
 @import "special";
 @import "main-product";
 @import "main-product";