'店铺优惠券调整'

@@ -20,7 +20,7 @@
     </div>
     {{!--shop-tab-nav: 首页 | 全部商品--}}
     <div class="tab">
-        <ul class="shop-tabs tab-navs" data-sticky>
+        <ul class="shop-tabs tab-navs">
             <li class="shop-tab-nav tab-nav active">
                 <span data-target="#red-index" data-trigger="tab" data-funHome>首页</span>
             </li>

-{{#couponData}}
-<div class="coupon-content">
-    <div class="swiper-wrapper">
-        {{#if couponsOne}}
-            {{#each coupons}}
-            <div class="swiper-slide coupon-big" data-id = "{{id}}">
-                <div class='coupon-left'>
+{{#if couponsOne}}
+    {{#each coupons}}
+    <div class="coupon-center coupon-big" data-id = "{{id}}">
+        <div class='coupon-left'>
+            <span class="coupon-left-price">
+                <span class="coupon-sign">¥</span>
+                <span class="coupon-price">{{money}}</span>
+            </span>
+            <span class="coupon-left-name">
+                {{name}}
+            </span>
+        </div>
+        <div class='coupon-right receive-btn'>
+            立即领取
+        </div>
+    </div><!--/coupon-big-->
+    {{/each}}
+{{^}}
+    {{#each coupons}}
+        <div class="coupon-center coupon-small" data-id = "{{id}}">
+            <div class='coupon-left'>
                 <span class="coupon-left-price">
                     <span class="coupon-sign">¥</span>
                     <span class="coupon-price">{{money}}</span>
                 </span>
                 <span class="coupon-left-name">
-                    {{name}}
+                   {{name}}
                 </span>
-                </div>
-                <div class='coupon-right receive-btn'>
-                    立即领取
-                </div>
-            </div><!--/coupon-big-->
-            {{/each}}
-        {{^}}
-            {{#each coupons}}
-                <div class="swiper-slide coupon-small" data-id = "{{id}}">
-                    <div class='coupon-left'>
-                        <span class="coupon-left-price">
-                            <span class="coupon-sign">¥</span>
-                            <span class="coupon-price">{{money}}</span>
-                        </span>
-                        <span class="coupon-left-name">
-                           {{name}}
-                        </span>
-                    </div>
-                    <div class='coupon-right receive-btn'>
-                        立即领取
-                    </div>
-                </div><!--/coupon-small-->
-            {{/each}}
-        {{/if}}
-    </div>
-</div>
-{{/couponData}}
\ No newline at end of file
+            </div>
+            <div class='coupon-right receive-btn'>
+                立即领取
+            </div>
+        </div><!--/coupon-small-->
+    {{/each}}
+{{/if}}
\ No newline at end of file

-<div class="coupon-content">
-<div class="swiper-wrapper">
-    {{#if shopCouponsOne}}
-        {{#each shopCoupons}}
-        <div class="swiper-slide coupon-big" data-id = "{{id}}">
+{{#if shopCouponsOne}}
+    {{#each shopCoupons}}
+    <div class="coupon-center coupon-big" data-id = "{{id}}">
+        <div class='coupon-left'>
+        <span class="coupon-left-price">
+            <span class="coupon-sign">¥</span>
+            <span class="coupon-price">{{money}}</span>
+        </span>
+        <span class="coupon-left-name">
+            {{name}}
+        </span>
+        </div>
+        {{#if status}}
+            <div class='coupon-right receive-btn'>
+                立即领取
+            </div>
+        {{^}}
+            <div class='coupon-right receive-btn'>
+                已领取
+            </div>
+        {{/if}}
+    </div><!--/coupon-big-->
+    {{/each}}
+{{^}}
+    {{#each shopCoupons}}
+        <div class="coupon-center coupon-small" data-id = "{{id}}">
             <div class='coupon-left'>
-            <span class="coupon-left-price">
-                <span class="coupon-sign">¥</span>
-                <span class="coupon-price">{{money}}</span>
-            </span>
-            <span class="coupon-left-name">
-                {{name}}
-            </span>
+                <span class="coupon-left-price">
+                    <span class="coupon-sign">¥</span>
+                    <span class="coupon-price">{{money}}</span>
+                </span>
+                <span class="coupon-left-name">
+                   {{name}}
+                </span>
             </div>
             {{#if status}}
                 <div class='coupon-right receive-btn'>
@@ -21,31 +42,6 @@
                     已领取
                 </div>
             {{/if}}
-        </div><!--/coupon-big-->
-        {{/each}}
-    {{^}}
-        {{#each shopCoupons}}
-            <div class="swiper-slide coupon-small" data-id = "{{id}}">
-                <div class='coupon-left'>
-                    <span class="coupon-left-price">
-                        <span class="coupon-sign">¥</span>
-                        <span class="coupon-price">{{money}}</span>
-                    </span>
-                    <span class="coupon-left-name">
-                       {{name}}
-                    </span>
-                </div>
-                {{#if status}}
-                    <div class='coupon-right receive-btn'>
-                        立即领取
-                    </div>
-                {{^}}
-                    <div class='coupon-right receive-btn'>
-                        已领取
-                    </div>
-                {{/if}}
-            </div><!--/coupon-small-->
-        {{/each}}
-    {{/if}}
-</div>
-</div>
\ No newline at end of file
+        </div><!--/coupon-small-->
+    {{/each}}
+{{/if}}

-{{#if coupons}}
-<div class="coupon-content">
-    <div class="swiper-wrapper">
-        {{#if couponsOne}}
-            {{#each coupons}}
-            <div class="swiper-slide coupon-big" data-id = "{{id}}">
-                <div class='coupon-left'>
+{{#if couponsOne}}
+    {{#each coupons}}
+    <div class="coupon-center coupon-big" data-id = "{{id}}">
+        <div class='coupon-left'>
+            <span class="coupon-left-price">
+                <span class="coupon-sign">¥</span>
+                <span class="coupon-price">{{money}}</span>
+            </span>
+            <span class="coupon-left-name">
+                {{name}}
+            </span>
+        </div>
+        {{#if status}}
+            <div class='coupon-right receive-btn'>
+                立即领取
+            </div>
+        {{^}}
+            <div class='coupon-right receive-btn'>
+                已领取
+            </div>
+        {{/if}}
+    </div><!--/coupon-big-->
+    {{/each}}
+{{^}}
+    {{#each coupons}}
+        <div class="coupon-center coupon-small" data-id = "{{id}}">
+            <div class='coupon-left'>
                 <span class="coupon-left-price">
                     <span class="coupon-sign">¥</span>
                     <span class="coupon-price">{{money}}</span>
                 </span>
                 <span class="coupon-left-name">
-                    {{name}}
+                   {{name}}
                 </span>
+            </div>
+            {{#if status}}
+                <div class='coupon-right receive-btn'>
+                    立即领取
                 </div>
-                {{#if status}}
-                    <div class='coupon-right receive-btn'>
-                        立即领取
-                    </div>
-                {{^}}
-                    <div class='coupon-right receive-btn'>
-                        已领取
-                    </div>
-                {{/if}}
-            </div><!--/coupon-big-->
-            {{/each}}
-        {{^}}
-            {{#each coupons}}
-                <div class="swiper-slide coupon-small" data-id = "{{id}}">
-                    <div class='coupon-left'>
-                        <span class="coupon-left-price">
-                            <span class="coupon-sign">¥</span>
-                            <span class="coupon-price">{{money}}</span>
-                        </span>
-                        <span class="coupon-left-name">
-                           {{name}}
-                        </span>
-                    </div>
-                    {{#if status}}
-                        <div class='coupon-right receive-btn'>
-                            立即领取
-                        </div>
-                    {{^}}
-                        <div class='coupon-right receive-btn'>
-                            已领取
-                        </div>
-                    {{/if}}
-                </div><!--/coupon-small-->
-            {{/each}}
-        {{/if}}
-    </div>
-</div>
-{{/if}}
\ No newline at end of file
+            {{^}}
+                <div class='coupon-right receive-btn'>
+                    已领取
+                </div>
+            {{/if}}
+        </div><!--/coupon-small-->
+    {{/each}}
+{{/if}}

 let $ = require('yoho-jquery'),
-    Swiper = require('yoho-swiper'),
     tip = require('plugin/tip');
 
 require('common');
@@ -42,11 +41,6 @@ shopCoupon = {
             },
             success: function(result) {
                 $('.coupon-group').html(that.common.couponTemplate(result));
-                new Swiper('.coupon-content', {
-                    slideElement: '.coupon-small',
-                    slidesPerView: 'auto',
-                    watchSlidesVisibility: true
-                });
                 that.userCoupon();
             }
         });
@@ -54,7 +48,7 @@ shopCoupon = {
     userCoupon: function() {
         let $self = this;
 
-        $('.coupon-content .receive-btn').closest('.swiper-slide').on('click', function() {
+        $('.coupon-group .receive-btn').closest('.coupon-center').on('click', function() {
             let that = this,
                 code = $(this).data('id') || '';
 

-.coupon-content {
+.shop-coupon {
+    overflow: auto;
+    width: 100%;
     color: #fff;
-    height: 180px;
-    overflow: hidden;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
 
     .coupon-big {
-        height: 120px;
-        width: 580px;
+        height: 140px;
+        width: 680px;
         background: resolve("product/coupon-big.png") no-repeat;
-        background-size: 580px 120px;
-        margin: 30px;
+        background-size: contain;
+        margin: 35px;
         position: relative;
+        display: inline-block;
+        white-space: normal;
 
         .coupon-left {
             position: absolute;
-            margin: 10px 0;
+            margin: 11px 0;
         }
 
         .coupon-left .coupon-left-price {
-            margin: 0 25px;
+            margin: 0 58px;
             float: left;
         }
 
         .coupon-left .coupon-left-price .coupon-sign {
             font-size: 50px;
+            float: left;
+            margin-top: 20px;
+            width: 35px;
         }
 
         .coupon-left .coupon-left-price .coupon-price {
             font-size: 72px;
+            float: left;
         }
 
         .coupon-left .coupon-left-name {
             font-size: 22px;
-            width: 250px;
-            height: 100px;
+            width: 322px;
+            height: 117px;
             float: left;
             align-items: center;
             display: flex;
@@ -41,47 +49,56 @@
         .coupon-right {
             width: 20px;
             font-size: 22px;
-            right: 5%;
+            right: 37px;
             position: absolute;
             height: inherit;
             line-height: 1.2em;
             align-items: center;
             display: flex;
-            transform: scale(0.88);
         }
     }
 
     .coupon-small {
-        height: 120px;
-        width: 245px;
+        height: 140px;
+        width: 287px;
         background: resolve("product/coupon-small.png") no-repeat;
-        background-size: 245px 120px;
-        margin: 30px 0 30px 30px;
+        background-size: contain;
+        margin: 35px 0 35px 35px;
         position: relative;
-        float: left;
-        display: table;
+        display: inline-block;
+        white-space: normal;
+
+        &:last-child {
+            margin-right: 35px;
+        }
 
         .coupon-left {
             position: absolute;
-            width: 165px;
+            width: 158px;
             overflow: hidden;
-            margin: 0 30px;
+            margin: 0 35px;
             height: inherit;
         }
 
         .coupon-left .coupon-left-price {
             width: inherit;
-            display: inline-block;
-            height: 60px;
+            height: 64px;
             overflow: hidden;
+            float: left;
         }
 
         .coupon-left .coupon-left-price .coupon-sign {
             font-size: 42px;
+            float: left;
+            width: 33px;
+            margin-top: 10px;
         }
 
         .coupon-left .coupon-left-price .coupon-price {
             font-size: 52px;
+            float: left;
+            width: 100px;
+            overflow: hidden;
         }
 
         .coupon-left .coupon-left-name {
@@ -91,19 +108,18 @@
             display: -webkit-box;
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 2;
-            margin-top: -6px;
+            float: left;
         }
 
         .coupon-right {
-            width: 20px;
+            width: 23px;
             font-size: 18px;
-            right: 7.5%;
+            right: 22px;
             position: absolute;
             height: inherit;
             line-height: 1.2em;
             align-items: center;
             display: flex;
-            transform: scale(0.88);
         }
     }
 }