更新首页图片清晰度还有开始页面的150%适配问题

src/views/HomeView.vue

@@ -14,7 +14,6 @@ import DetailImgAc from '@/assets/images/icon_home_detail-min-ac.png'
 import AuthorImg from '@/assets/images/icon_home_author-min.png'
 import AuthorImgAc from '@/assets/images/icon_home_author-min-ac.png'
 
-import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 import { useWindowSize } from "@vueuse/core"
 
 
@@ -113,10 +112,7 @@ const scrollFu = (event, val) => {
 }
 const hoverIndex = ref(null)
 
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
+
 onMounted(() => {
   if (route.query.page) {
     curPageIndex.value = parseInt(route.query.page)
@@ -264,7 +260,7 @@ onMounted(() => {
       >
       <img
         class="painting-stem"
-        src="@/assets/images/home-painting1.jpg"
+        src="@/assets/images/home-painting2.jpg"
         alt=""
         draggable="false"
       >

src/views/StartupView.vue

@@ -52,8 +52,8 @@
       class="btn-start"
       :class="isStartBtnBlink ? 'animation-show-hide' : ''"
       :image-src="require(`@/assets/images/btn-start.png`)"
-      :total-width="864"
-      :height="72"
+      :total-width="864 / windowHeightDesign * windowHeight"
+      :height="72 / windowHeightDesign * windowHeight"
       :frame-number="12"
       :loop="false"
       @over="isStartBtnBlink = true"
@@ -89,23 +89,14 @@
 </template>
 
 <script setup>
-import useSizeAdapt from "@/useFunctions/useSizeAdapt"
-import { ref, computed, watch, onMounted, inject, nextTick } from "vue"
+import { ref, inject, nextTick } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import { useWindowSize } from '@vueuse/core'
 
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
-const $env = inject('$env')
-
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
 
+const store = useStore()
+const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 
 
@@ -168,30 +159,30 @@ function onVideoEnd() {
     left: 50%;
     top: 40%;
     transform: translate(-50%, -50%);
-    width: 152px;
+    width: calc(152px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
   }
 
   >.loading-tip{
     position: absolute;
     left: 50%;
-    bottom: 100px;
+    bottom: calc(100px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     transform: translateX(-48%);
-    width: 72px;
-    height: 72px
+    width: calc(72px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    height: calc(72px / v-bind('windowHeightDesign') * v-bind('windowHeight'))
   }
   >.btn-start{
     position: absolute;
     left: 50%;
-    bottom: 100px;
+    bottom: calc(100px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     transform: translateX(-48%);
     cursor: pointer;
   }
   >.start-title{
     color: #FFFFFF;
-    font-size: 24px;
+    font-size: calc(24px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     font-family: KaiTi;
     position: absolute;
-    bottom: 60px;
+    bottom: calc(60px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     left: 50%;
     transform: translateX(-48%);
     transition: opacity 1.5s ease;
@@ -207,13 +198,5 @@ function onVideoEnd() {
     transform: translateX(-50%);
   }
 
-  // @keyframes spin {
-  //   0% {
-  //     transform: translate(-50%, -50%) rotate(0deg);
-  //   }
-  //   100% {
-  //     transform: translate(-50%, -50%) rotate(360deg);
-  //   }
-  // }
 }
 </style>