From 1f6382798d0f5c695c616766471ed9feb3215f2d Mon Sep 17 00:00:00 2001
From: hejin <jmy13864291147@163.com>
Date: Sun, 6 Jul 2025 18:38:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E7=9A=84menu=E6=8A=BD=E5=B1=89=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/header.vue                      | 12 +++-
 components/menu-drawer.vue                 | 69 ++++++++++++++++++++++
 nuxt.config.js                             |  2 +-
 plugins/{element-tree.js => element-ui.js} |  6 +-
 4 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 components/menu-drawer.vue
 rename plugins/{element-tree.js => element-ui.js} (65%)

diff --git a/components/header.vue b/components/header.vue
index 1997372..1cb02e1 100644
--- a/components/header.vue
+++ b/components/header.vue
@@ -36,7 +36,12 @@
             placeholder="SEARCH"
           >
           </b-form-input>
-          <img class="ml-2" src="~assets/image/icon/menu.png" :alt="$t('common.menu')" />
+          <img 
+            class="ml-2" 
+            src="~assets/image/icon/menu.png" 
+            :alt="$t('common.menu')" 
+            @click="$refs.menuDrawerRef.drawer=true"
+          />
         </div>
       </div>
 
@@ -51,11 +56,15 @@
         </nuxt-link>
       </nav>
     </header>
+
+    <MenuDrawer ref="menuDrawerRef" />
   </div>
 </template>
 
 <script>
+import MenuDrawer from './menu-drawer.vue';
 export default {
+  components: { MenuDrawer },
   data() {
     return {
       searchVal: '',
@@ -125,7 +134,6 @@ nav {
   .nav-link-item {
     height: 100%;
     padding: 0 1.4375rem;
-    z-index: 99999;
     >a {
       color: #151516;
     }
diff --git a/components/menu-drawer.vue b/components/menu-drawer.vue
new file mode 100644
index 0000000..f5bb8f0
--- /dev/null
+++ b/components/menu-drawer.vue
@@ -0,0 +1,69 @@
+<template>
+  <el-drawer
+    :visible.sync="drawer"
+    direction="ltr"
+    :with-header="false"
+    size="50%"
+  >
+    <div class="p-4">
+      <img class="mb-3" src="../assets/image/mob-logo.png" alt="logo" />
+      <el-tree
+        :data="menuList"
+        node-key="id"
+        highlight-current
+        @node-click="handleNodeClick"
+        :props="{
+          children: 'children',
+          label: 'name'
+        }"
+      />
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+
+export default {
+  name: 'MenuDrawer',
+  data() {
+    return {
+      drawer: false,
+      menuList: [
+        { name: this.$t('menu.Home'), href: '/' },
+        { name: this.$t('menu.AboutUs'), href: '/abou-us' },
+        { 
+          name: this.$t('menu.Products'), 
+          href: undefined,
+          children: [
+            { name: this.$t('menu.Products'), href: '/products' },
+            { name: this.$t('menu.Products'), href: '/products' },
+            { name: this.$t('menu.Products'), href: '/products' },
+            { name: this.$t('menu.Products'), href: '/products' },
+          ]
+        },
+        { name: this.$t('menu.News'), href: '/news' },
+        { name: this.$t('menu.Exhibition'), href: '/exhibition' },
+        { name: this.$t('menu.ContactUs'), href: '/contact-us' },
+        { name: this.$t('menu.Feedback'), href: '/feedback' },
+      ]
+    }
+  },
+  methods: {
+    handleNodeClick(data) {
+      if (data.href) {
+        this.$router.push(data.href)
+        this.drawer = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .is-current {
+  > .el-tree-node__content {
+    color: #015fe8;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/nuxt.config.js b/nuxt.config.js
index 2528d0e..fde4c90 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -59,7 +59,7 @@ export default {
     '~plugins/axios',
     { src: "~plugins/router.js", ssr: true },
     { src: "~plugins/i18n.js", ssr: true },
-    { src: "~plugins/element-tree.js", ssr: true },
+    { src: "~plugins/element-ui.js", ssr: true },
     { src: "~plugins/vue-piczoom.js", ssr: false },
     { src: "~plugins/swiper.js", ssr: false },
   ],
diff --git a/plugins/element-tree.js b/plugins/element-ui.js
similarity index 65%
rename from plugins/element-tree.js
rename to plugins/element-ui.js
index 77bc76b..1567525 100644
--- a/plugins/element-tree.js
+++ b/plugins/element-ui.js
@@ -1,7 +1,9 @@
 import Vue from 'vue'
 import { 
   // 添加你需要的其他组件
-  Tree
+  Tree,
+  Drawer
 } from 'element-ui'
 
-Vue.use(Tree)
\ No newline at end of file
+Vue.use(Tree)
+Vue.use(Drawer)
\ No newline at end of file