From 2e26af63bc579a1c06943bba938eb15b23664173 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Mon, 19 Jun 2023 11:08:39 +0800
Subject: [PATCH] top

---
 src/components/Top.vue      |  42 ++++++++++++++++++++++++++++++++----------
 src/static/img/banner/x.png | Bin 0 -> 459 bytes
 2 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 src/static/img/banner/x.png

diff --git a/src/components/Top.vue b/src/components/Top.vue
index 7af1951..2141ced 100644
--- a/src/components/Top.vue
+++ b/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;
         }
       }
     }
diff --git a/src/static/img/banner/x.png b/src/static/img/banner/x.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed2301f1db35548756cb0c7587dfedd97c9d3336
GIT binary patch
literal 459
zcmV;+0W|)JP)<h;3K|Lk000e1NJLTq001Tc001Tk1^@s6s6FYf00009a7bBm000XU
z000XU0RWnu7ytkPeMv+?R9J<**y~EfFc5~}!TVF!BdB-<9{1pS_WoS_;o|8wL=<5c
z`ud{{6zOhfCP@QBp-lLm1X5@O5MT$G0>9OBt9su>?E|mCH}DAb01;r9=5gKu>bfDf
z0D1zvEr8|5HKD?I5@5chAs6ndCG$&wkCvt)F|G{-@GQWAqA?XtgDQXx>x3AbCWDaS
zS&avGX+iymwVjkY?koeUU!P|^##WpQwFs69=SD4q#p1>>s5Y1v7md=uEV$EDC@oBY
z8zoLN2AWLEw@8Cag0jM5acYzY=Ea#%UYHeUMgg)SzA;nwAtG~Ef@3u!!)`%&T2HJw
zxlwLh7pOY!I5lh-i8A9-qK3e2DqJems5a*=1uiuz8Ez435P`Ddj<m28sAybHR20sG
zx-g(Z-CJ>CVm~9wg%irVu-qssZcQjJ>bgK#a1#N3Iz(x4pKUvq1Es-D1lXkc4`-Ya
z73!fOw*Xc{!#3~&%qXuu_c}m@It1RU>?yDg$RC1v;fO&guR{O;002ovPDHLkV1nn)
Bx#0i+

literal 0
HcmV?d00001