接入一些视频

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from "vue"
+import { ref, computed, nextTick } from "vue"
 import { useRouter } from "vue-router"
 import { useStore } from "vuex"
 import Startup from "@/views/StartupView.vue"
@@ -25,15 +25,25 @@ const longDescText = computed(() => {
     ? configText.homepagePaintingDetailDescStem
     : curPageIndex.value == 2
       ? configText.homepagePaintingDetailDescLeaf
-      : curPageIndex.value == 3 ? configText.homepagePaintingDetailDescStone : curPageIndex.value == 4 ? configText.homepagePaintingSummary : ''
+      : curPageIndex.value == 3
+        ? configText.homepagePaintingDetailDescStone
+        : curPageIndex.value == 4
+          ? configText.homepagePaintingSummary
+          : ""
 })
 
+const isShowVideoFadeToNextPage = ref(false)
+const isShowSkip = ref(false)
+const videoFadeToNextPageEl = ref(null)
+
 const longTitleText = computed(() => {
   return curPageIndex.value == 1
     ? "三竿修竹"
     : curPageIndex.value == 2
       ? "竹叶"
-      : curPageIndex.value == 3 ? "卧石、枯树和灌木" : ''
+      : curPageIndex.value == 3
+        ? "卧石、枯树和灌木"
+        : ""
 })
 
 // 滑动逻辑
@@ -47,14 +57,47 @@ const scrollFu = (val) => {
     // 下滚
     console.log("下滚")
     isShowOperationTip.value = false
-    curPageIndex.value =
-      curPageIndex.value < 4 ? curPageIndex.value + 1 : curPageIndex.value
+    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)
+    }
   }
 }
 </script>
 
 <template>
   <div class="home">
+    <!-- 过渡到更多详情页视频 -->
+    <video
+      v-if="isShowVideoFadeToNextPage"
+      ref="videoFadeToNextPageEl"
+      muted
+      class="fade-to-next-page"
+      src="@/assets/videos/fade-from-home-to-more-content.mp4"
+      @ended="
+        router.push({
+          name: 'MoreContent',
+        })
+      "
+    />
+    <Transition name="fade-in">
+      <BtnSkip
+        v-if="isShowSkip"
+        @click="
+          router.push({
+            name: 'MoreContent',
+          })
+        "
+      />
+    </Transition>
     <!-- 滚动区域 -->
     <div
       ref="scroller"
@@ -64,9 +107,7 @@ const scrollFu = (val) => {
       <div class="scroller-content" />
     </div>
     <!-- 背景 -->
-    <div
-      class="bg-mask"
-    />
+    <div class="bg-mask" />
     <!-- 开场动画 -->
     <Transition name="fade-out">
       <Startup
@@ -103,7 +144,11 @@ const scrollFu = (val) => {
     >
       <div
         class="page2-box"
-        @click="() => {router.push('/painting-detail?idx=home')}"
+        @click="
+          () => {
+            router.push('/painting-detail?idx=home');
+          }
+        "
       >
         <img
           src="@/assets/images/icon_home_detail-min.png"
@@ -114,7 +159,11 @@ const scrollFu = (val) => {
       <div
         class="page2-box"
         style="margin-top: 10px"
-        @click="() => {router.push('/painting-detail?idx=home&state=2')}"
+        @click="
+          () => {
+            router.push('/painting-detail?idx=home&state=2');
+          }
+        "
       >
         <img
           src="@/assets/images/icon_home_author-min.png"
@@ -193,7 +242,7 @@ const scrollFu = (val) => {
         @click="isShowHotspotDetail1 = true"
       />
       <HotspotForHomepage
-        v-show="curPageIndex == 0|| curPageIndex == 4"
+        v-show="curPageIndex == 0 || curPageIndex == 4"
         class="hotspot-3"
         @click="isShowHotspotDetail3 = true"
       />
@@ -230,7 +279,13 @@ const scrollFu = (val) => {
       class="text-box"
       :style="{
         opacity:
-          curPageIndex == 1 || curPageIndex == 2 || curPageIndex == 3 || curPageIndex == 4 ? 1 : 0,
+          curPageIndex == 1 ||
+          curPageIndex == 2 ||
+          curPageIndex == 3 ||
+          curPageIndex == 4
+            ? 1
+            : 0,
+        left: curPageIndex == 4 ? '4%':''
       }"
     >
       <div class="text-box-title">
@@ -251,6 +306,15 @@ const scrollFu = (val) => {
 .home {
   width: 100%;
   height: 100%;
+  > video.fade-to-next-page {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 20;
+  }
   > .scroller {
     width: 100vw;
     max-height: 100vh;
@@ -359,8 +423,7 @@ const scrollFu = (val) => {
     // 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;
-
+    transition: top 1.5s ease, left 1.5s ease, width 1.5s ease, height 1.5s ease;
 
     > .painting-border {
       width: 100%;
@@ -380,21 +443,20 @@ const scrollFu = (val) => {
       transition: opacity 1.5s ease;
     }
   }
-  >.painting-wrap2{
+  > .painting-wrap2 {
     left: 63%;
     top: 46%;
-    width: calc(551.84px* 1.45);
-    height: calc(937.05px* 1.45);
+    width: calc(551.84px * 1.45);
+    height: calc(937.05px * 1.45);
   }
 
-  >.painting-wrap3{
+  > .painting-wrap3 {
     left: 50%;
     top: 0%;
-    width: calc(551.84px* 5.45);
-    height: calc(937.05px* 5.45);
+    width: calc(551.84px * 5.45);
+    height: calc(937.05px * 5.45);
   }
 
-
   > .hotspot-wrap {
     position: absolute;
     left: 50%;
@@ -461,6 +523,7 @@ const scrollFu = (val) => {
     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;

src/views/StartupView.vue

@@ -12,12 +12,12 @@
       :frame-duration="1000 / 12"
     /> -->
 
-    <!-- <img
+    <img
       class="bg-serial-frames"
       src="@/assets/images/loding_apng.png"
       alt=""
       draggable="false"
-    > -->
+    >
 
     <!-- <img
       class="title"
@@ -184,7 +184,9 @@ function onVideoEnd() {
     position: absolute;
     left: 50%;
     top: 0;
+    width: 100%;
     height: 100%;
+    object-fit: cover;
     transform: translateX(-50%);
   }