top

src/components/Top.vue

@@ -2,18 +2,19 @@
   <div class="top_container">
     <div class="logo_container"></div>
     <div class="fold_icon" @click="openDrawer"></div>
-    <div class="modal_drawer">
+    <div class="modal_drawer" v-if="drawer">
+      <img :src="Close" class="close" alt="" @click="drawer = false" />
       <div class="content">
         <div class="icon_wrap">
           <p class="icon"></p>
         </div>
         <div class="btn_wrap">
-          <div class="btn">公司简介</div>
-          <div class="btn">案例展示</div>
-          <div class="btn">联系我们</div>
-          <div class="btn">招贤纳士</div>
-          <div class="btn">软硬件研发</div>
-          <div class="btn">产品研发</div>
+          <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-case')">软硬件研发</div>
+          <div class="btn" @click="toPage('/product')">产品研发</div>
         </div>
       </div>
     </div>
@@ -22,11 +23,17 @@
 
 <script setup>
 import { ref } from 'vue'
+import Close from '@/static/img/banner/x.png'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 const drawer = ref(false)
 
 const openDrawer = () => {
   drawer.value = true
 }
+const toPage = path => {
+  router.push(path)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -60,12 +67,19 @@ const openDrawer = () => {
     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;
-      height: 50vh;
+      height: 348px;
       background: #fff;
       border-top-right-radius: 20px;
       border-top-left-radius: 20px;
@@ -75,9 +89,9 @@ const openDrawer = () => {
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 10px 0;
+        padding: 12px 0 0 0;
         .icon {
-          width: 20px;
+          width: 24px;
           height: 2px;
           border-radius: 1px;
           background: #000;
@@ -90,6 +104,14 @@ const openDrawer = () => {
         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;
         }
       }
     }