diff --git a/src/assets/images/icon-verify.png b/src/assets/images/icon-verify.png
new file mode 100644
index 0000000..7942888
Binary files /dev/null and b/src/assets/images/icon-verify.png differ
diff --git a/src/views/about/academiccommittee.vue b/src/views/about/academiccommittee.vue
index 99cc47b..b861e6b 100644
--- a/src/views/about/academiccommittee.vue
+++ b/src/views/about/academiccommittee.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="about-page overflow-auto"
-       style="padding: 41px">
-    <div style="padding: 40px 131px">
+  <div class="about-page overflow-auto">
+    <div class="about-text">
       <p style="font-size: 20px; text-align: center">
         <span style="font-weight: 700">延庆博物馆学术委员会章程</span>
       </p>
@@ -181,10 +180,31 @@
   </div>
 </template>
 <style scoped>
-.about-page {
-  max-height: calc(100vh - 160px - 145px);
-  min-height: calc(100vh - 160px - 145px);
-  overflow: auto;
-  background: url("../../assets/images/about-bg.png");
+@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;
+  }
+  .about-text {
+    padding: 16px 13px;
+    background: #fff;
+  }
 }
-</style>
+
+@media only screen and (min-width: 769px) {
+  /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
+  .about-page {
+    max-height: calc(100vh - 160px - 145px);
+    min-height: calc(100vh - 160px - 145px);
+    overflow: auto;
+    background: url("../../assets/images/about-bg.png");
+    padding: 41px;
+  }
+  .about-text {
+    padding: 40px 131px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/about/annualworkplan.vue b/src/views/about/annualworkplan.vue
index 7ee4e04..7639e26 100644
--- a/src/views/about/annualworkplan.vue
+++ b/src/views/about/annualworkplan.vue
@@ -49,10 +49,31 @@ const handleOpen = (url) => {
 </script>
 
 <style scoped>
-.about-page {
-  max-height: calc(100vh - 160px - 145px);
-  min-height: calc(100vh - 160px - 145px);
-  overflow: auto;
-  background: url("../../assets/images/about-bg.png");
+@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;
+  }
+  .about-text {
+    padding: 16px 13px;
+    background: #fff;
+  }
 }
-</style>
+
+@media only screen and (min-width: 769px) {
+  /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
+  .about-page {
+    max-height: calc(100vh - 160px - 145px);
+    min-height: calc(100vh - 160px - 145px);
+    overflow: auto;
+    background: url("../../assets/images/about-bg.png");
+    padding: 41px;
+  }
+  .about-text {
+    padding: 40px 131px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/about/audiencesurveys.vue b/src/views/about/audiencesurveys.vue
index ef5d1b1..d9abd30 100644
--- a/src/views/about/audiencesurveys.vue
+++ b/src/views/about/audiencesurveys.vue
@@ -20,18 +20,16 @@
       <div class="row items-center fl-mt-lg">
         <div class="col-2 font-blod font-16"
              style="color:#195D4A">邮箱</div>
-        <div class="col-10"
-             style=""><input class="styled-input"></div>
+        <div class="col-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-9"
-               style=""><input class="styled-input"></div>
-          <div class="col-2"
-               style=""><input class="styled-input"></div>
+          <div class="col-10"><input class="styled-input"></div>
+          <div><img src="../../assets/images/icon-verify.png"
+                 style="width:105px" /></div>
         </div>
       </div>
     </div>
@@ -115,17 +113,35 @@ const handleLink = (url) => {
 }
 </script>
 
+
 <style scoped>
-.about-page {
-  max-height: calc(100vh - 160px - 145px);
-  min-height: calc(100vh - 160px - 145px);
-  overflow: auto;
-  background: url("../../assets/images/about-bg.png");
-}
-.input-container {
-  position: relative;
+@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;
+  }
+  .about-text {
+    padding: 16px 13px;
+    background: #fff;
+  }
 }
 
+@media only screen and (min-width: 769px) {
+  /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
+  .about-page {
+    max-height: calc(100vh - 160px - 145px);
+    min-height: calc(100vh - 160px - 145px);
+    overflow: auto;
+    background: url("../../assets/images/about-bg.png");
+    padding: 41px;
+  }
+  .about-text {
+    padding: 40px 131px;
+  }
+}
 .styled-input {
   width: 100%;
   box-sizing: border-box;
diff --git a/src/views/about/council.vue b/src/views/about/council.vue
index 79438d3..26ef11b 100644
--- a/src/views/about/council.vue
+++ b/src/views/about/council.vue
@@ -1,19 +1,12 @@
 <template>
-  <div class="about-page overflow-auto"
-       style="padding: 41px">
-    <div style="padding: 40px 131px">
+  <div class="about-page overflow-auto">
+    <div class="about-text">
       <p style="font-size: 20px; text-align: center">
         <span style="font-weight: 700">延庆区博物馆理事会章程</span>
       </p>
-      <p style="font-size: 20px; text-align: center">
-        <span style="font-weight: 700"><br /></span>
-      </p>
       <p style="font-size: 16px; text-align: center">
         <span style="font-weight: 400">（草案）</span>
       </p>
-      <p style="font-size: 16px; text-align: center">
-        <span style="font-weight: 400"><br /></span>
-      </p>
       <p style="font-size: 16px; text-align: center">
         <span style="font-weight: 700">目 录</span>
       </p>
@@ -624,10 +617,31 @@
   </div>
 </template>
 <style scoped>
-.about-page {
-  max-height: calc(100vh - 160px - 145px);
-  min-height: calc(100vh - 160px - 145px);
-  overflow: auto;
-  background: url("../../assets/images/about-bg.png");
+@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;
+  }
+  .about-text {
+    padding: 16px 13px;
+    background: #fff;
+  }
+}
+
+@media only screen and (min-width: 769px) {
+  /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
+  .about-page {
+    max-height: calc(100vh - 160px - 145px);
+    min-height: calc(100vh - 160px - 145px);
+    overflow: auto;
+    background: url("../../assets/images/about-bg.png");
+    padding: 41px;
+  }
+  .about-text {
+    padding: 40px 131px;
+  }
 }
 </style>
diff --git a/src/views/about/developmentplanning.vue b/src/views/about/developmentplanning.vue
index 8d144b8..bcd532d 100644
--- a/src/views/about/developmentplanning.vue
+++ b/src/views/about/developmentplanning.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="about-page overflow-auto"
-       style="padding: 41px">
-    <div style="padding: 40px 131px">
+  <div class="about-page overflow-auto">
+    <div class="about-text">
       <p style="font-size: 20px; text-align: center">
         <span style="font-weight: 700">北京市延庆区博物馆（北京市延庆区文物管理所）</span>
       </p>
@@ -302,10 +301,31 @@
   </div>
 </template>
 <style scoped>
-.about-page {
-  max-height: calc(100vh - 160px - 145px);
-  min-height: calc(100vh - 160px - 145px);
-  overflow: auto;
-  background: url("../../assets/images/about-bg.png");
+@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;
+  }
+  .about-text {
+    padding: 16px 13px;
+    background: #fff;
+  }
+}
+
+@media only screen and (min-width: 769px) {
+  /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
+  .about-page {
+    max-height: calc(100vh - 160px - 145px);
+    min-height: calc(100vh - 160px - 145px);
+    overflow: auto;
+    background: url("../../assets/images/about-bg.png");
+    padding: 41px;
+  }
+  .about-text {
+    padding: 40px 131px;
+  }
 }
 </style>
diff --git a/src/views/about/friendsofthemuseum.vue b/src/views/about/friendsofthemuseum.vue
index b19b638..6200d94 100644
--- a/src/views/about/friendsofthemuseum.vue
+++ b/src/views/about/friendsofthemuseum.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="about-page overflow-auto"
-       style="padding: 41px">
-    <div class="text">
+  <div class="about-page overflow-auto">
+    <div class="about-text">
       <p style="font-size: 20px; text-align: center">
         <span style="font-weight: 700">延庆区博物馆“博物馆之友”章程（试行）</span>
       </p>
@@ -95,6 +94,9 @@
       <p style="font-size: 13px; text-align: left">
         <span style="font-weight: 400">4、协助博物馆组织临时展览、征集文物、教育活动、文博研讨等工作。</span>
       </p>
+      <p style="font-size: 13px; text-align: left">
+        <span style="font-weight: 400"><br /></span>
+      </p>
       <p style="font-size: 13px; text-align: center">
         <span style="font-weight: 700">第四章 会员管理</span>
       </p>
@@ -129,15 +131,15 @@
       <p style="font-size: 13px; text-align: left">
         <span style="font-weight: 700">第十条 </span><span style="font-weight: 400">会员资格有效期为一年，从获得会员资格日起算。有效期满则需提出申请，经审核通过后可延续。</span>
       </p>
+      <p style="font-size: 13px; text-align: left">
+        <span style="font-weight: 400"><br /></span>
+      </p>
       <p style="font-size: 13px; text-align: center">
         <span style="font-weight: 700">第五章 附则</span>
       </p>
       <p style="font-size: 13px; text-align: left">
         <span style="font-weight: 700">第十一条 </span><span style="font-weight: 400">延庆区博物馆拥有对“延庆区博物馆之友”的最终解释权。</span>
       </p>
-      <p style="font-size: 13px; text-align: left">
-        <span style="font-weight: 400">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</span>
-      </p>
       <p style="font-size: 13px; text-align: right">
         <span style="font-weight: 400"> </span>
       </p>
@@ -155,10 +157,31 @@
   </div>
 </template>
 <style scoped>
-.about-page {
-  max-height: calc(100vh - 160px - 145px);
-  min-height: calc(100vh - 160px - 145px);
-  overflow: auto;
-  background: url("../../assets/images/about-bg.png");
+@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;
+  }
+  .about-text {
+    padding: 16px 13px;
+    background: #fff;
+  }
+}
+
+@media only screen and (min-width: 769px) {
+  /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
+  .about-page {
+    max-height: calc(100vh - 160px - 145px);
+    min-height: calc(100vh - 160px - 145px);
+    overflow: auto;
+    background: url("../../assets/images/about-bg.png");
+    padding: 41px;
+  }
+  .about-text {
+    padding: 40px 131px;
+  }
 }
 </style>
diff --git a/src/views/about/interpretive.vue b/src/views/about/interpretive.vue
index c412fde..25140ae 100644
--- a/src/views/about/interpretive.vue
+++ b/src/views/about/interpretive.vue
@@ -114,10 +114,31 @@
   </div>
 </template>
 <style scoped>
-.about-page {
-  max-height: calc(100vh - 160px - 145px);
-  min-height: calc(100vh - 160px - 145px);
-  overflow: auto;
-  background: url("../../assets/images/about-bg.png");
+@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;
+  }
+  .about-text {
+    padding: 16px 13px;
+    background: #fff;
+  }
+}
+
+@media only screen and (min-width: 769px) {
+  /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
+  .about-page {
+    max-height: calc(100vh - 160px - 145px);
+    min-height: calc(100vh - 160px - 145px);
+    overflow: auto;
+    background: url("../../assets/images/about-bg.png");
+    padding: 41px;
+  }
+  .about-text {
+    padding: 40px 131px;
+  }
 }
 </style>
diff --git a/src/views/about/seniormanagement.vue b/src/views/about/seniormanagement.vue
index a8d6c25..be3ba8a 100644
--- a/src/views/about/seniormanagement.vue
+++ b/src/views/about/seniormanagement.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="about-page overflow-auto"
-       style="padding: 41px">
-    <div style="padding: 40px 131px">
+  <div class="about-page overflow-auto">
+    <div class="about-text">
       <p style="font-size: 20px; text-align: center">
         <span style="font-weight: 700">延庆博物馆高级管理人员信息公示</span>
       </p>
@@ -24,10 +23,32 @@
   </div>
 </template>
 <style scoped>
-.about-page {
-  max-height: calc(100vh - 160px - 145px);
-  min-height: calc(100vh - 160px - 145px);
-  overflow: auto;
-  background: url("../../assets/images/about-bg.png");
+@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;
+    height: 100%;
+  }
+  .about-text {
+    padding: 16px 13px;
+    background: #fff;
+  }
+}
+
+@media only screen and (min-width: 769px) {
+  /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
+  .about-page {
+    max-height: calc(100vh - 160px - 145px);
+    min-height: calc(100vh - 160px - 145px);
+    overflow: auto;
+    background: url("../../assets/images/about-bg.png");
+    padding: 41px;
+  }
+  .about-text {
+    padding: 40px 131px;
+  }
 }
 </style>
diff --git a/src/views/about/socialdonation.vue b/src/views/about/socialdonation.vue
index ad843bf..682a657 100644
--- a/src/views/about/socialdonation.vue
+++ b/src/views/about/socialdonation.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="about-page overflow-auto"
-       style="padding: 41px">
-    <div style="padding: 40px 131px">
+  <div class="about-page overflow-auto">
+    <div class="about-text">
       <p style="font-size: 20px; text-align: center">
         <span style="font-weight: 700">延庆区博物馆接受社会捐赠管理制度</span>
       </p>
@@ -110,10 +109,31 @@
   </div>
 </template>
 <style scoped>
-.about-page {
-  max-height: calc(100vh - 160px - 145px);
-  min-height: calc(100vh - 160px - 145px);
-  overflow: auto;
-  background: url("../../assets/images/about-bg.png");
+@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;
+  }
+  .about-text {
+    padding: 16px 13px;
+    background: #fff;
+  }
+}
+
+@media only screen and (min-width: 769px) {
+  /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
+  .about-page {
+    max-height: calc(100vh - 160px - 145px);
+    min-height: calc(100vh - 160px - 145px);
+    overflow: auto;
+    background: url("../../assets/images/about-bg.png");
+    padding: 41px;
+  }
+  .about-text {
+    padding: 40px 131px;
+  }
 }
 </style>
diff --git a/src/views/about/statutes.vue b/src/views/about/statutes.vue
index 59a0f42..3225591 100644
--- a/src/views/about/statutes.vue
+++ b/src/views/about/statutes.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="about-page overflow-auto"
-       style="padding: 41px">
-    <div style="padding: 40px 131px">
+  <div class="about-page overflow-auto">
+    <div class="about-text">
       <p style="font-size: 16px; text-align: center">
         <span style="font-weight: 700">延庆区博物馆理事会章程</span>
       </p>
@@ -627,10 +626,31 @@
   </div>
 </template>
 <style scoped>
-.about-page {
-  max-height: calc(100vh - 160px - 145px);
-  min-height: calc(100vh - 160px - 145px);
-  overflow: auto;
-  background: url("../../assets/images/about-bg.png");
+@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;
+  }
+  .about-text {
+    padding: 16px 13px;
+    background: #fff;
+  }
+}
+
+@media only screen and (min-width: 769px) {
+  /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
+  .about-page {
+    max-height: calc(100vh - 160px - 145px);
+    min-height: calc(100vh - 160px - 145px);
+    overflow: auto;
+    background: url("../../assets/images/about-bg.png");
+    padding: 41px;
+  }
+  .about-text {
+    padding: 40px 131px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/about/supervisoryauthority.vue b/src/views/about/supervisoryauthority.vue
index c0566c8..a2633c7 100644
--- a/src/views/about/supervisoryauthority.vue
+++ b/src/views/about/supervisoryauthority.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="about-page overflow-auto"
-       style="padding: 41px">
-    <div style="background:#fff;padding:60px">
+  <div class="about-page overflow-auto">
+    <div class="about-text">
       <div style="font-weight:bold;font-size:20px">延庆区博物馆监事人员名单</div>
       <div class=" "
            style="margin-top:55px">
@@ -13,10 +12,32 @@
   </div>
 </template>
 <style scoped>
-.about-page {
-  max-height: calc(100vh - 160px - 145px);
-  min-height: calc(100vh - 160px - 145px);
-  overflow: auto;
-  background: url("../../assets/images/about-bg.png");
+@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;
+    height: 100%;
+  }
+  .about-text {
+    padding: 16px 13px;
+    background: #fff;
+  }
+}
+
+@media only screen and (min-width: 769px) {
+  /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
+  .about-page {
+    max-height: calc(100vh - 160px - 145px);
+    min-height: calc(100vh - 160px - 145px);
+    overflow: auto;
+    background: url("../../assets/images/about-bg.png");
+    padding: 41px;
+  }
+  .about-text {
+    padding: 40px 131px;
+  }
 }
 </style>
diff --git a/src/views/about/threeyeannrep.vue b/src/views/about/threeyeannrep.vue
index 61d79be..da475a6 100644
--- a/src/views/about/threeyeannrep.vue
+++ b/src/views/about/threeyeannrep.vue
@@ -48,10 +48,31 @@ const handleOpen = (url) => {
 }
 </script>
 <style scoped>
-.about-page {
-  max-height: calc(100vh - 160px - 145px);
-  min-height: calc(100vh - 160px - 145px);
-  overflow: auto;
-  background: url("../../assets/images/about-bg.png");
+@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;
+  }
+  .about-text {
+    padding: 16px 13px;
+    background: #fff;
+  }
+}
+
+@media only screen and (min-width: 769px) {
+  /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
+  .about-page {
+    max-height: calc(100vh - 160px - 145px);
+    min-height: calc(100vh - 160px - 145px);
+    overflow: auto;
+    background: url("../../assets/images/about-bg.png");
+    padding: 41px;
+  }
+  .about-text {
+    padding: 40px 131px;
+  }
 }
 </style>
diff --git a/src/views/aboutpage.vue b/src/views/aboutpage.vue
index 3914e13..86fa737 100644
--- a/src/views/aboutpage.vue
+++ b/src/views/aboutpage.vue
@@ -1,13 +1,12 @@
-
 <template>
   <div style="min-height:100vh"
        class="100vw">
     <div style="height:80px;background:#000;"
          class="color-white row items-center">
-      <div class="col-4 row items-center justify-center"><img src="../assets/images/icon-title.png"
+      <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-6 row justify-around items-center">
+      <div class="col-9 col-md-6 row justify-around items-center">
 
         <div class="cursor header-title"
              @click="handleLink('/home/navigation')">首页</div>
@@ -46,24 +45,24 @@
       </div>
     </div>
     <div class="row fl-page-width">
-      <div class="color-white overflow-auto"
-           style="width:320px;background:rgba(0,0,0,0.8);font-size:20px;padding-top:41px">
+      <div class="color-white overflow-auto about-menu"
+           style="background:rgba(0,0,0,0.8);">
         <div style="height:50px"
-             class="cursor row items-center justify-center"
+             class="cursor row items-center justify-center fl-px-sm"
              v-for="(item,index) in state.aboutPages"
              :key="index"
              @click="handleLink(item.url)"
              :class="state.activePage === item.url? 'active-about':''">{{item.title}}</div>
       </div>
 
-      <div style="width:calc(100% - 320px)">
+      <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-4 row justify-around "
+      <div class="col-6 col-md-4 row justify-around "
            style="margin-top:32px;max-width:300px">
         <div class="cursor"
              @click="handleLink('')">帮助</div>
@@ -180,4 +179,27 @@ const handleLink = (url) => {
   background: #343434;
   border-radius: 10px;
 }
+
+@media only screen and (max-width: 768px) {
+  /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
+  .about-menu {
+    width: 78px;
+    text-align: center;
+    font-size: 12px;
+  }
+  .about-router {
+    width: calc(100% - 78px);
+  }
+}
+
+@media only screen and (min-width: 769px) {
+  /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
+  .about-menu {
+    width: 320px;
+    padding-top: 41px;
+  }
+  .about-router {
+    width: calc(100% - 320px);
+  }
+}
 </style>
diff --git a/src/views/commonpage.vue b/src/views/commonpage.vue
index 1424795..cdb8f1a 100644
--- a/src/views/commonpage.vue
+++ b/src/views/commonpage.vue
@@ -1,73 +1,74 @@
-
 <template>
   <div style="min-height:100vh"
        class="100vw">
     <div style="height:80px;background:#000;"
          class="color-white row items-center">
-      <div class="col-4 row items-center justify-center"><img src="../assets/images/icon-title.png"
+      <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-6 row justify-around items-center">
+      <div class="col-9 col-md-6 row justify-around items-center">
 
-        <div class="cursor header-title"
-             @click="handleLink('/home/navigation')">首页</div>
-        <div class="cursor header-title"
-             @click="handleLink('')">导航</div>
-        <div class="cursor header-title"
-             @click="handleLink('')">展览</div>
-        <div class="cursor header-title"
-             @click="handleLink('')">典藏</div>
-        <div class="cursor header-title"
-             @click="handleLink('')">资讯</div>
-        <div class="cursor header-title"
-             @click="handleLink('')">文创</div>
-        <div class="cursor header-title"
-             @click="handleLink('')">数字文脉</div>
+        <div class="col-6 row justify-around items-center">
 
-        <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"
+               @click="handleLink('/home/navigation')">首页</div>
+          <div class="cursor header-title"
+               @click="handleLink('')">导航</div>
+          <div class="cursor header-title"
+               @click="handleLink('')">展览</div>
+          <div class="cursor header-title"
+               @click="handleLink('')">典藏</div>
+          <div class="cursor header-title"
+               @click="handleLink('')">资讯</div>
+          <div class="cursor header-title"
+               @click="handleLink('')">文创</div>
+          <div class="cursor header-title"
+               @click="handleLink('')">数字文脉</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 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>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="fl-page-width">
-      <router-view></router-view>
-    </div>
+      <div class="fl-page-width">
+        <router-view></router-view>
+      </div>
 
-    <div style="height:145px;background:#000;"
-         class="row justify-center color-white">
-      <div class="col-4 row justify-around "
-           style="margin-top:32px;max-width:300px">
-        <div class="cursor"
-             @click="handleLink('')">帮助</div>
-        <div class="
+      <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="cursor"
+               @click="handleLink('')">帮助</div>
+          <div class="
              cursor"
-             @click="handleLink('')">隐私</div>
-        <div class="
+               @click="handleLink('')">隐私</div>
+          <div class="
              cursor"
-             @click="handleLink('')">条款</div>
-        <div class="
+               @click="handleLink('')">条款</div>
+          <div class="
              col-12
              cursor
              text-center">copyright 2024 最终所有权归延庆博物馆</div>
+        </div>
       </div>
     </div>
-  </div>
 </template>
 <script setup>
 
diff --git a/src/views/homepage.vue b/src/views/homepage.vue
index 95cf926..c904df4 100644
--- a/src/views/homepage.vue
+++ b/src/views/homepage.vue
@@ -3,70 +3,71 @@
        class="100vw">
     <div style="height:80px;background:#000;"
          class="color-white row items-center">
-      <div class="col-4 row items-center justify-center"><img src="../assets/images/icon-title.png"
+      <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-6 row justify-around items-center">
+      <div class="col-9 col-md-6 row justify-around items-center">
+        <div class="col-6 row justify-around items-center">
 
-        <div class="cursor header-title"
-             @click="handleLink('/home/navigation')">首页</div>
-        <div class="cursor header-title"
-             @click="handleLink('')">导航</div>
-        <div class="cursor header-title"
-             @click="handleLink('')">展览</div>
-        <div class="cursor header-title"
-             @click="handleLink('')">典藏</div>
-        <div class="cursor header-title"
-             @click="handleLink('')">资讯</div>
-        <div class="cursor header-title"
-             @click="handleLink('')">文创</div>
-        <div class="cursor header-title"
-             @click="handleLink('')">数字文脉</div>
+          <div class="cursor header-title"
+               @click="handleLink('/home/navigation')">首页</div>
+          <div class="cursor header-title"
+               @click="handleLink('')">导航</div>
+          <div class="cursor header-title"
+               @click="handleLink('')">展览</div>
+          <div class="cursor header-title"
+               @click="handleLink('')">典藏</div>
+          <div class="cursor header-title"
+               @click="handleLink('')">资讯</div>
+          <div class="cursor header-title"
+               @click="handleLink('')">文创</div>
+          <div class="cursor header-title"
+               @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>
-    <div>
-      <router-view></router-view>
-    </div>
+      <div>
+        <router-view></router-view>
+      </div>
 
-    <div style="height:145px;background:#000;"
-         class="row justify-center color-white">
-      <div class="col-4 row justify-around "
-           style="margin-top:32px;max-width:300px">
-        <div class="cursor"
-             @click="handleLink('')">帮助</div>
-        <div class="
+      <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="cursor"
+               @click="handleLink('')">帮助</div>
+          <div class="
              cursor"
-             @click="handleLink('')">隐私</div>
-        <div class="
+               @click="handleLink('')">隐私</div>
+          <div class="
              cursor"
-             @click="handleLink('')">条款</div>
-        <div class="
+               @click="handleLink('')">条款</div>
+          <div class="
              col-12
              cursor
              text-center">copyright 2024 最终所有权归延庆博物馆</div>
+        </div>
       </div>
     </div>
-  </div>
 </template>
 <script setup>