Authored by 张丽霞

商品分类逻辑完善

No preview for this file type
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 <svg xmlns="http://www.w3.org/2000/svg"> 3 <svg xmlns="http://www.w3.org/2000/svg">
4 <metadata> 4 <metadata>
5 -Created by FontForge 20120731 at Mon Apr 25 11:38:52 2016 5 +Created by FontForge 20120731 at Mon Apr 25 20:39:04 2016
6 By admin 6 By admin
7 </metadata> 7 </metadata>
8 <defs> 8 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Mon Apr 25 11:38:52 2016 @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Mon Apr 25 11:38:52 2016
19 bbox="-0.75 -224 3943 896" 19 bbox="-0.75 -224 3943 896"
20 underline-thickness="50" 20 underline-thickness="50"
21 underline-position="-100" 21 underline-position="-100"
22 - unicode-range="U+0078-E64A" 22 + unicode-range="U+0078-E649"
23 /> 23 />
24 <missing-glyph horiz-adv-x="374" 24 <missing-glyph horiz-adv-x="374"
25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" /> 25 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- @@ -266,7 +266,5 @@ t99.5 148.5t148.5 99.5t181 37t181 -37t148.5 -99.5t99.5 -148.5t37 -181t-37 -181t-
266 <glyph glyph-name="uniE649" unicode="&#xe649;" 266 <glyph glyph-name="uniE649" unicode="&#xe649;"
267 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 267 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
268 t-22 15.5zM751 552v83h-473v-83h206v-298h-72v237h-87v-237h-66v-84h506v84h-193v119h151v83h-151v96h179z" /> 268 t-22 15.5zM751 552v83h-473v-83h206v-298h-72v237h-87v-237h-66v-84h506v84h-193v119h151v83h-151v96h179z" />
269 - <glyph glyph-name="uniE64A" unicode="&#xe64a;" horiz-adv-x="1000"  
270 -d="M662 566v-499l-299 250zM662 566z" />  
271 </font> 269 </font>
272 </defs></svg> 270 </defs></svg>
No preview for this file type
No preview for this file type
@@ -14,7 +14,6 @@ var $nav = $('.category-nav'), @@ -14,7 +14,6 @@ var $nav = $('.category-nav'),
14 14
15 var $curContent = $contents.not('.hide'); 15 var $curContent = $contents.not('.hide');
16 16
17 -//初始化container高度  
18 (function() { 17 (function() {
19 var $header = $('.yoho-header'), 18 var $header = $('.yoho-header'),
20 $search = $('#search-input'); 19 $search = $('#search-input');
@@ -9,16 +9,17 @@ var $allProductCell = $('.allproduct'), @@ -9,16 +9,17 @@ var $allProductCell = $('.allproduct'),
9 $categoryContainer = $('.category-container'), 9 $categoryContainer = $('.category-container'),
10 $contents = $categoryContainer.children('.content'), 10 $contents = $categoryContainer.children('.content'),
11 $subLevelItem = $categoryContainer.find('.sub-level li'), 11 $subLevelItem = $categoryContainer.find('.sub-level li'),
12 - $primaryItem = $categoryContainer.find('.primary-level li'); 12 + $primaryItem = $categoryContainer.find('.primary-level li'),
  13 + $trilangle = $categoryContainer.find('.primary-level-trilangle');
13 14
14 //初始化container高度 15 //初始化container高度
15 (function() { 16 (function() {
16 var $header = $('.yoho-header'); 17 var $header = $('.yoho-header');
17 -  
18 var h = $(window).height() - $header.outerHeight() - $allProductCell.outerHeight(); 18 var h = $(window).height() - $header.outerHeight() - $allProductCell.outerHeight();
  19 + var trilangleRightMargin = $(window).width() * 0.55;
19 20
20 $categoryContainer.css('min-height', h); 21 $categoryContainer.css('min-height', h);
21 - 22 + $trilangle.css('margin-right', trilangleRightMargin);
22 $contents.height(h); 23 $contents.height(h);
23 24
24 }()); 25 }());
@@ -44,15 +45,11 @@ $categoryContainer.on('touchend', function(e) { @@ -44,15 +45,11 @@ $categoryContainer.on('touchend', function(e) {
44 return; 45 return;
45 } 46 }
46 47
47 - //$this.closest('.primary-level').children('.focus').removeClass('focus');  
48 - //$this.addClass('focus');  
49 -  
50 $subLevel.not('.hide').addClass('hide'); 48 $subLevel.not('.hide').addClass('hide');
51 $subLevel.eq(index).removeClass('hide'); 49 $subLevel.eq(index).removeClass('hide');
52 50
53 $trilangleItem.not('.hide').addClass('hide'); 51 $trilangleItem.not('.hide').addClass('hide');
54 $trilangleItem.eq(index).removeClass('hide'); 52 $trilangleItem.eq(index).removeClass('hide');
55 -  
56 } 53 }
57 }); 54 });
58 55
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 .allproduct { 5 .allproduct {
6 position: relative; 6 position: relative;
7 padding: 15px 0px; 7 padding: 15px 0px;
8 - background: #f8f8f8; 8 + background: #fff;
9 border-top: 15px; 9 border-top: 15px;
10 border-bottom: 15px; 10 border-bottom: 15px;
11 padding-left: 32rem / $pxConvertRem; 11 padding-left: 32rem / $pxConvertRem;
@@ -23,9 +23,10 @@ @@ -23,9 +23,10 @@
23 } 23 }
24 .arrow-icon { 24 .arrow-icon {
25 position: absolute; 25 position: absolute;
26 - font-size: 12px; 26 + font-size: 16px;
27 top: 15px; 27 top: 15px;
28 right: 20px; 28 right: 20px;
  29 + color: #e1e1e1;
29 } 30 }
30 31
31 .allproductParagaraph { 32 .allproductParagaraph {
@@ -34,7 +35,7 @@ @@ -34,7 +35,7 @@
34 } 35 }
35 36
36 .content { 37 .content {
37 - background: #f8f8f8; 38 + background: #fff;
38 39
39 &.hide { 40 &.hide {
40 display: none; 41 display: none;
@@ -50,16 +51,20 @@ @@ -50,16 +51,20 @@
50 position:relative; 51 position:relative;
51 height: 89rem / $pxConvertRem; 52 height: 89rem / $pxConvertRem;
52 line-height: 89rem / $pxConvertRem; 53 line-height: 89rem / $pxConvertRem;
53 - padding-left: 32rem / $pxConvertRem;  
54 box-sizing: border-box; 54 box-sizing: border-box;
55 border-bottom: 1px solid #e6e6e6; 55 border-bottom: 1px solid #e6e6e6;
56 background-color: #fff; 56 background-color: #fff;
  57 + margin-left: 30rem / $pxConvertRem;
57 } 58 }
58 } 59 }
59 60
60 .primary-level-trilangle{ 61 .primary-level-trilangle{
61 - float:right;  
62 - margin-right:56%; 62 + float: right;
  63 + background: image-url('product/arrow.png');
  64 + margin-top: 14rem / $pxConvertRem;
  65 + width: 21rem / $pxConvertRem;
  66 + height: 60rem / $pxConvertRem;
  67 + background-repeat: no-repeat;
63 } 68 }
64 69
65 .trilanglefont { 70 .trilanglefont {
@@ -95,12 +100,13 @@ @@ -95,12 +100,13 @@
95 height: 89rem / $pxConvertRem; 100 height: 89rem / $pxConvertRem;
96 line-height: 89rem / $pxConvertRem; 101 line-height: 89rem / $pxConvertRem;
97 border-bottom: 1px solid #e6e6e6; 102 border-bottom: 1px solid #e6e6e6;
98 - padding-left: 2rem / $pxConvertRem;  
99 - //border-left: 50rem / $pxConvertRem;  
100 margin-left: 30rem / $pxConvertRem; 103 margin-left: 30rem / $pxConvertRem;
  104 + padding-left: 0rem / $pxConvertRem;
101 105
102 &.highlight { 106 &.highlight {
103 background: #dbdbdb; 107 background: #dbdbdb;
  108 + margin-left: 0rem / $pxConvertRem;
  109 + padding-left: 30rem / $pxConvertRem;
104 } 110 }
105 111
106 &:last-child { 112 &:last-child {
1 -.banner { 1 +.shop-introduce{
  2 + .banner {
2 margin: 30px auto; 3 margin: 30px auto;
3 width: auto; 4 width: auto;
4 height: auto; 5 height: auto;
5 display: block; 6 display: block;
6 background-size: 100%; 7 background-size: 100%;
7 -} 8 + }
8 9
9 -.descripition { 10 + .descripition {
10 margin: 40px 20px 0px 20px; 11 margin: 40px 20px 0px 20px;
11 font-size: 16px; 12 font-size: 16px;
12 line-height: 22px; 13 line-height: 22px;
@@ -14,21 +15,23 @@ @@ -14,21 +15,23 @@
14 border-top: 1px solid #e6e6e6; 15 border-top: 1px solid #e6e6e6;
15 border-bottom: 1px solid #e6e6e6; 16 border-bottom: 1px solid #e6e6e6;
16 text-indent:2em; 17 text-indent:2em;
17 -} 18 + }
18 19
19 -.sign-icon { 20 + .sign-icon {
20 font-size: 20px; 21 font-size: 20px;
21 height: 40px; 22 height: 40px;
22 line-height: 40px; 23 line-height: 40px;
23 text-align: center; 24 text-align: center;
24 font-weight: 100; 25 font-weight: 100;
25 -} 26 + }
26 27
27 -.sign-icon > span { 28 + .sign-icon > span {
28 width:auto; 29 width:auto;
  30 + }
29 } 31 }
30 32
31 -.brand-list{ 33 +.brand{
  34 + .brand-list{
32 margin-left: 20px; 35 margin-left: 20px;
33 font-size: 18px; 36 font-size: 18px;
34 border-bottom: 1px solid #e6e6e6; 37 border-bottom: 1px solid #e6e6e6;
@@ -38,4 +41,5 @@ @@ -38,4 +41,5 @@
38 vertical-align:middle; 41 vertical-align:middle;
39 display: block; 42 display: block;
40 width: 100%; 43 width: 100%;
  44 + }
41 } 45 }
1 -@import "product-category", "shop-prodfile";  
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 .allproduct { 5 .allproduct {
6 position: relative; 6 position: relative;
7 padding: 15px 0px; 7 padding: 15px 0px;
8 - background: #f8f8f8; 8 + background: #fff;
9 border-top: 15px; 9 border-top: 15px;
10 border-bottom: 15px; 10 border-bottom: 15px;
11 padding-left: 32rem / $pxConvertRem; 11 padding-left: 32rem / $pxConvertRem;
@@ -58,8 +58,10 @@ @@ -58,8 +58,10 @@
58 } 58 }
59 59
60 .primary-level-trilangle{ 60 .primary-level-trilangle{
61 - float:right;  
62 - margin-right:56%; 61 + float: right;
  62 + background: image-url('product/arrow.png')
  63 + width: 20px;
  64 + height: 20px;
63 } 65 }
64 66
65 .trilanglefont { 67 .trilanglefont {
@@ -16,7 +16,8 @@ @@ -16,7 +16,8 @@
16 <ul class="primary-level"> 16 <ul class="primary-level">
17 {{# class}} 17 {{# class}}
18 <li class="p-level-item">{{name}} 18 <li class="p-level-item">{{name}}
19 - <div class="primary-level-trilangle trilanglefont hide">&#xe64a;</div> 19 + <div class="primary-level-trilangle hide"></div>
  20 + <!-- <img class="primary-level-trilangle trilanglefont" src="../static/img/product/arrow.jpg"> -->
20 </li>{{/ class}} 21 </li>{{/ class}}
21 </ul> 22 </ul>
22 <div class="sub-level-container hide"> 23 <div class="sub-level-container hide">
1 {{> layout/header}} 1 {{> layout/header}}
2 -<div> 2 +<div class ='shop_introduation'>
3 <a class="banner"> 3 <a class="banner">
4 <img src="{{content.shop_logo}}"> 4 <img src="{{content.shop_logo}}">
5 </a> 5 </a>