bug fix

components/FontZoomMobile.vue

@@ -0,0 +1,51 @@
+<!-- 组件确定最大宽度时 可等比缩放组件 -->
+<template>
+    <div :style="{ width: `${zoomWidth}px` }">
+        <span class="zoom-wrap" ref="zoomDom" :style="{ transform: `scale(${zoom})` }">
+            <slot></slot>
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        width: {
+            type: String,
+            default: '375'
+        },
+        unColor: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+        return {
+            zoom: 1,
+            zoomWidth: 375
+        }
+    },
+    mounted() {
+        this.setFontZoom()
+    },
+    methods: {
+      setFontZoom() {
+        this.$nextTick(() => {
+          let offsetWidth = this.$refs.zoomDom.offsetWidth;
+          console.log(this.$refs)
+          console.log('refs', this.$refs.zoomDom.offsetWidth)
+          this.zoom = offsetWidth > this.width ? +this.width / offsetWidth : 1
+          this.zoomWidth = offsetWidth > this.width ? this.width : offsetWidth;
+        })
+      }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.zoom-wrap {
+    white-space: nowrap;
+    display: inline-block;
+    transform-origin: left center;
+}
+</style>

pages/payment/index.vue

@@ -104,7 +104,7 @@
                 <div>
                     <div
                         class="btn"
-                        :class="{ disabled: (Number(usdAmountData.rechargeAmountValue) > 0) || payDisabled }"
+                        :class="{ disable: (Number(usdAmountData.rechargeAmountValue) > 0) || payDisabled }"
                         @click="pay">
                         Pay Now
                     </div>
@@ -169,15 +169,15 @@
                     <div class="l">
                         <div class="neet">You Neet to Pay</div>
                         <div class="money">
-                            <FontZoom width="140" :unColor="true">
+                            <FontZoomMobile width="260" :unColor="true">
                                 {{salePlans.price}} {{ salePlans.currencyInfo.tokenSymbol }}
-                            </FontZoom>
+                            </FontZoomMobile>
                         </div>
                     </div>
                     <div>
                         <div
                             class="btn"
-                            :class="{ disabled: (Number(usdAmountData.rechargeAmountValue) > 0) || payDisabled }"
+                            :class="{ disable: (Number(usdAmountData.rechargeAmountValue) > 0) || payDisabled }"
                             @click="payToken">
                             Pay Now
                         </div>
@@ -222,15 +222,15 @@
                     <div class="l">
                         <div class="neet">You Neet to Pay</div>
                         <div class="money">
-                            <FontZoom width="140" :unColor="true">
+                            <FontZoomMobile width="260" :unColor="true">
                                 {{ Number(usdAmountData.rechargeAmountValue) > 0 ? usdAmountData.rechargeAmountValue : usdAmountData.orderAmountValue }} {{ salePlans.currencyInfo.tokenSymbol }}
-                            </FontZoom>
+                            </FontZoomMobile>
                         </div>
                     </div>
                     <div>
                         <div
                             class="btn"
-                            :class="{ disabled: (Number(usdAmountData.rechargeAmountValue) > 0) || payDisabled }"
+                            :class="{ disable: (Number(usdAmountData.rechargeAmountValue) > 0) || payDisabled }"
                             @click="payUSD">
                             Pay Now
                         </div>
@@ -279,7 +279,7 @@
                     </div>
                     <button
                         class="enter"
-                        :class="{ disabled: !redeemNext }"
+                        :class="{ disable: !redeemNext }"
                         @click="redeemPayment">
                         Redeem
                     </button>
@@ -291,6 +291,7 @@
 
 <script>
 import FontZoom from '../../components/FontZoom.vue';
+import FontZoomMobile from '../../components/FontZoomMobile.vue';
 import QrCode from '../../components/qrcode.vue';
 import { postRequest } from '../../http/index';
 import { maskUrl } from '../../utils/help';
@@ -329,6 +330,7 @@ export default {
     components: {
         QrCode,
         FontZoom,
+        FontZoomMobile,
     },
     mounted() {
         this.saleInfo()
@@ -995,7 +997,7 @@ body,
             font-weight: 500;
             border-radius: 5px;
             background: #1D9BF0;
-            &.disabled {
+            &.disable {
                 background: #DEDEDE;
             }
         }
@@ -1259,7 +1261,7 @@ body,
         line-height: 21px;
         border-radius: 46px;
         background: #1D9BF0;
-        &.disabled {
+        &.disable {
             background: #D2D2D2;
         }
     }