coupon-style-ok

 <div class="yoho-page select-coupon-page my-coupon-page">
-    <form id="new-coupon" method="POST" action="">
-        <input type="text" name="couponCode" value="" placeholder="输入优惠券码">
-        <button type="submit" class="submit">兑换</button>
-    </form>
+    <div class="coupon-page-title">
+        <form id="new-coupon" method="POST" action="">
+            <input type="text" name="couponCode" value="" placeholder="输入优惠券码">
+            <button type="submit" class="submit">兑换</button>
+        </form>
+        <div class="coupon-use-manual">
+            说明：普通优惠券可以与运费券同时使用
+        </div>
+        <div class="coupon-tab">
+            <ul class="tab-navs" data-sticky>
+                <li class="tab-nav pull-left active">
+                    <span data-target="#red-index" data-trigger="tab" data-funHome>可用优惠券</span>
+                </li>
+                <em class="pull-left">|</em>
+                <li class="tab-nav pull-left">
+                    <span data-target="#all-goods" data-trigger="tab" data-funGetNewGoods>不可用优惠券</span>
+                </li>
+            </ul>
+        </div>
+    </div>
     <div class="coupon-wrap">
         <div id="coupon-list" class="coupon-list"></div>
         <div class="not-avaliable-coupon-line hide">不可使用的优惠券</div>
@@ -17,3 +33,7 @@
     </div>
 </div>
 </script>
+
+<div class="use-coupon-btn-group">
+
+</div>

@@ -7,21 +7,64 @@
     height: 0;
 }
 
+@define-extend page-padding {
+    padding-left: 30px;
+    padding-right: 30px;
+}
+
 $couponRadius: 8px;
 $rosyPink: #f06a6b;
 $backgroudColor: #f2f2f2;
 $fontColor: #444;
+$fontGrayLight: #b0b0b0;
+$fontSizeSmall: 16px;
 
 .select-coupon-page {
     background-color: $backgroudColor;
-    padding-top: 40px;
+    margin-top: 40px;
+
+    .coupon-page-title {
+        background-color: #fff;
+    }
+
+    .coupon-use-manual {
+        @extend page-padding;
+
+        color: $fontGrayLight;
+        font-size: $fontSizeSmall;
+        width: 100%;
+        margin-top: 30px;
+    }
+
+    .coupon-tab {
+        @extend page-padding;
+
+        height: 60px;
+        line-height: 60px;
+        margin-top: 30px;
+
+        li {
+            width: 285px;
+            text-align: center;
+            color: $fontGrayLight;
+
+            &.active {
+                color: $fontColor;
+            }
+        }
+
+        em {
+            color: $fontGrayLight;
+            width: 10px;
+        }
+    }
 
     .coupon-list {
         .coupon {
             border-radius: $couponRadius;
             background-color: #fff;
             margin: 30px;
-            height: 212px;
+            height: 200px;
 
             .coupon-title {
                 border-top-left-radius: $couponRadius;
@@ -49,26 +92,38 @@ $fontColor: #444;
                     color: $fontColor;
                 }
 
+                .content-left > .requirement {
+                    text-align: center;
+                    font-size: $fontSizeSmall;
+                    color: $fontColor;
+                }
+
                 .content-middle {
-                    width: 350px;
+                    width: 360px;
+                    margin-left: 20px;
                 }
 
                 .content-right {
                     width: 40px;
+                    padding-top: 36px;
+                }
+
+                .content-right > .checkbox {
+                    font-size: 28px;
+                    color: $fontGrayLight;
                 }
             }
         }
     }
 
     #new-coupon {
-        margin-bottom: 30px;
         padding-left: 30px;
         padding-right: 30px;
         font-size: 24px;
 
         input {
             padding: 0 12px;
-            width: 384px;
+            width: 400px;
             height: 80px;
             border: 1px solid #b0b0b0;
             border-radius: 0.1rem;