适配系统、浏览器缩放

src/components/BtnBack.vue

@@ -84,7 +84,7 @@ const textColor = computed(() => {
     line-height: calc(28px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
   }
   >.text.needShadow{
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+    text-shadow: calc(1px / v-bind('windowHeightDesign') * v-bind('windowHeight')) calc(1px / v-bind('windowHeightDesign') * v-bind('windowHeight')) calc(2px / v-bind('windowHeightDesign') * v-bind('windowHeight')) rgba(0, 0, 0, 0.3);
   }
 }
 </style>

src/components/HotspotCompSmall.vue

@@ -13,6 +13,9 @@
 </template>
 
 <script setup>
+import { useDevicePixelRatio } from '@vueuse/core'
+
+const { pixelRatio } = useDevicePixelRatio()
 </script>
 
 <style lang="less" scoped>
@@ -24,8 +27,8 @@
   cursor: pointer;
   >img{
     flex: 0 0 auto;
-    width: 28px;
-    height: 28px;
+    width: calc(28px / v-bind('pixelRatio'));
+    height: calc(28px / v-bind('pixelRatio'));
   }
   >.text{
     margin-top: -0.3em;
@@ -33,10 +36,10 @@
     white-space: pre;
     font-family: KaiTi, KaiTi;
     font-weight: 400;
-    font-size: 26px;
+    font-size: calc(26px / v-bind('pixelRatio'));
     color: #FFFFFF;
-    line-height: 30px;
-    text-shadow: 0px 0px 3px rgba(0,0,0,0.75);
+    line-height: calc(30px / v-bind('pixelRatio'));
+    text-shadow: 0px 0px calc(3px / v-bind('pixelRatio')) rgba(0,0,0,0.75);
     letter-spacing: 0.15em;
   }
 }

src/views/BambooList.vue

@@ -171,6 +171,9 @@ import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
 import { useWindowSize } from "@vueuse/core"
+import { useDevicePixelRatio } from '@vueuse/core'
+
+const { pixelRatio } = useDevicePixelRatio()
 
 const route = useRoute()
 const router = useRouter()
@@ -406,20 +409,19 @@ function onClickBack() {
       >h1{
         font-family: KingHwa_OldSong, KingHwa_OldSong;
         font-weight: 400;
-        font-size: 60px;
+        font-size: calc(60px / v-bind('pixelRatio'));
         color: #FFFFFF;
-        line-height: 75px;
-        text-shadow: 0px 0px 2px rgba(0,0,0,0.25);
+        line-height: calc(75px / v-bind('pixelRatio'));
+        text-shadow: 0px 0px calc(2px / v-bind('pixelRatio')) rgba(0,0,0,0.25);
         margin-bottom: 1em;
       }
       >p{
         width: 24.2vw;
-        margin-left: 60px;
         font-family: KaiTi, KaiTi;
         font-weight: 400;
-        font-size: 30px;
+        font-size: calc(30px / v-bind('pixelRatio'));
         color: #FFFFFF;
-        line-height: 45px;
+        line-height: calc(45px / v-bind('pixelRatio'));
         text-align: justified;
         text-indent: 2em;
       }

src/views/MoreContent.vue

@@ -248,6 +248,9 @@ import { useStore } from "vuex"
 import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
 import { useWindowSize } from "@vueuse/core"
 import OperationTip from "@/components/OperationTip.vue"
+import { useDevicePixelRatio } from '@vueuse/core'
+
+const { pixelRatio } = useDevicePixelRatio()
 
 const route = useRoute()
 const router = useRouter()
@@ -285,7 +288,7 @@ const layer4Left = ref(layer4InitialLeft)
 
 // layer3Left位移
 const layer3SpeedFactor = 0.8 * 0.8
-const layer3InitialLeft = 600 * windowHeight.value / windowHeightDesign
+const layer3InitialLeft = 600 / pixelRatio.value * windowHeight.value / windowHeightDesign
 const layer3Left = ref(layer3InitialLeft)
 
 // layer2Left位移

src/views/PaintingList.vue

@@ -12,8 +12,8 @@
     <SerialFrames
       class="bg-serial-frames-top"
       :image-src="require(`@/assets/images/serial-frame-painting-list-top.png`)"
-      :total-width="13194"
-      :height="865"
+      :total-width="13194 / pixelRatio"
+      :height="865 / pixelRatio"
       :frame-number="33"
       :frame-duration="55"
     />
@@ -225,6 +225,9 @@ import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
 import { useWindowSize } from "@vueuse/core"
+import { useDevicePixelRatio } from '@vueuse/core'
+
+const { pixelRatio } = useDevicePixelRatio()
 
 const getPaintingSize = utils.getPaintingSize
 
@@ -415,7 +418,7 @@ onBeforeUnmount(() => {
   >.bg-serial-frames-bottom{
     position: absolute;
     bottom: 0;
-    right: 175px;
+    right: calc(175px / v-bind('pixelRatio'));
     height: calc(300 / v-bind('windowHeightDesign') * v-bind('windowHeight') * 1px);
     transform: translate(0, 10%) scale(1);
     transform-origin: bottom left;
@@ -671,17 +674,17 @@ onBeforeUnmount(() => {
           >.size{
             font-family: KingHwa_OldSong;
             font-weight: 400;
-            font-size: 17px;
+            font-size: calc(17px / v-bind('pixelRatio'));
             color: #474747;
-            line-height: 19px;
+            line-height: calc(19px / v-bind('pixelRatio'));
             margin-bottom: 0.5em;
           }
           >.position{
             font-family: KingHwa_OldSong;
             font-weight: 400;
-            font-size: 17px;
+            font-size: calc(17px / v-bind('pixelRatio'));
             color: #474747;
-            line-height: 19px;
+            line-height: calc(19px / v-bind('pixelRatio'));
           }
         }
       }

src/views/PoemList.vue

@@ -156,6 +156,9 @@ import { useStore } from "vuex"
 import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
 import { useWindowSize } from "@vueuse/core"
 import OperationTip from "@/components/OperationTip.vue"
+import { useDevicePixelRatio } from '@vueuse/core'
+
+const { pixelRatio } = useDevicePixelRatio()
 
 const route = useRoute()
 const router = useRouter()
@@ -490,14 +493,14 @@ const unwatch = watch(translateLength, (v) => {
     >menu.age-list{
       position: absolute;
       left: 50%;
-      bottom: 30px;
+      bottom: calc(30px / v-bind('pixelRatio'));
       transform: translateX(-50%);
       display: flex;
       align-items: center;
-      gap: 20px;
+      gap: calc(20px / v-bind('pixelRatio'));
       >button.age{
-        width: 47px;
-        height: 47px;
+        width: calc(47px / v-bind('pixelRatio'));
+        height: calc(47px / v-bind('pixelRatio'));
         position: relative;
         >img{
           position: absolute;

src/views/ShuangGou.vue

@@ -107,6 +107,9 @@ import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSizeAdapt from '@/useFunctions/useSizeAdapt.js'
+import { useDevicePixelRatio } from '@vueuse/core'
+
+const { pixelRatio } = useDevicePixelRatio()
 
 const route = useRoute()
 const router = useRouter()
@@ -178,10 +181,6 @@ const activeVideoIdx = ref(0)
   }
   >.hotspot-1, .hotspot-2{
     position: absolute;
-    width: 48px;
-    height: 48px;
-    min-width: 40px;
-    min-height: 40px;
   }
   @media (max-aspect-ratio: 855/835) {
     .hotspot-1{
@@ -244,15 +243,15 @@ const activeVideoIdx = ref(0)
 
   >button.play-video{
     position: absolute;
-    bottom: 37px;
-    right: 33px;
+    bottom: calc(37px / v-bind('pixelRatio'));
+    right: calc(33px / v-bind('pixelRatio'));
     display: flex;
     flex-direction: column;
     align-items: center;
     >img{
-      width: 48px;
-      height: 48px;
-      margin-bottom: 14px;
+      width: calc(48px / v-bind('pixelRatio'));
+      height: calc(48px / v-bind('pixelRatio'));
+      margin-bottom: calc(14px / v-bind('pixelRatio'));
     }
     >img.icon-normal{
       display: block;
@@ -263,9 +262,9 @@ const activeVideoIdx = ref(0)
     >span{
       font-family: KaiTi, KaiTi;
       font-weight: 400;
-      font-size: 20px;
+      font-size: calc(20px / v-bind('pixelRatio'));
       color: #7B916B;
-      line-height: 23px;
+      line-height: calc(23px / v-bind('pixelRatio'));
     }
   }
   >button.play-video:hover{