upup

public/configExcel.js

@@ -173,7 +173,7 @@ var configExcel = {
       "类型": "五律",
       "朝代": "宋",
       "作者": "苏轼",
-      "正文": "宁可食无肉   不可居无竹\n无肉令人瘦   无竹令人俗\n人瘦尚可肥   士俗不可医\n旁人笑此言   似高还似痴\n若对此君仍大嚼 世间那有扬州鹤",
+      "正文": `宁可食无肉   不可居无竹\n无肉令人瘦   无竹令人俗\n人瘦尚可肥   士俗不可医\n旁人笑此言   似高还似痴\n若对此君仍大嚼 世间那有扬州鹤`,
       "顶部距离": '18vh'
     },
     {

src/App.vue

@@ -114,7 +114,7 @@ body {
 
 .landscape-prompt-box{
   display: none;
-  @media screen and (min-width: 768px) and (orientation: landscape) {
+  @media screen and (min-width: 600px) and (orientation: landscape) {
     position: fixed;
     top: 0;
     left: 0;
@@ -155,9 +155,12 @@ textarea {
   left: 50%;
   transform: translateX(-50%);
   overflow: hidden;
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: 600px) {
     max-width: 100%;
   }
+  // @media screen and (-webkit-min-device-pixel-ratio: 0) {
+  //   max-width: 500px;
+  // }
 }
 
 // 字体
@@ -278,7 +281,7 @@ textarea {
   font-family: KaiTi;
   color: white;
   transition: all 0.5s;
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: 600px) {
     font-size: 26px;
     // line-height: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
@@ -286,7 +289,7 @@ textarea {
     width: 30px;
     height: 30px;
     margin-left: 10px;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 45px;
       height: 45px;
     }

src/components/BtnBack.vue

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

src/components/OperationTip.vue

@@ -84,7 +84,7 @@ 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) {
+    @media screen and (min-width: 600px) {
       font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
   }
@@ -92,7 +92,7 @@ watch(propIsShow, (v) => {
     width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(41 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
 
-    // @media screen and (min-width: 768px) {
+    // @media screen and (min-width: 600px) {
     //   width: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     //   height: calc(51 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     // }

src/views/BambooBookScene1.vue

@@ -95,7 +95,7 @@ const innerHeight = ref(window.innerHeight + "px")
     position: absolute;
     bottom: 0;
     right: 0;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 50%;
     }
 
@@ -137,7 +137,7 @@ const innerHeight = ref(window.innerHeight + "px")
     writing-mode: vertical-rl;
     /* 垂直排列，从右向左 */
     direction: rtl;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       background-image: url(@/assets/images/bg_zhupu-768.jpg);
       background-size: 100% 100%;
     }
@@ -161,7 +161,7 @@ const innerHeight = ref(window.innerHeight + "px")
       );
       // right: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       right: 13%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         right: 17%;
       }
     }
@@ -181,7 +181,7 @@ const innerHeight = ref(window.innerHeight + "px")
       letter-spacing: 0.3em;
       top: 50%;
       right: 20%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         right: 19%;
       }
       // right: calc(75 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -196,7 +196,7 @@ const innerHeight = ref(window.innerHeight + "px")
         50 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
       );
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         right: 17%;
       }
     }
@@ -254,7 +254,7 @@ const innerHeight = ref(window.innerHeight + "px")
       font-family: "KaiTi";
       writing-mode: initial;
       direction: ltr;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: calc(
         220 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef");

src/views/BambooBookScene2.vue

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

src/views/BambooHotView3/index.vue

@@ -443,7 +443,7 @@ img {
     right: unset;
     left: calc(50 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     writing-mode: vertical-lr;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       bottom: 30%;
     }
 
@@ -509,7 +509,7 @@ img {
     font-size: 12px;
     font-family: KaiTi;
     writing-mode: vertical-rl;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       font-size: 22px;
     }
 
@@ -523,7 +523,7 @@ img {
       width: 20px;
       height: 20px;
       background: url('./images/hot.png') no-repeat center / contain;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 30px;
         height: 30px;
       }
@@ -572,7 +572,7 @@ 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){
+    @media screen and (min-width: 600px){
       left: calc(1095 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     }
   }
@@ -581,7 +581,7 @@ img {
     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){
+    @media screen and (min-width: 600px){
       left: calc((1280 + 95) /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     }
 
@@ -589,7 +589,7 @@ img {
   &-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){
+    @media screen and (min-width: 600px){
       left: calc(1135 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     }
     .bamboo-hot2__hot {
@@ -658,13 +658,13 @@ img {
     align-items: center;
     opacity: 1;
     transition: opacity 1s;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       font-size: 22px;
     }
 
     img {
       width: 30px;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 50px;
       }
     }

src/views/HomeView.vue

@@ -798,7 +798,7 @@ div {
       right: 0;
       bottom: 0;
       transition: all 1.5s ease-in-out;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 40px;
         height: 40px;
         right: 5px;
@@ -869,7 +869,7 @@ div {
       -80 / v-bind("windowSizeWhenDesignForRef") * v-bind("windowSizeInCssForRef")
     );
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 75%;
     }
 
@@ -894,7 +894,7 @@ div {
       z-index: 2;
       overflow: hidden;
       transition: opacity 1.5s ease;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         transform: translateX(-20%);
       }
     }
@@ -932,7 +932,7 @@ div {
     );
     transform: translate(-40%, -39%);
     transform-origin: center center;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       transform: translate(-45%, -39%);
     }
     > .painting-stem {
@@ -1017,7 +1017,7 @@ div {
       30 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width:80%;
     }
   }
@@ -1052,7 +1052,7 @@ div {
     );
     z-index: 10;
     opacity: 0;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 65px;
       height: 65px;
     }
@@ -1205,7 +1205,7 @@ div {
       > img {
         width: 45%;
         margin-bottom: 10px;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           width: 55%;
         }
       }
@@ -1228,7 +1228,7 @@ div {
     transform: translate(-50%, 0);
     z-index: 5;
     opacity: 1;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       bottom: calc(
         100 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
@@ -1253,7 +1253,7 @@ div {
     padding-top: 15%;
     padding-left: 10%;
     padding-right: 10%;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       padding-top: 10%;
       padding-left: 15%;
       padding-right: 15%;
@@ -1289,7 +1289,7 @@ div {
     > .painting-img {
       width: 70%;
       margin-bottom: 20px;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 60%;
         margin-bottom: 40px;
       }
@@ -1299,7 +1299,7 @@ div {
       width: 100%;
       overflow: auto;
       padding: 0 0px 40px 0px;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         max-height: 30%;
       }
       &::-webkit-scrollbar {
@@ -1319,7 +1319,7 @@ div {
             v-bind("windowSizeInCssForRef")
         );
         font-family: KaiTi;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           font-size: calc(
             20 / v-bind("windowSizeWhenDesignForRef") *
               v-bind("windowSizeInCssForRef")
@@ -1377,7 +1377,7 @@ div {
     padding-top: 15%;
     padding-left: 10%;
     padding-right: 10%;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       padding-top: 10%;
       padding-left: 15%;
       padding-right: 15%;
@@ -1456,7 +1456,7 @@ div {
               v-bind("windowSizeInCssForRef")
           );
           font-family: KaiTi;
-          @media screen and (min-width: 768px) {
+          @media screen and (min-width: 600px) {
             font-size: calc(
             20 / v-bind("windowSizeWhenDesignForRef") *
               v-bind("windowSizeInCssForRef")

src/views/HotspotDetail1.vue

@@ -180,7 +180,7 @@ const onSwipeChange = (num, index) => {
     swChange.value = false
     setTimeout(() => {
       swChange.value = true
-    }, 600)
+    }, 100)
   }
 
   pageLev.value = newItem.id
@@ -190,7 +190,7 @@ const onSwipeChange = (num, index) => {
       title: newItem.title,
       desc: newItem.desc,
     }
-  }, 500)
+  }, 100)
 }
 
 // 判断画轴的位置 在 左边还是右边
@@ -225,7 +225,7 @@ const imgBottomLoc = (nowId, itemId) => {
     top: 60px;
     left: 30px;
     width: 80px;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 20%;
       top: 100px;
       left: 50px;
@@ -244,14 +244,14 @@ const imgBottomLoc = (nowId, itemId) => {
     pointer-events: none;
     transition: opacity 1s;
     opacity: 1;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       font-size: 22px;
       top: 70%;
       left: 43%;
     }
     & > img {
       width: 40px;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 50px;
       }
     }
@@ -283,7 +283,7 @@ const imgBottomLoc = (nowId, itemId) => {
     right: -60%;
     z-index: 1;
     bottom: 8%;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       bottom: -40%;
     }
   }
@@ -291,7 +291,7 @@ const imgBottomLoc = (nowId, itemId) => {
     right: -50%;
     z-index: 2;
     bottom: 0;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       bottom: -55%;
     }
   }
@@ -299,7 +299,7 @@ const imgBottomLoc = (nowId, itemId) => {
     right: -40%;
     z-index: 3;
     bottom: -8%;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       bottom: -70%;
     }
   }
@@ -317,9 +317,17 @@ const imgBottomLoc = (nowId, itemId) => {
       justify-content: center;
       align-items: center;
       padding-top: 30%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         padding-top: 10%;
       }
+
+      .operation-tip{
+        @media screen and (min-width: 600px) {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
     }
   }
 
@@ -338,8 +346,8 @@ const imgBottomLoc = (nowId, itemId) => {
   .HD1_3AcBottom {
     bottom: -50px;
     transition: right 1s, opacity 0.8s;
-    @media screen and (min-width: 768px) {
-      bottom: -30%;
+    @media screen and (min-width: 600px) {
+      bottom: -35%;
     }
   }
 
@@ -373,7 +381,7 @@ const imgBottomLoc = (nowId, itemId) => {
       height: calc(100% - 50px);
       writing-mode: vertical-rl;
       line-height: 120%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         font-size: 20px;
       }
     }

src/views/HotspotDetail3.vue

@@ -1,38 +1,38 @@
 <template>
   <div class="hotspot-detail-3">
     <img
-      v-show="state === 1 && innerWidth < 768"
+      v-show="state === 1 && innerWidth < 600"
       class="bg-img"
       src="@/assets/images/hots-detail-bg-state1.png"
       alt=""
     >
     <img
-      v-show="state === 2 && innerWidth < 768"
+      v-show="state === 2 && innerWidth < 600"
       class="bg-img"
       src="@/assets/images/hots-detail-bg-state2.png"
       alt=""
     >
     <img
-      v-show="state === 3 && innerWidth < 768"
+      v-show="state === 3 && innerWidth < 600"
       class="bg-img"
       src="@/assets/images/hots-detail-bg-state3.png"
       alt=""
     >
 
     <img
-      v-show="state === 1 && innerWidth >= 768"
+      v-show="state === 1 && innerWidth >= 600"
       class="bg-img"
       src="@/assets/images/hots-detail-bg-state1-768.jpg"
       alt=""
     >
     <img
-      v-show="state === 2 && innerWidth >= 768"
+      v-show="state === 2 && innerWidth >= 600"
       class="bg-img"
       src="@/assets/images/hots-detail-bg-state2-768.jpg"
       alt=""
     >
     <img
-      v-show="state === 3 && innerWidth >= 768"
+      v-show="state === 3 && innerWidth >= 600"
       class="bg-img"
       src="@/assets/images/hots-detail-bg-state3-768.jpg"
       alt=""
@@ -234,7 +234,7 @@ const handleScroll = () => {
         v-bind("windowSizeInCssForRef")
     );
     // 适配平板
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 65%;
       max-width: auto;
       bottom: calc(
@@ -258,7 +258,7 @@ const handleScroll = () => {
     img {
       // height: 50vh;
       width: 990px;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 1324px;
       }
     }
@@ -269,7 +269,7 @@ const handleScroll = () => {
     width: 100%;
     transition: opacity 1s ease;
     // 适配平板
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 70%;
       left: 50%;
       transform: translateX(-50%);
@@ -297,7 +297,7 @@ const handleScroll = () => {
       35 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 40%;
     }
 

src/views/MoreContent.vue

@@ -394,7 +394,8 @@ const pageWidth = ref(0)
 const pageNum = 4
 
 onMounted(() => {
-  if (window.innerWidth >= 768) {
+  // alert(window.innerWidth)
+  if (window.innerWidth >= 600) {
     pageWidth.value = window.innerWidth
   } else {
     pageWidth.value = window.innerWidth >= 500 ? 500 : window.innerWidth
@@ -472,7 +473,7 @@ body {
         top: 46%;
         left: 15%;
         z-index: 20;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: 8%;
         }
       }
@@ -503,7 +504,7 @@ body {
             margin-bottom: 10px;
             font-size: 20px;
             margin-bottom: 0;
-            @media screen and (min-width: 768px) {
+            @media screen and (min-width: 600px) {
               font-size: 28px;
             }
           }
@@ -518,7 +519,7 @@ body {
           letter-spacing: 0.3em;
           white-space: pre;
           position: relative;
-          @media screen and (min-width: 768px) {
+          @media screen and (min-width: 600px) {
             font-size: 60px;
           }
 
@@ -530,7 +531,7 @@ body {
             width: 40%;
           }
           img.deco2{
-            @media screen and (min-width: 768px) {
+            @media screen and (min-width: 600px) {
               right: auto;
               left: -0.05em;
             }
@@ -560,7 +561,7 @@ body {
       .ROW1_2 {
         z-index: 4;
         right: -15%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -8%;
         }
       }
@@ -587,21 +588,21 @@ body {
       .ROW2_1 {
         z-index: 5;
         right: -13%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -8%;
         }
       }
       .ROW2_2 {
         z-index: 4;
         right: -22%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -14%;
         }
       }
       .ROW2_3 {
         z-index: 4;
         left: -38%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -28%;
         }
       }
@@ -616,7 +617,7 @@ body {
       .ROW2_6 {
         left: 0;
         height: 30%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -28%;
         }
       }
@@ -650,7 +651,7 @@ body {
       .ROW3_7 {
         z-index: 4;
         left: -48%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -36%;
         }
       }
@@ -661,21 +662,21 @@ body {
       .ROW3_9 {
         z-index: 4;
         right: -37%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -25%;
         }
       }
       .ROW3_10 {
         z-index: 5;
         right: -3%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: 2%;
         }
       }
       .ROW3_11 {
         z-index: 5;
         left: -15%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -12%;
         }
       }
@@ -683,7 +684,7 @@ body {
         z-index: 5;
         left: 2%;
         height: 40%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: 13%;
         }
       }
@@ -703,28 +704,28 @@ body {
       .ROW4_6 {
         z-index: 3;
         left: -30%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -18%;
         }
       }
       .ROW4_7 {
         z-index: 4;
         left: -70%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: 51%;
         }
       }
       .ROW4_8 {
         z-index: 4;
         right: -5%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -2%;
         }
       }
       .ROW4_9 {
         z-index: 5;
         right: -5%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -2%;
         }
       }
@@ -757,13 +758,13 @@ body {
       color: white;
       z-index: 20;
       width: 20%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 19%;
       }
       & > img {
         pointer-events: none;
         width: 118px;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           width: 115%;
         }
       }
@@ -779,7 +780,7 @@ body {
         margin-top: 40%;
         margin-left: -25%;
         font-size: 18px;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           font-size: 24px;
         }
       }
@@ -795,7 +796,7 @@ body {
 
         margin-left: 54%;
         font-size: 18px;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           font-size: 24px;
           margin-left: 45%;
         }
@@ -814,14 +815,14 @@ body {
           width: 20px;
           height: 20px;
           margin-bottom: 5px;
-          @media screen and (min-width: 768px) {
+          @media screen and (min-width: 600px) {
             width: 35px;
             height: 35px;
             }
           }
         >img{
           width: 75vw;
-          @media screen and (min-width: 768px) {
+          @media screen and (min-width: 600px) {
             width: 65vw;
           }
         }
@@ -896,13 +897,13 @@ body {
     align-items: center;
     opacity: 1;
     transition: opacity 1s;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       font-size: 22px;
     }
 
     img {
       width: 30px;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 50px;
       }
     }

src/views/PaintingDetail.vue

@@ -487,7 +487,7 @@ function showBigPainting() {
       -60 / var(--39efea6f-windowSizeWhenDesignForRef) * var(--39efea6f-windowSizeInCssForRef)
     );
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       animation: paintion-up 2s forwards;
       transform: translate(-50%, 0) scale(0.85);
       top: calc(
@@ -754,7 +754,7 @@ function showBigPainting() {
     //     height: calc(400 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     //   }
     // }
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       height: calc(
         255 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
@@ -859,7 +859,7 @@ function showBigPainting() {
       230 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       height: calc(
         180 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
@@ -871,7 +871,7 @@ function showBigPainting() {
       360 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: calc(
         450 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")

src/views/PaintingList.vue

@@ -383,7 +383,7 @@ const isShowPaintingStyleDesc = ref(false)
       height: 100%;
       display: flex;
       align-items: center;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         justify-content: right;
       }
       >.cover{
@@ -601,7 +601,7 @@ const isShowPaintingStyleDesc = ref(false)
             color: #474747;
             line-height: 15px;
             margin-bottom: 0.5em;
-            @media screen and (min-width: 768px) {
+            @media screen and (min-width: 600px) {
               font-size: 20px;
             }
           }
@@ -611,7 +611,7 @@ const isShowPaintingStyleDesc = ref(false)
             font-size: 13px;
             color: #474747;
             line-height: 15px;
-            @media screen and (min-width: 768px) {
+            @media screen and (min-width: 600px) {
               font-size: 22px;
             }
           }

src/views/PoemList.vue

@@ -263,7 +263,7 @@ onMounted(() => {
   ageList.value = ageListTemp
   listRes.value = arrRes
 
-  const fullWidth = window.innerWidth >= 768 ? window.innerWidth : window.innerWidth >= 500 ? 500 : window.innerWidth
+  const fullWidth = window.innerWidth >= 600 ? window.innerWidth : window.innerWidth >= 500 ? 500 : window.innerWidth
 
   pageWidth.value = fullWidth
   // 总盒子的宽度
@@ -378,7 +378,7 @@ const isMoveFu = (index, num) => {
       color: #fff;
       border: 1px solid transparent;
 
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 40px;
         height: 40px;
         font-size: 20px;
@@ -389,7 +389,7 @@ const isMoveFu = (index, num) => {
       color: #d6cda1;
       border: 1px solid #d6cda1;
       font-size: 18px;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         font-size: 22px;
       }
     }
@@ -447,7 +447,7 @@ const isMoveFu = (index, num) => {
       .ROW2_1 {
         z-index: 2;
         left: -38%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -26%;
         }
       }
@@ -460,7 +460,7 @@ const isMoveFu = (index, num) => {
       }
       .ROW3_1 {
         left: -36%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -27%;
         }
       }
@@ -481,7 +481,7 @@ const isMoveFu = (index, num) => {
       }
       .ROW4_1 {
         left: -35%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -26%;
         }
       }
@@ -499,20 +499,20 @@ const isMoveFu = (index, num) => {
       }
       .ROW4_5 {
         right: -17%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -13%;
         }
       }
       .ROW5_1 {
         left: -45%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -29%;
         }
       }
       .ROW5_2 {
         z-index: 2;
         left: -17%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -9%;
         }
       }
@@ -528,7 +528,7 @@ const isMoveFu = (index, num) => {
       }
       .ROW5_5 {
         right: -6%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -4%;
         }
       }
@@ -708,7 +708,7 @@ const isMoveFu = (index, num) => {
     .ROWtxt {
       padding-top: 15%;
       padding-right: 40%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         padding-right: 19%;
       }
     }
@@ -716,7 +716,7 @@ const isMoveFu = (index, num) => {
   .ROW2 {
     .ROWtxt {
       padding-right: 24%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         padding-right: 9%;
       }
     }
@@ -724,7 +724,7 @@ const isMoveFu = (index, num) => {
   .ROW3 {
     .ROWtxt {
       padding-right: 30%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         padding-right: 8%;
       }
     }
@@ -732,7 +732,7 @@ const isMoveFu = (index, num) => {
   .ROWW19 {
     .ROWtxt {
       padding-top: 87%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         padding-top: 53%;
       }
     }
@@ -752,7 +752,7 @@ const isMoveFu = (index, num) => {
     transition: opacity 0.5s;
     pointer-events: none;
     font-family: KingHwa_OldSong;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       font-size: 20px;
     }
   }
@@ -775,7 +775,7 @@ const isMoveFu = (index, num) => {
     align-items: center;
     opacity: 1;
     transition: opacity 1s;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       font-size: 22px;
     }
 

src/views/ShuangGouSheSeDetail.vue

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

src/views/StartupView.vue

@@ -53,7 +53,7 @@
         v-show="isShowVideo"
         ref="videoEl"
         class="transition-video"
-        :src="require(`@/assets/videos/startup${windowWidth >= 768 ? '-768':''}.mp4`)"
+        :src="require(`@/assets/videos/startup${windowWidth >= 600 ? '-768':''}.mp4`)"
         playsinline
         webkit-playsinline="true"
         x5-video-player-type="h5"