Showing
3 changed files
with
64 additions
and
23 deletions
1 | -{{# shopEntry}} | ||
2 | - <div class="shop-entry clearfix"> | ||
3 | - <a class="pull-left" href="{{home}}"> | ||
4 | - <img class="logo" src="{{logo}}"> | ||
5 | - </a> | 1 | +<div class="shop-entry-area"> |
2 | + {{# shopEntry}} | ||
3 | + <div class="shop-entry clearfix"> | ||
4 | + <a class="pull-left" href="{{home}}"> | ||
5 | + <img class="logo" src="{{logo}}"> | ||
6 | + </a> | ||
6 | 7 | ||
7 | - <div class="name pull-left"> | ||
8 | - <a class="shop-name" href="{{home}}">{{shopName}}</a> | ||
9 | - <p class="sorts"> | ||
10 | - {{#each sort}} | ||
11 | - <a href="{{href}}">{{name}}</a> | 8 | + <div class="name pull-left"> |
9 | + <a class="shop-name" href="{{home}}">{{shopName}}</a> | ||
10 | + <p class="sorts"> | ||
11 | + {{#each sort}} | ||
12 | + <a href="{{href}}">{{name}}</a> | ||
12 | 13 | ||
13 | - {{#unless @last}} | ||
14 | - / | ||
15 | - {{/unless}} | ||
16 | - {{/each}} | ||
17 | - </p> | ||
18 | - </div> | 14 | + {{#unless @last}} |
15 | + / | ||
16 | + {{/unless}} | ||
17 | + {{/each}} | ||
18 | + </p> | ||
19 | + </div> | ||
19 | 20 | ||
20 | - <a class="entry-btn pull-right" href="{{home}}"> | ||
21 | - 进入品牌店铺 | ||
22 | - <span class="iconfont"></span> | ||
23 | - </a> | ||
24 | - </div> | ||
25 | -{{/ shopEntry}} | 21 | + <a class="entry-btn pull-right" href="{{home}}"> |
22 | + 进入品牌店铺 | ||
23 | + <span class="iconfont"></span> | ||
24 | + </a> | ||
25 | + </div> | ||
26 | + {{/ shopEntry}} | ||
27 | +</div> |
@@ -24,6 +24,31 @@ lazyLoad($('img.lazy')); | @@ -24,6 +24,31 @@ lazyLoad($('img.lazy')); | ||
24 | * @num 每列存放商品的个数 | 24 | * @num 每列存放商品的个数 |
25 | */ | 25 | */ |
26 | exports.init = function(num) { | 26 | exports.init = function(num) { |
27 | + var $shopEntry = $('.shop-entry'), | ||
28 | + $shopEntryArea = $('.shop-entry-area'), | ||
29 | + shopEntryLen = $shopEntry.length; | ||
30 | + | ||
31 | + if (shopEntryLen > 0) { | ||
32 | + if(shopEntryLen % 3 === 1) { | ||
33 | + $shopEntry.eq(shopEntryLen-1).css({ | ||
34 | + width: '100%' | ||
35 | + }); | ||
36 | + } else if (shopEntryLen % 3 === 2) { | ||
37 | + $shopEntry.eq(shopEntryLen-1).css({ | ||
38 | + width: '49%' | ||
39 | + }); | ||
40 | + | ||
41 | + $shopEntry.eq(shopEntryLen-2).css({ | ||
42 | + width: '49%' | ||
43 | + }); | ||
44 | + } | ||
45 | + | ||
46 | + $('.shop-entry:nth-child(3n+1)').css({ | ||
47 | + marginLeft: 0 | ||
48 | + }); | ||
49 | + | ||
50 | + $shopEntryArea.show(); | ||
51 | + } | ||
27 | 52 | ||
28 | productList = null; | 53 | productList = null; |
29 | 54 |
1 | +.shop-entry-area { | ||
2 | + width: 100%; | ||
3 | + height: auto; | ||
4 | + overflow: hidden; | ||
5 | + display: none; | ||
6 | + | ||
7 | + .shop-entry:first-child { | ||
8 | + margin-left: 0; | ||
9 | + } | ||
10 | +} | ||
11 | + | ||
1 | .shop-entry { | 12 | .shop-entry { |
2 | position: relative; | 13 | position: relative; |
3 | background: #f5f7f6; | 14 | background: #f5f7f6; |
4 | border: 1px solid #eaeceb; | 15 | border: 1px solid #eaeceb; |
5 | padding: 12px 15px; | 16 | padding: 12px 15px; |
6 | - margin-bottom: 10px; | 17 | + width: 32%; |
18 | + box-sizing: border-box; | ||
19 | + float: left; | ||
20 | + margin: 0 0 10px 2%; | ||
7 | 21 | ||
8 | .logo { | 22 | .logo { |
9 | width: 80px; | 23 | width: 80px; |
-
Please register or login to post a comment