修改样式

src/views/coupon/components/coupon-item.vue

@@ -93,12 +93,19 @@
           </div>
           <div
             v-if="[0, 1, 4].includes(couponDetail.couponStatus)"
-            :class="['use-coupon', btnList[couponDetail.couponStatus].class]"
+            class="use-coupon"
             @click="goUse"
+          >
+            <div
+              :class="[
+                'use-coupon-item',
+                btnList[couponDetail.couponStatus].class,
+              ]"
             >
               <span>{{ btnList[couponDetail.couponStatus].label }}</span>
               <div v-if="couponDetail.couponStatus == 1" class="arrow" />
             </div>
+          </div>
           <img
             v-if="imgList[couponDetail.couponStatus]"
             class="use-image"
@@ -336,15 +343,11 @@ export default {
         padding-top: 18px;
         padding-left: 10px;
         padding-bottom: 18px;
-        height: 100px;
-        flex: 1;
-        position: relative;
+        display: flex;
+        // height: 100px;
+        // flex: 1;
+        // position: relative;
         .pos-center {
-          position: absolute;
-          top: 50%;
-          width: 58%;
-          margin-top: 0;
-          transform: translate(0, -50%);
         }
         .right-coupon {
           font-weight: 500;
@@ -382,6 +385,13 @@ export default {
         }
       }
       .use-coupon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &-item {
+          display: flex;
+          align-items: baseline;
           border-radius: 16px;
           font-weight: 400;
           font-size: 13px;
@@ -390,15 +400,19 @@ export default {
           line-height: 13px;
           padding: 7px 10px;
           margin-right: 11px;
-        display: flex;
-        align-items: baseline;
-        position: absolute;
-        -ms-flex-align: baseline;
-        right: 0;
-        top: 50%;
-        -webkit-transform: translate(0, -50%);
-        -ms-transform: translate(0, -50%);
-        transform: translate(0, -50%);
+          span {
+            display: block;
+            /* width: 100%; */
+            width: 39px;
+          }
+        }
+        // position: absolute;
+        // -ms-flex-align: baseline;
+        // right: 0;
+        // top: 50%;
+        // -webkit-transform: translate(0, -50%);
+        // -ms-transform: translate(0, -50%);
+        // transform: translate(0, -50%);
       }
     }
     .use-image {