Showing
4 changed files
with
89 additions
and
4 deletions
@@ -7,6 +7,10 @@ | @@ -7,6 +7,10 @@ | ||
7 | var $ = require('yoho.zepto'), | 7 | var $ = require('yoho.zepto'), |
8 | lazyLoad = require('yoho.zeptolazyload'); | 8 | lazyLoad = require('yoho.zeptolazyload'); |
9 | 9 | ||
10 | +//品牌页参数 | ||
11 | +var $brandHeader = $('#brand-header'), | ||
12 | + $introBox = $('#intro-box'); | ||
13 | + | ||
10 | var filter = require('../plugin/filter'); | 14 | var filter = require('../plugin/filter'); |
11 | 15 | ||
12 | var $goodsContainer = $('#goods-container'), | 16 | var $goodsContainer = $('#goods-container'), |
@@ -276,4 +280,22 @@ $(window).scroll(function() { | @@ -276,4 +280,22 @@ $(window).scroll(function() { | ||
276 | $(document).height() - 0.25 * $goodsContainer.height()) { | 280 | $(document).height() - 0.25 * $goodsContainer.height()) { |
277 | search(); | 281 | search(); |
278 | } | 282 | } |
283 | +}); | ||
284 | + | ||
285 | +//品牌介绍 | ||
286 | +$brandHeader.children('.btn-intro').bind('touchstart', function() { | ||
287 | + $introBox.removeClass('hide'); | ||
288 | +}); | ||
289 | + | ||
290 | +$('.close-intro, .brand-intro-box').click(function() { | ||
291 | + $introBox.addClass('hide'); | ||
292 | +}); | ||
293 | + | ||
294 | +$('#brand-intro').click(function(e) { | ||
295 | + e.stopPropagation(); | ||
296 | +}); | ||
297 | + | ||
298 | +//品牌收藏 | ||
299 | +$brandHeader.children('.btn-col').bind('touchstart', function() { | ||
300 | + $(this).toggleClass('coled'); | ||
279 | }); | 301 | }); |
@@ -96,10 +96,59 @@ | @@ -96,10 +96,59 @@ | ||
96 | 96 | ||
97 | .btn-col { | 97 | .btn-col { |
98 | right: 15px; | 98 | right: 15px; |
99 | + | ||
100 | + .iconfont { | ||
101 | + font-size: 12px; | ||
102 | + } | ||
99 | } | 103 | } |
100 | 104 | ||
101 | .brand-intro-box { | 105 | .brand-intro-box { |
102 | - display: none; | 106 | + position: absolute; |
107 | + top: 0; | ||
108 | + left: 0; | ||
109 | + right: 0; | ||
110 | + bottom: 0; | ||
111 | + background: rgba(0,0,0,.3); | ||
112 | + padding: 44px 0; | ||
113 | + z-index: 1; | ||
114 | + overflow: auto; | ||
115 | + | ||
116 | + .brand-intro { | ||
117 | + position: relative; | ||
118 | + box-sizing: border-box; | ||
119 | + width: 85%; | ||
120 | + margin: 0 7.5%; | ||
121 | + background: #fff; | ||
122 | + padding: 10px 8%; | ||
123 | + } | ||
124 | + | ||
125 | + h2 { | ||
126 | + text-align: center; | ||
127 | + font-size: 17px; | ||
128 | + line-height: 40px; | ||
129 | + } | ||
130 | + | ||
131 | + .con { | ||
132 | + font-size: 12px; | ||
133 | + line-height: 16px; | ||
134 | + padding: 20px 0; | ||
135 | + border-top: 1px solid #e6e6e6; | ||
136 | + border-bottom: 1px solid #e6e6e6; | ||
137 | + overflow-x: hidden; | ||
138 | + } | ||
139 | + | ||
140 | + .fo { | ||
141 | + font-size: 18px; | ||
142 | + height: 40px; | ||
143 | + line-height: 40px; | ||
144 | + text-align: center; | ||
145 | + } | ||
146 | + | ||
147 | + .close-intro { | ||
148 | + position: absolute; | ||
149 | + top: 6px; | ||
150 | + right: 6px; | ||
151 | + } | ||
103 | } | 152 | } |
104 | 153 | ||
105 | .list-nav { | 154 | .list-nav { |
@@ -24,7 +24,7 @@ | @@ -24,7 +24,7 @@ | ||
24 | {{/ brandWay}} | 24 | {{/ brandWay}} |
25 | 25 | ||
26 | {{# brand}} | 26 | {{# brand}} |
27 | - <div class="brand-header" data-id={{id}}> | 27 | + <div id="brand-header" class="brand-header" data-id={{id}}> |
28 | <img class="lazy" data-original={{banner}}> | 28 | <img class="lazy" data-original={{banner}}> |
29 | <a class="btn-intro" href="javascript:void(0);"> | 29 | <a class="btn-intro" href="javascript:void(0);"> |
30 | 品牌介绍 | 30 | 品牌介绍 |
@@ -34,8 +34,18 @@ | @@ -34,8 +34,18 @@ | ||
34 | 收藏 | 34 | 收藏 |
35 | </a> | 35 | </a> |
36 | </div> | 36 | </div> |
37 | - <div class="brand-intro-box"> | ||
38 | - <div id="brand-intro" class="brand-intro">{{intro}}</div> | 37 | + <div id="intro-box" class="brand-intro-box hide"> |
38 | + <div id="brand-intro" class="brand-intro"> | ||
39 | + <h2>品牌介绍</h2> | ||
40 | + <div class="con"> | ||
41 | + {{{intro}}} | ||
42 | + </div> | ||
43 | + <p class="fo"> | ||
44 | + <span></span> | ||
45 | + 100%品牌授权正品 | ||
46 | + </p> | ||
47 | + <span class="iconfont close-intro"></span> | ||
48 | + </div> | ||
39 | </div> | 49 | </div> |
40 | {{/ brand}} | 50 | {{/ brand}} |
41 | 51 |
@@ -19,6 +19,10 @@ class ListController extends AbstractAction | @@ -19,6 +19,10 @@ class ListController extends AbstractAction | ||
19 | 'name' => 'Aape', | 19 | 'name' => 'Aape', |
20 | 'thumb' => 'http://img13.static.yhbimg.com/brandLogo/2015/08/26/15/02261f64c198cb4b181c5ef9e61f38f4b9.jpg?imageMogr2/thumbnail/150x70/extent/150x70/background/d2hpdGU=/position/center/quality/90' | 20 | 'thumb' => 'http://img13.static.yhbimg.com/brandLogo/2015/08/26/15/02261f64c198cb4b181c5ef9e61f38f4b9.jpg?imageMogr2/thumbnail/150x70/extent/150x70/background/d2hpdGU=/position/center/quality/90' |
21 | ), | 21 | ), |
22 | + 'brand' => array( | ||
23 | + 'id' => 1, | ||
24 | + 'banner' => 'http://img10.static.yhbimg.com/brandBanner/2015/08/26/07/015af5d6ee626cb132cd9c436e896fae26.jpg?imageMogr2/crop/640x' | ||
25 | + ), | ||
22 | 'new' => array( | 26 | 'new' => array( |
23 | array( | 27 | array( |
24 | 'id' => 1, | 28 | 'id' => 1, |
-
Please register or login to post a comment