全部商品模板

-@import "new-arrival", "discount", "list", "detail", "suspend-cart", "hot-rank", "_recommend-for-you.scss", "limit", "_shop-index";
+@import "new-arrival", "discount", "list", "detail", "suspend-cart", "hot-rank", "_recommend-for-you.scss", "limit", "_shop-index", "product-category", "shop-prodfile";

+.product-category {
+    font-size: 30rem / $pxConvertRem;
+    background-color: #fff;
+
+    .allproduct {
+        position: relative;
+        padding: 15px 0px;
+        background: #f8f8f8;
+        border-top: 15px;
+        border-bottom: 15px;
+        padding-left: 32rem / $pxConvertRem;
+        border-top: 1px solid #e6e6e6;
+    }
+
+    .margin-under-allproduct{
+        width: 100%;
+        height: 30rem / $pxConvertRem;
+        background-color: #f0f0f0;
+    }
+
+    .category-container{
+        border-top: 1px solid #e6e6e6;
+    }
+    .arrow-icon {
+        position: absolute;
+        font-size: 12px;
+        top: 15px;
+        right: 20px;
+    }
+
+    .allproductParagaraph {
+        font-size: 18px;
+        left: 20px;
+    }
+
+    .content {
+        background: #f8f8f8;
+
+        &.hide {
+            display: none;
+        }
+    }
+
+    .primary-level {
+        float: left;
+        box-sizing: border-box;
+        width: 100%;
+        position: absolute;
+        > li {
+            position:relative;
+            height: 89rem / $pxConvertRem;
+            line-height: 89rem / $pxConvertRem;
+            padding-left: 32rem / $pxConvertRem;
+            box-sizing: border-box;
+            border-bottom: 1px solid #e6e6e6;
+            background-color: #fff;
+        }
+    }
+
+    .primary-level-trilangle{
+        float:right;
+        margin-right:56%;
+    }
+
+    .trilanglefont {
+        font-family: "iconfont" !important;
+        font-size: 30px;
+        font-style: normal;
+        text-decoration: none;
+        -webkit-font-smoothing: antialiased;
+        -webkit-text-stroke-width: 0.2px;
+        -moz-osx-font-smoothing: grayscale;
+        color: #f4f4f4;
+    }
+
+
+    .sub-level-container {
+        float: right;
+        box-sizing: border-box;
+        background: #f4f4f4;
+        width: 55%;
+        height: 100%;
+        position: relative;
+    }
+
+    .sub-level {
+        width: 100%;
+
+        &.hide {
+            display: none;
+        }
+
+        > li {
+            box-sizing: border-box;
+            height: 89rem / $pxConvertRem;
+            line-height: 89rem / $pxConvertRem;
+            border-bottom: 1px solid #e6e6e6;
+            padding-left: 2rem / $pxConvertRem;
+            //border-left: 50rem / $pxConvertRem;
+            margin-left: 30rem / $pxConvertRem;
+
+            &.highlight {
+                background: #dbdbdb;
+            }
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+
+        a {
+            display: block;
+            height: 100%;
+            width: 100%;
+            color: #afafaf;
+        }
+    }
+}

+.shop-introduce{
+    .banner {
+        margin: 30px auto;
+        width: auto;
+        height: auto;
+        display: block;
+        background-size: 100%;
+    }
+
+    .descripition {
+        margin: 40px 20px 0px 20px;
+        font-size: 16px;
+        line-height: 22px;
+        padding: 20px 0;
+        border-top: 1px solid #e6e6e6;
+        border-bottom: 1px solid #e6e6e6;
+        text-indent:2em;
+    }
+
+    .sign-icon {
+        font-size: 20px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        font-weight: 100;
+    }
+
+    .sign-icon > span {
+        width:auto;
+    }
+}
+
+.brand{
+    .brand-list{
+        margin-left: 20px;
+        font-size: 18px;
+        border-bottom: 1px solid #e6e6e6;
+        text-align: left;
+        height: 44px;
+        line-height: 44px;
+        vertical-align:middle;
+        display: block;
+        width: 100%;
+    }
+}

@@ -16,7 +16,7 @@
     text-indent:2em;
     text-indent:2em;
 }
 }
 
 
-.fo {
+.sign-icon {
     font-size: 20px;
     font-size: 20px;
     height: 40px;
     height: 40px;
     line-height: 40px;
     line-height: 40px;
@@ -24,7 +24,7 @@
     font-weight: 100;
     font-weight: 100;
 }
 }
 
 
-.fo > span {
+.sign-icon > span {
     width:auto;
     width:auto;
 }
 }
 
 

+{{> layout/header}}
+    <div class="good-list-page yoho-page">
+        {{> product/list}}
+    </div>
+{{> layout/footer}}

 {{> layout/header}}
 {{> layout/header}}
-<div>
+<div class="shop-introduce">
     <a class="banner">
     <a class="banner">
         <img src="{{content.shop_logo}}">
         <img src="{{content.shop_logo}}">
     </a>
     </a>
@@ -8,7 +8,7 @@
         {{content.shop_intro}}
         {{content.shop_intro}}
     </div>
     </div>
 
 
-    <p class="fo">
+    <p class="sign-icon">
         <span class="iconfont">&#xe649;</span>
         <span class="iconfont">&#xe649;</span>
         100%品牌授权正品
         100%品牌授权正品
     </p>
     </p>

+{{> layout/header}}
+    {{# brands}}
+        <a class="brand-list" href="{{url}}">
+            {{brandname}}
+        </a>
+    {{/ brands}}
+{{> layout/footer}}

+{{> layout/header}}
+
+<div class="product-category yoho-page">
+
+    <div id="allproduct" class="allproduct">
+        <a href={{allproduct}}>
+        <p class="allproductParagaraph">全部商品</p>
+        <i class="arrow-icon iconfont">&#xe614;</i>
+        </a>
+    </div>
+    <div class="margin-under-allproduct">
+    </div>
+    <div class="category-container clearfix">
+        <div class="content">
+            {{# content}}
+            <ul class="primary-level">
+                {{# class}}
+                <li class="p-level-item">{{name}}
+                    <div class="primary-level-trilangle trilanglefont hide">&#xe64a;</div>
+                </li>{{/ class}}
+            </ul>
+            <div class="sub-level-container hide">
+                {{# category}}
+                <ul class="sub-level">
+                    {{# subcategory}}
+                    <li>
+                        <a href={{url}}>
+                        {{category_name}}
+                        </a>
+                    </li>
+                    {{/ subcategory}}
+                </ul>
+                {{/ category}}
+            </div>
+        {{/ content}}
+    </div>
+</div>
+
+</div>
+{{> layout/footer}}

+{{> layout/header}}
+<div class="shop-introduce">
+    <a class="banner">
+        <img src="{{content.shop_logo}}">
+    </a>
+
+    <div class="descripition">
+        {{content.shop_intro}}
+    </div>
+
+    <p class="sign-icon">
+        <span class="iconfont">&#xe649;</span>
+        100%品牌授权正品
+    </p>
+</div>
+{{> layout/footer}}