Feat(优惠券)：UI调整（完成）

components/CouponsPopup.vue

@@ -33,7 +33,7 @@
     <view
       v-if="current === 0"
       :class="{ 'btn-disabled': current === 1 }"
-      class="btn-done bold flex jc-center ai-center"
+      class="btn-done bold flex jc-center ai-center v12-primary"
       @click="setCoupon"
     >
       确定
@@ -119,6 +119,7 @@ export default {
 
   .list-box {
     max-height: 640rpx;
+    height: 640rpx;
     margin-top: 32rpx;
     overflow-y: auto;
   }

components/SubSection.vue

@@ -38,14 +38,15 @@ export default {
 
 <template>
   <view class="sub-section flex">
-    <view class="sub-section__item flex jc-center ai-center" :class="{'sub-section__active':index===0}"
+    <view class="sub-section__item flex jc-center ai-center" 
           @click="change(0)">
       可使用 ({{ canUse }})
     </view>
-    <view class="sub-section__item flex jc-center ai-center" :class="{'sub-section__active':index===1}"
+    <view class="sub-section__item flex jc-center ai-center" 
           @click="change(1)">
       {{radioModel?'不可用':'已到期'}} ({{ notUse }})
     </view>
+    <view class="sub-section__active" :style="{left: (80 + index * 360) + 'rpx'}"></view>
   </view>
 </template>
 
@@ -54,20 +55,27 @@ export default {
   width: 686rpx;
   height: 80rpx;
   box-sizing: border-box;
-  border: 2rpx solid #FF564A;
+  border-radius: 20rpx;
-  border-radius: 4rpx;
   font-size: 32rpx;
+  overflow: hidden;
+  position: relative;
 
   .sub-section__item {
     width: 50%;
     background: #FFFFFF;
     color: #333333;
     font-weight: bold;
+    position: relative;
   }
 
   .sub-section__active {
-    background: #FF564A;
+    position: absolute;
-    color: #FFFFFF;
+    width: 140rpx;
+    height: 8rpx;
+    background: linear-gradient(to right, #C52733 0%, rgba(211,92,101,0.91) 54%, rgba(255,255,255,0.62) 100%);
+    border-radius: 0rpx 0rpx 26rpx 26rpx;
+    bottom: (80 - 34) / 2 * 1rpx;
+    transition: left ease-in-out 0.3s;
   }
 }
 </style>