feat:增加首页滚动逻辑

public/configText.js

@@ -18,9 +18,9 @@ var configText = {
   homepagePaintingDetailDescLeaf1: '<span>竹叶的画法以</span><span style="font-size:1.3em" >“个”</span><span>“介"“分”\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
   homepagePaintingDetailDescLeaf2: '<span>竹叶的画法以“个”</span><span style="font-size:1.3em">“介"</span><span>“分”\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
   homepagePaintingDetailDescLeaf3: '<span>竹叶的画法以“个”“介"</span><span style="font-size:1.3em" >“分”</span><span>\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
-  homepagePaintingDetailDescLeaf: '<span>竹叶的画法以</span><span style="font-size:1.3em" >“个”“介"“分”</span><span>\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
+  homepagePaintingDetailDescLeaf: '<span>以</span><span style="font-size:1.3em" >“个”“介"“分”</span><span>\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
 
-  homepagePaintingDetailDescStone: '<span style="font-size:1.3em">卧石、枯树和灌木</span><span>在竹下方，用低矮、枯梗、虚淡来衬托竹的挺拔、润泽和沉着。图中弥漫着敦厚温润、不瘟不火、从容淡定的神韵。</span>',
+  homepagePaintingDetailDescStone: '<span >卧石、枯树和灌木</span><span>在竹下方，用低矮、枯梗、虚淡来衬托竹的挺拔、润泽和沉着。图中弥漫着敦厚温润、不瘟不火、从容淡定的神韵。</span>',
   homepagePaintingSummary: '赵孟頫对李衎的墨竹评价极高：“吾友李仲宾为此君写真，冥搜极讨，盖欲尽得竹之情状，二百年来，以画竹称者，皆未必能用意精深如仲宾也。”',
   craft: [
     {

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, inject } from "vue"
+import { ref, inject, computed } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import Startup from "@/views/StartupView.vue"
@@ -8,7 +8,6 @@ import useRollFu from "../rollFu.js"
 import HotspotDetail3 from "@/views/HotspotDetail3.vue"
 import HotspotDetail1 from "@/views/HotspotDetail1.vue"
 
-
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
@@ -22,20 +21,39 @@ const isShowOperationTip = ref(true)
 const isShowHotspotDetail1 = ref(false)
 const isShowHotspotDetail3 = ref(false)
 
+const curPageIndex = ref(2)
+
+const longDescText = computed(() => {
+  return curPageIndex.value == 1
+    ? configText.homepagePaintingDetailDescStem
+    : curPageIndex.value == 2
+      ? configText.homepagePaintingDetailDescLeaf
+      : curPageIndex.value == 3 ? configText.homepagePaintingDetailDescStone : curPageIndex.value == 4 ? configText.homepagePaintingSummary : ''
+})
+
+const longTitleText = computed(() => {
+  return curPageIndex.value == 1
+    ? "三竿修竹"
+    : curPageIndex.value == 2
+      ? "竹叶"
+      : curPageIndex.value == 3 ? "卧石、枯树和灌木" : ''
+})
+
 // 滑动逻辑
 const scrollFu = (val) => {
-
   if (val == -1) {
     // 上滚
-    console.log("上滚")
+    // console.log("上滚")
+    curPageIndex.value =
+      curPageIndex.value > 0 ? curPageIndex.value - 1 : curPageIndex.value
   } else if (val == 1) {
     // 下滚
     console.log("下滚")
     isShowOperationTip.value = false
+    curPageIndex.value =
+      curPageIndex.value < 4 ? curPageIndex.value + 1 : curPageIndex.value
   }
 }
-
-const curPageIndex = ref(0)
 </script>
 
 <template>
@@ -51,7 +69,6 @@ const curPageIndex = ref(0)
     <!-- 背景 -->
     <div
       class="bg-mask"
-      :style="{ background: curPageIndex == 2 ? `rgba(85,116,83,0.8)` : `` }"
     />
     <!-- 开场动画 -->
     <Transition name="fade-out">
@@ -84,9 +101,8 @@ const curPageIndex = ref(0)
     <div
       ref="longDesc"
       class="long-desc"
-      :class="{ 'long-desc-ac': curPageIndex == 0 }"
-      @touchstart="handletouchstart($event)"
-      @touchend="touchEnd($event)"
+      :class="{ 'long-desc-ac': curPageIndex == 0 || curPageIndex == 4 }"
+      :style="{ opacity: curPageIndex == 0 || curPageIndex == 4 ? 1 : 0 }"
     >
       <div
         class="page2-box"
@@ -115,11 +131,8 @@ const curPageIndex = ref(0)
     <div
       class="painting-wrap"
       :class="{
-        'painting-wrap1': curPageIndex == 0,
-        'painting-wrap2': curPageIndex == 1,
-        'painting-wrap3': curPageIndex == 2 || curPageIndex == 3,
-        'painting-wrap4': curPageIndex == 4,
-        'painting-wrap5': curPageIndex == 5,
+        'painting-wrap2': curPageIndex == 1 || curPageIndex == 3,
+        'painting-wrap3': curPageIndex == 2,
       }"
       @click="
         () => {
@@ -146,9 +159,9 @@ const curPageIndex = ref(0)
         draggable="false"
       >
       <img
-        :style="{ opacity: curPageIndex == 3 ? 1 : 0, zIndex: 3 }"
+        :style="{ opacity: curPageIndex == 1 ? 1 : 0, zIndex: 3 }"
         class="painting-stem"
-        src="@/assets/images/home-painting-stem.png"
+        src="@/assets/images/home-painting-stem.jpg"
         alt=""
       >
 
@@ -157,7 +170,7 @@ const curPageIndex = ref(0)
         src="@/assets/images/img_zhuye-min2.png"
         alt=""
         :style="{
-          opacity: curPageIndex == 4 ? 1 : 0,
+          opacity: curPageIndex == 2 ? 1 : 0,
           zIndex: 2,
         }"
         draggable="false"
@@ -167,7 +180,7 @@ const curPageIndex = ref(0)
         class="painting-stem"
         src="@/assets/images/img_stone_all-min.png"
         :style="{
-          opacity: curPageIndex == 5 ? 1 : 0,
+          opacity: curPageIndex == 3 ? 1 : 0,
           zIndex: 2,
         }"
         alt=""
@@ -178,12 +191,12 @@ const curPageIndex = ref(0)
     <!-- 热点层1 -->
     <div class="hotspot-wrap">
       <HotspotForHomepage
-        v-show="curPageIndex == 0"
+        v-show="curPageIndex == 0 || curPageIndex == 4"
         class="hotspot-1"
         @click="isShowHotspotDetail1 = true"
       />
       <HotspotForHomepage
-        v-show="curPageIndex == 0"
+        v-show="curPageIndex == 0|| curPageIndex == 4"
         class="hotspot-3"
         @click="isShowHotspotDetail3 = true"
       />
@@ -214,6 +227,26 @@ const curPageIndex = ref(0)
       text="向下滑动"
       :is-show="isShowOperationTip"
     />
+
+    <!-- 文字介绍 -->
+    <div
+      class="text-box"
+      :style="{
+        opacity:
+          curPageIndex == 1 || curPageIndex == 2 || curPageIndex == 3 || curPageIndex == 4 ? 1 : 0,
+      }"
+    >
+      <div class="text-box-title">
+        {{ longTitleText }}
+      </div>
+      <div v-if="curPageIndex == 2">
+        竹子的画法
+      </div>
+      <div
+        class="text-box-desc"
+        v-html="longDescText"
+      />
+    </div>
   </div>
 </template>
 
@@ -264,6 +297,7 @@ const curPageIndex = ref(0)
     width: 100px;
     height: 45%;
     z-index: 5;
+    transition: opacity 1.5s ease;
 
     > img.title {
       position: absolute;
@@ -302,6 +336,7 @@ const curPageIndex = ref(0)
     flex-direction: column;
     justify-content: space-between;
     z-index: 10;
+    transition: opacity 1.5s ease;
 
     > .page2-box {
       display: flex;
@@ -333,6 +368,8 @@ const curPageIndex = ref(0)
     // background: green;
     transform: translate(-50%, -50%);
     z-index: 1;
+    transition: top 1.5s ease,left 1.5s ease,width 1.5s ease,height 1.5s ease;
+
 
     > .painting-border {
       width: 100%;
@@ -349,8 +386,23 @@ const curPageIndex = ref(0)
       position: absolute;
       left: 50%;
       transform: translate(-50%, 26%);
+      transition: opacity 1.5s ease;
     }
   }
+  >.painting-wrap2{
+    left: 63%;
+    top: 46%;
+    width: calc(551.84px* 1.45);
+    height: calc(937.05px* 1.45);
+  }
+
+  >.painting-wrap3{
+    left: 50%;
+    top: 0%;
+    width: calc(551.84px* 5.45);
+    height: calc(937.05px* 5.45);
+  }
+
 
   > .hotspot-wrap {
     position: absolute;
@@ -364,11 +416,13 @@ const curPageIndex = ref(0)
     will-change: transform;
     backface-visibility: hidden;
     z-index: 10;
+    transition: opacity 1.5s ease;
 
     & > div {
       z-index: 100;
       transition: all 1.5s ease-in-out;
       cursor: pointer;
+      // transition: all 1.5s ease-in-out;
     }
 
     > .hotspot-1 {
@@ -403,5 +457,24 @@ const curPageIndex = ref(0)
     top: 50%;
     transform: translateY(-50%);
   }
+
+  > .text-box {
+    max-width: 450px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 10%;
+    color: #ffffff;
+    font-size: 30px;
+    line-height: 38px;
+    font-family: "KaiTi";
+    transition: opacity 1.5s ease;
+    z-index: 10;
+    .text-box-title {
+      font-size: 42px;
+      line-height: 48px;
+      margin-bottom: 30px;
+    }
+  }
 }
 </style>