fix bug

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");

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");

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");

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");

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");

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");

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");

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");

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");

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");

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");

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");

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;

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(

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;

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%;
-
       }
     }
   }