修改一些150%的适配

src/components/HotspotComp.vue

@@ -13,12 +13,13 @@
 import { ref, computed, watch, onMounted, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
-import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import { useWindowSize } from "@vueuse/core"
 
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
+
+
+
+const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
+const { width: windowWidth, height: windowHeight } = useWindowSize()
 
 const route = useRoute()
 const router = useRouter()
@@ -29,8 +30,8 @@ const $env = inject('$env')
 
 <style lang="less" scoped>
 .hotspot{
-  width: 48px;
-  height: 48px;
+  width: calc(48px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+  height: calc(48px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
   cursor: pointer;
   >img{
     width: 100%;

src/components/HotspotForHomepage.vue

@@ -10,19 +10,18 @@
 </template>
 
 <script setup>
-import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import { useWindowSize } from "@vueuse/core"
 
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
+
+const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
+const { width: windowWidth, height: windowHeight } = useWindowSize()
 
 </script>
 
 <style lang="less" scoped>
 .hotspot{
-  width: 48px;
-  height: 48px;
+  width: calc(48px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+  height: calc(48px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
   >img{
     width: 100%;
     height: 100%;

src/views/BambooBookView.vue

@@ -2,6 +2,8 @@
 import { ref, computed, onMounted, inject } from "vue"
 import { useRouter } from "vue-router"
 import useRollFu from "../rollFu.js"
+import { useWindowSize } from "@vueuse/core"
+
 
 const router = useRouter()
 
@@ -57,6 +59,11 @@ const paintingData = computed(() => {
 
 const rowScroller = ref(null)
 
+const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+
+
+
 const isShowClickTip = ref(true)
 const isShowBigView = ref(false)
 const handleWheel = (val) => {
@@ -243,17 +250,20 @@ onMounted(() => {
       // flex-direction: column;
       align-items: center;
       left: 3vw;
-      top: 12vh;
+      top: 15vh;
       .title-box {
-        font-size: 2.8em;
+        // font-size: 2.8em;
+        font-size: calc(48px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+        line-height:calc(56.25px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
         // line-height: 56px;
         letter-spacing: 0.3em;
       }
       .zhupu-box {
         // margin-top: 10%;
         margin-top: 20px;
-        font-size: 1.8em;
-
+        // font-size: 1.8em;
+        font-size: calc(24px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+        line-height:calc(29px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
         line-height: 28.13px;
         letter-spacing: 0.2em;
       }
@@ -266,8 +276,8 @@ onMounted(() => {
       right: 12%;
       color: #7b916b;
       // opacity: 0.3;
-      font-size: 28px;
-      line-height: 36px;
+      font-size: calc(28px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+      line-height:calc(38px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
       font-family: "KaiTi";
       text-transform: none;
       text-align: justified;
@@ -322,9 +332,10 @@ onMounted(() => {
         .btn {
           width: 60px;
           height: 60px;
-          font-size: 38px;
+          // font-size: 38px;
+          font-size:calc(38px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          line-height:calc(52px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           flood-color: #474747;
-          line-height: 52px;
           display: flex;
           justify-content: center;
           align-items: center;
@@ -373,12 +384,14 @@ onMounted(() => {
         .category-title {
           display: inline-flex;
           writing-mode: vertical-lr;
-          letter-spacing: 12px;
+          // letter-spacing: 12px;
+          letter-spacing:calc(12px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           color: #476446;
           background: url(@/assets/images/name-bg.png);
           background-size: 100% 100%;
           font-family: "KingHwa_OldSong";
-          font-size: 20px;
+          // font-size: 20px;
+          font-size:calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           // line-height: 48px;
           padding: 10px;
           margin: 0 30px 0 60px;
@@ -396,8 +409,8 @@ onMounted(() => {
           > div {
             margin-top: 10px;
             color: #7b916b;
-            font-size: 20px;
-            line-height: 29px;
+            font-size:calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+            line-height:calc(24px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
             font-family: "KingHwa_OldSong";
           }
         }

src/views/HomeView.vue

@@ -15,11 +15,18 @@ 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"
+
 
 const store = useStore()
 const router = useRouter()
 const route = useRoute()
 
+
+
+const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+
 const { handleScrollThrottle } = useRollFu()
 
 const isShowOperationTip = ref(true)
@@ -75,6 +82,17 @@ watch(curPageIndex, (val) => {
 //   return curPageIndex.value == 0 || curPageIndex.value == 4
 // }, 1500))
 
+// 知识探索
+const goMorePart = () => {
+  // 播放视频
+  isShowVideoFadeToNextPage.value = true
+  nextTick(() => {
+    videoFadeToNextPageEl.value.play()
+  })
+  setTimeout(() => {
+    isShowSkip.value = true
+  }, 2000)
+}
 // 滑动逻辑
 const scrollFu = (event, val) => {
   console.log('在滚动', val)
@@ -89,14 +107,7 @@ const scrollFu = (event, val) => {
     if (curPageIndex.value < 4) {
       curPageIndex.value = curPageIndex.value + 1
     } else if (curPageIndex.value == 4) {
-      // 播放视频
-      isShowVideoFadeToNextPage.value = true
-      nextTick(() => {
-        videoFadeToNextPageEl.value.play()
-      })
-      setTimeout(() => {
-        isShowSkip.value = true
-      }, 2000)
+      goMorePart()
     }
   }
 }
@@ -223,6 +234,13 @@ onMounted(() => {
         >
         <div>作者简介</div>
       </div>
+      <img
+        v-show="curPageIndex == 0 "
+        class="more-part-btn"
+        src="@/assets/images/home-long-desc-bg.png"
+        alt=""
+        @click="goMorePart"
+      >
     </div>
 
     <!-- 画作 -->
@@ -408,7 +426,7 @@ onMounted(() => {
     right: 25%;
     top: 50%;
     transform: translateY(-50%);
-    width: 100px;
+    // width: 100px;
     height: 45%;
     z-index: 5;
     transition: opacity 1.5s ease;
@@ -417,7 +435,8 @@ onMounted(() => {
       position: absolute;
       left: 0;
       top: 0;
-      width: 100%;
+      // width: 100%;
+      transform: translateX(-100%);
       height: 100%;
     }
 
@@ -429,9 +448,11 @@ onMounted(() => {
       writing-mode: vertical-lr;
       font-family: KaiTi;
       font-weight: 400;
-      font-size: 20px;
+      // font-size: 20px;
+      font-size: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       color: #ffffff;
-      line-height: 30px;
+      // line-height: 30px;
+      line-height: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       white-space: pre;
       letter-spacing: 0.2em;
       text-align: center;
@@ -439,8 +460,8 @@ onMounted(() => {
   }
   > .long-desc {
     position: absolute;
-    bottom: 30px;
-    right: 30px;
+    bottom: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    right: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     color: white;
     overflow: hidden;
     font-family: KaiTi;
@@ -449,8 +470,14 @@ onMounted(() => {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    align-items: center;
     z-index: 10;
     transition: opacity 1.5s ease;
+    >.more-part-btn{
+      width: calc(67px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      margin-top: calc(10px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      cursor: pointer;
+    }
 
     > .page2-box {
       display: flex;
@@ -465,10 +492,7 @@ onMounted(() => {
       }
 
       > div {
-        font-size: calc(
-          20 / v-bind("windowSizeWhenDesignForRef") *
-            v-bind("windowSizeInCssForRef")
-        );
+        font-size: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
         font-family: KaiTi;
       }
     }
@@ -585,19 +609,20 @@ onMounted(() => {
     transform: translateY(-50%);
     left: 10%;
     color: #ffffff;
-    font-size: 25px;
-    line-height: 38px;
+    font-size: calc(25px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    line-height: calc(38px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     font-family: "KaiTi";
     transition: opacity 1.5s ease;
     z-index: 10;
     transition: left 1.5s ease;
     .text-box-title {
-      font-size: 42px;
-      line-height: 48px;
-      margin-bottom: 30px;
+      font-size: calc(42px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      line-height: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      margin-bottom: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     }
     .text-box-desc{
       text-indent: 2em;
+      max-width: calc(550px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     }
   }
 }

src/views/HotspotDetail1.vue

@@ -93,11 +93,16 @@
 <script setup>
 import { ref } from "vue"
 import useRollFu from "../rollFu.js"
+import { useWindowSize } from "@vueuse/core"
+
 
 const { handleScrollThrottle } = useRollFu()
 
 const emit = defineEmits(["close"])
 
+const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+
 const craftInfo = configText.craft
 
 const imgList = [
@@ -280,8 +285,8 @@ const imgBottomLoc = (nowId, itemId) => {
     top: 50%;
     transform: translateY(-47%);
     left: 20%;
-    width: 150px;
-    height: 252px;
+    width: calc(150px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    height: calc(252px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
   }
 
   .HD1_2 {
@@ -294,7 +299,7 @@ const imgBottomLoc = (nowId, itemId) => {
     justify-content: center;
     align-items: center;
     & > img {
-      width: 50px;
+      width: calc(50px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     }
     & > div {
       margin-top: 5px;
@@ -302,7 +307,7 @@ const imgBottomLoc = (nowId, itemId) => {
       font-family: KaiTi;
       color: #fff;
       white-space: nowrap;
-      font-size: 20px
+      font-size: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'))
     }
   }
   .HD1_2Hide {
@@ -374,7 +379,7 @@ const imgBottomLoc = (nowId, itemId) => {
     pointer-events: none;
   }
   .HD1_3AcBottom {
-    bottom: -50px;
+    bottom: calc(-50px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     transition: right 1s, opacity 0.8s;
     height: 80vh;
   }
@@ -397,19 +402,19 @@ const imgBottomLoc = (nowId, itemId) => {
     h3 {
       font-weight: 700;
       text-align: center;
-      font-size: 48px;
+      font-size: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       position: absolute;
       right: 0;
       top: 0;
       transform: translate(150%, -150%);
     }
     p {
-      font-size: 30px;
+      font-size: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       // position: absolute;
       // top: 15%;
       // left: -250%;
       // transform: translateX(-50%);
-      letter-spacing: 2px;
+      letter-spacing: calc(2px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       height: 140%;
       writing-mode: vertical-rl;
       line-height: 122%;

src/views/HotspotDetail3.vue

@@ -97,9 +97,14 @@
 <script setup>
 import { ref, computed } from "vue"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import { useWindowSize } from "@vueuse/core"
+
 
 const emit = defineEmits(["close"])
 
+const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+
 // 三个按钮
 
 import hots3StateBtn1 from "@/assets/images/hots-detail-btn-state1.png"
@@ -265,19 +270,19 @@ const goState2 = () => {
 
   .btns-box {
     // width: 55%;
-    height: 200px;
+    height: calc(200px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     position: absolute;
-    left: 30px;
+    left: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     // transform: translateX(-50%);
-    bottom: 30px;
+    bottom: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     z-index: 10;
 
     > img {
-      width: 35px;
-      width: 35px;
+      width: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      width: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       cursor: pointer;
     }
   }