修改样式

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

@@ -93,11 +93,18 @@
           </div>
           <div
             v-if="[0, 1, 4].includes(couponDetail.couponStatus)"
-            :class="['use-coupon', btnList[couponDetail.couponStatus].class]"
+            class="use-coupon"
             @click="goUse"
           >
-            <span>{{ btnList[couponDetail.couponStatus].label }}</span>
-            <div v-if="couponDetail.couponStatus == 1" class="arrow" />
+            <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]"
@@ -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,23 +385,34 @@ export default {
         }
       }
       .use-coupon {
-        border-radius: 16px;
-        font-weight: 400;
-        font-size: 13px;
-        z-index: 10;
-        color: #ffffff;
-        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%);
+        align-items: center;
+        justify-content: center;
+
+        &-item {
+          display: flex;
+          align-items: baseline;
+          border-radius: 16px;
+          font-weight: 400;
+          font-size: 13px;
+          z-index: 10;
+          color: #ffffff;
+          line-height: 13px;
+          padding: 7px 10px;
+          margin-right: 11px;
+          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 {