diff --git a/src/views/aboutpage.vue b/src/views/aboutpage.vue
index 70785d7..1bd9ac9 100644
--- a/src/views/aboutpage.vue
+++ b/src/views/aboutpage.vue
@@ -103,11 +103,13 @@
           left: 60px;
           z-index: 10;
         "
-           class="relative menu-dom">
+           class="relative menu-dom"
+           @click="handleMenuClick()">
         <img src="../assets/images/icon-menu.png"
              style="width: 32px" />
 
-        <div class="menu-hover-dom row justify-center"
+        <div v-if="state.showMenu"
+             class="menu-hover-dom row justify-center"
              style="
             position: absolute;
             top: -345px;
@@ -157,9 +159,11 @@
                  @click="handleLink('')">
               数字文脉
             </div>
-            <div class="cursor col-12 row items-center justify-center relative about-dom">
+            <div class="cursor col-12 row items-center justify-center relative about-dom"
+                 @click="handleSecMenuClick()">
               关于
-              <div class="about-hover-dom row justify-center"
+              <div v-if="state.showSecMenu"
+                   class=" row justify-center"
                    style="
                   position: absolute;
                   top: -122px;
@@ -251,7 +255,20 @@ const state = reactive({
     },
   ],
   isH5: false,
+  showMenu: false,
+  showSecMenu: false,
 });
+const pagepath = ref(window.location.pathname);
+
+watch(
+  () => route.path,
+  (to, from) => {
+    // 执行路由变化时的操作
+    state.showMenu = false
+    state.showSecMenu = false
+  },
+  { deep: true }
+);
 onBeforeMount(() => {
   const currentPath = route.path;
   state.activePage = currentPath;
@@ -266,6 +283,12 @@ const handleLink = (url) => {
     router.push("/common/staytuned");
   }
 };
+const handleMenuClick = () => {
+  state.showMenu = true
+}
+const handleSecMenuClick = () => {
+  state.showSecMenu = true
+}
 </script>
 
 <style scoped>
@@ -328,18 +351,4 @@ const handleLink = (url) => {
   left: 50%;
   transform: translateX(-50%);
 }
-
-.menu-dom:hover .menu-hover-dom {
-  display: block;
-}
-
-.menu-hover-dom {
-  display: none;
-}
-.about-dom:hover .about-hover-dom {
-  display: block;
-}
-.about-hover-dom {
-  display: none;
-}
 </style>
diff --git a/src/views/commonpage.vue b/src/views/commonpage.vue
index d62b8f3..8f34a3c 100644
--- a/src/views/commonpage.vue
+++ b/src/views/commonpage.vue
@@ -91,11 +91,13 @@
           left: 60px;
           z-index: 10;
         "
-           class="relative menu-dom">
+           class="relative menu-dom"
+           @click="handleMenuClick()">
         <img src="../assets/images/icon-menu.png"
              style="width: 32px" />
 
-        <div class="menu-hover-dom row justify-center"
+        <div v-if="state.showMenu"
+             class="menu-hover-dom row justify-center"
              style="
             position: absolute;
             top: -345px;
@@ -145,9 +147,12 @@
                  @click="handleLink('')">
               数字文脉
             </div>
-            <div class="cursor col-12 row items-center justify-center relative about-dom">
+
+            <div class="cursor col-12 row items-center justify-center relative about-dom"
+                 @click="handleSecMenuClick()">
               关于
-              <div class="about-hover-dom row justify-center"
+              <div v-if="state.showSecMenu"
+                   class="about-hover-dom row justify-center"
                    style="
                   position: absolute;
                   top: -122px;
@@ -197,12 +202,25 @@ const router = useRouter();
 const state = reactive({
   activePage: "",
   isH5: false,
+  showMenu: false,
+  showSecMenu: false,
 });
 onBeforeMount(() => {
   const currentPath = route.path;
   state.activePage = currentPath;
   state.isH5 = localStorage.getItem("isH5");
 });
+const pagepath = ref(window.location.pathname);
+console.log('pagepath', pagepath.value);
+watch(
+  () => route.path,
+  (to, from) => {
+    // 执行路由变化时的操作
+    state.showMenu = false
+    state.showSecMenu = false
+  },
+  { deep: true }
+);
 
 const handleLink = (url) => {
   if (url) {
@@ -212,6 +230,12 @@ const handleLink = (url) => {
     router.push("/common/staytuned");
   }
 };
+const handleMenuClick = () => {
+  state.showMenu = true
+}
+const handleSecMenuClick = () => {
+  state.showSecMenu = true
+}
 </script>
 
 <style scoped>
@@ -246,17 +270,4 @@ const handleLink = (url) => {
   left: 50%;
   transform: translateX(-50%);
 }
-.menu-dom:hover .menu-hover-dom {
-  display: block;
-}
-
-.menu-hover-dom {
-  display: none;
-}
-.about-dom:hover .about-hover-dom {
-  display: block;
-}
-.about-hover-dom {
-  display: none;
-}
 </style>
diff --git a/src/views/homepage.vue b/src/views/homepage.vue
index 1ed862c..039fdfc 100644
--- a/src/views/homepage.vue
+++ b/src/views/homepage.vue
@@ -3,72 +3,67 @@
        class="100vw">
     <div style="height: 80px; background: #000"
          class="color-white row items-center">
-      <template v-if="currentDevice==='pc'">
-        <div class="col-3 col-md-4 row items-center justify-center">
-          <img src="../assets/images/icon-title.png"
-               style="width: 40px; height: 40px"/><span class="fl-ml-sm">延庆博物馆</span>
-        </div>
+      <div class="col-3 col-md-4 row items-center justify-center">
+        <img src="../assets/images/icon-title.png"
+             style="width: 40px; height: 40px" /><span class="fl-ml-sm">延庆博物馆</span>
+      </div>
 
-        <div class="col-9 col-md-6 row justify-around items-center">
-          <div class="cursor header-title relative"
-               @click="handleLink('/home/navigation')">
-            首页
-          </div>
-          <div class="cursor header-title relative"
-               @click="handleLink('')">
-            导航
-          </div>
-          <div class="cursor header-title relative"
-               @click="handleLink('')">
-            展览
-          </div>
-          <div class="cursor header-title relative"
-               @click="handleLink('')">
-            典藏
-          </div>
-          <div class="cursor header-title relative"
-               @click="handleLink('')">
-            资讯
-          </div>
-          <div class="cursor header-title relative"
-               @click="handleLink('')">
-            文创
-          </div>
-          <div class="cursor header-title relative"
-               @click="handleLink('')">
-            数字文脉
-          </div>
+      <div class="col-9 col-md-6 row justify-around items-center">
+        <div class="cursor header-title relative"
+             @click="handleLink('/home/navigation')">
+          首页
+        </div>
+        <div class="cursor header-title relative"
+             @click="handleLink('')">
+          导航
+        </div>
+        <div class="cursor header-title relative"
+             @click="handleLink('')">
+          展览
+        </div>
+        <div class="cursor header-title relative"
+             @click="handleLink('')">
+          典藏
+        </div>
+        <div class="cursor header-title relative"
+             @click="handleLink('')">
+          资讯
+        </div>
+        <div class="cursor header-title relative"
+             @click="handleLink('')">
+          文创
+        </div>
+        <div class="cursor header-title relative"
+             @click="handleLink('')">
+          数字文脉
+        </div>
 
-          <div class="cursor header-title hover-dom relative">
-            关于
-            <div class="hidden-dom row justify-center"
-                 style="position: absolute; top: 20px; left: -38px; z-index: 9999">
-              <div class="row justify-center secmenu fl-mt-lg"
-                   style="padding: 4px 8px">
-                <div class="cursor"
-                     style="padding: 8px; border-bottom: 1px solid #fff"
-                     @click="handleLink('/about/statutes')">
-                  制度公开
-                </div>
+        <div class="cursor header-title hover-dom relative">
+          关于
+          <div class="hidden-dom row justify-center"
+               style="position: absolute; top: 20px; left: -38px; z-index: 9999">
+            <div class="row justify-center secmenu fl-mt-lg"
+                 style="padding: 4px 8px">
+              <div class="cursor"
+                   style="padding: 8px; border-bottom: 1px solid #fff"
+                   @click="handleLink('/about/statutes')">
+                制度公开
+              </div>
 
-                <div class="cursor"
-                     style="padding: 8px; border-bottom: 1px solid #fff"
-                     @click="handleLink('/common/interpretive')">
-                  讲解服务
-                </div>
-                <div class="cursor"
-                     style="padding: 8px"
-                     @click="handleLink('/common/audiencesurveys')">
-                  观众调查
-                </div>
+              <div class="cursor"
+                   style="padding: 8px; border-bottom: 1px solid #fff"
+                   @click="handleLink('/common/interpretive')">
+                讲解服务
+              </div>
+              <div class="cursor"
+                   style="padding: 8px"
+                   @click="handleLink('/common/audiencesurveys')">
+                观众调查
               </div>
             </div>
           </div>
         </div>
-      </template>
-      <template v-else>
-        <div class="model-title">{{ route.meta.title }}</div>
-      </template>
+      </div>
     </div>
     <div>
       <router-view></router-view>
@@ -79,14 +74,11 @@
       <div class="col-6 col-md-4 row justify-around"
            style="margin-top: 32px; max-width: 300px">
         <div class="cursor"
-             @click="handleLink('')">帮助
-        </div>
+             @click="handleLink('')">帮助</div>
         <div class="cursor"
-             @click="handleLink('')">隐私
-        </div>
+             @click="handleLink('')">隐私</div>
         <div class="cursor"
-             @click="handleLink('')">条款
-        </div>
+             @click="handleLink('')">条款</div>
         <div class="col-12 cursor text-center">
           copyright 2024 最终所有权归延庆博物馆
         </div>
@@ -100,11 +92,13 @@
           left: 60px;
           z-index: 10;
         "
-           class="relative menu-dom">
+           class="relative menu-dom"
+           @click="handleMenuClick()">
         <img src="../assets/images/icon-menu.png"
-             style="width: 32px"/>
+             style="width: 32px" />
 
-        <div class="menu-hover-dom row justify-center"
+        <div v-if="state.showMenu"
+             class="menu-hover-dom row justify-center"
              style="
             position: absolute;
             top: -345px;
@@ -154,9 +148,12 @@
                  @click="handleLink('')">
               数字文脉
             </div>
-            <div class="cursor col-12 row items-center justify-center relative about-dom">
+
+            <div class="cursor col-12 row items-center justify-center relative about-dom"
+                 @click="handleSecMenuClick()">
               关于
-              <div class="about-hover-dom row justify-center"
+              <div v-if="state.showSecMenu"
+                   class="about-hover-dom row justify-center"
                    style="
                   position: absolute;
                   top: -122px;
@@ -200,23 +197,29 @@ import {
   watch,
   nextTick,
 } from "vue";
-import {useRoute, useRouter} from "vue-router";
-
+import { useRoute, useRouter } from "vue-router";
 const route = useRoute();
 const router = useRouter();
-import {useAdaptation} from '@/utils/self-adaption.js'
-
-const {currentDevice} = useAdaptation()
 const state = reactive({
   activePage: "",
   isH5: false,
+  showMenu: false,
+  showSecMenu: false,
 });
 onBeforeMount(() => {
   const currentPath = route.path;
   state.activePage = currentPath;
   state.isH5 = localStorage.getItem("isH5");
 });
-
+watch(
+  () => route.path,
+  (to, from) => {
+    // 执行路由变化时的操作
+    state.showMenu = false
+    state.showSecMenu = false
+  },
+  { deep: true }
+);
 const handleLink = (url) => {
   if (url) {
     router.push(url);
@@ -225,27 +228,22 @@ const handleLink = (url) => {
     router.push("/common/staytuned");
   }
 };
+const handleMenuClick = () => {
+  state.showMenu = true
+}
+const handleSecMenuClick = () => {
+  state.showSecMenu = true
+}
 </script>
 
 <style scoped>
-.model-title {
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  font-size: 82px;
-}
-
 .header-title {
   padding: 4px 18px;
   border-radius: 25px;
 }
-
 .header-title:hover {
   background: #3d8873;
 }
-
 .hover-dom:hover .hidden-dom {
   display: block;
 }
@@ -253,13 +251,11 @@ const handleLink = (url) => {
 .hidden-dom {
   display: none;
 }
-
 .secmenu {
   width: 120px;
   background: #343434;
   border-radius: 10px;
 }
-
 .header-title:hover::after {
   content: "";
   background-image: url("../assets/images/icon-header-btn.png");
@@ -272,20 +268,4 @@ const handleLink = (url) => {
   left: 50%;
   transform: translateX(-50%);
 }
-
-.menu-dom:hover .menu-hover-dom {
-  display: block;
-}
-
-.menu-hover-dom {
-  display: none;
-}
-
-.about-dom:hover .about-hover-dom {
-  display: block;
-}
-
-.about-hover-dom {
-  display: none;
-}
 </style>