Authored by ccbikai

为您优选优化

... ... @@ -17,7 +17,7 @@ use Plugin\Cache;
class Yohobuy
{
// /* 正式环境 */
/* 正式环境 */
// const API_URL = 'http://api2.open.yohobuy.com/';
// const API_URL2 = 'http://api.open.yohobuy.com/';
// const SERVICE_URL = 'http://service.api.yohobuy.com/';
... ...
... ... @@ -9,9 +9,10 @@ var Swiper = require('yoho.iswiper');
var recommendSwiper;
recommendSwiper = new Swiper('.swiper-recommend', {
// lazyLoading: true,
// lazyLoadingInPrevNext: true,
slidesPerView: 'auto'
recommendSwiper = new Swiper('#swiper-recommend', {
slidesPerView: 'auto',
grabCursor: true,
slideElement: 'li',
lazyLoading: true,
watchSlidesVisibility: true
});
\ No newline at end of file
... ...
... ... @@ -12,25 +12,28 @@
font-weight: bold;
}
.swiper-recommend {
.swiper-container {
padding: pxToRem(20px) 0;
width: 100%;
height: pxToRem(252px);
overflow: hidden;
.swiper-slider {
margin: 0 pxToRem(10px);
.swiper-slide {
padding: 0 pxToRem(10px);
float: left;
width: pxToRem(156px);
&:first-child {
margin-left: pxToRem(30px);
padding-left: pxToRem(30px);
}
&:last-child {
margin-right: pxToRem(30px);
padding-right: pxToRem(30px);
}
img {
width: pxToRem(156px);
max-width: none;
width: 100%;
height: pxToRem(208px);
}
}
}
... ... @@ -42,19 +45,21 @@
line-height: 1;
span {
display: block;
// chrome 最小支持12px, 设计图是 10px ,用CSS3变换
@include transform(scale(0.875));
}
.sale-price {
color: #d9134f;
margin-left: pxToRem(-10px);
}
.old-price {
position: absolute;
top: 0;
right: 0;
color: #ededed;
right: pxToRem(-6px);
color: #b0b0b0;
}
.no-price {
... ...
... ... @@ -95,7 +95,9 @@
<span class="iconfont num">&#xe604;</span>
</a>
</div>
{{#isLogin}}
{{> product/recommend-for-you}}
{{/isLogin}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
{{# recommendForYou}}
<div class="recommend-for-you">
<div class="title">为您优选新品</div>
<div class="swiper-recommend">
<ul class="swiper-wrapper">
<div id="swiper-recommend" class="swiper-container">
<ul class="swiper-wrapper swiper-wrapper-recommend">
{{#recommendList}}
<li class="swiper-slider">
<img class="img-box" src="{{thumb}}">
<li class="swiper-slide">
<img class="swiper-lazy img-box" data-src="{{thumb}}">
<div class="price">
<span class="sale-price {{^price}}no-price{{/price}}"{{salePrice}}</span>
{{#price}}<span class="old-price"{{.}}</span>{{/price}}
</div>
<div class="swiper-lazy-preloader"></div>
</li>
{{/recommendList}}
</ul>
... ...