Authored by 梁志锋

Merge branch 'develop/wap' of http://git.dev.yoho.cn/web/yohobuy into develop/wap

... ... @@ -14,7 +14,8 @@ var $ = require('jquery'),
recommendSwiper,
hotBrandsSwiper,
trendTopicSwiper,
goodsSwiper;
goodsSwiper,
freshSwiper;
var start = 0,
swiperClass,
... ... @@ -145,6 +146,17 @@ if ($('.trend-topic-swiper').find('li').size() > 1) {
});
}
// 新人专享轮播
if ($('.fresh-list-swiper').find('li').size() > 1) {
freshSwiper = new Swiper('.fresh-list-swiper', {
lazyLoading: true,
lazyLoadingInPrevNext: true,
grabCursor: true,
slidesPerView: 'auto',
slideElement: 'li'
});
}
// 潮流上装/经典裤装等轮播
$('.category-swiper').each(function(i, index) {
swiperClass = 'category-swiper' + i;
... ...
@import "header-download", "banner-top","banner-center","banner-bottom", "side-nav", "floor-header", "hot-brands", "fine-brands", "creative-life", "plus-star", "maybe-like",
"icons-enter","trendsetter-collocation",
"trend-topics","goods-category","hot-brands", "hot-category", "home-header", "thumb-row";
"trend-topics","goods-category","hot-brands", "hot-category", "home-header", "thumb-row", "fresh-only";
.mobile-container{
width: 100%;
... ...
.fresh-swiper {
position: relative;
height: 200px;
overflow: hidden;
ul {
li {
float: left;
width: 100%;
a, img {
display: block;
width: 100%;
height: 100%;
}
}
}
.swiper-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
text-align: center;
.pagination-inner {
display: inline-block;
span {
display: inline-block;
width: 14px;
height: 14px;
background: #fff;
opacity: 0.5;
margin: 0 9px;
border-radius: 50%;
}
span.swiper-active-switch {
opacity: 1;
}
}
}
}
.fresh-list-swiper {
overflow: hidden;
ul {
box-sizing: border-box;
}
li {
float:left;
width:240px;
margin: 20px 10px 0 10px;
&:first-child {
margin-left: 20px;
}
&:last-child {
margin-right: 20px;
}
.img-box {
height: 100%;
height:320px;
text-align: center;
position: relative;
img {
width: 100%;
height: 100%;
vertical-align: middle;
}
}
.fresh-info {
.fresh-name a{
display:block;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
color: #444;
line-height: 48px;
font-size: 22px;
}
.cur-price {
color: #d62927;
font-size: 22px;
}
.old-price {
margin: 0 0 0 10px;
color: #b0b0b0;
text-decoration: line-through;
font-size: 22px;
}
.fresh-icon {
background: #d62927;
width: 100px;
height: 33px;
display: block;
margin: 8px auto 0 auto;
color: #fff;
text-align: center;
border-radius: 40px;
line-height: 37px;
font-size:12px;
}
}
}
}
\ No newline at end of file
... ...
... ... @@ -17,6 +17,7 @@
@import "hot-category";
@import "home-header";
@import "thumb-row";
@import "fresh-only";
.mobile-container{
width: 100%;
... ...
... ... @@ -39,6 +39,10 @@
{{# goodsCategory}}
{{> home/goods_category}}
{{/ goodsCategory}}
{{! 新人专享}}
{{# freshOnly}}
{{> home/fresh_only}}
{{/ freshOnly}}
{{! 新入住品牌/品味生活/创意生活}}
{{# creativeLife}}
{{> home/creative_life}}
... ...
{{> home/floor_header_more}}
<div class="fresh-only">
{{# big_image}}
<div class="fresh-swiper">
<a href="{{url}}">
<img class="lazy" data-original="{{img}}" alt="{{title}}">
</a>
</div>
{{/ big_image}}
<div class="fresh-list-swiper">
<ul class="clearfix swiper-wrapper">
{{# list}}
<li class="swiper-slide">
<div class="img-box">
<a href="{{url}}">
<img class="swiper-lazy" data-src="{{img}}" alt="">
</a>
<div class="swiper-lazy-preloader"></div>
</div>
<div class="fresh-info">
<p class="fresh-name"><a href="{{url}}">{{title}}</a></p>
<p class="price"><span class="cur-price">{{curPrice}}</span><span class="old-price">{{oldPrice}}<span></p>
<span class="fresh-icon">新人价</span>
</div>
</li>
{{/ list}}
</ul>
</div>
</div>
\ No newline at end of file
... ...