fe / 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
<div class="good-info" data-skn="{{skn}}">
<div class="good-info {{#if goodListLast}}good-list-{{goodListLast}}{{/if}}" data-skn="{{skn}}">
<div class="tag-container clearfix">
{{# tags}}
{{# isNew}}
<p class="good-tag new-tag">NEW</p>
<span class="good-tag new-tag">NEW</span>
{{/ isNew}}
{{# isReNew}}
<p class="good-tag renew-tag">再到着</p>
<span class="good-tag renew-tag">再到着</span>
{{/ isReNew}}
{{# isSale}}
<p class="good-tag sale-tag">SALE</p>
<span class="good-tag sale-tag">SALE</span>
{{/ isSale}}
{{# isNewFestival}}
<p class="good-tag new-festival-tag">新品节</p>
<span class="good-tag new-festival-tag">新品节</span>
{{/ isNewFestival}}
{{# isLimit}}
<p class="good-tag limit-tag">限量商品</p>
<span class="good-tag limit-tag">限量商品</span>
{{/ isLimit}}
{{# isYearEndPromotion}}
<p class="good-tag yep-tag">年终大促</p>
<span class="good-tag yep-tag">年终大促</span>
{{/ isYearEndPromotion}}
{{# isYearMidPromotion}}
<p class="good-tag ymp-tag">年中热促</p>
<span class="good-tag ymp-tag">年中热促</span>
{{/ isYearMidPromotion}}
{{/ tags}}
</div>
... ...
... ... @@ -24,6 +24,10 @@ var $brandDefault = $('.brand .default'),
var $brandMoreTxt, $brandMoreIcon;
//商品相关变量
var $goodsContainer = $('.goods-container'),
$goodItem = $goodsContainer.find('.good-info');
//价格相关变量
var $udPrice = $('.ud-price-range'),
interReg = /^\d+$/,
... ... @@ -266,4 +270,51 @@ $('.senior-sub').on('click', '.multi-select', function() {
});
uriLoc($sub.data('attr'), val);
});
/*
* Description: 商品列表移入效果
* Added by wangchenglong at 2015/12/1
*/
//todo
$goodItem.hover(function() {
var $cloneStr,
$goodItemWrapper,
activeIndex,
X,
left,
Y,
top,
colNum = 5,
itemW = 222,
itemH = 400,
itemMr = 10,
itemMb = 35;
$('.good-item-wrapper').remove();
activeIndex = $(this).index() + 1;
X = (activeIndex % colNum) === 0 ? colNum : activeIndex % colNum;
Y = Math.ceil(activeIndex / colNum);
left = (X - 1) * (itemW + itemMr) + 15 - 21;
top = (Y - 1) * (itemH + itemMb) - 19;
$cloneStr = $(this).clone();
$goodItemWrapper =
'<div class="good-item-wrapper" style="left:' + left + 'px;top:' + top + 'px;position:absolute;">' +
'<div class="good-select-color">' +
'</div>' +
'</div>';
$goodsContainer.append($goodItemWrapper);
$('.good-item-wrapper').prepend($cloneStr);
}, function() {
//todo
});
\ No newline at end of file
... ...
... ... @@ -277,4 +277,98 @@
.multi .checkbox {
display: inline;
}
/*商品列表
*added by wangchenglong at 2015.12.1
*/
.goods-container {
height: auto;
padding: 0 15px;
margin-top: 25px;
position: relative;
/*测试*/
width: 1150px;
.good-info {
height: 400px;//todo
margin-bottom: 35px;
width: 222px;
margin-right: 10px;
float: left;
&.good-list-five {
margin-right: 0;
}
/*标签*/
.tag-container {
font-size: 12px;
height: 22px;
line-height: 22px;
.good-tag {
padding: 0 7px;
display: block;
float: left;
margin-right: 3px;
&:nth-last-of-type(1) {
margin-right: 0;
}
&.new-tag {
background: #78dc7d;
color: #fff;
}
&.yep-tag, .sale-tag {
background: #ff565b;
color: #fff;
}
&.limit-tag {
color: #4e4e4e;
border: 1px solid #4e4e4e;
}
}
}
/*图片*/
.good-detail-img {
width: 100%;
height: 300px;
.good-thumb, img.lazy {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
}
}
/*文本*/
.good-detail-text {
color: #222;
font-size: 12px;
text-align: center;
>a {
margin-top: 16px;
line-height: 1.5;
display: block;
}
>.price {
margin-top: 10px;
}
}
}
/*弹层*/
.good-item-wrapper {
border: 1px solid red;
padding-left: 20px;
padding-top: 18px;
}
}
}
\ No newline at end of file
... ...
... ... @@ -238,6 +238,70 @@ class IndexController extends AbstractAction
)
)
)
),
'goods' => array(
0 => array(
'tags' => array(
'isNew' => true,
'isYearEndPromotion' => true
),
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899',
'goodListLast' => false
),
1 => array(
'tags' => array(
'isNew' => true,
'isReNew' => true
),
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899',
'goodListLast' => false
),
2 => array(
'tags' => array(
'isNew' => true,
'isReNew' => true
),
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899',
'goodListLast' => false
),
3 => array(
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899',
'goodListLast' => false
),
4 => array(
'tags' => array(
'isNew' => true,
'isReNew' => true
),
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899',
'goodListLast' => 'five'
),
5 => array(
'tags' => array(
'isNew' => true,
'isReNew' => true
),
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899',
'goodListLast' => false
)
)
);
$this->_view->display('list', $data);
... ...