商品分类逻辑完善

@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
-Created by FontForge 20120731 at Mon Apr 25 11:38:52 2016
+Created by FontForge 20120731 at Mon Apr 25 20:39:04 2016
  By admin
 </metadata>
 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Mon Apr 25 11:38:52 2016
     bbox="-0.75 -224 3943 896"
     underline-thickness="50"
     underline-position="-100"
-    unicode-range="U+0078-E64A"
+    unicode-range="U+0078-E649"
   />
 <missing-glyph horiz-adv-x="374" 
 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -266,7 +266,5 @@ t99.5 148.5t148.5 99.5t181 37t181 -37t148.5 -99.5t99.5 -148.5t37 -181t-37 -181t-
     <glyph glyph-name="uniE649" unicode="&#xe649;" 
 d="M875 126l-363 -164l-363 164v610q247 75 363 75t363 -75v-610zM930 808q-34 11 -84.5 26t-159.5 38.5t-174 23.5t-174 -23.5t-159.5 -38.5t-84.5 -26q-14 -4 -22 -15.5t-8 -25.5v-669q0 -27 25 -39l405 -183q9 -3 18 -3t18 3l405 183q25 12 25 39v669q0 14 -8 25.5
 t-22 15.5zM751 552v83h-473v-83h206v-298h-72v237h-87v-237h-66v-84h506v84h-193v119h151v83h-151v96h179z" />
-    <glyph glyph-name="uniE64A" unicode="&#xe64a;" horiz-adv-x="1000" 
-d="M662 566v-499l-299 250zM662 566z" />
   </font>
 </defs></svg>

@@ -14,7 +14,6 @@ var $nav = $('.category-nav'),
 
 var $curContent = $contents.not('.hide');
 
-//初始化container高度
 (function() {
     var $header = $('.yoho-header'),
         $search = $('#search-input');

@@ -9,16 +9,17 @@ var $allProductCell = $('.allproduct'),
     $categoryContainer = $('.category-container'),
     $contents = $categoryContainer.children('.content'),
     $subLevelItem = $categoryContainer.find('.sub-level li'),
-    $primaryItem = $categoryContainer.find('.primary-level li');
+    $primaryItem = $categoryContainer.find('.primary-level li'),
+    $trilangle = $categoryContainer.find('.primary-level-trilangle');
 
 //初始化container高度
 (function() {
     var $header = $('.yoho-header');
-
     var h = $(window).height() - $header.outerHeight() - $allProductCell.outerHeight();
+    var trilangleRightMargin = $(window).width() * 0.55;
 
     $categoryContainer.css('min-height', h);
-
+    $trilangle.css('margin-right', trilangleRightMargin);
     $contents.height(h);
 
 }());
@@ -44,15 +45,11 @@ $categoryContainer.on('touchend', function(e) {
             return;
         }
 
-        //$this.closest('.primary-level').children('.focus').removeClass('focus');
-        //$this.addClass('focus');
-
         $subLevel.not('.hide').addClass('hide');
         $subLevel.eq(index).removeClass('hide');
 
         $trilangleItem.not('.hide').addClass('hide');
         $trilangleItem.eq(index).removeClass('hide');
-
     }
 });
 

@@ -5,7 +5,7 @@
     .allproduct {
         position: relative;
         padding: 15px 0px;
-        background: #f8f8f8;
+        background: #fff;
         border-top: 15px;
         border-bottom: 15px;
         padding-left: 32rem / $pxConvertRem;
@@ -23,9 +23,10 @@
     }
     .arrow-icon {
         position: absolute;
-        font-size: 12px;
+        font-size: 16px;
         top: 15px;
         right: 20px;
+        color: #e1e1e1;
     }
 
     .allproductParagaraph {
@@ -34,7 +35,7 @@
     }
 
     .content {
-        background: #f8f8f8;
+        background: #fff;
 
         &.hide {
             display: none;
@@ -50,16 +51,20 @@
             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;
+            margin-left: 30rem / $pxConvertRem;
         }
     }
 
     .primary-level-trilangle{
-        float:right;
-        margin-right:56%;
+        float: right;
+        background: image-url('product/arrow.png');
+        margin-top: 14rem / $pxConvertRem;
+        width: 21rem / $pxConvertRem;
+        height: 60rem / $pxConvertRem;
+        background-repeat: no-repeat;
     }
 
     .trilanglefont {
@@ -95,12 +100,13 @@
             height: 89rem / $pxConvertRem;
             line-height: 89rem / $pxConvertRem;
             border-bottom: 1px solid #e6e6e6;
-            padding-left: 2rem / $pxConvertRem;
-            //border-left: 50rem / $pxConvertRem;
             margin-left: 30rem / $pxConvertRem;
+            padding-left: 0rem / $pxConvertRem;
 
             &.highlight {
                 background: #dbdbdb;
+                margin-left: 0rem / $pxConvertRem;
+                padding-left: 30rem / $pxConvertRem;
             }
 
             &:last-child {
@@ -115,4 +121,4 @@
             color: #afafaf;
         }
     }
-}
\ No newline at end of file
+}

-.banner {
-    margin: 30px auto;
-    width: auto;
-    height: auto;
-    display: block;
-    background-size: 100%;
-}
+.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;
-}
+    .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 {
+        font-size: 20px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        font-weight: 100;
+    }
 
-.sign-icon > span {
-    width:auto;
+    .sign-icon > span {
+        width:auto;
+    }
 }
 
-.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%;
+.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%;
+    }
 }
\ No newline at end of file

-@import "product-category", "shop-prodfile";
\ No newline at end of file

@@ -5,7 +5,7 @@
     .allproduct {
         position: relative;
         padding: 15px 0px;
-        background: #f8f8f8;
+        background: #fff;
         border-top: 15px;
         border-bottom: 15px;
         padding-left: 32rem / $pxConvertRem;
@@ -58,8 +58,10 @@
     }
 
     .primary-level-trilangle{
-        float:right;
-        margin-right:56%;
+        float: right;
+        background: image-url('product/arrow.png')
+        width: 20px;
+        height: 20px;
     }
 
     .trilanglefont {

@@ -16,7 +16,8 @@
             <ul class="primary-level">
                 {{# class}}
                 <li class="p-level-item">{{name}}
-                    <div class="primary-level-trilangle trilanglefont hide">&#xe64a;</div>
+                    <div class="primary-level-trilangle hide"></div>
+                    <!-- <img class="primary-level-trilangle trilanglefont" src="../static/img/product/arrow.jpg"> -->
                 </li>{{/ class}}
             </ul>
             <div class="sub-level-container hide">

 {{> layout/header}}
-<div>
+<div class ='shop_introduation'>
     <a class="banner">
         <img src="{{content.shop_logo}}">
     </a>