weitiao

src/components/SubNavigation.vue

@@ -4,6 +4,7 @@
     <p class="title">{{ title }}</p>
     <img class="menu" :src="Menu" v-if="!drawer" @click="openDrawer" />
     <div class="menu" v-else></div>
+  </div>
   <div class="modal_drawer" v-if="drawer" @click="hidePanel">
     <img :src="Close" class="close" alt="" @click="drawer = false" />
     <div class="content" id="sub_navi_tab">
@@ -20,7 +21,6 @@
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup>
@@ -66,13 +66,15 @@ const backPage = () => {
   align-items: center;
   justify-content: space-between;
   padding: 16px 18px;
-  box-sizing: border-box;
   background: #efefef;
-  z-index: 222;
+  z-index: 999;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
+  width: 100vw;
+  overflow: hidden;
+  box-sizing: border-box;
   .back_icon {
     width: 8px;
     height: 15px;
@@ -87,7 +89,8 @@ const backPage = () => {
     width: 18px;
     height: 12px;
   }
-  .modal_drawer {
+}
+.modal_drawer {
   position: fixed;
   top: 0;
   left: 0;
@@ -143,6 +146,5 @@ const backPage = () => {
       }
     }
   }
-  }
 }
 </style>

src/components/Top.vue

@@ -16,6 +16,7 @@
       v-if="!drawer"
       @click="openDrawer"
     />
+  </div>
   <div class="modal_drawer" v-if="drawer" @click="hidePanel">
     <img :src="Close" class="close" alt="" @click="drawer = false" />
     <div class="content" id="content_tab">
@@ -34,7 +35,6 @@
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup>
@@ -116,12 +116,15 @@ const scrollToTop = () => {
     width: 18px;
     height: 12px;
   }
-  .modal_drawer {
+}
+.modal_drawer {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
+  width: 100%;
+  height: 100vh;
   z-index: 999;
   background: rgba(0, 0, 0, 0.67);
   .close {
@@ -138,6 +141,7 @@ const scrollToTop = () => {
     bottom: 0;
     height: 348px;
     background: #fff;
+    z-index: 999;
     border-top-right-radius: 20px;
     border-top-left-radius: 20px;
     display: flex;
@@ -173,7 +177,6 @@ const scrollToTop = () => {
       }
     }
   }
-  }
 }
 .container_bg {
   background: rgba(255, 255, 255, 0.9);

src/pages/Hardware.vue

@@ -26,11 +26,11 @@
     <div class="img_wrap">
       <img :src="Dian" class="img" alt="" />
       <div class="gif_wrap">
-        <img :src="Gif1" class="left_img" alt="" />
+        <img :src="Gif2" class="left_img" alt="" />
         <img :src="SAccelerate" class="right_img" alt="" />
       </div>
       <div class="gif_wrap">
-        <img :src="Gif2" class="left_img" alt="" />
+        <img :src="Gif1" class="left_img" alt="" />
         <img :src="TAccelerate" class="right_img" alt="" />
       </div>
     </div>
@@ -73,7 +73,9 @@ const handleRelease = e => {
 <style lang="scss" scoped>
 .hardware_home_container {
   background: #f5f5f5;
-  padding-bottom: $bottom-height;
+  margin-bottom: $bottom-height;
+  max-width: 100vw;
+  overflow: hidden;
   .img_wrap {
     padding: 0 7px;
     .gif_wrap {