chenchao / YOHOBUYPC · Commits

Go to a project

Authored by lore-w
Commit c3917c648b9d58c20bdd73b38777b4e867de12f6 1 parent d99837ba

商品列表部分

Inline Side-by-side
Showing 4 changed files with 217 additions and 8 deletions
1 -<div class="good-info" data-skn="{{skn}}"> 1 +<div class="good-info {{#if goodListLast}}good-list-{{goodListLast}}{{/if}}" data-skn="{{skn}}">
2 <div class="tag-container clearfix"> 2 <div class="tag-container clearfix">
3 {{# tags}} 3 {{# tags}}
4 {{# isNew}} 4 {{# isNew}}
5 - <p class="good-tag new-tag">NEW</p> 5 + <span class="good-tag new-tag">NEW</span>
6 {{/ isNew}} 6 {{/ isNew}}
7 {{# isReNew}} 7 {{# isReNew}}
8 - <p class="good-tag renew-tag">再到着</p> 8 + <span class="good-tag renew-tag">再到着</span>
9 {{/ isReNew}} 9 {{/ isReNew}}
10 {{# isSale}} 10 {{# isSale}}
11 - <p class="good-tag sale-tag">SALE</p> 11 + <span class="good-tag sale-tag">SALE</span>
12 {{/ isSale}} 12 {{/ isSale}}
13 {{# isNewFestival}} 13 {{# isNewFestival}}
14 - <p class="good-tag new-festival-tag">新品节</p> 14 + <span class="good-tag new-festival-tag">新品节</span>
15 {{/ isNewFestival}} 15 {{/ isNewFestival}}
16 {{# isLimit}} 16 {{# isLimit}}
17 - <p class="good-tag limit-tag">限量商品</p> 17 + <span class="good-tag limit-tag">限量商品</span>
18 {{/ isLimit}} 18 {{/ isLimit}}
19 {{# isYearEndPromotion}} 19 {{# isYearEndPromotion}}
20 - <p class="good-tag yep-tag">年终大促</p> 20 + <span class="good-tag yep-tag">年终大促</span>
21 {{/ isYearEndPromotion}} 21 {{/ isYearEndPromotion}}
22 {{# isYearMidPromotion}} 22 {{# isYearMidPromotion}}
23 - <p class="good-tag ymp-tag">年中热促</p> 23 + <span class="good-tag ymp-tag">年中热促</span>
24 {{/ isYearMidPromotion}} 24 {{/ isYearMidPromotion}}
25 {{/ tags}} 25 {{/ tags}}
26 </div> 26 </div>
@@ -24,6 +24,10 @@ var $brandDefault = $('.brand .default'), @@ -24,6 +24,10 @@ var $brandDefault = $('.brand .default'),
24 24
25 var $brandMoreTxt, $brandMoreIcon; 25 var $brandMoreTxt, $brandMoreIcon;
26 26
  27 +//商品相关变量
  28 +var $goodsContainer = $('.goods-container'),
  29 + $goodItem = $goodsContainer.find('.good-info');
  30 +
27 //价格相关变量 31 //价格相关变量
28 var $udPrice = $('.ud-price-range'), 32 var $udPrice = $('.ud-price-range'),
29 interReg = /^\d+$/, 33 interReg = /^\d+$/,
@@ -266,4 +270,51 @@ $('.senior-sub').on('click', '.multi-select', function() { @@ -266,4 +270,51 @@ $('.senior-sub').on('click', '.multi-select', function() {
266 }); 270 });
267 271
268 uriLoc($sub.data('attr'), val); 272 uriLoc($sub.data('attr'), val);
  273 +});
  274 +
  275 +/*
  276 + * Description: 商品列表移入效果
  277 + * Added by wangchenglong at 2015/12/1
  278 + */
  279 +
  280 +//todo
  281 +$goodItem.hover(function() {
  282 + var $cloneStr,
  283 + $goodItemWrapper,
  284 + activeIndex,
  285 + X,
  286 + left,
  287 + Y,
  288 + top,
  289 + colNum = 5,
  290 + itemW = 222,
  291 + itemH = 400,
  292 + itemMr = 10,
  293 + itemMb = 35;
  294 +
  295 + $('.good-item-wrapper').remove();
  296 +
  297 + activeIndex = $(this).index() + 1;
  298 +
  299 + X = (activeIndex % colNum) === 0 ? colNum : activeIndex % colNum;
  300 + Y = Math.ceil(activeIndex / colNum);
  301 + left = (X - 1) * (itemW + itemMr) + 15 - 21;
  302 + top = (Y - 1) * (itemH + itemMb) - 19;
  303 +
  304 + $cloneStr = $(this).clone();
  305 + $goodItemWrapper =
  306 + '<div class="good-item-wrapper" style="left:' + left + 'px;top:' + top + 'px;position:absolute;">' +
  307 + '<div class="good-select-color">' +
  308 + '</div>' +
  309 + '</div>';
  310 +
  311 +
  312 +
  313 + $goodsContainer.append($goodItemWrapper);
  314 +
  315 + $('.good-item-wrapper').prepend($cloneStr);
  316 +
  317 +}, function() {
  318 +
  319 + //todo
269 }); 320 });
@@ -277,4 +277,98 @@ @@ -277,4 +277,98 @@
277 .multi .checkbox { 277 .multi .checkbox {
278 display: inline; 278 display: inline;
279 } 279 }
  280 +
  281 + /*商品列表
  282 + *added by wangchenglong at 2015.12.1
  283 + */
  284 + .goods-container {
  285 + height: auto;
  286 + padding: 0 15px;
  287 + margin-top: 25px;
  288 + position: relative;
  289 +
  290 + /*测试*/
  291 + width: 1150px;
  292 +
  293 + .good-info {
  294 + height: 400px;//todo
  295 + margin-bottom: 35px;
  296 + width: 222px;
  297 + margin-right: 10px;
  298 + float: left;
  299 +
  300 + &.good-list-five {
  301 + margin-right: 0;
  302 + }
  303 +
  304 + /*标签*/
  305 + .tag-container {
  306 + font-size: 12px;
  307 + height: 22px;
  308 + line-height: 22px;
  309 +
  310 + .good-tag {
  311 + padding: 0 7px;
  312 + display: block;
  313 + float: left;
  314 + margin-right: 3px;
  315 +
  316 + &:nth-last-of-type(1) {
  317 + margin-right: 0;
  318 + }
  319 +
  320 + &.new-tag {
  321 + background: #78dc7d;
  322 + color: #fff;
  323 + }
  324 + &.yep-tag, .sale-tag {
  325 + background: #ff565b;
  326 + color: #fff;
  327 + }
  328 + &.limit-tag {
  329 + color: #4e4e4e;
  330 + border: 1px solid #4e4e4e;
  331 + }
  332 + }
  333 + }
  334 +
  335 + /*图片*/
  336 + .good-detail-img {
  337 + width: 100%;
  338 + height: 300px;
  339 +
  340 + .good-thumb, img.lazy {
  341 + display: block;
  342 + overflow: hidden;
  343 + width: 100%;
  344 + height: 100%;
  345 + }
  346 + }
  347 +
  348 + /*文本*/
  349 + .good-detail-text {
  350 + color: #222;
  351 + font-size: 12px;
  352 + text-align: center;
  353 +
  354 + >a {
  355 + margin-top: 16px;
  356 + line-height: 1.5;
  357 + display: block;
  358 + }
  359 +
  360 + >.price {
  361 + margin-top: 10px;
  362 + }
  363 + }
  364 + }
  365 +
  366 + /*弹层*/
  367 + .good-item-wrapper {
  368 + border: 1px solid red;
  369 + padding-left: 20px;
  370 + padding-top: 18px;
  371 + }
  372 +
  373 + }
280 } 374 }
@@ -238,6 +238,70 @@ class IndexController extends AbstractAction @@ -238,6 +238,70 @@ class IndexController extends AbstractAction
238 ) 238 )
239 ) 239 )
240 ) 240 )
  241 + ),
  242 + 'goods' => array(
  243 + 0 => array(
  244 + 'tags' => array(
  245 + 'isNew' => true,
  246 + 'isYearEndPromotion' => true
  247 + ),
  248 + 'url' => 'http://adidas.yohobuy.com/?gender=1,3',
  249 + 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  250 + 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
  251 + 'salePrice' => '899',
  252 + 'goodListLast' => false
  253 + ),
  254 + 1 => array(
  255 + 'tags' => array(
  256 + 'isNew' => true,
  257 + 'isReNew' => true
  258 + ),
  259 + 'url' => 'http://adidas.yohobuy.com/?gender=1,3',
  260 + 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  261 + 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
  262 + 'salePrice' => '899',
  263 + 'goodListLast' => false
  264 + ),
  265 + 2 => array(
  266 + 'tags' => array(
  267 + 'isNew' => true,
  268 + 'isReNew' => true
  269 + ),
  270 + 'url' => 'http://adidas.yohobuy.com/?gender=1,3',
  271 + 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  272 + 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
  273 + 'salePrice' => '899',
  274 + 'goodListLast' => false
  275 + ),
  276 + 3 => array(
  277 + 'url' => 'http://adidas.yohobuy.com/?gender=1,3',
  278 + 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  279 + 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
  280 + 'salePrice' => '899',
  281 + 'goodListLast' => false
  282 + ),
  283 + 4 => array(
  284 + 'tags' => array(
  285 + 'isNew' => true,
  286 + 'isReNew' => true
  287 + ),
  288 + 'url' => 'http://adidas.yohobuy.com/?gender=1,3',
  289 + 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  290 + 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
  291 + 'salePrice' => '899',
  292 + 'goodListLast' => 'five'
  293 + ),
  294 + 5 => array(
  295 + 'tags' => array(
  296 + 'isNew' => true,
  297 + 'isReNew' => true
  298 + ),
  299 + 'url' => 'http://adidas.yohobuy.com/?gender=1,3',
  300 + 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  301 + 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
  302 + 'salePrice' => '899',
  303 + 'goodListLast' => false
  304 + )
241 ) 305 )
242 ); 306 );
243 $this->_view->display('list', $data); 307 $this->_view->display('list', $data);