Feat(优惠券)：UI调整（缺顶部优惠公式）

components/Coupons.vue

@@ -1,41 +1,45 @@
 <template>
   <view class="components-coupons">
+    <view class="image-wrap">
       <image
         :src="data.image"
         class="coupons__cover"
-      mode="widthFix"
       />
-    <view class="coupons__section flex jc-between ai-center">
-      <view>有效期至：
-        <text>{{ data.endTime }}</text>
-      </view>
-      <!-- status: 0-未使用，1-已使用，2-已过期 -->
-      <view
-        v-if="data.status === 2"
-        class="coupons__tag coupons__tag-expire"
-      >已到期</view>
-      <view
-        v-if="data.status === 0 && !radioModel"
-        class="coupons__tag coupons__tag-expire"
-      >不可用</view>
-      <view @click="selectCoupon">
+      <view @click="selectCoupon" class="check-radio" :class="{'v12-primary': data.checked}">
         <radio
           v-if="radioModel && data.status === 0"
           :value="data.id"
           :checked="data.checked"
-          color="#FF564A"
+          color="#C52733"
+          borderColor="#C52733"
         />
       </view>
     </view>
+    <view class="coupons__section flex jc-between ai-center">
+      <view>
+        <text class="v12-dark-text v12-font-weight-500 v12-font-28">有效期至：</text>
+        <text class='v12-primary-text v12-font-weight-500 v12-font-28'>{{ data.endTime }}</text>
+      </view>
+      <!-- status: 0-未使用，1-已使用，2-已过期 -->
+      <view
+        v-if="data.status === 2"
+        class="coupons__tag coupons__tag-expire v12-font-24"
+      >已到期</view>
+      <view
+        v-if="data.status === 0 && !radioModel"
+        class="coupons__tag coupons__tag-expire  v12-font-24"
+      >不可用</view>
+      
+    </view>
     <view class="coupons__rules">
-      <view class="coupons__rules-title" @click="changeRules()">使用规则
+      <view class="coupons__rules-title v12-font-22" @click="changeRules()">使用规则
         <image :class="{'open':isOpen}" :src="webUrl + '/20231125220409665027.png'" mode="scaleToFill"/>
       </view>
       <view
         :class="isOpen ? 'auto-height' : ''"
         class="coupon-html"
       >
-        <rich-text :nodes="data.description" />
+        <rich-text class='v12-font-22 v12-dark1-text' :nodes="data.description" />
       </view>
     </view>
   </view>
@@ -81,20 +85,45 @@ export default {
 </script>
 
 <style scoped lang="less">
+.check-radio{
+  position: absolute;
+  bottom: 10px;
+  right: 16px;
+  height: 32rpx;
+  width: 32rpx;
+  border-radius: 50%;
+  border: 2px solid #C52733;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  radio {
+    margin-right: -6px;
+  }
+}
+.image-wrap{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30rpx 0;
+  border-radius: 20rpx;
+  position: relative
+}
 .components-coupons {
   width: 686rpx;
   box-sizing: border-box;
-  border: 2rpx solid #FF564A;
   border-radius: 16rpx;
   overflow: hidden;
-
+  background: #fff;
   image {
     vertical-align: middle;
   }
 
   .coupons__cover {
-    width: 100%;
-    height: auto;
+    width: 600rpx;
+    height: 160rpx;
+    border-radius: 20rpx;
   }
 
   .coupons__section {
@@ -147,7 +176,6 @@ export default {
       }
     }
     .coupon-html {
-      height: 80rpx;
       overflow: hidden;
       transition: all .3s;
       &.auto-height {

components/CouponsPopup.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="popup-coupons">
     <view class="popup-box">
-      <view class="popup-title bold tc">选择优惠券</view>
+      <view class="popup-title bold tc">优惠详情</view>
       <SubSection
         :current="current"
         :can-use="canUse"
@@ -105,6 +105,7 @@ export default {
 
 <style scoped lang="less">
 .popup-coupons {
+  background: #F0F0F0;
   .popup-box {
     padding: 34rpx 32rpx;
   }