ui调整

src/pages-store/pages/store/components/coupon-popup.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import {useConfigStore} from "@/store";
 import {receiveCouponApi} from "@/pages-user/service";
+import couponBg from '@img-store/coupon.png'
+import couponBg2 from '@img-store/coupon-2.png'
+import couponRightBg from '@img-store/coupon-right.png'
+import couponRightBg2 from '@img-store/coupon-right-2.png'
 const configStore = useConfigStore()
 
 const { t, locale } = useI18n()
@@ -102,12 +106,16 @@ function couponBenefitText(item: any) {
           :key="item.id"
           class="coupon-card"
         >
+          <image
+            class="coupon-card-bg"
+            :src="item.userCouponVo ? couponBg2 : couponBg"
+            mode="scaleToFill"
+          />
           <view class="coupon-card-body">
-            <!-- 左侧信息 -->
             <view class="coupon-card-info">
               <view class="coupon-card-amount">
-                <text class="coupon-amount-value">{{ couponAmountText(item) }}</text>
-                <text class="coupon-amount-label">{{ t('pages-store.store.couponOff') }}</text>
+                <text class="coupon-amount-value" :class="{ 'coupon-amount-value--disabled': item.userCouponVo }">{{ couponAmountText(item) }}</text>
+                <text class="coupon-amount-label" :class="{ 'coupon-amount-label--disabled': item.userCouponVo }">{{ t('pages-store.store.couponOff') }}</text>
               </view>
               <view class="coupon-card-desc">
                 {{ item.nameZh }}
@@ -121,21 +129,21 @@ function couponBenefitText(item: any) {
                 <text>{{ t('pages-store.store.get') }} {{ couponBenefitText(item) }}</text>
               </view>
             </view>
-
-            <!-- 右侧按钮 -->
-            <view
-              v-if="item.userCouponVo"
-              class="coupon-claim-btn coupon-claim-btn--disabled"
-            >
-              {{ t('pages-store.store.claimed') }}
-            </view>
-            <view
-              v-else
-              class="coupon-claim-btn"
-              @click="confirmCoupon(item)"
-            >
-              {{ t('pages-store.store.claimNow') }}
-            </view>
+          </view>
+          <view
+            v-if="item.userCouponVo"
+            class="coupon-claim-wrap"
+          >
+            <image class="coupon-claim-bg" :src="couponRightBg2" mode="scaleToFill" />
+            <text class="coupon-claim-text coupon-claim-text--disabled">{{ t('pages-store.store.claimed') }}</text>
+          </view>
+          <view
+            v-else
+            class="coupon-claim-wrap"
+            @click="confirmCoupon(item)"
+          >
+            <image class="coupon-claim-bg" :src="couponRightBg" mode="scaleToFill" />
+            <text class="coupon-claim-text">{{ t('pages-store.store.claimNow') }}</text>
           </view>
         </view>
       </scroll-view>
@@ -157,27 +165,31 @@ function couponBenefitText(item: any) {
 }
 
 .coupon-card {
-  background: #fff;
-  border-radius: 16rpx;
-  border: 2rpx solid #F5D0B8;
+  position: relative;
   margin-bottom: 24rpx;
-  overflow: hidden;
 
   &:last-child {
     margin-bottom: 0;
   }
 }
 
+.coupon-card-bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
 .coupon-card-body {
-  display: flex;
-  align-items: center;
-  padding: 32rpx;
+  position: relative;
+  z-index: 1;
+  padding: 32rpx 180rpx 32rpx 32rpx;
 }
 
 .coupon-card-info {
-  flex: 1;
   min-width: 0;
-  padding-right: 24rpx;
 }
 
 .coupon-card-amount {
@@ -191,6 +203,10 @@ function couponBenefitText(item: any) {
   line-height: 56rpx;
   font-weight: bold;
   color: #CE7138;
+
+  &--disabled {
+    color: #BFBFBF;
+  }
 }
 
 .coupon-amount-label {
@@ -199,6 +215,10 @@ function couponBenefitText(item: any) {
   color: #CE7138;
   font-weight: 500;
   margin-left: 10rpx;
+
+  &--disabled {
+    color: #BFBFBF;
+  }
 }
 
 .coupon-card-desc {
@@ -223,22 +243,37 @@ function couponBenefitText(item: any) {
   margin-right: 8rpx;
 }
 
-.coupon-claim-btn {
-  flex-shrink: 0;
-  min-width: 140rpx;
-  height: 68rpx;
-  line-height: 68rpx;
-  text-align: center;
-  background: #CE7138;
+.coupon-claim-wrap {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 168rpx;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.coupon-claim-bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.coupon-claim-text {
+  position: relative;
+  z-index: 1;
   color: #fff;
   font-size: 26rpx;
-  font-weight: 500;
-  border-radius: 12rpx;
-  padding: 0 24rpx;
+  // font-weight: 600;
+  text-align: center;
 
   &--disabled {
-    background: #E6E6E6;
-    color: #999;
+    opacity: 0.6;
   }
 }
 </style>