fe / YOHOBUYPC · Commits

Go to a project

Authored by biao
Commit adb32ce89222c46bcc8b7c4ffee1168dc3ff8012 1 parent 73544d74

sale页面加入列表

Inline Side-by-side
Showing 6 changed files with 491 additions and 0 deletions
... ... @@ -6,5 +6,6 @@
{{> sale/activity-entry}}
{{> sale/brand-sale}}
{{> sale/sale-box}}
</div>
{{> layout/footer}}
... ...
<div class="home-page">
{{#sale-category}}
<div class="floor-header clearfix">
<h2 class="floor-title">{{title}}</h2>
</div>
<ul class="sale-nav">
{{#navItem}}
<li class="{{#vip}}green{{/vip}} {{#incompleteSize}}yellow{{/incompleteSize}} {{#newDiscount}}red{{/newDiscount}} {{#if @first}}active first{{/if}} {{#if @last}}last{{/if}}">aa</li>
{{/navItem}}
</ul>
<div class="commodity-list">
<ul class="clearfix">
{{#each saleImage}}
<li class="commodity-item">
<a href="{{href}}" target= "_blank"><div class="commodity-img">
{{# tip}}
<i class="top">{{.}}</i>
{{/ tip}}
<img class="lazy" data-original="{{img}}"/></div>
<div class="commodity-content">
<p class="commodity-name">{{name}}</p>
<p class="commodity-price"><span>¥{{price}}</span></p>
</div>
</a>
</li>
{{/each}}
</ul>
</div>
{{/sale-category}}
</div>
... ...
/**
* sale页js打包入口文件
* @author： zhaobiao<bill.zhao@yoho.cn>
* @date: 2016/01/18
*/
require('./index');
... ...
... ... @@ -5,9 +5,15 @@
*/
var $ = require('yoho.jquery'),
$navItem = $('.sale-nav li'),
lazyLoad = require('yoho.lazyload');
require('../common/slider');
lazyLoad($('img.lazy'));
$('.slide-container').slider();
$navItem.on('click', function() {
$(this).siblings('.active').removeClass('active');
$(this).addClass('active');
});
... ...
... ... @@ -137,4 +137,233 @@
}
}
}
.sale-nav li {
float: left;
width: 20%;
height: 40px;
line-height: 40px;
background-color: #e0e0e0;
text-align: center;
background-color: #f5f5f5;
color: #6d6d6d;
margin-bottom: 10px;
}
.sale-nav li.active {
color: #fff;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.sale-nav li.green.active {
color: #fff;
background-image: image-url('sale/navactive-green-middle.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.sale-nav li.green.first.active {
background-image: image-url('sale/navactive-green-first.png');
}
.sale-nav li.green.last.active {
background-image: image-url('sale/navactive-green-last.png');
}
.sale-nav li.yellow.active {
color: #fff;
background-image: image-url('sale/navactive-yellow-middle.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.sale-nav li.yellow.first.active {
background-image: image-url('sale/navactive-yellow-first.png');
}
.sale-nav li.yellow.last.active {
background-image: image-url('sale/navactive-yellow-last.png');
}
.sale-nav li.red.active {
color: #fff;
background-image: image-url('sale/navactive-red-middle.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.sale-nav li.red.first.active {
background-image: image-url('sale/navactive-red-first.png');
}
.sale-nav li.red.last.active {
background-image: image-url('sale/navactive-red-last.png');
}
@media screen and (min-width: 1150px) {
.floor-header {
margin:80px 0 40px
}
.floor-header .header-navs li {
padding: 1px 15px
}
}
.commodity-list ul {
width: 1004px
}
.commodity-item {
float: left;
width: 241px;
margin: 0 10px 0 0
}
.commodity-tag {
height: 20px
}
.commodity-tag .good-tag {
display: block;
float: left;
margin-right: 5px;
height: 20px;
font-size: 12px;
text-align: center;
line-height: 20px;
box-sizing: border-box
}
.commodity-tag .good-tag:last-child {
margin-right: 0
}
.commodity-tag .new-tag {
width: 43px;
background-color: #78dc7e;
color: #fff
}
.commodity-tag .renew-tag {
width: 53px;
background-color: #78dc7e;
color: #fff
}
.commodity-tag .sale-tag {
width: 43px;
background-color: #ff575c;
color: #fff
}
.commodity-tag .yohood-tag {
width: 64px;
background: url('../assets/images/yohood.png?1450667948') no-repeat;
background-size: 100% 100%
}
.commodity-tag .limit-tag {
width: 60px;
line-height: 18px;
border: 1px solid #000;
color: #000
}
.commodity-tag .yep-tag,.commodity-tag .ymp-tag {
width: 64px;
background-color: #ff575c;
color: #fff
}
.commodity-img {
position: relative;
height: 323px;
text-align: center
}
.commodity-img img {
width: 100%;
height: 100%;
vertical-align: middle
}
.commodity-img .top-tag {
position: absolute;
width: 60px;
height: 60px;
top: 10px;
right: 10px;
line-height: 60px;
background: url('../assets/images/furniture/top-tag-bg.png?1450667948');
font-size: 20px;
color: #fff
}
.commodity-img .few-tag {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background: #ffac5b;
color: #fff;
line-height: 20px;
text-align: center;
font-size: 12px
}
.commodity-content {
padding: 10px 0 0 0;
height: 69px;
overflow: hidden
}
.commodity-content .commodity-name {
font-size: 12px;
color: #000;
line-height: 18px;
text-align: center
}
.commodity-content .commodity-price {
position: relative;
margin: 3px 0 0 0;
text-align: center;
line-height: 20px;
color: #000
}
.commodity-content .commodity-price span {
display: inline-block;
font-size: 12px
}
.commodity-content .commodity-price .price-sale {
margin-left: 10px;
padding-left: 10px;
width: 36px;
height: 20px;
line-height: 20px;
background: url('../assets/images/furniture/sale-tag-bg.png?1450667948');
color: #fff
}
@media screen and (min-width: 1150px) {
.commodity-list ul {
width:1160px
}
.commodity-item {
width: 280px
}
.commodity-img {
height: 374px
}
.commodity-content {
padding: 14px 0 0 0;
height: 77px
}
}
}
... ...
... ... @@ -152,6 +152,224 @@ class Sale1Controller extends WebAction
'title' => '2015春夏海量大促！'
)
)
),
'sale-category' => array(
array(
'title' => 'VIP会员专享 ',
'vip' => true,
'navItem' => array(
array(
'name' => '12',
),
array(
'name' => '12',
),
array(
'name' => '12',
),
array(
'name' => '12',
),
array(
'name' => '12',
),
),
'saleImage'=> array(
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
)
)
),
array(
'title' => '断码区域',
'incompleteSize' => true,
'navItem' => array(
array(
'name' => '12',
),
array(
'name' => '12',
),
array(
'name' => '12',
),
array(
'name' => '12',
),
array(
'name' => '12',
),
),
'saleImage'=> array(
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
)
)
),
array(
'title' => '最新降价',
'newDiscount' => true,
'navItem' => array(
array(
'name' => '12',
),
array(
'name' => '12',
),
array(
'name' => '12',
),
array(
'name' => '12',
),
array(
'name' => '12',
),
),
'saleImage'=> array(
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
),
array(
'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
'name' => 'test',
'price' => '888'
)
)
)
)
);
$this->setWebNavHeader();
... ...