From d2c5865d29c81f2ff38768d177a2a58fc40c9b3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=20=E5=85=83=E5=B1=B1?= <piercezzs@outlook.com>
Date: Thu, 1 Feb 2024 21:35:16 +0800
Subject: [PATCH] fix bug

---
 src/views/about/academiccommittee.vue    |   2 -
 src/views/about/annualworkplan.vue       |   1 -
 src/views/about/audiencesurveys.vue      |   4 +-
 src/views/about/council.vue              |   2 -
 src/views/about/developmentplanning.vue  |   2 -
 src/views/about/friendsofthemuseum.vue   |   2 -
 src/views/about/interpretive.vue         |   2 -
 src/views/about/seniormanagement.vue     |   2 -
 src/views/about/socialdonation.vue       |   2 -
 src/views/about/statutes.vue             |   2 -
 src/views/about/supervisoryauthority.vue |   2 -
 src/views/about/threeyeannrep.vue        |   1 -
 src/views/aboutpage.vue                  |  70 ++++---
 src/views/commonpage.vue                 |  33 +++-
 src/views/homepage.vue                   | 223 ++++++++++++-----------
 src/views/navigation/pc-index.vue        | 150 +++++++--------
 16 files changed, 268 insertions(+), 232 deletions(-)

diff --git a/src/views/about/academiccommittee.vue b/src/views/about/academiccommittee.vue
index 38d900d..677abaa 100644
--- a/src/views/about/academiccommittee.vue
+++ b/src/views/about/academiccommittee.vue
@@ -183,7 +183,6 @@
 @media only screen and (max-width: 768px) {
   /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
   .about-page {
-    max-height: calc(100vh - 78px - 72px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
     padding: 9px 14px;
@@ -197,7 +196,6 @@
 @media only screen and (min-width: 769px) {
   /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
   .about-page {
-    max-height: calc(100vh - 80px - 145px);
     min-height: calc(100vh - 80px - 145px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
diff --git a/src/views/about/annualworkplan.vue b/src/views/about/annualworkplan.vue
index df61806..11b0942 100644
--- a/src/views/about/annualworkplan.vue
+++ b/src/views/about/annualworkplan.vue
@@ -106,7 +106,6 @@ const handleOpen = (url) => {
 @media only screen and (min-width: 769px) {
   /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
   .about-page {
-    max-height: calc(100vh - 80px - 145px);
     min-height: calc(100vh - 80px - 145px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
diff --git a/src/views/about/audiencesurveys.vue b/src/views/about/audiencesurveys.vue
index 63afe4a..4362618 100644
--- a/src/views/about/audiencesurveys.vue
+++ b/src/views/about/audiencesurveys.vue
@@ -50,7 +50,7 @@
         <div class="row items-center justify-center fl-ml-md cursor"
              style="border-radius:10px;background:#374843;padding:3px 28px;color:#A2C1BA;height:26px;box-sizing: border-box;">常见问题</div>
         <div class="col-12 row justify-center"
-             style="background:#fff;">
+             style="background:#fff;border-radius:10px">
           <div v-for="(item,index) in state.userComment"
                :key="index"
                class="col-11"
@@ -201,7 +201,6 @@ const handleLink = (url) => {
 @media only screen and (max-width: 768px) {
   /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
   .about-page {
-    max-height: calc(100vh - 78px - 72px);
     overflow: auto;
     padding: 9px 14px;
   }
@@ -214,7 +213,6 @@ const handleLink = (url) => {
 @media only screen and (min-width: 769px) {
   /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
   .about-page {
-    max-height: calc(100vh - 80px - 145px);
     min-height: calc(100vh - 80px - 145px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
diff --git a/src/views/about/council.vue b/src/views/about/council.vue
index 4096d37..906352b 100644
--- a/src/views/about/council.vue
+++ b/src/views/about/council.vue
@@ -620,7 +620,6 @@
 @media only screen and (max-width: 768px) {
   /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
   .about-page {
-    max-height: calc(100vh - 78px - 72px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
     padding: 9px 14px;
@@ -634,7 +633,6 @@
 @media only screen and (min-width: 769px) {
   /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
   .about-page {
-    max-height: calc(100vh - 80px - 145px);
     min-height: calc(100vh - 80px - 145px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
diff --git a/src/views/about/developmentplanning.vue b/src/views/about/developmentplanning.vue
index a68e22e..5d220ac 100644
--- a/src/views/about/developmentplanning.vue
+++ b/src/views/about/developmentplanning.vue
@@ -304,7 +304,6 @@
 @media only screen and (max-width: 768px) {
   /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
   .about-page {
-    max-height: calc(100vh - 78px - 72px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
     padding: 9px 14px;
@@ -318,7 +317,6 @@
 @media only screen and (min-width: 769px) {
   /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
   .about-page {
-    max-height: calc(100vh - 80px - 145px);
     min-height: calc(100vh - 80px - 145px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
diff --git a/src/views/about/friendsofthemuseum.vue b/src/views/about/friendsofthemuseum.vue
index f72458f..c388d74 100644
--- a/src/views/about/friendsofthemuseum.vue
+++ b/src/views/about/friendsofthemuseum.vue
@@ -160,7 +160,6 @@
 @media only screen and (max-width: 768px) {
   /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
   .about-page {
-    max-height: calc(100vh - 78px - 72px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
     padding: 9px 14px;
@@ -174,7 +173,6 @@
 @media only screen and (min-width: 769px) {
   /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
   .about-page {
-    max-height: calc(100vh - 80px - 145px);
     min-height: calc(100vh - 80px - 145px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
diff --git a/src/views/about/interpretive.vue b/src/views/about/interpretive.vue
index 0739ca9..2e1c9c7 100644
--- a/src/views/about/interpretive.vue
+++ b/src/views/about/interpretive.vue
@@ -118,7 +118,6 @@
 @media only screen and (max-width: 768px) {
   /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
   .about-page {
-    max-height: calc(100vh - 78px - 72px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
     padding: 9px 14px;
@@ -132,7 +131,6 @@
 @media only screen and (min-width: 769px) {
   /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
   .about-page {
-    max-height: calc(100vh - 80px - 145px);
     min-height: calc(100vh - 80px - 145px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
diff --git a/src/views/about/seniormanagement.vue b/src/views/about/seniormanagement.vue
index 0d57e9c..50a7ec1 100644
--- a/src/views/about/seniormanagement.vue
+++ b/src/views/about/seniormanagement.vue
@@ -26,7 +26,6 @@
 @media only screen and (max-width: 768px) {
   /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
   .about-page {
-    max-height: calc(100vh - 78px - 72px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
     padding: 9px 14px;
@@ -41,7 +40,6 @@
 @media only screen and (min-width: 769px) {
   /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
   .about-page {
-    max-height: calc(100vh - 80px - 145px);
     min-height: calc(100vh - 80px - 145px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
diff --git a/src/views/about/socialdonation.vue b/src/views/about/socialdonation.vue
index fa1676a..3c00687 100644
--- a/src/views/about/socialdonation.vue
+++ b/src/views/about/socialdonation.vue
@@ -112,7 +112,6 @@
 @media only screen and (max-width: 768px) {
   /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
   .about-page {
-    max-height: calc(100vh - 78px - 72px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
     padding: 9px 14px;
@@ -126,7 +125,6 @@
 @media only screen and (min-width: 769px) {
   /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
   .about-page {
-    max-height: calc(100vh - 80px - 145px);
     min-height: calc(100vh - 80px - 145px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
diff --git a/src/views/about/statutes.vue b/src/views/about/statutes.vue
index 5a273e3..8457223 100644
--- a/src/views/about/statutes.vue
+++ b/src/views/about/statutes.vue
@@ -629,7 +629,6 @@
 @media only screen and (max-width: 768px) {
   /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
   .about-page {
-    max-height: calc(100vh - 78px - 72px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
     padding: 9px 14px;
@@ -643,7 +642,6 @@
 @media only screen and (min-width: 769px) {
   /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
   .about-page {
-    max-height: calc(100vh - 80px - 145px);
     min-height: calc(100vh - 80px - 145px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
diff --git a/src/views/about/supervisoryauthority.vue b/src/views/about/supervisoryauthority.vue
index 837927a..e78c369 100644
--- a/src/views/about/supervisoryauthority.vue
+++ b/src/views/about/supervisoryauthority.vue
@@ -68,7 +68,6 @@ const handleLink = (url) => {
 @media only screen and (max-width: 768px) {
   /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
   .about-page {
-    max-height: calc(100vh - 78px - 72px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
     padding: 9px 14px;
@@ -83,7 +82,6 @@ const handleLink = (url) => {
 @media only screen and (min-width: 769px) {
   /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
   .about-page {
-    max-height: calc(100vh - 80px - 145px);
     min-height: calc(100vh - 80px - 145px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
diff --git a/src/views/about/threeyeannrep.vue b/src/views/about/threeyeannrep.vue
index f8d081b..b3525db 100644
--- a/src/views/about/threeyeannrep.vue
+++ b/src/views/about/threeyeannrep.vue
@@ -105,7 +105,6 @@ const handleOpen = (url) => {
 @media only screen and (min-width: 769px) {
   /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
   .about-page {
-    max-height: calc(100vh - 80px - 145px);
     min-height: calc(100vh - 80px - 145px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
diff --git a/src/views/aboutpage.vue b/src/views/aboutpage.vue
index dc4816d..746459b 100644
--- a/src/views/aboutpage.vue
+++ b/src/views/aboutpage.vue
@@ -1,9 +1,10 @@
 <template>
   <div style="min-height: 100vh"
        class="100vw">
-    <div v-if="currentDevice==='pc'" style="height: 80px; background: #000"
+    <div v-if="currentDevice === 'pc'"
+         style="height: 80px; background: #000"
          class="color-white row items-center">
-      <template v-if="currentDevice==='pc'">
+      <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>
@@ -66,8 +67,8 @@
           </div>
         </div>
       </template>
-      <template v-if="currentDevice==='mobile'">
-        <div class="mobile-title">{{route.meta.title}}</div>
+      <template v-if="currentDevice === 'mobile'">
+        <div class="mobile-title">{{ route.meta.title }}</div>
       </template>
     </div>
     <div class="row fl-page-width">
@@ -89,7 +90,7 @@
     </div>
     <div style="height: 145px; background: #000"
          class="row justify-center color-white relative">
-      <template v-if="currentDevice==='pc'">
+      <template v-if="currentDevice === 'pc'">
         <div class="col-6 col-md-4 row justify-around"
              style="margin-top: 32px; max-width: 300px">
           <div class="cursor"
@@ -103,8 +104,8 @@
           </div>
         </div>
       </template>
-      <template v-if="currentDevice==='mobile'">
-<!--        <div class="mobile-footer">
+      <template v-if="currentDevice === 'mobile'">
+        <!--        <div class="mobile-footer">
           <div class="content1">
             <div class="wrap1">
               <img src="@/assets/images/zu1236@2x.png" alt="">
@@ -116,8 +117,8 @@
       <div v-if="state.isH5 == 'true'"
            style="
           border-radius: 50%;
-          position: absolute;
-          top: -60px;
+          position: fixed;
+          bottom: 157px;
           left: 60px;
           z-index: 10;
         "
@@ -181,7 +182,7 @@
                  @click="handleSecMenuClick()">
               关于
               <div v-if="state.showSecMenu"
-                   class=" row justify-center"
+                   class="row justify-center"
                    style="
                   position: absolute;
                   top: -122px;
@@ -221,13 +222,15 @@ import {
   ref,
   reactive,
   onBeforeMount,
+  onMounted,
   getCurrentInstance,
   watch,
   nextTick,
+  onUnmounted
 } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import {useAdaptation} from '@/utils/self-adaption.js'
-const {currentDevice}= useAdaptation()
+import { useAdaptation } from "@/utils/self-adaption.js";
+const { currentDevice } = useAdaptation();
 const route = useRoute();
 const router = useRouter();
 const state = reactive({
@@ -284,16 +287,33 @@ watch(
   () => route.path,
   (to, from) => {
     // 执行路由变化时的操作
-    state.showMenu = false
-    state.showSecMenu = false
+    state.showMenu = false;
+    state.showSecMenu = false;
   },
   { deep: true }
 );
+onMounted(() => {
+  window.addEventListener('click', clickOutside);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('click', clickOutside);
+});
 onBeforeMount(() => {
   const currentPath = route.path;
   state.activePage = currentPath;
   state.isH5 = localStorage.getItem("isH5");
 });
+const clickOutside = (event) => {
+  if (
+    state.showMenu &&
+    !event.target.closest('.menu-hover-dom') &&
+    !event.target.closest('.menu-dom')
+  ) {
+    state.showMenu = false;
+    state.showSecMenu = false;
+  }
+};
 
 const handleLink = (url) => {
   if (url) {
@@ -304,40 +324,38 @@ const handleLink = (url) => {
   }
 };
 const handleMenuClick = () => {
-  state.showMenu = true
-}
+  state.showMenu = true;
+};
 const handleSecMenuClick = () => {
-  state.showSecMenu = true
-}
+  state.showSecMenu = true;
+};
 </script>
 
 <style scoped lang="scss">
-.mobile-footer{
+.mobile-footer {
   display: flex;
   justify-content: center;
   align-items: center;
-  .content1{
+  .content1 {
     display: flex;
     justify-content: center;
     align-items: center;
-    .wrap2{
+    .wrap2 {
       margin-left: 15px;
       font-size: 77px;
       color: #fff;
-
     }
-    .wrap1{
+    .wrap1 {
       width: 137px;
       height: 137px;
-      img{
+      img {
         width: 137px;
         height: 137px;
-
       }
     }
   }
 }
-.mobile-title{
+.mobile-title {
   width: 100%;
   display: flex;
   justify-content: center;
diff --git a/src/views/commonpage.vue b/src/views/commonpage.vue
index 658daa4..61998bc 100644
--- a/src/views/commonpage.vue
+++ b/src/views/commonpage.vue
@@ -1,7 +1,8 @@
 <template>
   <div style="min-height: 100vh"
        class="100vw">
-    <div v-if="currentDevice==='pc'" style="height: 80px; background: #000"
+    <div v-if="currentDevice==='pc'"
+         style="height: 80px; background: #000"
          class="color-white row items-center">
       <div class="col-3 col-md-4 row items-center justify-center">
         <img src="../assets/images/icon-title.png"
@@ -71,7 +72,8 @@
 
     <div style="height: 145px; background: #000"
          class="row justify-center color-white relative">
-      <div v-if="currentDevice==='pc'" class="col-6 col-md-4 row justify-around"
+      <div v-if="currentDevice==='pc'"
+           class="col-6 col-md-4 row justify-around"
            style="margin-top: 32px; max-width: 300px">
         <div class="cursor"
              @click="handleLink('')">帮助</div>
@@ -86,8 +88,8 @@
       <div v-if="currentDevice == 'mobile'"
            style="
           border-radius: 50%;
-          position: absolute;
-          top: -60px;
+          position: fixed;
+          bottom: 157px;
           left: 60px;
           z-index: 10;
         "
@@ -192,12 +194,14 @@ import {
   ref,
   reactive,
   onBeforeMount,
+  onMounted,
   getCurrentInstance,
   watch,
   nextTick,
+  onUnmounted
 } from "vue";
-import {useAdaptation} from '@/utils/self-adaption.js'
-const {currentDevice}= useAdaptation()
+import { useAdaptation } from '@/utils/self-adaption.js'
+const { currentDevice } = useAdaptation()
 import { useRoute, useRouter } from "vue-router";
 const route = useRoute();
 const router = useRouter();
@@ -207,11 +211,28 @@ const state = reactive({
   showMenu: false,
   showSecMenu: false,
 });
+onMounted(() => {
+  window.addEventListener('click', clickOutside);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('click', clickOutside);
+});
 onBeforeMount(() => {
   const currentPath = route.path;
   state.activePage = currentPath;
   state.isH5 = localStorage.getItem("isH5");
 });
+const clickOutside = (event) => {
+  if (
+    state.showMenu &&
+    !event.target.closest('.menu-hover-dom') &&
+    !event.target.closest('.menu-dom')
+  ) {
+    state.showMenu = false;
+    state.showSecMenu = false;
+  }
+};
 const pagepath = ref(window.location.pathname);
 console.log('pagepath', pagepath.value);
 watch(
diff --git a/src/views/homepage.vue b/src/views/homepage.vue
index d5eb3ee..b2938a2 100644
--- a/src/views/homepage.vue
+++ b/src/views/homepage.vue
@@ -1,105 +1,107 @@
 <template>
   <div style="min-height: 100vh"
        class="100vw">
-    <div v-if="currentDevice==='pc'" style="height: 80px; background: #000"
+    <div v-if="currentDevice === 'pc'"
+         style="height: 80px; background: #000"
          class="color-white row items-center">
+      <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 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>
+      </div>
     </div>
     <div>
       <router-view></router-view>
     </div>
     <div style="height: 145px; background: #000"
          class="row justify-center color-white relative">
-<template v-if="currentDevice==='pc'">
-  <div class="col-6 col-md-4 row justify-around"
-       style="margin-top: 32px; max-width: 300px">
-    <div class="cursor"
-         @click="handleLink('')">帮助</div>
-    <div class="cursor"
-         @click="handleLink('')">隐私</div>
-    <div class="cursor"
-         @click="handleLink('')">条款</div>
-    <div class="col-12 cursor text-center">
-      copyright 2024 最终所有权归延庆博物馆
-    </div>
-  </div>
-</template>
-<template v-if="currentDevice === 'mobile'">
-<div class="mobile-footer">
-  <div class="content1">
-    <div class="wrap1">
-      <img src="@/assets/images/zu1236@2x.png" alt="">
-    </div>
-    <div class="wrap2">延庆博物馆</div>
-  </div>
-</div>
-</template>
+      <template v-if="currentDevice === 'pc'">
+        <div class="col-6 col-md-4 row justify-around"
+             style="margin-top: 32px; max-width: 300px">
+          <div class="cursor"
+               @click="handleLink('')">帮助</div>
+          <div class="cursor"
+               @click="handleLink('')">隐私</div>
+          <div class="cursor"
+               @click="handleLink('')">条款</div>
+          <div class="col-12 cursor text-center">
+            copyright 2024 最终所有权归延庆博物馆
+          </div>
+        </div>
+      </template>
+      <template v-if="currentDevice === 'mobile'">
+        <div class="mobile-footer">
+          <div class="content1">
+            <div class="wrap1">
+              <img src="@/assets/images/zu1236@2x.png"
+                   alt="" />
+            </div>
+            <div class="wrap2">延庆博物馆</div>
+          </div>
+        </div>
+      </template>
+
       <div v-if="currentDevice === 'mobile'"
            style="
           border-radius: 50%;
-          position: absolute;
-          top: -60px;
+          position: fixed;
+          bottom: 157px;
           left: 60px;
           z-index: 10;
         "
@@ -204,12 +206,14 @@ import {
   ref,
   reactive,
   onBeforeMount,
+  onMounted,
   getCurrentInstance,
   watch,
   nextTick,
+  onUnmounted
 } from "vue";
-import {useAdaptation} from '@/utils/self-adaption.js'
-const {currentDevice}= useAdaptation()
+import { useAdaptation } from "@/utils/self-adaption.js";
+const { currentDevice } = useAdaptation();
 import { useRoute, useRouter } from "vue-router";
 const route = useRoute();
 const router = useRouter();
@@ -219,19 +223,36 @@ const state = reactive({
   showMenu: false,
   showSecMenu: false,
 });
+onMounted(() => {
+  window.addEventListener('click', clickOutside);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('click', clickOutside);
+});
 onBeforeMount(() => {
   const currentPath = route.path;
   state.activePage = currentPath;
   state.isH5 = localStorage.getItem("isH5");
 });
+const clickOutside = (event) => {
+  if (
+    state.showMenu &&
+    !event.target.closest('.menu-hover-dom') &&
+    !event.target.closest('.menu-dom')
+  ) {
+    state.showMenu = false;
+    state.showSecMenu = false;
+  }
+};
 watch(
-    () => route.path,
-    (to, from) => {
-      // 执行路由变化时的操作
-      state.showMenu = false
-      state.showSecMenu = false
-    },
-    { deep: true }
+  () => route.path,
+  (to, from) => {
+    // 执行路由变化时的操作
+    state.showMenu = false;
+    state.showSecMenu = false;
+  },
+  { deep: true }
 );
 const handleLink = (url) => {
   if (url) {
@@ -242,40 +263,38 @@ const handleLink = (url) => {
   }
 };
 const handleMenuClick = () => {
-  state.showMenu = true
-}
+  state.showMenu = true;
+};
 const handleSecMenuClick = () => {
-  state.showSecMenu = true
-}
+  state.showSecMenu = true;
+};
 </script>
 
 <style scoped lang="scss">
-.mobile-footer{
+.mobile-footer {
   display: flex;
   justify-content: center;
   align-items: center;
-  .content1{
+  .content1 {
     display: flex;
     justify-content: center;
     align-items: center;
-    .wrap2{
+    .wrap2 {
       margin-left: 15px;
       font-size: 15px;
       color: #fff;
-
     }
-    .wrap1{
+    .wrap1 {
       width: 26.69px;
       height: 26.69px;
-      img{
+      img {
         width: 26.69px;
         height: 26.69px;
-
       }
     }
   }
 }
-.mobile-title{
+.mobile-title {
   width: 100%;
   display: flex;
   justify-content: center;
diff --git a/src/views/navigation/pc-index.vue b/src/views/navigation/pc-index.vue
index 2cad1a2..6bcd7e5 100644
--- a/src/views/navigation/pc-index.vue
+++ b/src/views/navigation/pc-index.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted} from "vue";
+import { onMounted } from "vue";
 // JavaScript示例
 
 </script>
@@ -17,17 +17,20 @@ import {onMounted} from "vue";
         <div class="wrap2_2">
           <div class="wrap2_2_1">
             <div class="wrap2_2_1_1">
-              <img src="@/assets/images/YW—0314-A-1@2x.png" alt="">
+              <img src="@/assets/images/YW—0314-A-1@2x.png"
+                   alt="">
             </div>
           </div>
           <div class="wrap2_2_2">
             <div class="wrap2_2_2_1">
-              <img src="@/assets/images/H—128-A-0001@2x.png" alt="">
+              <img src="@/assets/images/H—128-A-0001@2x.png"
+                   alt="">
             </div>
           </div>
           <div class="wrap2_2_3">
             <div class="wrap2_2_3_1">
-              <img src="@/assets/images/L—0381-D-0001@2x.png" alt="">
+              <img src="@/assets/images/L—0381-D-0001@2x.png"
+                   alt="">
             </div>
           </div>
         </div>
@@ -38,17 +41,20 @@ import {onMounted} from "vue";
         <div class="wrap1_1">
           <div class="wrap1_1_1">
             <div class="wrap1_1_1_1">
-              <img src="@/assets/images/116e81@2x.png" alt="">
+              <img src="@/assets/images/116e81@2x.png"
+                   alt="">
             </div>
           </div>
           <div class="wrap1_1_2">
             <div class="wrap1_1_2_1">
               <div class="wrap1_1_2_1_1">
-                <img src="@/assets/images/zu5@2x.png" alt="">
+                <img src="@/assets/images/zu5@2x.png"
+                     alt="">
               </div>
               <div class="wrap1_1_2_1_2">
                 <div class="wrap1_1_2_1_2_1">
-                  <img src="@/assets/images/yqbwgjs@3x.png" alt="">
+                  <img src="@/assets/images/yqbwgjs@3x.png"
+                       alt="">
                 </div>
                 <div class="wrap1_1_2_1_2_2">
                   <img src="@/assets/images/ntroduction@3x.png">
@@ -72,7 +78,8 @@ import {onMounted} from "vue";
             <img src="@/assets/images/zu17@2x.png">
           </div>
           <div class="wrap2_1_2">
-            <img src="@/assets/images/zu27@3x.png" alt="">
+            <img src="@/assets/images/zu27@3x.png"
+                 alt="">
           </div>
         </div>
         <div class="wrap2_2">
@@ -81,27 +88,31 @@ import {onMounted} from "vue";
             <div class="wrap2_2_1_2">清乾隆,炉作鼎式，宝珠钮盖。通体天蓝地上掐丝填釉鎏金装饰，盖面、腹部、足上均饰兽面纹，炉底分布缠枝六瓣花三朵。古人抚琴讲究雅致的环境和氛围，常用炉焚香。</div>
           </div>
           <div class="wrap2_2_2">
-            <img src="@/assets/images/TNyFFEulxfFqX4vq2V.jpg" alt="">
+            <img src="@/assets/images/TNyFFEulxfFqX4vq2V.jpg"
+                 alt="">
           </div>
         </div>
       </div>
       <div class="wrap3">
         <div class="wrap3_1">
-          <img src="@/assets/images/15357[1024].jpg" alt="">
+          <img src="@/assets/images/15357[1024].jpg"
+               alt="">
         </div>
         <div class="wrap3_2">掐丝珐琅卧麒麟式镇纸，清，麒麟式，俯卧状，身上采用掐丝珐琅工艺饰蓝色鳞龙纹。此镇纸形象自然生动，细节表现到位。清宫旧藏镇纸多种多样，但采用掐丝珐琅工艺且器形为麒麟式的镇纸只此一件，弥足珍贵。</div>
       </div>
       <div class="wrap4">
         <div class="wrap4_1">
           <div class="wrap4_1_2">
-            <img src="@/assets/images/zu24@2x.png" alt="">
+            <img src="@/assets/images/zu24@2x.png"
+                 alt="">
           </div>
           <div class="wrap4_1_1">
             <img src="@/assets/images/zu18@2x.png">
           </div>
         </div>
         <div class="wrap4_2">
-          <img src="@/assets/images/jqqd@2x.png" alt="">
+          <img src="@/assets/images/jqqd@2x.png"
+               alt="">
           <!--          <div class="wrap4_2_1">
                       <div class="wrap4_2_1_1">某某某某某-藏品</div>
                       <div class="wrap4_2_1_2">咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩</div>
@@ -115,11 +126,13 @@ import {onMounted} from "vue";
             <img src="@/assets/images/zu19@2x.png">
           </div>
           <div class="wrap5_1_2">
-            <img src="@/assets/images/zu23@2x.png" alt="">
+            <img src="@/assets/images/zu23@2x.png"
+                 alt="">
           </div>
         </div>
         <div class="wrap5_2">
-          <img src="@/assets/images/jqqd@2x12.png" alt="">
+          <img src="@/assets/images/jqqd@2x12.png"
+               alt="">
         </div>
       </div>
     </div>
@@ -127,7 +140,6 @@ import {onMounted} from "vue";
 </template>
 <style scoped lang="scss">
 .container {
-  width: 1920px;
   .content2 {
     width: 100%;
     height: 2470px;
@@ -138,7 +150,7 @@ import {onMounted} from "vue";
     align-items: center;
     .wrap5 {
       margin-top: 57px;
-      .wrap5_2{
+      .wrap5_2 {
         box-sizing: border-box;
         margin-top: 20px;
         height: 340px;
@@ -149,44 +161,42 @@ import {onMounted} from "vue";
         display: flex;
         justify-content: center;
         align-items: center;
-        img{
+        img {
           width: 80px;
           height: 28px;
         }
-        .wrap5_2_2{
+        .wrap5_2_2 {
           margin-left: 42px;
           flex-shrink: 0;
           opacity: 1;
           width: 300px;
           height: 291px;
-          background-color: #4E0A0A;
+          background-color: #4e0a0a;
           border-radius: 10px;
         }
-        .wrap5_2_1{
-
+        .wrap5_2_1 {
           display: flex;
           flex-direction: column;
           justify-content: start;
-          .wrap5_2_1_2{
+          .wrap5_2_1_2 {
             margin-top: 9px;
             line-height: 20px;
-            color: #A26E52;
+            color: #a26e52;
             font-size: 16px;
           }
-          .wrap5_2_1_1{
+          .wrap5_2_1_1 {
             font-weight: 900;
-            color: #5F4040;
+            color: #5f4040;
             font-size: 20px;
           }
         }
       }
       .wrap5_1 {
-
         display: flex;
         align-items: end;
         justify-content: space-between;
-        .wrap5_1_2{
-          img{
+        .wrap5_1_2 {
+          img {
             width: 59.9px;
             height: 28px;
           }
@@ -194,13 +204,13 @@ import {onMounted} from "vue";
         .wrap5_1_1 {
           margin-left: -58px;
           border-radius: 10px;
-          background-color: #5F4040;
-          width:255px;
+          background-color: #5f4040;
+          width: 255px;
           height: 60px;
           display: flex;
           justify-content: center;
           align-items: center;
-          img{
+          img {
             width: 182.26px;
             height: 46px;
           }
@@ -209,7 +219,7 @@ import {onMounted} from "vue";
     }
     .wrap4 {
       margin-top: 57px;
-      .wrap4_2{
+      .wrap4_2 {
         box-sizing: border-box;
         display: flex;
         margin-top: 20px;
@@ -220,40 +230,38 @@ import {onMounted} from "vue";
         background-size: contain;
         align-items: center;
         justify-content: center;
-        img{
+        img {
           width: 80px;
           height: 28px;
         }
       }
       .wrap4_1 {
-
         display: flex;
         align-items: end;
         justify-content: space-between;
-        .wrap4_1_2{
-          img{
+        .wrap4_1_2 {
+          img {
             width: 59.9px;
             height: 28px;
           }
-
         }
         .wrap4_1_1 {
           margin-right: -58px;
           border-radius: 10px;
-          background-color: #54796F;
+          background-color: #54796f;
           width: 255px;
           height: 60px;
           display: flex;
           justify-content: center;
           align-items: center;
-          img{
+          img {
             width: 199.3px;
             height: 45px;
           }
         }
       }
     }
-    .wrap3{
+    .wrap3 {
       box-sizing: border-box;
       margin-top: 15px;
       background-size: contain;
@@ -262,11 +270,11 @@ import {onMounted} from "vue";
       background-image: url("@/assets/images/jx39@2x.png");
       display: flex;
       padding: 24px 46px 24px 49px;
-      .wrap3_2{
-        color: #3B5D54;
+      .wrap3_2 {
+        color: #3b5d54;
         font-size: 16px;
       }
-      .wrap3_1{
+      .wrap3_1 {
         margin-right: 35px;
         flex-shrink: 0;
         width: 300px;
@@ -274,7 +282,7 @@ import {onMounted} from "vue";
         background-color: #395212;
         border-radius: 10px;
         overflow: hidden;
-        img{
+        img {
           width: 300px;
           height: 291.87px;
         }
@@ -282,7 +290,7 @@ import {onMounted} from "vue";
     }
     .wrap2 {
       margin-top: 57px;
-      .wrap2_2{
+      .wrap2_2 {
         box-sizing: border-box;
         display: flex;
         margin-top: 20px;
@@ -293,60 +301,57 @@ import {onMounted} from "vue";
         padding: 24px 44px 24px 53px;
         overflow: hidden;
 
-        .wrap2_2_2{
+        .wrap2_2_2 {
           margin-left: 42px;
           flex-shrink: 0;
           opacity: 1;
           width: 300px;
           height: 291px;
-          background-color: #4E0A0A;
+          background-color: #4e0a0a;
           border-radius: 10px;
           overflow: hidden;
-          img{
+          img {
             width: 300px;
             height: 291px;
           }
         }
-        .wrap2_2_1{
-
+        .wrap2_2_1 {
           display: flex;
           flex-direction: column;
           justify-content: start;
-          .wrap2_2_1_2{
+          .wrap2_2_1_2 {
             margin-top: 9px;
             line-height: 20px;
-            color: #A26E52;
+            color: #a26e52;
             font-size: 16px;
           }
-          .wrap2_2_1_1{
+          .wrap2_2_1_1 {
             font-weight: 900;
-            color: #5F4040;
+            color: #5f4040;
             font-size: 20px;
           }
         }
       }
       .wrap2_1 {
-
         display: flex;
         align-items: end;
         justify-content: space-between;
-        .wrap2_1_2{
-          img{
+        .wrap2_1_2 {
+          img {
             width: 59.9px;
             height: 28px;
           }
-
         }
         .wrap2_1_1 {
           margin-left: -58px;
           border-radius: 10px;
-          background-color: #A46247;
+          background-color: #a46247;
           width: 255px;
           height: 60px;
           display: flex;
           justify-content: center;
           align-items: center;
-          img{
+          img {
             width: 132px;
             height: 44px;
           }
@@ -368,14 +373,14 @@ import {onMounted} from "vue";
           width: 25px;
           height: 25px;
           border-radius: 180px;
-          background-color: #A9AE8E;
+          background-color: #a9ae8e;
         }
 
         .wrap1_2_1 {
           width: 25px;
           height: 25px;
           border-radius: 180px;
-          background-color: #708F87;
+          background-color: #708f87;
         }
       }
 
@@ -387,7 +392,7 @@ import {onMounted} from "vue";
           box-sizing: border-box;
           width: 642px;
           height: 347px;
-          border: 3px solid #54796F;
+          border: 3px solid #54796f;
           background-color: #fff;
           border-left: none;
           border-bottom-right-radius: 10px;
@@ -402,7 +407,7 @@ import {onMounted} from "vue";
             font-weight: 900;
             margin-top: 13px;
             font-size: 14px;
-            color: #58605E;
+            color: #58605e;
           }
 
           .wrap1_1_2_1 {
@@ -449,7 +454,7 @@ import {onMounted} from "vue";
           width: 385px;
           height: 385px;
           border-radius: 10px;
-          background-color: #54796F;
+          background-color: #54796f;
           position: relative;
 
           .wrap1_1_1_1 {
@@ -460,7 +465,6 @@ import {onMounted} from "vue";
             img {
               width: 378px;
               height: 378px;
-
             }
           }
         }
@@ -485,12 +489,11 @@ import {onMounted} from "vue";
           margin-left: 59px;
           width: 91px;
           height: 91px;
-          background-color: #54796F;
+          background-color: #54796f;
           border-radius: 6px;
           position: relative;
 
           .wrap2_2_1_1 {
-
             right: 10px;
             bottom: 10px;
             position: absolute;
@@ -507,7 +510,7 @@ import {onMounted} from "vue";
           margin-left: 20px;
           width: 91px;
           height: 91px;
-          background-color: #5F4040;
+          background-color: #5f4040;
           border-radius: 6px;
 
           .wrap2_2_2_1 {
@@ -527,7 +530,7 @@ import {onMounted} from "vue";
           margin-left: 20px;
           width: 91px;
           height: 91px;
-          background-color: #A46247;
+          background-color: #a46247;
           border-radius: 6px;
 
           .wrap2_2_3_1 {
@@ -554,7 +557,7 @@ import {onMounted} from "vue";
           width: 25px;
           height: 25px;
           border-radius: 180px;
-          background-color: #708F87;
+          background-color: #708f87;
         }
 
         .wrap2_1_2 {
@@ -564,11 +567,9 @@ import {onMounted} from "vue";
           width: 25px;
           height: 25px;
           border-radius: 180px;
-          background-color: #A9AE8E;
+          background-color: #a9ae8e;
         }
-
       }
-
     }
 
     .wrap1 {
@@ -578,7 +579,6 @@ import {onMounted} from "vue";
       img {
         width: 100%;
         height: 100%;
-
       }
     }
   }