coupon-new-style

@@ -20,7 +20,11 @@
         {{#usableCouponsList}}
             {{#each ./coupons}}
                 <div class="coupon{{#isEqualOr is_selected_support 'N'}} no-support-selected{{/isEqualOr}}" data-code="{{coupon_code}}">
-                    <div class="coupon-left">
+                    <div class="coupon-left{{#isEqualOr is_selected_support 'Y'}}
+                        {{#isEqualOr coupon_type '1'}} coupon-left-activity{{/isEqualOr}}
+                        {{#isEqualOr coupon_type '5'}} coupon-left-freight{{/isEqualOr}}
+                        {{#isEqualOr coupon_type '6'}} coupon-left-shop{{/isEqualOr}}
+                    {{/isEqualOr}}">
                         <p class="value">
                             {{#isEqualOr coupon_type '1' '3' '6'}}¥{{/isEqualOr}}
                             <span>{{coupon_value_str}}</span>
@@ -54,7 +58,9 @@
             <div class="coupon-list-type">{{./name}}</div>
             {{#each ./coupons}}
                 <div class="coupon">
-                    <div class="coupon-left">
+                    <div class="coupon-left{{#isEqualOr coupon_type '1'}} coupon-left-activity{{/isEqualOr}}
+                    {{#isEqualOr coupon_type '5'}} coupon-left-freight{{/isEqualOr}}
+                    {{#isEqualOr coupon_type '6'}} coupon-left-shop{{/isEqualOr}}">
                         <p class="value">
                             {{#isEqualOr coupon_type '1' '3' '6'}}¥{{/isEqualOr}}
                             <span>{{coupon_value_str}}</span>

@@ -110,11 +110,13 @@ body {
             .coupon-left {
                 width: 200px;
                 height: 200px;
-                background-image: resolve("home/coupon/bg_left@2x.png");
+                background-image: resolve("home/coupon/overtime.png");
                 background-size: 100% 100%;
                 float: left;
-                text-align: center;
-                padding-top: 32px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: column;
             }
 
             .coupon-left > p {
@@ -122,17 +124,43 @@ body {
                 font-size: 24px;
                 font-weight: 300;
 
-                &.value > span {
+                > span {
                     font-size: 60px;
                     font-weight: 600;
                 }
             }
 
+            .coupon-left-activity {
+                background-image: resolve("home/coupon/activity.png");
+            }
+
+            .coupon-left-freight {
+                background-image: resolve("home/coupon/freight.png");
+
+                > p {
+                    color: #000;
+                }
+
+                > p > span {
+                    font-size: 48px;
+                    font-weight: 600;
+                }
+            }
+
+            .coupon-left-shop {
+                background-image: resolve("home/coupon/shop.png");
+
+                > p {
+                    color: #ffa72e;
+                }
+            }
+
             .coupon-right {
                 width: 510px;
                 height: 200px;
-                background-image: resolve("home/coupon/bg_right@2x.png");
-                background-size: 100% 100%;
+                background-color: #fff;
+                border-top-right-radius: 8px;
+                border-bottom-right-radius: 8px;
                 float: right;
                 padding: 22px;
                 font-size: 22px;