最新上架页面

@@ -12,6 +12,7 @@ var app = express();
 
 
 // set view engin
 // set view engin
 var doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
 var doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
+var partials = path.join(__dirname, './views'); // parent view root
 
 
 app.on('mount', function(parent) {
 app.on('mount', function(parent) {
     delete parent.locals.settings; // 不继承父 App 的设置
     delete parent.locals.settings; // 不继承父 App 的设置
@@ -23,7 +24,7 @@ app.engine('.hbs', hbs({
     extname: '.hbs',
     extname: '.hbs',
     defaultLayout: 'layout',
     defaultLayout: 'layout',
     layoutsDir: doraemon,
     layoutsDir: doraemon,
-    partialsDir: ['./views/partial', `${doraemon}/partial`],
+    partialsDir: [`${partials}/partials`, `${doraemon}/partial`],
     helpers: 'helpers'
     helpers: 'helpers'
 }));
 }));
 
 

-this is boys
+<div class="home-page yoho-page boys" data-page="boys">
+            {{> commodity}}
+</div>
+<script>__custom = {"yopid":"index"};</script>
+

+<div class="commodity clearfix" id="newarrivals">
+    {{> floor-header}}
+
+    <div class="goods-container clearfix">
+    </div>
+    <div class="loading">
+        <a href="{{href}}" target= "_blank">Loading...</a>
+    </div>
+</div>

+<div class="floor-header clearfix">
+    <h2 class="floor-title">{{name}}</h2>
+
+    <ul class="header-navs">
+
+        <li data-classify="s">
+            <a target="_blank" href="">sss</a>
+        </li>
+
+    </ul>
+
+</div>

@@ -230,3 +230,4 @@ a {
 @import "404";
 @import "404";
 
 
 /* 模块 */
 /* 模块 */
+@import "index/index";

+.brands {
+    /* 路径导航样式重置 */
+    .path-nav {
+        border-bottom: none;
+        margin-bottom: 0;
+        padding-top: 10px;
+        padding-bottom: 20px;
+    }
+
+    .brands-tabs {
+        position: relative;
+        a {
+            display: block;
+            img {
+                width: 100%;
+                height: 100%;
+                display: block;
+            }
+        }
+        li {
+            float: left;
+            p {
+                display: block;
+                font-size: 30px;
+                text-align: center;
+                color: #dedede;
+                position: absolute;
+                top: 50%;
+                width: 100%;
+                margin-top: -15px;
+                z-index: 3;
+            }
+            .g-mask {
+                opacity: 0.4;
+            }
+            &:hover .g-mask,
+            .g-mask-on {
+                opacity: 0;
+            }
+        }
+        .hover-contain {
+            position: relative;
+            border-bottom: 1px solid #dfdfdf;
+            .hoverarr {
+                background-color: #3d3d3d;
+                position: absolute;
+                bottom: 0;
+                z-index: 10;
+                i {
+                    width: 0;
+                    height: 0;
+                    position: absolute;
+                    left: 50%;
+                    border-left: 6px solid transparent;
+                    border-right: 6px solid transparent;
+                    border-bottom: 6px solid #3d3d3d;
+                    top: -6px;
+                    margin-left: -3px;
+                }
+            }
+        }
+    }
+    .header-navs {
+        margin-right: -15px;
+    }
+    .category-nav {
+        border: 2px solid #222;
+        padding-left: 16px;
+        height: 44px;
+        line-height: 44px;
+        font-size: 12px;
+        font-weight: bold;
+        position: relative;
+        z-index: 100;
+        background-color: #fff;
+        span {
+            display: inline-block;
+            margin-right: 15px;
+        }
+        a {
+            display: inline-block;
+            padding: 0 7px;
+            text-align: center;
+            color: #222;
+            cursor: pointer;
+        }
+    }
+    .category-fix {
+        position: fixed;
+        top: 0;
+        z-index: 100;
+        margin-top: 0 !important;
+    }
+    .brands-list {
+        dl {
+            position: relative;
+            border-top: 1px dotted #999;
+            padding: 20px 0;
+        }
+        dt {
+            position: absolute;
+            width: 130px;
+            text-align: center;
+            font-weight: bold;
+            font-size: 16px;
+            text-align: center;
+            top: 50%;
+            margin-top: -9px;
+        }
+        dd {
+            margin-left: 130px;
+            li {
+                float: left;
+                display: block;
+                width: 170px;
+                height: 18px;
+            }
+            a {
+                color: #666;
+                line-height: 18px;
+                font-size: 12px;
+                position: relative;
+            }
+            span {
+                max-width: 150px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                display: inline-block;
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+            .brands-dialog {
+                display: inline;
+                position: relative;
+            }
+            .hot {
+                font-weight: bold;
+                color: #222;
+            }
+            i {
+                position: relative;
+                top: -4px;
+                color: #e01;
+                font-size: 14px;
+            }
+        }
+    }
+
+    .brands-category {
+        width: 1150px;
+    }
+
+    .brands-tabs {
+        width: 100%;
+        li {
+            margin-left: 10px;
+            a {
+                position: relative;
+                width: 222px;
+                height: 180px;
+            }
+        }
+        li:first-child {
+            margin-left: 0;
+        }
+        .hover-contain {
+            height: 30px;
+
+            .hoverarr {
+                height: 5px;
+                width: 222px;
+            }
+        }
+    }
+
+    .brands-ad,
+    .brands-logo {
+        margin: 20px 0;
+    }
+
+    .brands-ad li {
+        float: left;
+        margin-left: 10px;
+
+        img {
+            display: block;
+            width: 280px;
+            height: 280px;
+        }
+
+        &:first-child {
+            margin-left: 0;
+
+            img {
+                width: 570px;
+            }
+        }
+    }
+
+    .brands-logo a {
+        float: left;
+        margin-left: 26px;
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        img {
+            display: block;
+            width: 91px;
+            height: 38px;
+        }
+    }
+
+    .list-floor {
+        width: 1160px;
+    }
+
+    .brandfloor {
+        .g-list {
+            margin-top: -32px;
+        }
+        li {
+            margin-right: 8px;
+            margin-top: 32px;
+            a {
+                width: 378px;
+                height: 250px;
+            }
+        }
+    }
+    .singlegoods {
+        .g-list {
+            margin-top: -10px;
+        }
+        li {
+            margin-right: 10px;
+            margin-top: 10px;
+            a {
+                width: 280px;
+                height: 374px;
+            }
+        }
+        .singlegoods-title {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            height: 50px;
+            width: 100%;
+            p {
+                position: absolute;
+                z-index: 2;
+                top: 0;
+                left: 0;
+                display: block;
+                width: 100%;
+                height: 100%;
+                line-height: 50px;
+                font-size: 18px;
+                text-align: center;
+                color: #fff;
+            }
+        }
+    }
+    .video {
+        .g-list {
+            margin-top: -10px;
+        }
+        li {
+            margin-right: 8px;
+            margin-top: 10px;
+            a {
+                width: 378px;
+                height: 242px;
+            }
+        }
+        .video-play {
+            display: block;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            margin-left: -30px;
+            margin-top: -28px;
+            width: 60px;
+            height: 56px;
+            background-image: resolve(img/index/play.png);
+        }
+        .video-title {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            height: 32px;
+            width: 100%;
+            p {
+                position: absolute;
+                z-index: 2;
+                top: 0;
+                left: 0;
+                display: block;
+                width: 100%;
+                height: 100%;
+                font-size: 14px;
+                line-height: 32px;
+                text-align: center;
+                color: #fff;
+            }
+        }
+    }
+    .news {
+        margin-bottom: 40px;
+        .news-pic {
+            position: relative;
+            float: left;
+            width: 764px;
+            height: 436px;
+            .slide-container {
+                height: 100%;
+                li a {
+                    height: 100%;
+                    width: 764px;
+                }
+
+                .slide-wrapper {
+                    height: 100%;
+                }
+                .slide-switch {
+                    display: none;
+                }
+                .prev {
+                    left: 0;
+                    margin-left: 0;
+                }
+                .next {
+                    right: 0;
+                    margin-right: 0;
+                }
+                .slide-switch.show {
+                    display: block;
+                }
+            }
+            .slide-tips {
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                height: 30px;
+                width: 100%;
+                background: #000;
+                opacity: 0.8;
+
+                p {
+                    position: absolute;
+                    left: 18px;
+                    z-index: 2;
+                    height: 30px;
+                    font-size: 14px;
+                    line-height: 30px;
+                    color: #fff;
+                }
+            }
+            .slide-pagination {
+                right: 0;
+                left: auto;
+                bottom: 0;
+                .slide-shade {
+                    opacity: 0;
+                    background: none;
+                }
+                span {
+                    margin-top: 3px;
+                }
+            }
+        }
+        .news-txt {
+            float: right;
+            padding: 20px 16px;
+            float: right;
+            border: 1px solid #000;
+            overflow: hidden;
+            ul {
+                height: 100%;
+            }
+            li {
+                position: relative;
+                display: block;
+                margin-bottom: 10px;
+                margin-left: 20px;
+            }
+            a {
+                font-size: 14px;
+                line-height: 27px;
+                cursor: pointer;
+                color: #010101;
+                display: block;
+                &:hover {
+                    color: #fff;
+                    background: #000;
+                    padding-left: 12px;
+                    transition: padding 0.4s;
+                }
+            }
+            i {
+                position: absolute;
+                top: 0;
+                left: -26px;
+                font-size: 22px;
+            }
+        }
+        .news-txt {
+            width: 342px;
+            height: 394px;
+        }
+    }
+
+    .ads {
+        margin: 40px 0;
+
+        li {
+            margin-right: 10px;
+            margin-bottom: 10px;
+            a {
+                width: 280px;
+                img {
+                    height: 160px;
+                }
+            }
+            .name {
+                font-size: 14px;
+            }
+            .des {
+                font-size: 12px;
+            }
+        }
+    }
+
+    .brands-items {
+        margin: 25px auto;
+        .brands-item {
+            float: left;
+            padding: 15px 0;
+            width: 50%;
+        }
+        a.brands-pic {
+            float: left;
+            width: 280px;
+            height: 136px;
+            display: block;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .brand-info {
+            float: right;
+            padding: 0 20px;
+            width: 255px;
+            color: #000;
+            h3 {
+                width: 100%;
+                font-size: 20px;
+                line-height: 1;
+
+                @mixin ellipsis;
+            }
+            .brand-desc {
+                padding: 12px 0;
+                height: 92px;
+                font-size: 14px;
+                line-height: 22px;
+                overflow: hidden;
+            }
+        }
+    }
+    .pagination {
+        margin: 40px 0 80px;
+        text-align: center;
+        a {
+            height: 24px;
+            padding: 0 9px;
+            line-height: 24px;
+            display: inline-block;
+            text-align: center;
+            margin-right: 8px;
+            color: #222;
+            font-size: 12px;
+            i {
+                position: relative;
+                top: -1px;
+                font-size: 10px;
+                transform: scale(0.8);
+            }
+        }
+        a.cur {
+            background: #222;
+            color: #fff;
+        }
+    }
+}
+
+.min-screen .brands {
+    .header-navs {
+        margin-right: -10px;
+    }
+    .sit-nav {
+        padding-top: 10px;
+        font-size: 12px;
+        .sep {
+            margin: 0 6px;
+        }
+    }
+    .brands-category {
+        width: 990px;
+    }
+    .brands-tabs {
+        li {
+            a {
+                width: 190px;
+                height: 154px;
+            }
+        }
+        .hover-contain {
+            height: 25px;
+            .hoverarr {
+                height: 4px;
+                width: 190px;
+            }
+        }
+    }
+
+    .brands-ad li {
+        img {
+            width: 240px;
+            height: 240px;
+        }
+
+        &:first-child img {
+            width: 490px;
+        }
+    }
+
+    .brands-logo a {
+        margin-left: 10px;
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        img {
+            width: 90px;
+            height: 37px;
+        }
+    }
+
+    .list-floor {
+        width: 1000px;
+    }
+
+    .brandfloor {
+        .g-list {
+            margin-top: -26px;
+        }
+        li {
+            margin-right: 9px;
+            margin-top: 26px;
+            a {
+                width: 324px;
+                height: 214px;
+            }
+        }
+    }
+    .singlegoods {
+        .g-list {
+            margin-top: -10px;
+        }
+        li {
+            margin-right: 10px;
+            margin-top: 10px;
+            a {
+                width: 240px;
+                height: 324px;
+            }
+        }
+        .singlegoods-title {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            height: 50px;
+            width: 100%;
+            p {
+                position: absolute;
+                z-index: 2;
+                top: 0;
+                left: 0;
+                display: block;
+                width: 100%;
+                height: 100%;
+                line-height: 50px;
+                font-size: 18px;
+                text-align: center;
+                color: #fff;
+            }
+        }
+    }
+    .video {
+        .g-list {
+            margin-top: -10px;
+        }
+        li {
+            margin-right: 9px;
+            margin-top: 10px;
+            a {
+                width: 324px;
+                height: 206px;
+            }
+        }
+        .video-play {
+            display: block;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            margin-left: -30px;
+            margin-top: -28px;
+            width: 60px;
+            height: 56px;
+            background-image: resolve(img/index/play.png);
+        }
+        .video-title {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            height: 30px;
+            width: 100%;
+            p {
+                position: absolute;
+                z-index: 2;
+                top: 0;
+                left: 0;
+                display: block;
+                width: 100%;
+                height: 100%;
+                font-size: 14px;
+                line-height: 30px;
+                text-align: center;
+                color: #fff;
+            }
+        }
+    }
+    .news {
+        .news-pic {
+            width: 660px;
+            height: 376px;
+            .slide-container {
+                height: 376px;
+                img {
+                    height: 376px;
+                }
+            }
+        }
+        .news-txt {
+            width: 284px;
+            height: 334px;
+            li {
+                margin-bottom: 13px;
+            }
+        }
+    }
+    .ads {
+        margin-bottom: 30px;
+
+        li {
+            margin-right: 10px;
+            margin-bottom: 10px;
+            a {
+                width: 240px;
+                img {
+                    height: 138px;
+                }
+            }
+            .name {
+                font-size: 14px;
+            }
+            .des {
+                font-size: 12px;
+            }
+        }
+    }
+    .brands-items {
+        a.brands-pic {
+            width: 240px;
+            height: 116px;
+        }
+        .brand-info {
+            width: 212px;
+            .brand-desc {
+                height: 72px;
+            }
+        }
+    }
+}
+
+.brands-layer {
+    position: absolute;
+    z-index: 100;
+    top: -83px;
+    left: 15px;
+    width: 325px;
+    height: 287px;
+    background: resolve(img/index/brands-layer.png) no-repeat;
+    font-weight: normal;
+
+    .layer-content {
+        padding: 20px 20px 20px 35px;
+        .title {
+            font-size: 24px;
+            line-height: 24px;
+            border-bottom: 1px solid #ccc;
+            padding-bottom: 5px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .desc {
+            margin: 5px 0;
+            height: 72px;
+            overflow: hidden;
+            img {
+                width: 80px;
+                height: 50px;
+                margin: 3px 5px 0 0;
+                float: left;
+            }
+            .right {
+                width: 180px;
+                float: right;
+                font-size: 12px;
+                line-height: 150%;
+                max-height: 80px;
+            }
+        }
+        .featured {
+            font-size: 16px;
+            margin-right: -15px;
+            img {
+                height: 100px;
+                width: 80px;
+                float: left;
+                margin: 15px 15px 0 0;
+            }
+        }
+    }
+}
+
+.brands-layer-right {
+    background: resolve(img/index/brands-layer.png) no-repeat 0 -287px;
+    left: -325px;
+    top: -83px;
+
+    .layer-content {
+        padding: 20px 35px 20px 20px;
+    }
+}

+.coupon-page {
+    width: 1150px;
+    margin: 10px auto 0;
+
+    .slide-container {
+        position: relative;
+    }
+
+    .slide-wrapper {
+        position: relative;
+        height: 450px;
+        overflow: hidden;
+
+        ul {
+            position: relative;
+            height: 100%;
+        }
+
+        &:hover .slide-switch.show {
+            display: block;
+        }
+
+        li {
+            display: none;
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 100%;
+            height: 100%;
+
+            a {
+                display: block;
+                height: 100%;
+                width: 1150px;
+                margin: 0 auto;
+            }
+
+            &:first-child {
+                display: block;
+            }
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    .slide-switch {
+        display: block;
+        a {
+            position: absolute;
+            top: 50%;
+            margin: -30px 0 0;
+            width: 60px;
+            height: 60px;
+            line-height: 56px;
+            text-align: center;
+            z-index: 2;
+            background: #fff;
+            opacity: 0.55;
+            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
+
+            &.prev {
+                left: 50%;
+                margin-left: -575px;
+            }
+
+            &.next {
+                right: 50%;
+                margin-right: -575px;
+            }
+
+            &:hover {
+                opacity: 0.9;
+            }
+
+            .iconfont {
+                font-size: 32px;
+                color: #59585a;
+            }
+        }
+    }
+
+    .title {
+        width: 300px;
+        margin: 80px auto 40px;
+        text-align: center;
+        border: 1px solid #000;
+        height: 31px;
+        line-height: 31px;
+        position: relative;
+
+        span {
+            margin: 5px;
+        }
+    }
+
+    .coupon {
+        display: inline-block;
+        position: relative;
+        width: 282px;
+        height: 258px;
+        margin-right: 2px;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+
+        .coupon-mask {
+            width: 100%;
+            height: 259px;
+            background-color: rgba(0, 0, 0, 0.6);
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 99;
+        }
+
+        .info {
+            width: 78px;
+            height: 78px;
+            position: absolute;
+            right: 2px;
+            bottom: -1px;
+            > div {
+                width: 100%;
+                height: 38px;
+                font-size: 16px;
+                color: #fff;
+                text-align: center;
+                position: absolute;
+                top: 50%;
+                margin-top: -19px;
+            }
+
+            p {
+                margin-bottom: 5px;
+            }
+
+            .guang {
+                width: 50px;
+                height: 18px;
+                line-height: 18px;
+                font-size: 12px;
+                background-color: #fff;
+                color: #d0021b;
+                margin: 0 auto;
+            }
+        }
+    }
+
+}

+/* 公共样式 */
+.g-list {
+    li {
+        float: left;
+        a {
+            position: relative;
+            display: block;
+            overflow: hidden;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
+
+.g-mask {
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    background: #000;
+    opacity: 0.5;
+    overflow: hidden;
+    transition: opacity 0.6s;
+}
+
+.g-title {
+    display: block;
+    text-align: center;
+    font-weight: bold;
+    line-height: 1.5;
+    width: 100%;
+    margin-top: 14px;
+}
+
+/* 热门推荐模板样式 */
+.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;
+            }
+        }
+    }
+}
+
+.min-screen .home-page .tpl-recommend {
+    .tpl-nav {
+        width: 158px;
+
+        .keywords0,
+        .keywords1,
+        .keywords2 {
+            margin-bottom: 8px;
+            height: 65px;
+        }
+
+        .keywords2 {
+            margin-bottom: 0;
+        }
+
+        .tpl-category {
+            height: 192px;
+
+            a {
+                height: 32px;
+                line-height: 32px;
+                font-size: 12px;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+    .tpl-brands {
+        width: 324px;
+        height: 432px;
+        li a {
+            height: 212px;
+        }
+    }
+    .tpl-types {
+        width: 498px;
+        li a {
+            width: 158px;
+            height: 212px;
+        }
+    }
+    .tpl-products li a {
+        width: 190px;
+        height: 254px;
+    }
+}
+
+/* 单品模板样式 */
+.home-page {
+    .singlehot {
+        overflow: hidden;
+        margin-left: -8px;
+
+        li {
+            margin-left: 8px;
+            margin-bottom: 8px;
+
+            a {
+                width: 185px;
+                height: 248px;
+            }
+        }
+
+        .impo1,
+        .impo9 {
+            width: 378px;
+        }
+    }
+
+    .floor-ad a {
+        display: block;
+        height: 129px;
+
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .goods-container {
+        margin-right: -10px;
+        width: inherit;
+        padding-top: 0;
+
+        .good-info {
+            margin-bottom: 0;
+            width: 280px;
+            height: 485px;
+        }
+
+        .good-detail-img {
+            height: 374px;
+        }
+
+        .good-detail-text {
+            text-align: center;
+        }
+    }
+    .adbanner {
+        margin-top: 12px;
+        a {
+            height: 150px;
+        }
+    }
+}
+
+.min-screen,
+.home-page {
+    .singlehot {
+        li a {
+            width: 158px;
+            height: 212px;
+        }
+        .impo1,
+        .impo9 {
+            width: 323px;
+        }
+    }
+    .goods-container {
+        .good-info {
+            width: 240px;
+            height: 412px;
+
+            .good-detail-img {
+                height: 320px;
+            }
+        }
+    }
+}
+
+/* 人气单品 */
+.home-page .commodity {
+    .commodity-list {
+        margin-left: -10px;
+        a {
+            height: 465px;
+            width: 280px;
+        }
+        li {
+            margin-left: 10px;
+        }
+        i {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 20px;
+            background: #ffac5b;
+            color: #fff;
+            line-height: 20px;
+            text-align: center;
+            font-size: 12px;
+        }
+        i.top {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background-color: rgb(255, 87, 92);
+            color: #fff;
+            border-radius: 30px;
+            z-index: 2;
+            height: 60px;
+            width: 60px;
+            line-height: 60px;
+            font-size: 20px;
+        }
+        .commodity-img {
+            position: relative;
+            height: 374px;
+        }
+        p.commodity-name {
+            font-size: 12px;
+            color: #000;
+            text-align: center;
+            margin-top: 14px;
+            line-height: 18px;
+        }
+        p.commodity-price {
+            position: relative;
+            margin: 3px 0 0;
+            text-align: center;
+            line-height: 20px;
+            color: #000;
+            span {
+                display: inline-block;
+                font-size: 12px;
+            }
+        }
+    }
+    .commodity-brands {
+        margin-left: -8px;
+        a {
+            float: left;
+            margin-left: 8px;
+            display: block;
+            width: 185px;
+            height: 86px;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+    .loading {
+        position: relative;
+        width: 100%;
+        text-align: center;
+        padding-top: 40px;
+        a {
+            display: block;
+            height: 35px;
+            width: 120px;
+            margin: 0 auto 40px;
+            background-color: #000;
+            color: #fff;
+            font-size: 14px;
+            line-height: 35px;
+            text-align: center;
+        }
+    }
+}
+
+.min-screen .home-page .commodity {
+    .commodity-list {
+        a {
+            height: 400px;
+            width: 240px;
+        }
+        .commodity-img {
+            height: 320px;
+        }
+        i.top {
+            height: 52px;
+            width: 52px;
+            line-height: 52px;
+            font-size: 14px;
+        }
+    }
+    .commodity-brands {
+        a {
+            width: 158px;
+            height: 74px;
+        }
+    }
+}
+
+/* 手风琴 */
+.home-page {
+    .slide-accordion {
+        overflow: hidden;
+        position: relative;
+        height: 400px;
+
+        a {
+            position: relative;
+            display: block;
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+        ul {
+            position: absolute;
+            left: -5px;
+        }
+        li {
+            position: absolute;
+            border-left: 5px solid #fff;
+            a {
+                width: 650px;
+                height: 400px;
+            }
+        }
+        .g-mask {
+            opacity: 0.2;
+            &:hover {
+                opacity: 0;
+            }
+        }
+    }
+}
+
+.min-screen .home-page .slide-accordion {
+    height: 342px;
+    li a {
+        width: 558px;
+        height: 342px;
+    }
+}
+
+.boys {
+    .tpl-nav {
+        .keywords0 {
+            margin-bottom: 10px !important;
+            height: 152px !important;
+        }
+        .keywords1 {
+            height: 86px !important;
+        }
+        .tpl-category {
+            a {
+                height: 38px !important;
+                line-height: 38px !important;
+                font-size: 14px !important;
+            }
+        }
+    }
+    .tpl-brands {
+        margin-top: -8px !important;
+    }
+}
+
+.boys,
+.lifestyle {
+    .goods-container {
+        .good-info {
+            width: 222px !important;
+            height: 408px !important;
+            .good-detail-img {
+                height: 298px !important;
+            }
+        }
+    }
+}
+
+.min-screen {
+    .boys {
+        .tpl-nav {
+            .keywords0 {
+                margin-bottom: 8px !important;
+                height: 130px !important;
+            }
+            .keywords1 {
+                margin-bottom: 0 !important;
+                height: 74px !important;
+            }
+        }
+        .tpl-brands {
+            margin-top: -8px !important;
+        }
+    }
+
+    .boys,
+    .lifestyle {
+        .goods-container {
+            .good-info {
+                width: 188px;
+                height: 360px;
+                .good-detail-img {
+                    height: 255px;
+                }
+            }
+        }
+    }
+}

+.home-page {
+    width: 1150px;
+    margin: 10px auto 0;
+
+    .slide-container {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 450px;
+    }
+
+    .slide-thumb-container {
+        height: 510px;
+    }
+
+    .slide-wrapper {
+        position: relative;
+        height: 450px;
+        overflow: hidden;
+
+        ul {
+            position: relative;
+            height: 100%;
+        }
+
+        &:hover .slide-switch.show {
+            display: block;
+        }
+
+        li {
+            display: none;
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 100%;
+            height: 100%;
+
+            a {
+                display: block;
+                height: 100%;
+                width: 1150px;
+                margin: 0 auto;
+            }
+
+            &:first-child {
+                display: block;
+            }
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    .slide-container-placeholder {
+        height: 450px;
+        width: 100%;
+
+    }
+
+    .slide-thumb-container-placeholder {
+        height: 510px;
+    }
+
+    .slide-switch {
+        display: block;
+
+        a {
+            position: absolute;
+            top: 50%;
+            margin: -30px 0 0;
+            width: 60px;
+            height: 60px;
+            line-height: 56px;
+            text-align: center;
+            z-index: 2;
+            background: #fff;
+            opacity: 0.55;
+
+            &.prev {
+                left: 50%;
+                margin-left: -575px;
+            }
+
+            &.next {
+                right: 50%;
+                margin-right: -575px;
+            }
+
+            &:hover {
+                opacity: 0.9;
+            }
+
+            .iconfont {
+                font-size: 32px;
+                color: #59585a;
+            }
+        }
+    }
+
+    .thumb-pagination {
+        width: 1148px;
+        margin: 6px auto 0;
+        padding-left: 2px;
+
+        li {
+            position: relative;
+            float: left;
+            margin-left: 6px;
+            width: 138px;
+            height: 54px;
+
+            &:first-child {
+                margin: 0;
+            }
+
+            &.focus a {
+                opacity: 0;
+            }
+
+            a {
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                top: 0;
+                background: #000;
+                opacity: 0.3;
+            }
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    /* 大banner圆点 */
+    .slide-pagination {
+        font-size: 0;
+
+        .slide-shade {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            background: #000;
+            opacity: 0.3;
+            border-radius: 13px;
+        }
+
+        span {
+            position: relative;
+            display: inline-block;
+            margin: 0 7px;
+            width: 12px;
+            height: 12px;
+            background: #fff;
+            cursor: pointer;
+            opacity: 0.6;
+            border-radius: 6px;
+            z-index: 2;
+
+            &.focus {
+                opacity: 1;
+            }
+        }
+    }
+
+    .debris-slider {
+        height: 510px;
+        width: 100%;
+
+        .col {
+            float: left;
+
+            a {
+                display: block;
+            }
+        }
+
+        .left-col a,
+        .right-col a {
+            margin-bottom: 10px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        .right-col img,
+        .left-col img {
+            height: 100%;
+            width: 100%;
+        }
+
+        .left-col {
+            margin-right: 10px;
+
+            a {
+                width: 280px;
+                height: 120px;
+            }
+
+            a:first-child {
+                height: 250px;
+            }
+        }
+
+        .center-col {
+            position: relative;
+            width: 570px;
+            height: 100%;
+            margin-right: 10px;
+            font-size: 0;
+
+            &:hover {
+                .slide-switch.show {
+                    display: block;
+                }
+            }
+
+            .slide-wrapper {
+                height: 100%;
+
+                a {
+                    width: 100%;
+                }
+            }
+
+            .slide-switch {
+                a.prev {
+                    left: 0;
+                    margin-left: 0;
+                }
+                a.next {
+                    right: 0;
+                    margin-right: 0;
+                }
+            }
+
+            img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+
+        .right-col a {
+            width: 280px;
+            height: 120px;
+        }
+
+        .right-col a:first-child {
+            height: 380px;
+            margin-bottom: 11px;
+        }
+    }
+
+    .new-report {
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        .report-list {
+            float: left;
+            width: 868px;
+
+            li {
+                float: left;
+                margin: 0 8px 8px 0;
+                width: 185px;
+                height: 248px;
+                overflow: hidden;
+
+                &:first-child {
+                    margin-right: 7px;
+                    width: 282px;
+                    height: 504px;
+                }
+            }
+        }
+
+        .last-item {
+            float: left;
+            width: 282px;
+            height: 504px;
+            overflow: hidden;
+        }
+    }
+
+    /* 优选品牌 */
+    .preference-brand {
+        overflow: hidden;
+    }
+
+    .preference-brand-list {
+        margin-top: 8px;
+        width: 1158px;
+    }
+
+    .preference-brand-item {
+        float: left;
+        margin-right: 8px;
+        margin-bottom: 8px;
+
+        a {
+            display: table-cell;
+            width: 185px;
+            height: 86px;
+            text-align: center;
+            vertical-align: middle;
+        }
+
+        img {
+            display: block;
+            max-width: 100%;
+            max-height: 100%;
+            margin: 0 auto;
+        }
+    }
+
+    .preference-more {
+        float: left;
+        width: 185px;
+        height: 86px;
+        line-height: 100px;
+        text-align: center;
+        color: black;
+        font-size: 16px;
+    }
+
+    .img-slider-wrapper {
+        position: relative;
+        width: 100%;
+        height: 558px;
+        background: #8ae6e0;
+        overflow: hidden;
+
+        .img-brand-switch {
+            display: block;
+            a {
+                position: absolute;
+                top: 50%;
+                font-size: 36px;
+                color: #fff;
+
+                &.next {
+                    right: 30px;
+                }
+
+                &.prev {
+                    left: 30px;
+                }
+            }
+        }
+    }
+
+    .img-container-landscape {
+        box-sizing: border-box;
+        margin: 86px auto 0;
+        width: 982px;
+        height: 433px;
+        overflow: hidden;
+
+        .img-list {
+            width: 1000px;
+            height: 100%;
+        }
+
+        .img-item {
+            float: left;
+            box-sizing: border-box;
+            width: 320px;
+            height: 100%;
+            margin-right: 10px;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    .img-brand {
+        position: relative;
+        width: 100%;
+        height: 175px;
+        overflow: hidden;
+
+        &:hover {
+            .img-brand-switch {
+                display: block;
+            }
+        }
+        ul {
+            width: 1158px;
+        }
+        li {
+            float: left;
+            margin: 0 8px 0 0;
+            width: 378px;
+            height: 175px;
+            line-height: 175px;
+            overflow: hidden;
+            font-size: 0;
+            text-align: center;
+
+            img {
+                max-width: 100%;
+                max-height: 100%;
+                vertical-align: middle;
+            }
+        }
+        .img-brand-switch {
+            display: none;
+            a {
+                position: absolute;
+                top: 50%;
+                margin: -20px 0 0;
+                width: 40px;
+                height: 40px;
+                line-height: 40px;
+                text-align: center;
+                z-index: 2;
+                background: #fff;
+                opacity: 0.55;
+
+                &.prev {
+                    left: 0;
+                }
+                &.next {
+                    right: 0;
+                }
+                &:hover {
+                    opacity: 0.9;
+
+                }
+            }
+        }
+    }
+
+    .logo-brand {
+        width: 100%;
+        height: 282px;
+        overflow: hidden;
+
+        &.logos-10 {
+            height: 188px;
+        }
+
+        ul {
+            width: 1158px;
+        }
+
+        li {
+            float: left;
+            margin: 8px 8px 0 0;
+            width: 185px;
+            height: 86px;
+            line-height: 86px;
+            font-size: 0;
+            text-align: center;
+            img {
+                max-width: 100%;
+                max-height: 100%;
+                vertical-align: middle;
+            }
+        }
+
+        .logo-brand-switch {
+            position: relative;
+            background: resolve(img/index/logo-brand-line.png) no-repeat center center;
+            line-height: normal;
+
+            .iconfont {
+                position: absolute;
+                left: 50%;
+                font-size: 32px;
+
+                &.prev {
+                    top: 10px;
+
+                    margin-left: -48px;
+                }
+                &.next {
+                    bottom: 12px;
+                    margin-left: 20px;
+                }
+            }
+        }
+
+        .brand-more {
+            font-size: 16px;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    .categorys-list {
+        ul {
+            width: 1158px;
+        }
+
+        li {
+            float: left;
+            margin: 0 8px 8px 0;
+            width: 185px;
+            height: 248px;
+
+            &.cate-item0 {
+                width: 185px;
+                height: 504px;
+            }
+
+            &.cate-item1 {
+                width: 377px;
+                height: 504px;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    .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;
+                }
+            }
+        }
+    }
+}
+
+@import "index-pliffy";
+@import "min-index";
+@import "brand";
+@import "coupon";

+/* 首页990 */
+.min-screen .home-page {
+    width: 990px;
+
+    /* 大banner */
+    .slide-container {
+        height: 387px;
+
+        img {
+            display: block;
+        }
+    }
+
+    .slide-thumb-container {
+        height: 440px;
+    }
+
+    .slide-container-placeholder {
+        height: 387px;
+    }
+
+    .slide-thumb-container-placeholder {
+        height: 440px;
+    }
+
+    /* 大banner大图 */
+    .slide-wrapper {
+        height: 387px;
+
+        li {
+            a {
+                width: 990px;
+            }
+        }
+    }
+
+    /* 大图上的左右切换按钮 */
+    .slide-switch {
+        display: block;
+
+        a {
+            &.prev {
+                margin-left: -495px;
+            }
+
+            &.next {
+                margin-right: -495px;
+            }
+
+            &:hover {
+                opacity: 0.9;
+            }
+        }
+    }
+
+    /* 大banner缩略图 */
+    .thumb-pagination {
+        width: 990px;
+        margin: 7px auto 0;
+        padding: 0;
+
+        li {
+            width: 118px;
+            height: 46px;
+        }
+    }
+
+    /* 女首碎片banner */
+    .debris-slider {
+        height: 440px;
+
+        .left-col {
+            margin-right: 9px;
+
+            a {
+                width: 240px;
+                height: 103px;
+            }
+
+            a:first-child {
+                height: 214px;
+            }
+        }
+
+        .center-col {
+            width: 492px;
+            margin-right: 9px;
+        }
+
+        .right-col a {
+            width: 240px;
+            height: 103px;
+        }
+
+        .right-col a:first-child {
+            height: 326px;
+            margin-bottom: 10px;
+        }
+    }
+
+    /* 男首最新速报 */
+    .new-report {
+        .report-list {
+            width: 748px;
+
+            li {
+                width: 158px;
+                height: 212px;
+
+                &:first-child {
+                    width: 242px;
+                    height: 432px;
+                }
+            }
+        }
+
+        .last-item {
+            width: 242px;
+            height: 432px;
+        }
+    }
+
+    /* 优选品牌 */
+    .preference-brand-list {
+        width: 998px;
+    }
+
+    .preference-brand-item {
+        margin-right: 7px;
+
+        a {
+            width: 159px;
+            height: 74px;
+        }
+    }
+
+    .preference-more {
+        width: 159px;
+        height: 74px;
+        line-height: 90px;
+    }
+
+    .img-slider-wrapper {
+        height: 480px;
+    }
+
+    .img-container-landscape {
+        margin: 73px auto 0;
+        width: 844px;
+        height: 370px;
+
+        .img-item {
+            width: 275px;
+            height: 100%;
+            margin-right: 9px;
+        }
+    }
+
+    /* 男首优选品牌 图片品牌 */
+    .img-brand {
+        height: 150px;
+        ul {
+            width: 998px;
+        }
+        li {
+            width: 325px;
+            height: 150px;
+            line-height: 150px;
+        }
+    }
+
+    /* 男首优选品牌 logo品牌 */
+    .logo-brand {
+        height: 246px;
+
+        &.logos-10 {
+            height: 164px;
+        }
+
+        ul {
+            width: 998px;
+        }
+
+        li {
+            margin: 8px 8px 0 0;
+            width: 158px;
+            height: 74px;
+            line-height: 74px;
+        }
+
+        .logo-brand-switch {
+            .iconfont {
+                font-size: 24px;
+
+                &.prev {
+                    top: -12px;
+                }
+                &.next {
+                    bottom: -12px;
+                }
+            }
+        }
+    }
+
+    /* 创意生活商品分类 */
+    .categorys-list {
+        ul {
+            width: 1004px;
+        }
+
+        li {
+            margin: 0 7px 7px 0;
+            width: 161px;
+            height: 214px;
+
+            &.cate-item0 {
+                width: 160px;
+                height: 435px;
+            }
+
+            &.cate-item1 {
+                width: 326px;
+                height: 435px;
+            }
+        }
+    }
+
+    .floor-header {
+        margin: 50px 0 30px;
+
+        .header-navs {
+
+            li {
+                padding: 1px 10px;
+            }
+        }
+    }
+}