平板适配

src/App.vue

@@ -13,7 +13,12 @@
 
   <!-- 平板横屏提示 -->
   <div class="landscape-prompt-box">
-    请旋转至竖屏显示使用
+    <img
+      src="@/assets/images/pad-l-icon.png"
+      alt=""
+    >
+    <div>请旋转屏幕</div>
+    <div>竖屏体验</div>
   </div>
 
   <!-- <audio
@@ -115,7 +120,7 @@ body {
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(255, 0, 0, 0.336);
+    background: url(@/assets/images/pad-l-bg.png);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -124,6 +129,16 @@ body {
     z-index: 2024;
     color: white;
   }
+  img{
+    width: 13%;
+    margin-bottom: 15px;
+  }
+  div{
+    color: white;
+    font-family: KaiTi;
+    font-size: 24px;
+    margin-top: 10px;
+  }
 }
 
 
@@ -136,10 +151,13 @@ textarea {
 #app {
   height: 100%;
   position: relative;
-  max-width: 100%;
+  max-width: 500px;
   left: 50%;
   transform: translateX(-50%);
   overflow: hidden;
+  @media screen and (min-width: 768px) {
+    max-width: 100%;
+  }
 }
 
 // 字体
@@ -260,10 +278,18 @@ textarea {
   font-family: KaiTi;
   color: white;
   transition: all 0.5s;
+  @media screen and (min-width: 768px) {
+    font-size: 26px;
+    // line-height: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
   >img{
     width: 30px;
     height: 30px;
     margin-left: 10px;
+    @media screen and (min-width: 768px) {
+      width: 35px;
+      height: 35px;
+    }
   }
 }
 .viewer-button-home{

src/components/BtnBack.vue

@@ -70,6 +70,11 @@ const props = defineProps({
     font-size: 14px;
     font-family: KaiTi;
     writing-mode:horizontal-tb !important;
+    @media screen and (min-width: 768px) {
+      font-size: 20px;
+      bottom: -24px;
+      left: -12px;
+    }
   }
 }
 </style>

src/components/OperationTip.vue

@@ -84,10 +84,18 @@ watch(propIsShow, (v) => {
     font-family: KaiTi;
     font-weight: 400;
     font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    @media screen and (min-width: 768px) {
+      font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
   }
   >img{
     width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(41 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+    // @media screen and (min-width: 768px) {
+    //   width: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    //   height: calc(51 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    // }
   }
 }
 </style>

src/main.js

@@ -45,22 +45,52 @@ const uaParser = new UAParser()
 const uaInfo = uaParser.getResult()
 console.log('uaInfo: ', uaInfo)
 app.provide('$uaInfo', uaInfo)
-if (uaInfo.browser && uaInfo.browser.name === 'WeChat') {
-  app.provide('$isWeChat', true)
-}
-if (uaInfo.browser && uaInfo.browser.name === 'Safari') {
-  app.provide('$isSafari', true)
-}
-if (uaInfo.device.type === 'mobile') {
-  app.provide('$isMobile', true)
-} else {
-  // window.location.href = './mobile.html'
+
+const userAgent = navigator.userAgent
+
+// if (uaInfo.browser && uaInfo.browser.name === 'WeChat') {
+//   app.provide('$isWeChat', true)
+// }
+// if (uaInfo.browser && uaInfo.browser.name === 'Safari') {
+//   app.provide('$isSafari', true)
+// }
+// if (uaInfo.device.type === 'mobile') {
+//   app.provide('$isMobile', true)
+// } else {
+//   // window.location.href = './mobile.html'
+//   const appDom = document.getElementById('app')
+//   appDom.style.maxWidth = '100%'
+//   window.location.assign(process.env.VUE_APP_PC_URL)
+// }
+// } else {
+//   window.location.href = './mobile.html'
+// }
+
+
+// 检测是否为移动设备
+const isMobile = /Mobi|Android/i.test(userAgent)
+
+// 检测是否为平板设备
+const isTablet = /Tablet|iPad/i.test(userAgent)
+
+if (!(isTablet || isMobile)) {
+  // console.log('isMobile: ', isMobile)
   const appDom = document.getElementById('app')
   appDom.style.maxWidth = '100%'
   window.location.assign(process.env.VUE_APP_PC_URL)
+} else {
+  // console.log('!isMobile: ', !isMobile)
+  // const appDom = document.getElementById('app')
+  // appDom.style.maxWidth = '100%'
+  // window.location.assign(process.env.VUE_APP_PC_URL)
 }
+
+// if (/Mobi|Android/i.test(navigator.userAgent)) {
+
 // } else {
-//   window.location.href = './mobile.html'
+//   const appDom = document.getElementById('app')
+//   appDom.style.maxWidth = '100%'
+//   window.location.assign(process.env.VUE_APP_PC_URL)
 // }
 
 // 处理resize事件
@@ -85,7 +115,7 @@ window.addEventListener('resize', () => {
 })
 
 // // 禁用上下文菜单
-document.oncontextmenu = function(e) {
+document.oncontextmenu = function (e) {
   e.preventDefault()
 }
 

src/views/BambooBookScene1.vue

@@ -95,6 +95,9 @@ const innerHeight = ref(window.innerHeight + "px")
     position: absolute;
     bottom: 0;
     right: 0;
+    @media screen and (min-width: 768px) {
+      width: 50%;
+    }
 
     .xuliezheng {
       width: calc(v-bind(innerWidth));
@@ -134,6 +137,10 @@ const innerHeight = ref(window.innerHeight + "px")
     writing-mode: vertical-rl;
     /* 垂直排列，从右向左 */
     direction: rtl;
+    @media screen and (min-width: 768px) {
+      background-image: url(@/assets/images/bg_zhupu-768.jpg);
+      background-size: 100% 100%;
+    }
 
     .title-box {
       color: #ffffff;
@@ -154,6 +161,9 @@ const innerHeight = ref(window.innerHeight + "px")
       );
       // right: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       right: 13%;
+      @media screen and (min-width: 768px) {
+        right: 17%;
+      }
     }
 
     .zhupu-box {
@@ -171,6 +181,9 @@ const innerHeight = ref(window.innerHeight + "px")
       letter-spacing: 0.3em;
       top: 50%;
       right: 20%;
+      @media screen and (min-width: 768px) {
+        right: 19%;
+      }
       // right: calc(75 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
 
@@ -183,6 +196,9 @@ const innerHeight = ref(window.innerHeight + "px")
         50 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
       );
+      @media screen and (min-width: 768px) {
+        right: 17%;
+      }
     }
 
     > .disc-img {
@@ -238,6 +254,21 @@ const innerHeight = ref(window.innerHeight + "px")
       font-family: "KaiTi";
       writing-mode: initial;
       direction: ltr;
+      @media screen and (min-width: 768px) {
+        width: calc(
+        220 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef");
+        );
+        left: calc(
+          105 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef");
+        );
+        top: calc(
+          210 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef");
+        );
+
+      }
     }
 
     > .system-btns {

src/views/BambooBookScene2.vue

@@ -184,6 +184,10 @@ const {
       object-position: left;
       position: absolute;
       top: 5%;
+      @media screen and (min-width: 768px) {
+        object-fit: contain;
+        object-position: center;
+      }
     }
 
     .options-box {

src/views/BambooHotView3/index.vue

@@ -443,6 +443,9 @@ img {
     right: unset;
     left: calc(50 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     writing-mode: vertical-lr;
+    @media screen and (min-width: 768px) {
+      bottom: 30%;
+    }
 
     .bamboo-hot2-hot__title::before {
       right: unset;
@@ -506,6 +509,9 @@ img {
     font-size: 12px;
     font-family: KaiTi;
     writing-mode: vertical-rl;
+    @media screen and (min-width: 768px) {
+      font-size: 22px;
+    }
 
     &:not(.hide) {
       animation: breathing linear 2s infinite;
@@ -517,6 +523,10 @@ img {
       width: 20px;
       height: 20px;
       background: url('./images/hot.png') no-repeat center / contain;
+      @media screen and (min-width: 768px) {
+        width: 30px;
+        height: 30px;
+      }
     }
   }
   &-b1 {
@@ -562,17 +572,26 @@ img {
     left: calc(1000 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
     z-index: 2;
+    @media screen and (min-width: 768px){
+      left: calc(1095 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    }
   }
   .bamboo-hot2__hot.b7 {
     top: calc(160 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-    left: calc(1280 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    left: calc((1280) /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
     z-index: 4;
+    @media screen and (min-width: 768px){
+      left: calc((1280 + 95) /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    }
+
   }
   &-b8 {
     left: calc(1030 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     transform: translateZ(calc(25 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.8);
-
+    @media screen and (min-width: 768px){
+      left: calc(1135 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    }
     .bamboo-hot2__hot {
       top: calc(320 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
       right: calc(110 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
@@ -639,9 +658,15 @@ img {
     align-items: center;
     opacity: 1;
     transition: opacity 1s;
+    @media screen and (min-width: 768px) {
+      font-size: 22px;
+    }
 
     img {
       width: 30px;
+      @media screen and (min-width: 768px) {
+        width: 50px;
+      }
     }
   }
 

src/views/HomeView.vue

@@ -794,6 +794,12 @@ div {
       right: 0;
       bottom: 0;
       transition: all 1.5s ease-in-out;
+      @media screen and (min-width: 768px) {
+        width: 40px;
+        height: 40px;
+        right: 5px;
+        bottom: 5px;
+      }
     }
   }
 
@@ -884,6 +890,9 @@ div {
       z-index: 2;
       overflow: hidden;
       transition: opacity 1.5s ease;
+      @media screen and (min-width: 768px) {
+        transform: translateX(-20%);
+      }
     }
   }
 
@@ -919,6 +928,9 @@ div {
     );
     transform: translate(-40%, -39%);
     transform-origin: center center;
+    @media screen and (min-width: 768px) {
+      transform: translate(-45%, -39%);
+    }
     > .painting-stem {
       width: calc(
         364 * 2.2 / v-bind("windowSizeWhenDesignForRef") *
@@ -1001,6 +1013,9 @@ div {
       30 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
+    @media screen and (min-width: 768px) {
+      width:80%;
+    }
   }
   > .fixed-desc4 {
     top: calc(
@@ -1033,6 +1048,10 @@ div {
     );
     z-index: 10;
     opacity: 0;
+    @media screen and (min-width: 768px) {
+      width: 65px;
+      height: 65px;
+    }
   }
 
   > .click-tip-ac {
@@ -1122,7 +1141,7 @@ div {
       position: absolute;
       right: -10%;
       bottom: -80%;
-      > img{
+      > img {
         width: calc(
           40 / v-bind("windowSizeWhenDesignForRef") *
             v-bind("windowSizeInCssForRef")
@@ -1182,6 +1201,9 @@ div {
       > img {
         width: 45%;
         margin-bottom: 10px;
+        @media screen and (min-width: 768px) {
+          width: 55%;
+        }
       }
 
       > div {
@@ -1204,9 +1226,9 @@ div {
     opacity: 1;
     @media screen and (min-width: 768px) {
       bottom: calc(
-      100 / v-bind("windowSizeWhenDesignForRef") *
-        v-bind("windowSizeInCssForRef")
-    );
+        100 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
     }
   }
 
@@ -1227,6 +1249,11 @@ div {
     padding-top: 15%;
     padding-left: 10%;
     padding-right: 10%;
+    @media screen and (min-width: 768px) {
+      padding-top: 10%;
+      padding-left: 15%;
+      padding-right: 15%;
+    }
 
     > .shandow-box {
       width: 100%;
@@ -1258,12 +1285,19 @@ div {
     > .painting-img {
       width: 70%;
       margin-bottom: 20px;
+      @media screen and (min-width: 768px) {
+        width: 60%;
+        margin-bottom: 40px;
+      }
     }
 
     > .text-box {
       width: 100%;
       overflow: auto;
       padding: 0 0px 40px 0px;
+      @media screen and (min-width: 768px) {
+        max-height: 30%;
+      }
       &::-webkit-scrollbar {
         display: none;
       }
@@ -1281,6 +1315,16 @@ div {
             v-bind("windowSizeInCssForRef")
         );
         font-family: KaiTi;
+        @media screen and (min-width: 768px) {
+          font-size: calc(
+            20 / v-bind("windowSizeWhenDesignForRef") *
+              v-bind("windowSizeInCssForRef")
+          );
+          line-height: calc(
+            30 / v-bind("windowSizeWhenDesignForRef") *
+              v-bind("windowSizeInCssForRef")
+          );
+        }
       }
     }
 
@@ -1329,6 +1373,11 @@ div {
     padding-top: 15%;
     padding-left: 10%;
     padding-right: 10%;
+    @media screen and (min-width: 768px) {
+      padding-top: 10%;
+      padding-left: 15%;
+      padding-right: 15%;
+    }
     > .shandow-box {
       width: 100%;
       height: 140px;
@@ -1390,7 +1439,6 @@ div {
       > .text-box {
         width: 100%;
         padding-bottom: 40px;
-
         > p {
           text-indent: 2em;
           margin-bottom: 10px;
@@ -1404,6 +1452,17 @@ div {
               v-bind("windowSizeInCssForRef")
           );
           font-family: KaiTi;
+          @media screen and (min-width: 768px) {
+            font-size: calc(
+            20 / v-bind("windowSizeWhenDesignForRef") *
+              v-bind("windowSizeInCssForRef")
+          );
+          line-height: calc(
+            26 / v-bind("windowSizeWhenDesignForRef") *
+              v-bind("windowSizeInCssForRef")
+          );
+          }
+
         }
       }
     }

src/views/HotspotDetail1.vue

@@ -225,6 +225,11 @@ const imgBottomLoc = (nowId, itemId) => {
     top: 60px;
     left: 30px;
     width: 80px;
+    @media screen and (min-width: 768px) {
+      width: 20%;
+      top: 100px;
+      left: 50px;
+    }
   }
 
   .HD1_2 {
@@ -240,10 +245,15 @@ const imgBottomLoc = (nowId, itemId) => {
     transition: opacity 1s;
     opacity: 1;
     @media screen and (min-width: 768px) {
-      font-size: 30px;
+      font-size: 22px;
+      top: 70%;
+      left: 43%;
     }
     & > img {
       width: 40px;
+      @media screen and (min-width: 768px) {
+        width: 50px;
+      }
     }
     & > div {
       margin-top: 10px;
@@ -273,16 +283,25 @@ const imgBottomLoc = (nowId, itemId) => {
     right: -60%;
     z-index: 1;
     bottom: 8%;
+    @media screen and (min-width: 768px) {
+      bottom: -40%;
+    }
   }
   .HD1_3_2 {
     right: -50%;
     z-index: 2;
     bottom: 0;
+    @media screen and (min-width: 768px) {
+      bottom: -55%;
+    }
   }
   .HD1_3_3 {
     right: -40%;
     z-index: 3;
     bottom: -8%;
+    @media screen and (min-width: 768px) {
+      bottom: -70%;
+    }
   }
   .HD1_3Ac {
     bottom: -5px;
@@ -298,6 +317,9 @@ const imgBottomLoc = (nowId, itemId) => {
       justify-content: center;
       align-items: center;
       padding-top: 30%;
+      @media screen and (min-width: 768px) {
+        padding-top: 10%;
+      }
     }
   }
 
@@ -316,6 +338,9 @@ const imgBottomLoc = (nowId, itemId) => {
   .HD1_3AcBottom {
     bottom: -50px;
     transition: right 1s, opacity 0.8s;
+    @media screen and (min-width: 768px) {
+      bottom: -30%;
+    }
   }
 
   .HD1_4 {
@@ -348,6 +373,9 @@ const imgBottomLoc = (nowId, itemId) => {
       height: calc(100% - 50px);
       writing-mode: vertical-rl;
       line-height: 120%;
+      @media screen and (min-width: 768px) {
+        font-size: 20px;
+      }
     }
   }
 

src/views/HotspotDetail3.vue

@@ -1,24 +1,43 @@
 <template>
   <div class="hotspot-detail-3">
     <img
-      v-show="state === 1"
+      v-show="state === 1 && innerWidth < 768"
       class="bg-img"
       src="@/assets/images/hots-detail-bg-state1.png"
       alt=""
     >
     <img
-      v-show="state === 2"
+      v-show="state === 2 && innerWidth < 768"
       class="bg-img"
       src="@/assets/images/hots-detail-bg-state2.png"
       alt=""
     >
     <img
-      v-show="state === 3"
+      v-show="state === 3 && innerWidth < 768"
       class="bg-img"
       src="@/assets/images/hots-detail-bg-state3.png"
       alt=""
     >
 
+    <img
+      v-show="state === 1 && innerWidth >= 768"
+      class="bg-img"
+      src="@/assets/images/hots-detail-bg-state1-768.jpg"
+      alt=""
+    >
+    <img
+      v-show="state === 2 && innerWidth >= 768"
+      class="bg-img"
+      src="@/assets/images/hots-detail-bg-state2-768.jpg"
+      alt=""
+    >
+    <img
+      v-show="state === 3 && innerWidth >= 768"
+      class="bg-img"
+      src="@/assets/images/hots-detail-bg-state3-768.jpg"
+      alt=""
+    >
+
     <!-- 阴影 -->
     <img
       class="shadow-box"
@@ -28,7 +47,7 @@
 
     <img
       class="content1"
-      :src="hots3StateContent1"
+      :src=" innerWidth >= 768 ? hots3StateContent1768: hots3StateContent1"
       :style="{
         opacity: state === 1 ? 1 : 0,
       }"
@@ -95,6 +114,10 @@ import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
 const emit = defineEmits(["close"])
 
+const innerWidth = computed(() => {
+  return window.innerWidth
+})
+
 // 三个背景图
 import hots3StateBg1 from "@/assets/images/hots-detail-bg-state1.png"
 import hots3StateBg2 from "@/assets/images/hots-detail-bg-state2.png"
@@ -117,6 +140,9 @@ import hots3StateShadow3 from "@/assets/images/img_shadow_3.png"
 
 // 三个内容
 import hots3StateContent1 from "@/assets/images/hots-detail-content-state1.png"
+import hots3StateContent1768 from "@/assets/images/hots-detail-content-state1-768.png"
+
+
 import hots3StateContent2 from "@/assets/images/hots-detail-content-state2.png"
 import hots3StateContent3 from "@/assets/images/hots-detail-content-state3.png"
 
@@ -147,7 +173,7 @@ const goState2 = () => {
       const allWidth = document
         .getElementById("content2Img")
         .getBoundingClientRect().width
-      content2Dom.value.scrollLeft = allWidth * x
+      content2Dom.value.scrollLeft = allWidth * x - 140
       isShowOperationTip.value = true
     }
   }, 5)
@@ -211,6 +237,10 @@ const handleScroll = () => {
     @media screen and (min-width: 768px) {
       width: 65%;
       max-width: auto;
+      bottom: calc(
+        105 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
     }
   }
 
@@ -228,6 +258,9 @@ const handleScroll = () => {
     img {
       // height: 50vh;
       width: 990px;
+      @media screen and (min-width: 768px) {
+        width: 1324px;
+      }
     }
   }
 
@@ -237,7 +270,7 @@ const handleScroll = () => {
     transition: opacity 1s ease;
     // 适配平板
     @media screen and (min-width: 768px) {
-      width: 80%;
+      width: 70%;
       left: 50%;
       transform: translateX(-50%);
     }
@@ -264,6 +297,9 @@ const handleScroll = () => {
       35 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
+    @media screen and (min-width: 768px) {
+      width: 40%;
+    }
 
     > img {
       width: calc(

src/views/MoreContent.vue

@@ -393,7 +393,11 @@ const pageWidth = ref(0)
 const pageNum = 4
 
 onMounted(() => {
-  pageWidth.value = window.innerWidth >= 500 ? 500 : window.innerWidth
+  if (window.innerWidth >= 768) {
+    pageWidth.value = window.innerWidth
+  } else {
+    pageWidth.value = window.innerWidth >= 500 ? 500 : window.innerWidth
+  }
 })
 
 // 当前页面的索引
@@ -467,6 +471,9 @@ body {
         top: 46%;
         left: 15%;
         z-index: 20;
+        @media screen and (min-width: 768px) {
+          left: 8%;
+        }
       }
 
       .ROWtxt {
@@ -495,6 +502,9 @@ body {
             margin-bottom: 10px;
             font-size: 20px;
             margin-bottom: 0;
+            @media screen and (min-width: 768px) {
+              font-size: 28px;
+            }
           }
         }
 
@@ -507,6 +517,9 @@ body {
           letter-spacing: 0.3em;
           white-space: pre;
           position: relative;
+          @media screen and (min-width: 768px) {
+            font-size: 60px;
+          }
 
           img.deco {
             z-index: 10;
@@ -540,6 +553,9 @@ body {
       .ROW1_2 {
         z-index: 4;
         right: -15%;
+        @media screen and (min-width: 768px) {
+          right: -8%;
+        }
       }
       .ROW1_3 {
         z-index: 3;
@@ -564,14 +580,23 @@ body {
       .ROW2_1 {
         z-index: 5;
         right: -13%;
+        @media screen and (min-width: 768px) {
+          right: -8%;
+        }
       }
       .ROW2_2 {
         z-index: 4;
         right: -22%;
+        @media screen and (min-width: 768px) {
+          right: -14%;
+        }
       }
       .ROW2_3 {
         z-index: 4;
         left: -38%;
+        @media screen and (min-width: 768px) {
+          left: -28%;
+        }
       }
       .ROW2_4 {
         z-index: 3;
@@ -584,6 +609,9 @@ body {
       .ROW2_6 {
         left: 0;
         height: 30%;
+        @media screen and (min-width: 768px) {
+          left: -28%;
+        }
       }
       .ROW2_7 {
         left: -24%;
@@ -615,6 +643,9 @@ body {
       .ROW3_7 {
         z-index: 4;
         left: -48%;
+        @media screen and (min-width: 768px) {
+          left: -36%;
+        }
       }
       .ROW3_8 {
         z-index: 4;
@@ -623,19 +654,31 @@ body {
       .ROW3_9 {
         z-index: 4;
         right: -37%;
+        @media screen and (min-width: 768px) {
+          right: -25%;
+        }
       }
       .ROW3_10 {
         z-index: 5;
         right: -3%;
+        @media screen and (min-width: 768px) {
+          right: 2%;
+        }
       }
       .ROW3_11 {
         z-index: 5;
         left: -15%;
+        @media screen and (min-width: 768px) {
+          left: -12%;
+        }
       }
       .ROW4_1 {
         z-index: 5;
         left: 2%;
         height: 40%;
+        @media screen and (min-width: 768px) {
+          left: 13%;
+        }
       }
       .ROW4_2 {
         left: -26%;
@@ -653,18 +696,30 @@ body {
       .ROW4_6 {
         z-index: 3;
         left: -30%;
+        @media screen and (min-width: 768px) {
+          left: -18%;
+        }
       }
       .ROW4_7 {
         z-index: 4;
         left: -70%;
+        @media screen and (min-width: 768px) {
+          left: 51%;
+        }
       }
       .ROW4_8 {
         z-index: 4;
         right: -5%;
+        @media screen and (min-width: 768px) {
+          right: -2%;
+        }
       }
       .ROW4_9 {
         z-index: 5;
         right: -5%;
+        @media screen and (min-width: 768px) {
+          right: -2%;
+        }
       }
       .ROW4_10 {
         z-index: 4;
@@ -695,9 +750,15 @@ body {
       color: white;
       z-index: 20;
       width: 20%;
+      @media screen and (min-width: 768px) {
+        width: 19%;
+      }
       & > img {
         pointer-events: none;
         width: 118px;
+        @media screen and (min-width: 768px) {
+          width: 115%;
+        }
       }
       .game-box {
         width: 198%;
@@ -711,6 +772,9 @@ body {
         margin-top: 40%;
         margin-left: -25%;
         font-size: 18px;
+        @media screen and (min-width: 768px) {
+          font-size: 24px;
+        }
       }
 
       .online-box {
@@ -724,6 +788,9 @@ body {
 
         margin-left: 54%;
         font-size: 18px;
+        @media screen and (min-width: 768px) {
+          font-size: 24px;
+        }
       }
       .about-box{
         display: flex;
@@ -814,9 +881,15 @@ body {
     align-items: center;
     opacity: 1;
     transition: opacity 1s;
+    @media screen and (min-width: 768px) {
+      font-size: 22px;
+    }
 
     img {
       width: 30px;
+      @media screen and (min-width: 768px) {
+        width: 50px;
+      }
     }
   }
 

src/views/PaintingDetail.vue

@@ -487,6 +487,14 @@ function showBigPainting() {
       -60 / var(--39efea6f-windowSizeWhenDesignForRef) * var(--39efea6f-windowSizeInCssForRef)
     );
 
+    @media screen and (min-width: 768px) {
+      animation: paintion-up 2s forwards;
+      transform: translate(-50%, 0) scale(0.85);
+      top: calc(
+        -30 / var(--39efea6f-windowSizeWhenDesignForRef) * var(--39efea6f-windowSizeInCssForRef)
+      );
+    }
+
     // @keyframes paintion-up {
     //   0% {
     //     transform: translate(-50%, 0);
@@ -746,6 +754,16 @@ function showBigPainting() {
     //     height: calc(400 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     //   }
     // }
+    @media screen and (min-width: 768px) {
+      height: calc(
+        300 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      width: calc(
+        450 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+    }
   }
 
   .desc-text-upShowd {
@@ -841,12 +859,28 @@ function showBigPainting() {
       230 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
+    @media screen and (min-width: 768px) {
+      height: calc(
+        180 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+    }
   }
   .desc-text-up {
     height: calc(
       360 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
+    @media screen and (min-width: 768px) {
+      width: calc(
+        450 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      height: calc(
+        300 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+    }
   }
 }
 </style>

src/views/PaintingList.vue

@@ -378,11 +378,14 @@ const isShowPaintingStyleDesc = ref(false)
       min-width: 25%;
       overflow: hidden;
       &::-webkit-scrollbar {
-      display: none;
-    }
+        display: none;
+      }
       height: 100%;
       display: flex;
       align-items: center;
+      @media screen and (min-width: 768px) {
+        justify-content: right;
+      }
       >.cover{
         flex: 0 0 auto;
         height: calc(534 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -598,6 +601,9 @@ const isShowPaintingStyleDesc = ref(false)
             color: #474747;
             line-height: 15px;
             margin-bottom: 0.5em;
+            @media screen and (min-width: 768px) {
+              font-size: 20px;
+            }
           }
           >.position{
             font-family: KingHwa_OldSong;
@@ -605,6 +611,9 @@ const isShowPaintingStyleDesc = ref(false)
             font-size: 13px;
             color: #474747;
             line-height: 15px;
+            @media screen and (min-width: 768px) {
+              font-size: 22px;
+            }
           }
         }
       }

src/views/PoemList.vue

@@ -260,7 +260,7 @@ onMounted(() => {
   ageList.value = ageListTemp
   listRes.value = arrRes
 
-  const fullWidth = window.innerWidth >= 500 ? 500 : window.innerWidth
+  const fullWidth = window.innerWidth >= 768 ? window.innerWidth : window.innerWidth >= 500 ? 500 : window.innerWidth
 
   pageWidth.value = fullWidth
   // 总盒子的宽度
@@ -374,11 +374,21 @@ const isMoveFu = (index, num) => {
       line-height: 30px;
       color: #fff;
       border: 1px solid transparent;
+
+      @media screen and (min-width: 768px) {
+        width: 40px;
+        height: 40px;
+        font-size: 20px;
+        line-height: 40px;
+      }
     }
     .RWageRowAc {
       color: #d6cda1;
       border: 1px solid #d6cda1;
       font-size: 18px;
+      @media screen and (min-width: 768px) {
+        font-size: 22px;
+      }
     }
     .RWageImg {
       width: 30px;
@@ -434,6 +444,9 @@ const isMoveFu = (index, num) => {
       .ROW2_1 {
         z-index: 2;
         left: -38%;
+        @media screen and (min-width: 768px) {
+          left: -26%;
+        }
       }
       .ROW2_2 {
         right: 5%;
@@ -444,6 +457,9 @@ const isMoveFu = (index, num) => {
       }
       .ROW3_1 {
         left: -36%;
+        @media screen and (min-width: 768px) {
+          left: -27%;
+        }
       }
       .ROW3_2 {
         height: 15%;
@@ -462,6 +478,9 @@ const isMoveFu = (index, num) => {
       }
       .ROW4_1 {
         left: -35%;
+        @media screen and (min-width: 768px) {
+          left: -26%;
+        }
       }
       .ROW4_2 {
         left: -40%;
@@ -477,13 +496,22 @@ const isMoveFu = (index, num) => {
       }
       .ROW4_5 {
         right: -17%;
+        @media screen and (min-width: 768px) {
+          right: -13%;
+        }
       }
       .ROW5_1 {
         left: -45%;
+        @media screen and (min-width: 768px) {
+          left: -29%;
+        }
       }
       .ROW5_2 {
         z-index: 2;
         left: -17%;
+        @media screen and (min-width: 768px) {
+          left: -9%;
+        }
       }
       .ROW5_3 {
         z-index: 3;
@@ -497,6 +525,9 @@ const isMoveFu = (index, num) => {
       }
       .ROW5_5 {
         right: -6%;
+        @media screen and (min-width: 768px) {
+          right: -4%;
+        }
       }
       .ROW6_1 {
         z-index: 3;
@@ -671,21 +702,33 @@ const isMoveFu = (index, num) => {
     .ROWtxt {
       padding-top: 15%;
       padding-right: 40%;
+      @media screen and (min-width: 768px) {
+        padding-right: 19%;
+      }
     }
   }
   .ROW2 {
     .ROWtxt {
       padding-right: 24%;
+      @media screen and (min-width: 768px) {
+        padding-right: 9%;
+      }
     }
   }
   .ROW3 {
     .ROWtxt {
       padding-right: 30%;
+      @media screen and (min-width: 768px) {
+        padding-right: 8%;
+      }
     }
   }
   .ROWW19 {
     .ROWtxt {
       padding-top: 87%;
+      @media screen and (min-width: 768px) {
+        padding-top: 53%;
+      }
     }
   }
 
@@ -703,6 +746,9 @@ const isMoveFu = (index, num) => {
     transition: opacity 0.5s;
     pointer-events: none;
     font-family: KingHwa_OldSong;
+    @media screen and (min-width: 768px) {
+      font-size: 20px;
+    }
   }
   .RWindShow {
     opacity: 1;
@@ -723,6 +769,9 @@ const isMoveFu = (index, num) => {
     align-items: center;
     opacity: 1;
     transition: opacity 1s;
+    @media screen and (min-width: 768px) {
+      font-size: 22px;
+    }
 
     img {
       width: 30px;

src/views/ShuangGouSheSeDetail.vue

@@ -425,6 +425,9 @@ const curPercentage = computed(() => {
     height: 30vh;
     width: 50%;
     text-indent: 2em;
+    @media screen and (min-width: 768px) {
+      bottom: 9vh !important;
+    }
   }
 
   .right-bottom {