Authored by 王水玲

首页新人专享修改

... ... @@ -149,9 +149,13 @@ 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'
slideElement: 'li',
watchSlidesProgress : true,
watchSlidesVisibility : true,
});
}
... ...
.fresh-swiper {
position: relative;
height: 200rem / $pxConvertRem;
height: 200px;
overflow: hidden;
ul {
li {
... ... @@ -17,17 +17,17 @@
position: absolute;
left: 0;
right: 0;
bottom: 20rem / $pxConvertRem;
bottom: 20px;
text-align: center;
.pagination-inner {
display: inline-block;
span {
display: inline-block;
width: 14rem / $pxConvertRem;
height: 14rem / $pxConvertRem;
width: 14px;
height: 14px;
background: #fff;
opacity: 0.5;
margin: 0 (9rem / $pxConvertRem);
margin: 0 9px;
border-radius: 50%;
}
span.swiper-active-switch {
... ... @@ -46,21 +46,22 @@
li {
float:left;
width:240rem / $pxConvertRem;
margin: (20rem / $pxConvertRem) (10rem / $pxConvertRem) 0 (10rem / $pxConvertRem);
width:240px;
margin: 20px 10px 0 10px;
&:first-child {
margin-left: 20rem / $pxConvertRem;
margin-left: 20px;
}
&:last-child {
margin-right: 20rem / $pxConvertRem;
margin-right: 20px;
}
.img-box {
height: 100%;
height:320rem / $pxConvertRem;
height:320px;
text-align: center;
position: relative;
img {
width: 100%;
height: 100%;
... ... @@ -69,8 +70,6 @@
}
.fresh-info {
font-size: 22px / $pxConvertRem;
.fresh-name a{
display:block;
overflow: hidden;
... ... @@ -78,30 +77,34 @@
width: 100%;
white-space: nowrap;
color: #444;
line-height: 48rem / $pxConvertRem;
line-height: 48px;
font-size: 22px;
}
.cur-price {
color: #d62927;
font-size: 22px;
}
.old-price {
margin: 0 0 0 (10rem / $pxConvertRem);
margin: 0 0 0 10px;
color: #b0b0b0;
text-decoration: line-through;
font-size: 22px;
}
.fresh-icon {
background: #d62927;
width: 100rem / $pxConvertRem;
height: 33 / $pxConvertRem;
width: 100px;
height: 33px;
display: block;
margin: (8rem / $pxConvertRem) auto 0 auto;
margin: 8px auto 0 auto;
color: #fff;
text-align: center;
border-radius: 40rem / $pxConvertRem;
line-height: 37rem / $pxConvertRem;
border-radius: 40px;
line-height: 37px;
font-size:12px;
}
}
}
... ...
... ... @@ -17,6 +17,7 @@
@import "hot-category";
@import "home-header";
@import "thumb-row";
@import "fresh-only";
.mobile-container{
width: 100%;
... ...
... ... @@ -13,8 +13,9 @@
<li class="swiper-slide">
<div class="img-box">
<a href="{{url}}">
<img class="lazy" data-original="{{img}}" alt="">
<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>
... ... @@ -24,6 +25,5 @@
</li>
{{/ list}}
</ul>
</div>
</div>
</div>
\ No newline at end of file
... ...