更多章节页:跳转不需要视频过渡；图层更新

src/views/MoreContent.vue

@@ -198,57 +198,6 @@
       :text="'左右滑动'"
       :color="'green'"
     />
-
-    <!-- 过渡视频 -->
-    <Transition name="fade-in">
-      <video
-        v-if="isShowVideoFadeAtShuangGou"
-        ref="videoFadeAtShuangGouEl"
-        class="fade-to-other-page"
-        src="@/assets/videos/fade-at-shuang-gou.mp4"
-        playsinline
-        webkit-playsinline="true"
-        x5-video-player-type="h5"
-        muted
-        @ended="
-          router.replace({
-            name: 'ShuanggouDetail',
-          })
-        "
-      />
-    </Transition>
-    <Transition name="fade-in">
-      <div
-        v-if="isShowVideoFadeAtMoZhu"
-        :class="`RWbox`"
-      >
-        <video
-          ref="videoFadeAtMoZhuEl"
-          src="@/assets/videos/fade-at-mo-zhu.mp4"
-          playsinline
-          muted
-          webkit-playsinline="true"
-          x5-video-player-type="h5"
-        />
-        <img
-          class="RWvideoTxt"
-          src="@/assets/images/RW/titile_mozhu-min.png"
-          alt=""
-        >
-      </div>
-    </Transition>
-    <Transition name="fade-in">
-      <video
-        v-if="isShowVideoFadeAtPage3"
-        ref="videoFadeAtPage3El"
-        class="fade-to-other-page"
-        src="@/assets/videos/fade-from-more-content-to-game.mp4"
-        playsinline
-        muted
-        webkit-playsinline="true"
-        x5-video-player-type="h5"
-      />
-    </Transition>
   </div>
 </template>
 
@@ -259,7 +208,6 @@ import { useStore } from "vuex"
 import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
 import { useWindowSize } from "@vueuse/core"
 import OperationTip from "@/components/OperationTip.vue"
-import useSizeAdapt from "@/useFunctions/useSizeAdapt.js"
 
 const route = useRoute()
 const router = useRouter()
@@ -272,7 +220,7 @@ const scrollTarget = ref(null)
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 
 const maxTranslateLength = computed(() => {
-  return (windowHeight.value * windowWidthDesign) / windowHeightDesign
+  return (windowHeight.value * windowWidthDesign) / windowHeightDesign - 110 // 有的图层不够长导致移动到最右侧不好看，隐藏掉。
 })
 
 const {
@@ -321,38 +269,18 @@ watch(
   }
 )
 
-const videoFadeAtShuangGouEl = ref(null)
-const isShowVideoFadeAtShuangGou = ref(false)
 function onClickShuangGouEntry() {
-  isShowVideoFadeAtShuangGou.value = true
-  nextTick(() => {
-    videoFadeAtShuangGouEl.value.play()
+  router.replace({
+    name: 'ShuanggouDetail',
   })
 }
 
-const videoFadeAtMoZhuEl = ref(null)
-const isShowVideoFadeAtMoZhu = ref(false)
 function onClickEntryAtMoZhu(pathName) {
-  if (pathName === "PoemList") {
-    isShowVideoFadeAtMoZhu.value = true
-    nextTick(() => {
-      videoFadeAtMoZhuEl.value.addEventListener("ended", () => {
-        router.replace({
-          name: pathName,
-        })
-      })
-      videoFadeAtMoZhuEl.value.play()
-    })
-  } else {
-    router.replace({
-      name: pathName,
-    })
-  }
+  router.replace({
+    name: pathName,
+  })
 }
 
-const videoFadeAtPage3El = ref(null)
-const isShowVideoFadeAtPage3 = ref(false)
-
 // 点击线上展厅
 const OpenScene = () => {
   const musicDom = document.getElementById("bg-music")
@@ -547,7 +475,7 @@ const OpenScene = () => {
         position: absolute;
         top: 0;
         height: 100%;
-        left: calc(3700px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+        left: calc(3500px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
         font-family: "KingHwa_OldSong";
         z-index: 2;
         display: flex;
@@ -620,33 +548,5 @@ const OpenScene = () => {
         v-bind("windowSizeInCssForRef")
     );
   }
-
-  .RWbox {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    .RWvideoTxt {
-      width: 18%;
-      position: absolute;
-      z-index: 10;
-      top: 32%;
-      left: 44%;
-    }
-    & > video {
-      width: 100%;
-    }
-  }
-
-  > .fade-to-other-page {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: top;
-  }
 }
 </style>