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>

components/MobileGuidePage.vue

@@ -11,58 +11,60 @@
             </div>
         </div>
         <div class="welcome">
-            <!-- 普通红包 -->
-            <template v-if="playType === 1">
-                <template v-if="postBizData.rewardType === 1">
-                    <div>
-                        <span>You Won</span>
-                        <img class="icon" :src="postBizData.currencyIconPath" />
-                        <span class="special">{{postBizData.amountValue}} {{postBizData.currencySymbol}}</span>
-                        <span class="special">(${{postBizData.usdAmountValue}})</span>
-                    </div>
-                    <div>
-                        <span>in the Giveaway!</span>
-                    </div>
+            <FontZoomMobile width="300" style="margin:auto;">
+                <!-- 普通红包 -->
+                <template v-if="playType === 1">
+                    <template v-if="postBizData.rewardType === 1">
+                        <div>
+                            <span>You Won</span>
+                            <img class="icon" :src="postBizData.currencyIconPath" />
+                            <span class="special">{{postBizData.amountValue}} {{postBizData.currencySymbol}}</span>
+                            <span class="special">(${{postBizData.usdAmountValue}})</span>
+                        </div>
+                        <div>
+                            <span>in the Giveaway!</span>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div>
+                            <span>You Won</span>
+                            <span class="special">{{postBizData.customizedReward}}</span>
+                        </div>
+                        <div>
+                            <span>in the Giveaway!</span>
+                        </div>
+                    </template>
                 </template>
-                <template v-else>
-                    <div>
-                        <span>You Won</span>
-                        <span class="special">{{postBizData.customizedReward}}</span>
-                    </div>
+
+                <!-- 抽奖红包 -->
+                <template v-if="playType === 2">
                     <div>
-                        <span>in the Giveaway!</span>
+                        <span>You are gifted an entries to earn</span>
                     </div>
+                    <template v-if="postBizData.rewardType === 1">
+                        <div>
+                            <img class="icon" :src="postBizData.currencyIconPath" />
+                            <span class="special">{{postBizData.amountValue}} {{postBizData.currencySymbol}}</span>
+                            <span class="special">(${{postBizData.usdAmountValue}})</span>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div>
+                            <span class="special">{{postBizData.customizedReward}}</span>
+                        </div>
+                    </template>
                 </template>
-            </template>
 
-            <!-- 抽奖红包 -->
-            <template v-if="playType === 2">
-                <div>
-                    <span>You are gifted an entries to earn</span>
-                </div>
-                <template v-if="postBizData.rewardType === 1">
+                <!-- 夺宝红包 -->
+                <template v-if="playType === 3">
                     <div>
-                        <img class="icon" :src="postBizData.currencyIconPath" />
-                        <span class="special">{{postBizData.amountValue}} {{postBizData.currencySymbol}}</span>
-                        <span class="special">(${{postBizData.usdAmountValue}})</span>
+                        <span>Complete the quest to win up to</span>
                     </div>
-                </template>
-                <template v-else>
                     <div>
-                        <span class="special">{{postBizData.customizedReward}}</span>
+                        <span class="special">${{detail.upGainAmountValue}} for you two!</span>
                     </div>
                 </template>
-            </template>
-
-            <!-- 夺宝红包 -->
-            <template v-if="playType === 3">
-                <div>
-                    <span>Complete the quest to win up to</span>
-                </div>
-                <div>
-                    <span class="special">${{detail.upGainAmountValue}} for you two!</span>
-                </div>
-            </template>
+            </FontZoomMobile>
         </div>
         <div class="footer">
             <div class="item">
@@ -92,7 +94,7 @@
 <script>
 import Report from '../log-center/log';
 import { getMid } from '../utils/help';
-import FontZoom from './FontZoom';
+import FontZoomMobile from './FontZoomMobile';
 
 export default {
     name: 'mobileGuidePage',
@@ -111,7 +113,7 @@ export default {
 		},
     },
     components: {
-        FontZoom,
+        FontZoomMobile,
     },
     data() {
         return {}