商品封面图样式

@@ -2,6 +2,25 @@
     {{# friendInviteData}}
     <div class="banner">
         <span class="title">您的好友{{nickname}}<br><b>邀请您来有货玩潮流</b></span>
+        <span class="ico-left"></span>
+        <span class="ico-right"></span>
+        <div class="avatar-wrap">
+            <div class="avatar-swiper avatar">
+                <ul class="clearfix swiper-wrapper">
+                    <li class="order-good swiper-slide">
+                        <a href="">
+                            <img class="" src="http://img11.static.yhbimg.com/articleTags/2016/06/21/16/012496ccd3dd8e1e11af82a3654ed8ebec.jpg?imageView2/2/w/180/h/180/q/90">
+                        </a>
+                    <li>
+                    <li class="order-good swiper-slide">
+                        <a href="">
+                            <img class="" src="http://img11.static.yhbimg.com/articleTags/2016/06/21/16/012496ccd3dd8e1e11af82a3654ed8ebec.jpg?imageView2/2/w/180/h/180/q/90">
+                        </a>
+                    <li>
+                </ul>
+            </div>
+        </div>
+
         <div class="tip-text">
             <img src="{{image2 imgSrc w=951 h=522 q=100}}">
         </div>

 'use strict';
 require('activity/friend-invite.page.css');
 let PRDID = [];
+let Swiper = require('yoho-swiper');
+let $avatarWrap = $('.avatar-wrap');
+let bannerLen = $('.avatar-wrap').find('.swiper-slide').length;
 
 $('.good-list').find('.goods-info').each(function() {
     PRDID.push($(this).data('good-id'));
@@ -31,3 +34,17 @@ $('.goods-info').click(function() {
         }, true);
     }
 });
+
+if (bannerLen > 0) {
+    new Swiper($avatarWrap.find('.avatar-swiper')[0], {
+        lazyLoading: true,
+        lazyLoadingInPrevNextAmount: 3,
+        initialSlide: 1,
+        centeredSlides: true,
+        slidesPerView: 'auto',
+        loopedSlides: bannerLen,
+        watchSlidesProgress: true,
+        watchSlidesVisibility: true,
+        spaceBetween: 10
+    });
+}

+@import "layout/swiper";
 .friend-invite-page {
     background-image: resolve("activity/expand-new/back.png");
     background-size: 100%;
@@ -6,14 +7,14 @@
 
     .banner {
         width: 655px;
-        height: 621px;
         margin: 0 0 25px 47px;
-        background-image: resolve("activity/expand-new/friend-tip.png");
-        background-size: 100%;
+        background-image: resolve("activity/expand-new/friend-tip.jpg");
+        background-size: 100% 100%;
         background-repeat: no-repeat;
         text-align: center;
         padding-top: 50px;
         position: relative;
+        padding-bottom: 70px;
 
         .title {
             display: inline-block;
@@ -26,6 +27,28 @@
             }
         }
 
+        .ico-left {
+            display: inline-block;
+            width: 99px;
+            height: 44px;
+            position: absolute;
+            left: 44px;
+            top: 102px;
+            background-image: resolve("activity/expand-new/tip-left.png");
+            background-size: 100%;
+        }
+
+        .ico-right {
+            display: inline-block;
+            width: 79px;
+            height: 36px;
+            position: absolute;
+            right: 62px;
+            top: 92px;
+            background-image: resolve("activity/expand-new/tip-right.png");
+            background-size: 100%;
+        }
+
         .tip-text {
             width: 628px;
             margin: 10px;
@@ -37,8 +60,42 @@
             height: 80px;
             display: block;
             position: absolute;
-            bottom: 0;
+            bottom: -20px;
             left: 160px;
+            background-image: resolve("activity/expand-new/go-btn.png");
+            background-size: 100%;
+            background-repeat: no-repeat;
+        }
+    }
+
+    .avatar-wrap {
+        height: 350px;
+        margin: 15px 0;
+
+        .avatar-swiper {
+            overflow: hidden;
+            margin: 0 25px;
+
+            .swiper-wrapper {
+                white-space: nowrap;
+                padding-top: 10px;
+                padding-bottom: 20px;
+            }
+
+            .swiper-slide {
+                float: left;
+                width: 240px;
+                height: 320px;
+                box-shadow: 3px 3px  3px 0 #aaa;
+            }
+
+            .swiper-slide-active {
+                /*width: 250px;
+                height: 333px;*/
+                transform: scale(1.1);
+                transition: 300ms;
+                /*top: -5px;*/
+            }
         }
     }