Authored by xuqi

brand intro

@@ -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">&#xe623;</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,