1

src/views/choicePart/index.vue

@@ -2,7 +2,7 @@
   <div class="choicepart-container">
     <navbar />
     <div class="choicepart-wrapper">
-      <div class="choicepart-box" id="choicepartBox" :style="'transform:scale('+scale+');width:1574px;height:538px;'">
+      <div class="choicepart-box" id="choicepartBox" :style="'transform:scale('+scale+');width:1574px;height:538px;'" v-show="showItem">
       <div class="choicepart-line1">
         <div
           v-for="(item, index) in menuArr1"
@@ -37,7 +37,7 @@
   </div>
 </template>
 <script>
-import Navbar from './components/Navbar.vue'
+import Navbar from './components/Navbar'
 import { debounce } from '@/utils/debounce'
 export default {
   components: { Navbar },
@@ -154,6 +154,7 @@ export default {
           }
         }
       ],
+      showItem: false
     }
   },
   // computed:{
@@ -217,6 +218,9 @@ export default {
       }
     },
     resetSize() {
+      let _this = this
+      _this.showItem = false
+      _this.loading = true
       let choicepartBox = document.querySelector('#choicepartBox')
       let rw = parseFloat(window.innerWidth)
       let rh = parseFloat(window.innerHeight)
@@ -224,8 +228,16 @@ export default {
       let bh = parseFloat(choicepartBox.style.height)
       let wx = 0.82/(bw / rw)
       let hx = 0.56/(bh / rh)
-      this.scale = wx > hx ? hx : wx
+      _this.scale = wx > hx ? hx : wx
+      setTimeout(_this.showItemFun, 700)
+    },
+    showItemFun() {
+      this.loading = false
+      this.showItem = true
     }
+  },
+  beforeDestroy() {
+    this.showItem = false
   }
 }
 </script>
@@ -244,7 +256,7 @@ export default {
     align-items: center;
   }
   .choicepart-box {
-    // border: 1px solid red;
+    // transition: all 0.3s linear;
     .choicepart-line1 {
       width: 100%;
       margin-bottom: 80px;