From 42cb4c421ccda6e3cc50a8cf73deff0804158f75 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Thu, 20 Jul 2023 09:59:52 +0800
Subject: [PATCH] weitiao

---
 src/components/SubNavigation.vue | 124 ++++++++++++++++++++-------------------
 src/components/Top.vue           | 123 +++++++++++++++++++-------------------
 src/pages/Hardware.vue           |   8 ++-
 3 files changed, 131 insertions(+), 124 deletions(-)

diff --git a/src/components/SubNavigation.vue b/src/components/SubNavigation.vue
index fe9d3b3..970addc 100644
--- a/src/components/SubNavigation.vue
+++ b/src/components/SubNavigation.vue
@@ -4,20 +4,20 @@
     <p class="title">{{ title }}</p>
     <img class="menu" :src="Menu" v-if="!drawer" @click="openDrawer" />
     <div class="menu" v-else></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">
-        <div class="icon_wrap">
-          <p class="icon"></p>
-        </div>
-        <div class="btn_wrap">
-          <div class="btn" @click="toPage('/company')">公司简介</div>
-          <div class="btn" @click="toPage('/case-show')">案例展示</div>
-          <div class="btn" @click="toPage('/contact')">联系我们</div>
-          <div class="btn" @click="toPage('/recruit')">招贤纳士</div>
-          <div class="btn" @click="toPage('/hardware')">软硬件研发</div>
-          <!-- <div class="btn" @click="toPage('/product')">产品研发</div> -->
-        </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">
+      <div class="icon_wrap">
+        <p class="icon"></p>
+      </div>
+      <div class="btn_wrap">
+        <div class="btn" @click="toPage('/company')">公司简介</div>
+        <div class="btn" @click="toPage('/case-show')">案例展示</div>
+        <div class="btn" @click="toPage('/contact')">联系我们</div>
+        <div class="btn" @click="toPage('/recruit')">招贤纳士</div>
+        <div class="btn" @click="toPage('/hardware')">软硬件研发</div>
+        <!-- <div class="btn" @click="toPage('/product')">产品研发</div> -->
       </div>
     </div>
   </div>
@@ -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,60 +89,60 @@ const backPage = () => {
     width: 18px;
     height: 12px;
   }
-  .modal_drawer {
-    position: fixed;
-    top: 0;
+}
+.modal_drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.67);
+  .close {
+    position: absolute;
+    right: 20px;
+    width: 13px;
+    height: 13px;
+    top: 17px;
+  }
+  .content {
+    position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 999;
-    background: rgba(0, 0, 0, 0.67);
-    .close {
-      position: absolute;
-      right: 20px;
-      width: 13px;
-      height: 13px;
-      top: 17px;
+    height: 348px;
+    background: #fff;
+    border-top-right-radius: 20px;
+    border-top-left-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    .icon_wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 12px 0 0 0;
+      .icon {
+        width: 24px;
+        height: 2px;
+        border-radius: 1px;
+        background: #000;
+      }
     }
-    .content {
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 348px;
-      background: #fff;
-      border-top-right-radius: 20px;
-      border-top-left-radius: 20px;
+    .btn_wrap {
+      flex: 1;
       display: flex;
       flex-direction: column;
-      .icon_wrap {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 12px 0 0 0;
-        .icon {
-          width: 24px;
-          height: 2px;
-          border-radius: 1px;
-          background: #000;
-        }
-      }
-      .btn_wrap {
+      align-items: center;
+      justify-content: space-evenly;
+      .btn {
+        font-size: 13px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 400;
+        color: #000000;
         flex: 1;
         display: flex;
-        flex-direction: column;
         align-items: center;
-        justify-content: space-evenly;
-        .btn {
-          font-size: 13px;
-          font-family: Alibaba PuHuiTi;
-          font-weight: 400;
-          color: #000000;
-          flex: 1;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
+        justify-content: center;
       }
     }
   }
diff --git a/src/components/Top.vue b/src/components/Top.vue
index c31d956..9b9e787 100644
--- a/src/components/Top.vue
+++ b/src/components/Top.vue
@@ -16,22 +16,22 @@
       v-if="!drawer"
       @click="openDrawer"
     />
-    <div class="modal_drawer" v-if="drawer" @click="hidePanel">
-      <img :src="Close" class="close" alt="" @click="drawer = false" />
-      <div class="content" id="content_tab">
-        <div class="icon_wrap">
-          <p class="icon"></p>
-        </div>
-        <div class="btn_wrap">
-          <div class="btn" @click="toPage('/company')">公司简介</div>
-          <div class="btn" @click="toPage('/case-show')">案例展示</div>
-          <div class="btn" @click="toPage('/contact')">联系我们</div>
-          <div class="btn" @click="toPage('/recruit')">招贤纳士</div>
-          <div class="btn" @click="toPage(`${isHard ? '/' : '/hardware'}`)">
-            {{ isHard ? '工业设计' : '软硬件研发' }}
-          </div>
-          <!-- <div class="btn" @click="toPage('/product')">产品研发</div> -->
+  </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">
+      <div class="icon_wrap">
+        <p class="icon"></p>
+      </div>
+      <div class="btn_wrap">
+        <div class="btn" @click="toPage('/company')">公司简介</div>
+        <div class="btn" @click="toPage('/case-show')">案例展示</div>
+        <div class="btn" @click="toPage('/contact')">联系我们</div>
+        <div class="btn" @click="toPage('/recruit')">招贤纳士</div>
+        <div class="btn" @click="toPage(`${isHard ? '/' : '/hardware'}`)">
+          {{ isHard ? '工业设计' : '软硬件研发' }}
         </div>
+        <!-- <div class="btn" @click="toPage('/product')">产品研发</div> -->
       </div>
     </div>
   </div>
@@ -116,61 +116,64 @@ const scrollToTop = () => {
     width: 18px;
     height: 12px;
   }
-  .modal_drawer {
-    position: fixed;
-    top: 0;
+}
+.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 {
+    position: absolute;
+    right: 20px;
+    width: 13px;
+    height: 13px;
+    top: 17px;
+  }
+  .content {
+    position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
+    height: 348px;
+    background: #fff;
     z-index: 999;
-    background: rgba(0, 0, 0, 0.67);
-    .close {
-      position: absolute;
-      right: 20px;
-      width: 13px;
-      height: 13px;
-      top: 17px;
+    border-top-right-radius: 20px;
+    border-top-left-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    .icon_wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 12px 0 0 0;
+      .icon {
+        width: 24px;
+        height: 2px;
+        border-radius: 1px;
+        background: #000;
+      }
     }
-    .content {
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 348px;
-      background: #fff;
-      border-top-right-radius: 20px;
-      border-top-left-radius: 20px;
+    .btn_wrap {
+      flex: 1;
       display: flex;
       flex-direction: column;
-      .icon_wrap {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 12px 0 0 0;
-        .icon {
-          width: 24px;
-          height: 2px;
-          border-radius: 1px;
-          background: #000;
-        }
-      }
-      .btn_wrap {
+      align-items: center;
+      justify-content: space-evenly;
+      .btn {
+        font-size: 13px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 400;
+        color: #000000;
+        width: 100%;
         flex: 1;
         display: flex;
-        flex-direction: column;
         align-items: center;
-        justify-content: space-evenly;
-        .btn {
-          font-size: 13px;
-          font-family: Alibaba PuHuiTi;
-          font-weight: 400;
-          color: #000000;
-          width: 100%;
-          flex: 1;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
+        justify-content: center;
       }
     }
   }
diff --git a/src/pages/Hardware.vue b/src/pages/Hardware.vue
index 9814b82..7b60103 100644
--- a/src/pages/Hardware.vue
+++ b/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 {