From c9e2e6005cd137530e768fc3b98536f7f270a3ff Mon Sep 17 00:00:00 2001
From: modendeveloper <modendeveloper@163.com>
Date: Mon, 9 Sep 2024 22:47:08 +0800
Subject: [PATCH] =?UTF-8?q?Feat(=E4=BC=98=E6=83=A0=E5=88=B8)=EF=BC=9AUI?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=EF=BC=88=E5=AE=8C=E6=88=90=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/CouponsPopup.vue |  3 ++-
 components/SubSection.vue   | 20 ++++++++++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/components/CouponsPopup.vue b/components/CouponsPopup.vue
index 5e24d48..c3f82c1 100644
--- a/components/CouponsPopup.vue
+++ b/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;
   }
diff --git a/components/SubSection.vue b/components/SubSection.vue
index 1a4c867..fb5ce01 100644
--- a/components/SubSection.vue
+++ b/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: 4rpx;
+  border-radius: 20rpx;
   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;
-    color: #FFFFFF;
+    position: absolute;
+    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>
\ No newline at end of file