为您优选优化

@@ -17,7 +17,7 @@ use Plugin\Cache;
 class Yohobuy
 class Yohobuy
 {
 {
     
     
-//   /* 正式环境 */
+    /* 正式环境 */
     // const API_URL = 'http://api2.open.yohobuy.com/';
     // const API_URL = 'http://api2.open.yohobuy.com/';
     // const API_URL2 = 'http://api.open.yohobuy.com/';
     // const API_URL2 = 'http://api.open.yohobuy.com/';
     // const SERVICE_URL = 'http://service.api.yohobuy.com/';
     // const SERVICE_URL = 'http://service.api.yohobuy.com/';

@@ -9,9 +9,10 @@ var Swiper = require('yoho.iswiper');
 
 
 var recommendSwiper;
 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
 });
 });

@@ -12,25 +12,28 @@
         font-weight: bold;
         font-weight: bold;
     }
     }
 
 
-    .swiper-recommend {
+    .swiper-container {
         padding: pxToRem(20px) 0;
         padding: pxToRem(20px) 0;
         width: 100%;
         width: 100%;
+        height: pxToRem(252px);
         overflow: hidden;
         overflow: hidden;
 
 
-        .swiper-slider {
-            margin: 0 pxToRem(10px);
+        .swiper-slide {
+            padding: 0 pxToRem(10px);
+            float: left;
+            width: pxToRem(156px);
 
 
             &:first-child {
             &:first-child {
-                margin-left: pxToRem(30px);
+                padding-left: pxToRem(30px);
             }
             }
 
 
             &:last-child {
             &:last-child {
-                margin-right: pxToRem(30px);
+                padding-right: pxToRem(30px);
             }
             }
 
 
             img {
             img {
-                width: pxToRem(156px);
-                max-width: none;
+                width: 100%;
+                height: pxToRem(208px);
             }
             }
         }
         }
     }
     }
@@ -42,19 +45,21 @@
         line-height: 1;
         line-height: 1;
 
 
         span {
         span {
+            display: block;
             // chrome  最小支持12px, 设计图是 10px ,用CSS3变换
             // chrome  最小支持12px, 设计图是 10px ,用CSS3变换
             @include transform(scale(0.875));
             @include transform(scale(0.875));
         }
         }
 
 
         .sale-price {
         .sale-price {
             color: #d9134f;
             color: #d9134f;
+            margin-left: pxToRem(-10px);
         }
         }
 
 
         .old-price {
         .old-price {
             position: absolute;
             position: absolute;
             top: 0;
             top: 0;
-            right: 0;
-            color: #ededed;
+            right: pxToRem(-6px);
+            color: #b0b0b0;
         }
         }
 
 
         .no-price {
         .no-price {

@@ -95,7 +95,9 @@
                 <span class="iconfont num">&#xe604;</span>
                 <span class="iconfont num">&#xe604;</span>
             </a>
             </a>
         </div>
         </div>
-        
+
+        {{#isLogin}}
         {{> product/recommend-for-you}}
         {{> product/recommend-for-you}}
+        {{/isLogin}}
     </div>
     </div>
 {{> layout/footer}}
 {{> layout/footer}}

 {{# recommendForYou}}
 {{# recommendForYou}}
     <div class="recommend-for-you">
     <div class="recommend-for-you">
         <div class="title">为您优选新品</div>
         <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}}
                 {{#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">
                     <div class="price">
                         <span class="sale-price {{^price}}no-price{{/price}}">¥{{salePrice}}</span>
                         <span class="sale-price {{^price}}no-price{{/price}}">¥{{salePrice}}</span>
                         {{#price}}<span class="old-price">¥{{.}}</span>{{/price}}
                         {{#price}}<span class="old-price">¥{{.}}</span>{{/price}}
                     </div>
                     </div>
+                    <div class="swiper-lazy-preloader"></div>
                 </li>
                 </li>
                 {{/recommendList}}
                 {{/recommendList}}
             </ul>
             </ul>