diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 3656659..39d4be2 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1677,4 +1677,32 @@
 
 .font-16 {
     font-size: 16px;
+}
+
+.font-12 {
+    font-size: 12px;
+}
+
+.font-10 {
+    font-size: 10px;
+}
+
+.border-l-1 {
+    border-left: #d3cbcb 1px solid;
+}
+
+.border-r-1 {
+    border-right: #d3cbcb 1px solid;
+}
+
+.border-t-1 {
+    border-top: #d3cbcb 1px solid;
+}
+
+.border-b-1 {
+    border-bottom: #d3cbcb 1px solid;
+}
+
+.box-sizing {
+    box-sizing: border-box;
 }
\ No newline at end of file
diff --git a/src/assets/images/icon-menu.png b/src/assets/images/icon-menu.png
new file mode 100644
index 0000000..202e55b
Binary files /dev/null and b/src/assets/images/icon-menu.png differ
diff --git a/src/assets/images/peo-1.png b/src/assets/images/peo-1.png
new file mode 100644
index 0000000..be59052
Binary files /dev/null and b/src/assets/images/peo-1.png differ
diff --git a/src/assets/images/peo-2.png b/src/assets/images/peo-2.png
new file mode 100644
index 0000000..73f0932
Binary files /dev/null and b/src/assets/images/peo-2.png differ
diff --git a/src/main.js b/src/main.js
index 044b634..8c6ff24 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,7 +3,15 @@ import './assets/css/style.css'
 import App from './App.vue'
 import 'normalize.css';
 import router from './router';
-
+if (window.innerWidth <= 768) {
+    // 移动端
+    console.log('移动端');
+    localStorage.setItem("isH5", true);
+} else {
+    // PC端
+    console.log('PC端');
+    localStorage.setItem("isH5", false);
+}
 const app = createApp(App);
 
 app.use(router);
diff --git a/src/views/about/academiccommittee.vue b/src/views/about/academiccommittee.vue
index b861e6b..a207010 100644
--- a/src/views/about/academiccommittee.vue
+++ b/src/views/about/academiccommittee.vue
@@ -204,7 +204,7 @@
     padding: 41px;
   }
   .about-text {
-    padding: 40px 131px;
+    padding: 40px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/about/annualworkplan.vue b/src/views/about/annualworkplan.vue
index 7639e26..12db27a 100644
--- a/src/views/about/annualworkplan.vue
+++ b/src/views/about/annualworkplan.vue
@@ -1,41 +1,66 @@
 <template>
-  <div class="about-page overflow-auto"
-       style="padding: 41px">
-    <div class="row items-center fl-mt-lg fl-pa-lg"
+  <div v-if="(state.isH5 == 'true')"
+       class="about-text">
+    <div style="margin-top:20px;padding:10px">
+      <div class="row">
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-l-1 font-12 fl-py-sm"
+             style="border-radius: 10px 0 0 0 ">名称 </div>
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-r-1 border-l-1  font-12 fl-py-sm"
+             style="border-radius:  0 10px 0 0 ">发布时间 </div>
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-l-1 fl-pa-lg">
+          <div @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/17b48ac9-b64c-4ce2-ae97-a0cb0ac90fee.pdf')">延庆区博物馆2024年度工作计划</div>
+        </div>
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-r-1 border-l-1 fl-py-lg fl-px-md font-10">2023-12-12</div>
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-l-1 border-b-1 fl-pa-lg">
+
+          <div @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/4b94e30a-6237-497f-b3e6-3241c1708b91.pdf')">延庆区博物馆2023年度工作计划</div>
+        </div>
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-r-1 border-l-1 fl-py-lg fl-px-md border-b-1 font-10">2022-12-12</div>
+
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-l-1 border-b-1 fl-pa-lg"
+             style="border-radius:  0  0  0 10px">
+          <div @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/bbc7f174-b02f-447e-a9ba-55c0f180b6ab.pdf')">延庆区博物馆2022年度工作计划</div>
+        </div>
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-r-1 border-l-1 fl-py-lg fl-px-md border-b-1 font-10"
+             style="border-radius:  0  0  10px 0 ">2021-12-12</div>
+
+      </div>
+
+    </div>
+  </div>
+  <div v-else
+       class="about-page overflow-auto">
+    <div class="about-text row items-center"
          style="
         border-bottom: 1px solid rgba(233, 233, 233, 1);
-        font-weight: 700;
-        font-size: 20px;
       ">
-      <div class="col-10 cursor"
+      <div class="col-6 col-md-10 cursor"
            @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/17b48ac9-b64c-4ce2-ae97-a0cb0ac90fee.pdf')">延庆区博物馆2024年度工作计划</div>
-      <div class="col-2">
+      <div class="col-6 col-md-2">
         <div>发布时间</div>
         <div class="fl-mt-sm">2023-12-17</div>
       </div>
     </div>
-    <div class="row items-center fl-mt-lg fl-pa-lg"
+    <div class="about-text row items-center "
          style="
         border-bottom: 1px solid rgba(233, 233, 233, 1);
-        font-weight: 700;
-        font-size: 20px;
+
       ">
-      <div class="col-10 cursor"
+      <div class="col-6 col-md-10 cursor"
            @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/4b94e30a-6237-497f-b3e6-3241c1708b91.pdf')">延庆区博物馆2023年度工作计划</div>
-      <div class="col-2">
+      <div class="col-6 col-md-2">
         <div>发布时间</div>
         <div class="fl-mt-sm">2022-12-17</div>
       </div>
     </div>
-    <div class="row items-center fl-mt-lg fl-pa-lg"
+    <div class="about-text row items-center "
          style="
         border-bottom: 1px solid rgba(233, 233, 233, 1);
-        font-weight: 700;
-        font-size: 20px;
+
       ">
-      <div class="col-10 cursor"
+      <div class="col-6 col-md-10 cursor"
            @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/bbc7f174-b02f-447e-a9ba-55c0f180b6ab.pdf')">延庆区博物馆2022年度工作计划</div>
-      <div class="col-2">
+      <div class="col-6 col-md-2">
         <div>发布时间</div>
         <div class="fl-mt-sm">2021-12-17</div>
       </div>
@@ -43,6 +68,21 @@
   </div>
 </template>
 <script setup>
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  getCurrentInstance,
+  watch,
+  nextTick,
+} from "vue";
+const state = reactive({
+  isH5: false,
+});
+onBeforeMount(() => {
+  state.isH5 = localStorage.getItem("isH5");
+})
+
 const handleOpen = (url) => {
   window.open(url)
 }
@@ -52,14 +92,14 @@ const handleOpen = (url) => {
 @media only screen and (max-width: 768px) {
   /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
   .about-page {
-    max-height: calc(100vh - 78px - 72px);
+    min-height: calc(100vh - 78px - 72px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
     padding: 9px 14px;
   }
   .about-text {
-    padding: 16px 13px;
-    background: #fff;
+    padding: 4px;
+    margin-top: 8px;
   }
 }
 
@@ -73,7 +113,10 @@ const handleOpen = (url) => {
     padding: 41px;
   }
   .about-text {
-    padding: 40px 131px;
+    font-weight: 700;
+    font-size: 20px;
+    padding: 24px;
+    margin-top: 24px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/about/audiencesurveys.vue b/src/views/about/audiencesurveys.vue
index d9abd30..4956492 100644
--- a/src/views/about/audiencesurveys.vue
+++ b/src/views/about/audiencesurveys.vue
@@ -1,7 +1,88 @@
 <template>
-  <div class="about-page overflow-auto row justify-center"
-       style="padding: 41px">
-    <div class="col-8">
+  <div v-if="(state.isH5 == 'true')"
+       class="about-page row ">
+    <div class="overflow-auto row justify-center fl-pa-md"
+         style="background:rgba(179, 198, 193, 0.3);border-radius:10px">
+      <div class="col-12 col-md-8">
+        <div class="row items-center">
+          <img src="../../assets/images/icon-audien-logo.png"
+               alt=""
+               style="width:50px">
+          <div class="fl-mt-sm fl-ml-sm">
+            <div style="color:#195D4A"
+                 class="font-20 font-blod">我要留言</div>
+            <img src="../../assets/images/icon-audien-iwant.png"
+                 alt=""
+                 style="width:144px">
+          </div>
+
+        </div>
+        <div class="col-12 overflow-auto fl-mt-md"
+             style="height:166px;border:2px solid #547970;border-radius:10px;padding:15px;box-sizing: border-box;background:#fff"><span style="color:#B3C7C2">请输入留言内容</span></div>
+        <div class="row items-center fl-mt-lg">
+          <div class="col-2 font-blod font-16"
+               style="color:#195D4A">邮箱</div>
+          <div class="col-10 col-md-10"><input class="styled-input"></div>
+        </div>
+        <div class="row items-center fl-mt-lg">
+          <div class="col-2 font-blod font-16"
+               style="color:#195D4A">验证码</div>
+          <div class="col-10 col-md-10 row justify-between items-center">
+
+            <div class="col-6 col-md-10"><input class="styled-input"></div>
+            <div><img src="../../assets/images/icon-verify.png"
+                   style="width:105px" /></div>
+          </div>
+        </div>
+      </div>
+      <div class="col-12 row justify-center">
+        <div class="row items-center justify-center cursor font-14 font-blod"
+             style="border-radius:10px;background:#54796F;padding:8px 28px;color:#fff;width:120px;height:40px;margin-top:44px">提交留言</div>
+      </div>
+
+      <div class="col-12 col-md-10"
+           style="border-top:1px solid #54796F;margin-top:54px;margin-bottom:23px"></div>
+
+      <div class="col-12 col-md-10 row">
+        <div class="row items-center justify-center fl-ml-md"
+             style="border-radius:10px 10px 0 0;background:#54796F;padding:3px 28px;color:#fff;height:31px;box-sizing: border-box;">留言选登</div>
+
+        <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;">
+          <div v-for="(item,index) in state.userComment"
+               :key="index"
+               class="col-11"
+               style="padding:19px;box-sizing: border-box;"
+               :style="index !== state.userComment.length-1 ? 'border-bottom:1px solid #E2E2E2' : ''">
+            <div class="row">
+              <div class="font-blod fl-mb-sm"
+                   style="width:100px">网友留言
+              </div>
+              <div class="fl-mr-sm"
+                   style="color:#6F6F6F;word-break: break-all;">{{' '+ item.commint}}</div>
+              <div class="fl-mt-sm"
+                   style="color:#54796F;word-break: break-all;">{{item.time}}</div>
+            </div>
+
+            <div class="fl-mt-sm row">
+              <div class="font-blod fl-mb-sm"
+                   style="width:100px">留言回复
+              </div>
+              <div class="col-12 col-md-10"
+                   style="color:#6F6F6F;word-break: break-all;">{{' '+ item.reply}}</div>
+            </div>
+
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <div v-else
+       class="about-page overflow-auto row justify-center">
+    <div class="col-12 col-md-8">
       <div class="row items-center">
         <img src="../../assets/images/icon-audien-logo.png"
              alt=""
@@ -20,31 +101,29 @@
       <div class="row items-center fl-mt-lg">
         <div class="col-2 font-blod font-16"
              style="color:#195D4A">邮箱</div>
-        <div class="col-10"><input class="styled-input"></div>
+        <div class="col-12 col-md-10"><input class="styled-input"></div>
       </div>
       <div class="row items-center fl-mt-lg">
         <div class="col-2 font-blod font-16"
              style="color:#195D4A">验证码</div>
-        <div class="col-10 row justify-between">
+        <div class="col-12 col-md-10 row justify-between items-center">
 
-          <div class="col-10"><input class="styled-input"></div>
+          <div class="col-7 col-md-10"><input class="styled-input"></div>
           <div><img src="../../assets/images/icon-verify.png"
                  style="width:105px" /></div>
         </div>
       </div>
     </div>
     <div class="col-12 row justify-center">
-      <div class="row items-center justify-center cursor"
+      <div class="row items-center justify-center cursor font-14 font-blod"
            style="border-radius:10px;background:#54796F;padding:8px 28px;color:#fff;width:120px;height:40px;margin-top:40px">提交留言</div>
     </div>
 
-    <div></div>
-
-    <div class="col-10"
+    <div class="col-12 col-md-10"
          style="border-top:1px solid #54796F;margin-top:97px;margin-bottom:23px"></div>
 
-    <div class="col-10 row">
-      <div class="row items-center justify-center"
+    <div class="col-12 col-md-10 row">
+      <div class="row items-center justify-center fl-ml-md"
            style="border-radius:10px 10px 0 0;background:#54796F;padding:3px 28px;color:#fff;height:31px;box-sizing: border-box;">留言选登</div>
 
       <div class="row items-center justify-center fl-ml-md cursor"
@@ -69,7 +148,7 @@
             <div class="font-blod text-center"
                  style="width:100px">留言回复
             </div>
-            <div class="col-10"
+            <div class="col-12 col-md-10"
                  style="color:#6F6F6F;word-break: break-all;">{{' '+ item.reply}}</div>
           </div>
 
@@ -80,6 +159,8 @@
   </div>
 </template>
 <script setup>
+
+
 import {
   ref,
   reactive,
@@ -103,9 +184,11 @@ const state = reactive({
       commint: '网上预的两大一小的票，如果其中一个大人因故不能参观，现场能退票退款吗？',
       reply: '你好！故宫门票(大门票、珍宝馆、钟表馆)一经检票，不予退票，未检票的门票可以于参观前一日2400前，通过原订票渠道退票，不计爽约。参规当日20:00前仍可退票，但计1次爽约。参观当日20:00后不可退票退款，且计1次爽约，每人每日最多记1次爽约，180日内累计爽约3次，从第3次爽约的的次日起，60日内将无法预约故宫博物院门票及展览。祝你生活愉快！',
     },
-  ]
+  ],
+  isH5: false,
 });
 onBeforeMount(() => {
+  state.isH5 = localStorage.getItem("isH5");
 })
 
 
@@ -120,7 +203,6 @@ const handleLink = (url) => {
   .about-page {
     max-height: calc(100vh - 78px - 72px);
     overflow: auto;
-    background: url("../../assets/images/about-bg.png");
     padding: 9px 14px;
   }
   .about-text {
@@ -139,7 +221,7 @@ const handleLink = (url) => {
     padding: 41px;
   }
   .about-text {
-    padding: 40px 131px;
+    padding: 40px;
   }
 }
 .styled-input {
diff --git a/src/views/about/council.vue b/src/views/about/council.vue
index 26ef11b..720ac92 100644
--- a/src/views/about/council.vue
+++ b/src/views/about/council.vue
@@ -641,7 +641,7 @@
     padding: 41px;
   }
   .about-text {
-    padding: 40px 131px;
+    padding: 40px;
   }
 }
 </style>
diff --git a/src/views/about/developmentplanning.vue b/src/views/about/developmentplanning.vue
index bcd532d..9747c63 100644
--- a/src/views/about/developmentplanning.vue
+++ b/src/views/about/developmentplanning.vue
@@ -325,7 +325,7 @@
     padding: 41px;
   }
   .about-text {
-    padding: 40px 131px;
+    padding: 40px;
   }
 }
 </style>
diff --git a/src/views/about/friendsofthemuseum.vue b/src/views/about/friendsofthemuseum.vue
index 6200d94..209c4af 100644
--- a/src/views/about/friendsofthemuseum.vue
+++ b/src/views/about/friendsofthemuseum.vue
@@ -181,7 +181,7 @@
     padding: 41px;
   }
   .about-text {
-    padding: 40px 131px;
+    padding: 40px;
   }
 }
 </style>
diff --git a/src/views/about/interpretive.vue b/src/views/about/interpretive.vue
index 25140ae..75ec14c 100644
--- a/src/views/about/interpretive.vue
+++ b/src/views/about/interpretive.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="about-page overflow-auto row justify-center"
-       style="padding: 41px">
-    <div style="padding: 40px 131px;width:683px">
+  <div class="about-page overflow-auto row justify-center">
+
+    <div class="about-text"
+         style="">
       <p style="font-size: 20px; text-align: center">
         <span style="color: #b8741a">讲解服务制度</span>
       </p>
@@ -138,7 +139,8 @@
     padding: 41px;
   }
   .about-text {
-    padding: 40px 131px;
+    padding: 40px;
+    width: 683px;
   }
 }
 </style>
diff --git a/src/views/about/seniormanagement.vue b/src/views/about/seniormanagement.vue
index be3ba8a..8ccf22f 100644
--- a/src/views/about/seniormanagement.vue
+++ b/src/views/about/seniormanagement.vue
@@ -48,7 +48,7 @@
     padding: 41px;
   }
   .about-text {
-    padding: 40px 131px;
+    padding: 40px;
   }
 }
 </style>
diff --git a/src/views/about/socialdonation.vue b/src/views/about/socialdonation.vue
index 682a657..f0d493f 100644
--- a/src/views/about/socialdonation.vue
+++ b/src/views/about/socialdonation.vue
@@ -133,7 +133,7 @@
     padding: 41px;
   }
   .about-text {
-    padding: 40px 131px;
+    padding: 40px;
   }
 }
 </style>
diff --git a/src/views/about/statutes.vue b/src/views/about/statutes.vue
index 3225591..d26f032 100644
--- a/src/views/about/statutes.vue
+++ b/src/views/about/statutes.vue
@@ -650,7 +650,7 @@
     padding: 41px;
   }
   .about-text {
-    padding: 40px 131px;
+    padding: 40px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/about/supervisoryauthority.vue b/src/views/about/supervisoryauthority.vue
index a2633c7..a1ab179 100644
--- a/src/views/about/supervisoryauthority.vue
+++ b/src/views/about/supervisoryauthority.vue
@@ -1,9 +1,38 @@
 <template>
   <div class="about-page overflow-auto">
-    <div class="about-text">
+    <div v-if="(state.isH5 == 'true')"
+         class="about-text">
+      <div style="font-weight:bold;font-size:14px;text-align:center">延庆区博物馆监事人员名单</div>
+      <div style="margin-top:20px">
+        <div class="row">
+          <div class="col-4 row items-center justify-center box-sizing border-t-1 border-l-1 font-12 fl-py-sm"
+               style="border-radius: 10px 0 0 0 ">照片 </div>
+          <div class="col-3 row items-center justify-center box-sizing border-t-1 border-l-1 font-12 fl-py-sm"> 姓名</div>
+          <div class="col-5 row items-center justify-center box-sizing border-t-1 border-r-1 border-l-1  font-12 fl-py-sm"
+               style="border-radius:  0 10px 0 0 ">简介 </div>
+          <div class="col-4 row items-center justify-center box-sizing border-t-1 border-l-1">
+            <img src="../../assets/images/peo-1.png"
+                 style="width: 68px;height:88px">
+          </div>
+          <div class="col-3 row items-center justify-center box-sizing border-t-1 border-l-1 font-10"> 付红雁</div>
+          <div class="col-5 row items-center justify-center box-sizing border-t-1 border-r-1 border-l-1 fl-py-lg fl-px-md font-10">2008年至今，就职于延庆区博物馆（文物所）职工，曾就职于隆庆阁文物商店，是延庆区金牌讲解员。 </div>
+          <div class="col-4 row items-center justify-center box-sizing border-t-1 border-l-1 border-b-1"
+               style="border-radius:  0  0  0 10px">
+            <img src="../../assets/images/peo-2.png"
+                 style="width: 68px;height:88px">
+          </div>
+          <div class="col-3 row items-center justify-center box-sizing border-t-1 border-l-1 border-b-1 font-10"> 王伯轩</div>
+          <div class="col-5 row items-center justify-center box-sizing border-t-1 border-r-1 border-l-1 fl-py-lg fl-px-md border-b-1 font-10"
+               style="border-radius:  0  0  10px 0 ">2008年至今，就职于延庆区博物馆（文物所）职工，主要从事博物馆宣教陈列、藏品保管、数字档案等，2022年取得北京市博物馆专业副高级职称。 </div>
+
+        </div>
+
+      </div>
+    </div>
+    <div v-else
+         class="about-text">
       <div style="font-weight:bold;font-size:20px">延庆区博物馆监事人员名单</div>
-      <div class=" "
-           style="margin-top:55px">
+      <div style="margin-top:55px">
 
         <img src="../../assets/images/about-supervisoryauthority.png"
              style="width: 100%">
@@ -11,6 +40,30 @@
     </div>
   </div>
 </template>
+<script setup>
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  getCurrentInstance,
+  watch,
+  nextTick,
+} from "vue";
+import { useRoute, useRouter } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
+const state = reactive({
+  isH5: false,
+});
+onBeforeMount(() => {
+  state.isH5 = localStorage.getItem("isH5");
+})
+
+
+const handleLink = (url) => {
+}
+</script>
+
 <style scoped>
 @media only screen and (max-width: 768px) {
   /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
@@ -37,7 +90,7 @@
     padding: 41px;
   }
   .about-text {
-    padding: 40px 131px;
+    padding: 40px;
   }
 }
 </style>
diff --git a/src/views/about/threeyeannrep.vue b/src/views/about/threeyeannrep.vue
index da475a6..d89ec6a 100644
--- a/src/views/about/threeyeannrep.vue
+++ b/src/views/about/threeyeannrep.vue
@@ -1,41 +1,66 @@
 <template>
-  <div class="about-page overflow-auto"
-       style="padding: 41px">
-    <div class="row items-center fl-mt-lg fl-pa-lg"
+  <div v-if="(state.isH5 == 'true')"
+       class="about-text">
+    <div style="margin-top:20px;padding:10px">
+      <div class="row">
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-l-1 font-12 fl-py-sm"
+             style="border-radius: 10px 0 0 0 ">名称 </div>
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-r-1 border-l-1  font-12 fl-py-sm"
+             style="border-radius:  0 10px 0 0 ">发布时间 </div>
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-l-1 fl-pa-lg">
+          <div @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/d820103a-2883-4140-9c77-881cf2e2ccfc.pdf')">延庆博物馆2023年工作报告</div>
+        </div>
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-r-1 border-l-1 fl-py-lg fl-px-md font-10">2023-12-12</div>
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-l-1 border-b-1 fl-pa-lg">
+
+          <div @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/a08dd5cb-c7d7-4698-82bb-e12e85b74ff5.pdf')">延庆博物馆2022年工作报告</div>
+        </div>
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-r-1 border-l-1 fl-py-lg fl-px-md border-b-1 font-10">2022-12-12</div>
+
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-l-1 border-b-1 fl-pa-lg"
+             style="border-radius:  0  0  0 10px">
+          <div @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/b31e28b4-7b6d-4f65-9617-192ad7924e43.pdf')">延庆博物馆2021年工作报告</div>
+        </div>
+        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-r-1 border-l-1 fl-py-lg fl-px-md border-b-1 font-10"
+             style="border-radius:  0  0  10px 0 ">2021-12-12</div>
+
+      </div>
+
+    </div>
+  </div>
+  <div v-else
+       class="about-page overflow-auto">
+    <div class="about-text row items-center "
          style="
         border-bottom: 1px solid rgba(233, 233, 233, 1);
-        font-weight: 700;
-        font-size: 20px;
       ">
-      <div class="col-10 cursor"
+      <div class="col-6 col-md-10 cursor"
            @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/d820103a-2883-4140-9c77-881cf2e2ccfc.pdf')">延庆博物馆2023年工作报告</div>
-      <div class="col-2">
+      <div class="col-6 col-md-2">
         <div>发布时间</div>
         <div class="fl-mt-sm">2023-12-17</div>
       </div>
     </div>
-    <div class="row items-center fl-mt-lg fl-pa-lg"
+    <div class="about-text row items-center "
          style="
         border-bottom: 1px solid rgba(233, 233, 233, 1);
-        font-weight: 700;
-        font-size: 20px;
+
       ">
-      <div class="col-10 cursor"
+      <div class="col-6 col-md-10 cursor"
            @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/a08dd5cb-c7d7-4698-82bb-e12e85b74ff5.pdf')">延庆博物馆2022年工作报告</div>
-      <div class="col-2">
+      <div class="col-6 col-md-2">
         <div>发布时间</div>
         <div class="fl-mt-sm">2022-12-17</div>
       </div>
     </div>
-    <div class="row items-center fl-mt-lg fl-pa-lg"
+    <div class="about-text row items-center "
          style="
         border-bottom: 1px solid rgba(233, 233, 233, 1);
-        font-weight: 700;
-        font-size: 20px;
+
       ">
-      <div class="col-10 cursor"
+      <div class="col-6 col-md-10 cursor"
            @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/b31e28b4-7b6d-4f65-9617-192ad7924e43.pdf')">延庆博物馆2021年工作报告</div>
-      <div class="col-2">
+      <div class="col-6 col-md-2">
         <div>发布时间</div>
         <div class="fl-mt-sm">2021-12-17</div>
       </div>
@@ -43,6 +68,21 @@
   </div>
 </template>
 <script setup>
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  getCurrentInstance,
+  watch,
+  nextTick,
+} from "vue";
+const state = reactive({
+  isH5: false,
+});
+onBeforeMount(() => {
+  state.isH5 = localStorage.getItem("isH5");
+})
+
 const handleOpen = (url) => {
   window.open(url)
 }
@@ -51,14 +91,14 @@ const handleOpen = (url) => {
 @media only screen and (max-width: 768px) {
   /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
   .about-page {
-    max-height: calc(100vh - 78px - 72px);
+    min-height: calc(100vh - 78px - 72px);
     overflow: auto;
     background: url("../../assets/images/about-bg.png");
     padding: 9px 14px;
   }
   .about-text {
-    padding: 16px 13px;
-    background: #fff;
+    padding: 4px;
+    margin-top: 8px;
   }
 }
 
@@ -72,7 +112,10 @@ const handleOpen = (url) => {
     padding: 41px;
   }
   .about-text {
-    padding: 40px 131px;
+    font-weight: 700;
+    font-size: 20px;
+    padding: 24px;
+    margin-top: 24px;
   }
 }
 </style>
diff --git a/src/views/aboutpage.vue b/src/views/aboutpage.vue
index 5fe0159..70785d7 100644
--- a/src/views/aboutpage.vue
+++ b/src/views/aboutpage.vue
@@ -1,84 +1,197 @@
 <template>
-  <div style="min-height:100vh"
+  <div style="min-height: 100vh"
        class="100vw">
-    <div style="height:80px;background:#000;"
+    <div 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>
 
       <div class="col-9 col-md-6 row justify-around items-center">
-
         <div class="cursor header-title relative"
-             @click="handleLink('/home/navigation')">首页</div>
+             @click="handleLink('/home/navigation')">
+          首页
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">导航</div>
+             @click="handleLink('')">
+          导航
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">展览</div>
+             @click="handleLink('')">
+          展览
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">典藏</div>
+             @click="handleLink('')">
+          典藏
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">资讯</div>
+             @click="handleLink('')">
+          资讯
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">文创</div>
+             @click="handleLink('')">
+          文创
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">数字文脉</div>
-        <div class="cursor header-title hover-dom 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">
+               style="position: absolute; top: 20px; left: -38px; z-index: 9999">
             <div class="row justify-center secmenu fl-mt-lg"
-                 style="padding: 4px 8px ">
+                 style="padding: 4px 8px">
               <div class="cursor"
-                   style="padding: 8px;border-bottom:1px solid #fff "
-                   @click="handleLink('/about/statutes')">制度公开</div>
+                   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>
+                   style="padding: 8px; border-bottom: 1px solid #fff"
+                   @click="handleLink('/common/interpretive')">
+                讲解服务
+              </div>
               <div class="cursor"
-                   style="padding: 8px  "
-                   @click="handleLink('/common/audiencesurveys')">观众调查</div>
-
+                   style="padding: 8px"
+                   @click="handleLink('/common/audiencesurveys')">
+                观众调查
+              </div>
             </div>
           </div>
         </div>
-
       </div>
     </div>
     <div class="row fl-page-width">
       <div class="color-white overflow-auto about-menu"
-           style="background:rgba(0,0,0,0.8);">
-        <div style="height:50px"
+           style="background: rgba(0, 0, 0, 0.8)">
+        <div style="height: 50px"
              class="cursor row items-center justify-center fl-px-sm"
-             v-for="(item,index) in state.aboutPages"
+             v-for="(item, index) in state.aboutPages"
              :key="index"
              @click="handleLink(item.url)"
-             :class="state.activePage === item.url? 'active-about':''">{{item.title}}</div>
+             :class="state.activePage === item.url ? 'active-about' : ''">
+          {{ item.title }}
+        </div>
       </div>
 
       <div class="about-router">
         <router-view></router-view>
-
       </div>
     </div>
-    <div style="height:145px;background:#000;"
-         class="row justify-center color-white">
-      <div class="col-6 col-md-4 row justify-around "
-           style="margin-top:32px;max-width:300px">
+    <div style="height: 145px; background: #000"
+         class="row justify-center color-white relative">
+      <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"
+        <div class="cursor"
              @click="handleLink('')">隐私</div>
-        <div class="
-             cursor"
+        <div class="cursor"
              @click="handleLink('')">条款</div>
-        <div class="
-             col-12
-             cursor
-             text-center">copyright 2024 最终所有权归延庆博物馆</div>
+        <div class="col-12 cursor text-center">
+          copyright 2024 最终所有权归延庆博物馆
+        </div>
       </div>
-    </div>
+      <div v-if="state.isH5 == 'true'"
+           style="
+          border-radius: 50%;
+          position: absolute;
+          top: -60px;
+          left: 60px;
+          z-index: 10;
+        "
+           class="relative menu-dom">
+        <img src="../assets/images/icon-menu.png"
+             style="width: 32px" />
+
+        <div class="menu-hover-dom row justify-center"
+             style="
+            position: absolute;
+            top: -345px;
+            left: 18px;
+            z-index: 9;
+            padding-bottom: 20px;
+          ">
+          <div class="row justify-center fl-mt-lg"
+               style="
+              padding: 0 10px;
+              height: 340px;
+              width: 104px;
+              background: #000;
+            ">
+            <div class="cursor col-12 row items-center justify-center"
+                 style="border-bottom: 1px solid #fff"
+                 @click="handleLink('/home/navigation')">
+              首页
+            </div>
+            <div class="cursor col-12 row items-center justify-center"
+                 style="border-bottom: 1px solid #fff"
+                 @click="handleLink('')">
+              导航
+            </div>
+            <div class="cursor col-12 row items-center justify-center"
+                 style="border-bottom: 1px solid #fff"
+                 @click="handleLink('')">
+              展览
+            </div>
+            <div class="cursor col-12 row items-center justify-center"
+                 style="border-bottom: 1px solid #fff"
+                 @click="handleLink('')">
+              典藏
+            </div>
+            <div class="cursor col-12 row items-center justify-center"
+                 style="border-bottom: 1px solid #fff"
+                 @click="handleLink('')">
+              资讯
+            </div>
+            <div class="cursor col-12 row items-center justify-center"
+                 style="border-bottom: 1px solid #fff"
+                 @click="handleLink('')">
+              文创
+            </div>
+            <div class="cursor col-12 row items-center justify-center"
+                 style="border-bottom: 1px solid #fff"
+                 @click="handleLink('')">
+              数字文脉
+            </div>
+            <div class="cursor col-12 row items-center justify-center relative about-dom">
+              关于
+              <div class="about-hover-dom row justify-center"
+                   style="
+                  position: absolute;
+                  top: -122px;
+                  left: 120%;
+                  z-index: 9;
+                  padding-bottom: 20px;
+                ">
+                <div class="row justify-center fl-mt-lg"
+                     style="padding: 0 10px; width: 104px; background: #000">
+                  <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>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
@@ -90,69 +203,69 @@ import {
   watch,
   nextTick,
 } from "vue";
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter } from "vue-router";
 const route = useRoute();
 const router = useRouter();
 const state = reactive({
-  activePage: '/about/statutes',
+  activePage: "/about/statutes",
   aboutPages: [
     {
-      url: '/about/statutes',
-      title: '博物馆章程资料',
+      url: "/about/statutes",
+      title: "博物馆章程资料",
     },
     {
-      url: '/about/council',
-      title: '理事会材料',
+      url: "/about/council",
+      title: "理事会材料",
     },
     {
-      url: '/about/seniormanagement',
-      title: '高级管理人员材料',
+      url: "/about/seniormanagement",
+      title: "高级管理人员材料",
     },
     {
-      url: '/about/academiccommittee',
-      title: '学术委员会组织制度等材料',
+      url: "/about/academiccommittee",
+      title: "学术委员会组织制度等材料",
     },
     {
-      url: '/about/supervisoryauthority',
-      title: '监督机构材料',
+      url: "/about/supervisoryauthority",
+      title: "监督机构材料",
     },
     {
-      url: '/about/developmentplanning',
-      title: '发展规划材料',
+      url: "/about/developmentplanning",
+      title: "发展规划材料",
     },
     {
-      url: '/about/annualworkplan',
-      title: '年度工作计划材料',
+      url: "/about/annualworkplan",
+      title: "年度工作计划材料",
     },
     {
-      url: '/about/threeyeannrep',
-      title: '前三年年度报告材料',
+      url: "/about/threeyeannrep",
+      title: "前三年年度报告材料",
     },
     {
-      url: '/about/socialdonation',
-      title: '社会捐赠管理制度材料',
+      url: "/about/socialdonation",
+      title: "社会捐赠管理制度材料",
     },
     {
-      url: '/about/friendsofthemuseum',
-      title: '“博物馆之友”组织章程',
+      url: "/about/friendsofthemuseum",
+      title: "“博物馆之友”组织章程",
     },
-  ]
+  ],
+  isH5: false,
 });
 onBeforeMount(() => {
   const currentPath = route.path;
   state.activePage = currentPath;
-})
-
+  state.isH5 = localStorage.getItem("isH5");
+});
 
 const handleLink = (url) => {
   if (url) {
-    router.push(url)
+    router.push(url);
     state.activePage = url;
   } else {
-    router.push('/common/staytuned')
+    router.push("/common/staytuned");
   }
-}
-
+};
 </script>
 
 <style scoped>
@@ -215,4 +328,18 @@ 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 14acfa1..d883900 100644
--- a/src/views/commonpage.vue
+++ b/src/views/commonpage.vue
@@ -1,44 +1,65 @@
 <template>
-  <div style="min-height:100vh"
+  <div style="min-height: 100vh"
        class="100vw">
-    <div style="height:80px;background:#000;"
+    <div 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>
 
       <div class="col-9 col-md-6 row justify-around items-center">
-
         <div class="cursor header-title relative"
-             @click="handleLink('/home/navigation')">首页</div>
+             @click="handleLink('/home/navigation')">
+          首页
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">导航</div>
+             @click="handleLink('')">
+          导航
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">展览</div>
+             @click="handleLink('')">
+          展览
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">典藏</div>
+             @click="handleLink('')">
+          典藏
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">资讯</div>
+             @click="handleLink('')">
+          资讯
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">文创</div>
+             @click="handleLink('')">
+          文创
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">数字文脉</div>
+             @click="handleLink('')">
+          数字文脉
+        </div>
 
-        <div class="cursor header-title hover-dom relative">关于
+        <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">
+               style="position: absolute; top: 20px; left: -38px; z-index: 9999">
             <div class="row justify-center secmenu fl-mt-lg"
-                 style="padding: 4px 8px ">
+                 style="padding: 4px 8px">
               <div class="cursor"
-                   style="padding: 8px;border-bottom:1px solid #fff "
-                   @click="handleLink('/about/statutes')">制度公开</div>
+                   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>
+                   style="padding: 8px; border-bottom: 1px solid #fff"
+                   @click="handleLink('/common/interpretive')">
+                讲解服务
+              </div>
               <div class="cursor"
-                   style="padding: 8px  "
-                   @click="handleLink('/common/audiencesurveys')">观众调查</div>
-
+                   style="padding: 8px"
+                   @click="handleLink('/common/audiencesurveys')">
+                观众调查
+              </div>
             </div>
           </div>
         </div>
@@ -48,28 +69,24 @@
       <router-view></router-view>
     </div>
 
-    <div style="height:145px;background:#000;"
+    <div style="height: 145px; background: #000"
          class="row justify-center color-white">
-      <div class="col-6 col-md-4 row justify-around "
-           style="margin-top:32px;max-width:300px">
+      <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"
+        <div class="cursor"
              @click="handleLink('')">隐私</div>
-        <div class="
-             cursor"
+        <div class="cursor"
              @click="handleLink('')">条款</div>
-        <div class="
-             col-12
-             cursor
-             text-center">copyright 2024 最终所有权归延庆博物馆</div>
+        <div class="col-12 cursor text-center">
+          copyright 2024 最终所有权归延庆博物馆
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script setup>
-
 import {
   ref,
   reactive,
@@ -78,26 +95,25 @@ import {
   watch,
   nextTick,
 } from "vue";
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter } from "vue-router";
 const route = useRoute();
 const router = useRouter();
 const state = reactive({
-  activePage: '',
+  activePage: "",
 });
 onBeforeMount(() => {
   const currentPath = route.path;
   state.activePage = currentPath;
-})
-
+});
 
 const handleLink = (url) => {
   if (url) {
-    router.push(url)
+    router.push(url);
     state.activePage = url;
   } else {
-    router.push('/common/staytuned')
+    router.push("/common/staytuned");
   }
-}
+};
 </script>
 
 <style scoped>
diff --git a/src/views/homepage.vue b/src/views/homepage.vue
index 937abaf..ee10de7 100644
--- a/src/views/homepage.vue
+++ b/src/views/homepage.vue
@@ -1,44 +1,65 @@
 <template>
-  <div style="min-height:100vh"
+  <div style="min-height: 100vh"
        class="100vw">
-    <div style="height:80px;background:#000;"
+    <div 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>
 
       <div class="col-9 col-md-6 row justify-around items-center">
-
         <div class="cursor header-title relative"
-             @click="handleLink('/home/navigation')">首页</div>
+             @click="handleLink('/home/navigation')">
+          首页
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">导航</div>
+             @click="handleLink('')">
+          导航
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">展览</div>
+             @click="handleLink('')">
+          展览
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">典藏</div>
+             @click="handleLink('')">
+          典藏
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">资讯</div>
+             @click="handleLink('')">
+          资讯
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">文创</div>
+             @click="handleLink('')">
+          文创
+        </div>
         <div class="cursor header-title relative"
-             @click="handleLink('')">数字文脉</div>
+             @click="handleLink('')">
+          数字文脉
+        </div>
 
-        <div class="cursor header-title hover-dom relative">关于
+        <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">
+               style="position: absolute; top: 20px; left: -38px; z-index: 9999">
             <div class="row justify-center secmenu fl-mt-lg"
-                 style="padding: 4px 8px ">
+                 style="padding: 4px 8px">
               <div class="cursor"
-                   style="padding: 8px;border-bottom:1px solid #fff "
-                   @click="handleLink('/about/statutes')">制度公开</div>
+                   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>
+                   style="padding: 8px; border-bottom: 1px solid #fff"
+                   @click="handleLink('/common/interpretive')">
+                讲解服务
+              </div>
               <div class="cursor"
-                   style="padding: 8px  "
-                   @click="handleLink('/common/audiencesurveys')">观众调查</div>
-
+                   style="padding: 8px"
+                   @click="handleLink('/common/audiencesurveys')">
+                观众调查
+              </div>
             </div>
           </div>
         </div>
@@ -48,28 +69,24 @@
       <router-view></router-view>
     </div>
 
-    <div style="height:145px;background:#000;"
+    <div style="height: 145px; background: #000"
          class="row justify-center color-white">
-      <div class="col-6 col-md-4 row justify-around "
-           style="margin-top:32px;max-width:300px">
+      <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"
+        <div class="cursor"
              @click="handleLink('')">隐私</div>
-        <div class="
-             cursor"
+        <div class="cursor"
              @click="handleLink('')">条款</div>
-        <div class="
-             col-12
-             cursor
-             text-center">copyright 2024 最终所有权归延庆博物馆</div>
+        <div class="col-12 cursor text-center">
+          copyright 2024 最终所有权归延庆博物馆
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script setup>
-
 import {
   ref,
   reactive,
@@ -78,26 +95,25 @@ import {
   watch,
   nextTick,
 } from "vue";
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter } from "vue-router";
 const route = useRoute();
 const router = useRouter();
 const state = reactive({
-  activePage: '',
+  activePage: "",
 });
 onBeforeMount(() => {
   const currentPath = route.path;
   state.activePage = currentPath;
-})
-
+});
 
 const handleLink = (url) => {
   if (url) {
-    router.push(url)
+    router.push(url);
     state.activePage = url;
   } else {
-    router.push('/common/staytuned')
+    router.push("/common/staytuned");
   }
-}
+};
 </script>
 
 <style scoped>