Authored by 王水玲

首页新人专享模块添加

... ... @@ -14,12 +14,13 @@ var $ = require('jquery'),
recommendSwiper,
hotBrandsSwiper,
trendTopicSwiper,
goodsSwiper;
goodsSwiper,
freshSwiper;
var start = 0,
swiperClass,
$logotrans = $('.home-header .logo'),
$choseArea = $('.side-nav ul'),
$choseArea = $('.side-nav ul'),
openSideNav = false,
isen = true;
... ... @@ -145,6 +146,15 @@ if ($('.trend-topic-swiper').find('li').size() > 1) {
});
}
// 新人专享轮播
if ($('.fresh-list-swiper').find('li').size() > 1) {
freshSwiper = new Swiper('.fresh-list-swiper', {
grabCursor: true,
slidesPerView: 'auto',
slideElement: 'li'
});
}
// 潮流上装/经典裤装等轮播
$('.category-swiper').each(function(i, index) {
swiperClass = 'category-swiper' + i;
... ...
.fresh-swiper {
position: relative;
height: 200rem / $pxConvertRem;
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: 20rem / $pxConvertRem;
text-align: center;
.pagination-inner {
display: inline-block;
span {
display: inline-block;
width: 14rem / $pxConvertRem;
height: 14rem / $pxConvertRem;
background: #fff;
opacity: 0.5;
margin: 0 (9rem / $pxConvertRem);
border-radius: 50%;
}
span.swiper-active-switch {
opacity: 1;
}
}
}
}
.fresh-list-swiper {
overflow: hidden;
ul {
box-sizing: border-box;
}
li {
float:left;
width:240rem / $pxConvertRem;
margin: (20rem / $pxConvertRem) (10rem / $pxConvertRem) 0 (10rem / $pxConvertRem);
&:first-child {
margin-left: 20rem / $pxConvertRem;
}
&:last-child {
margin-right: 20rem / $pxConvertRem;
}
.img-box {
height: 100%;
height:320rem / $pxConvertRem;
text-align: center;
img {
width: 100%;
height: 100%;
vertical-align: middle;
}
}
.fresh-info {
font-size: 22px / $pxConvertRem;
.fresh-name a{
display:block;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
color: #444;
line-height: 48rem / $pxConvertRem;
}
.cur-price {
color: #d62927;
}
.old-price {
margin: 0 0 0 (10rem / $pxConvertRem);
color: #b0b0b0;
text-decoration: line-through;
}
.fresh-icon {
background: #d62927;
width: 100rem / $pxConvertRem;
height: 33 / $pxConvertRem;
display: block;
margin: (8rem / $pxConvertRem) auto 0 auto;
color: #fff;
text-align: center;
border-radius: 40rem / $pxConvertRem;
line-height: 37rem / $pxConvertRem;
}
}
}
}
\ No newline at end of file
... ...
@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%;
... ...
... ... @@ -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="lazy" data-original="{{img}}" alt="">
</a>
</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
... ...