NanjingMuseumWuJinZang/src/views/MoreContent.vue

<template>
  <div
    class="more-content"
  >
    <div
      ref="scrollTarget"
      class="scroll-target"
    >
      <img
        class="bg"
        :style="{
          left: bgLeft + 'px'
        }"
        src="@/assets/images/fade-chapter-wood/bg-more-content.jpg"
        alt=""
        draggable="false"
      >

      <div
        class="layer-4"
        :style="{
          left: layer4Left + 'px',
        }"
      >
        <img
          class="bamboo-4_01"
          src="@/assets/images/fade-chapter-wood/4_01.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_02"
          src="@/assets/images/fade-chapter-wood/4_02.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_03"
          src="@/assets/images/fade-chapter-wood/4_03.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_04"
          src="@/assets/images/fade-chapter-wood/4_04.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_05"
          src="@/assets/images/fade-chapter-wood/4_05.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_06"
          src="@/assets/images/fade-chapter-wood/4_06.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_07"
          src="@/assets/images/fade-chapter-wood/4_07.png"
          alt=""
          draggable="false"
        >
      </div>

      <div
        class="layer-3"
        :style="{
          left: layer3Left + 'px',
        }"
      >
        <img
          class="bamboo-3_01"
          src="@/assets/images/fade-chapter-wood/3_01.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-3_02"
          src="@/assets/images/fade-chapter-wood/3_02.png"
          alt=""
          draggable="false"
        >
      </div>

      <div
        class="layer-2"
        :style="{
          left: layer2Left + 'px',
        }"
      >
        <img
          class="bamboo-2_01"
          src="@/assets/images/fade-chapter-wood/2_01.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-2_03"
          src="@/assets/images/fade-chapter-wood/2_03.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-2_02"
          src="@/assets/images/fade-chapter-wood/2_02.png"
          alt=""
          draggable="false"
        >
      </div>

      <div
        class="layer-1"
        :style="{
          left: layer1Left + 'px',
        }"
      >
        <img
          class="bamboo-1_01"
          src="@/assets/images/fade-chapter-wood/1_01.png"
          alt=""
          draggable="false"
        >
        <HotspotComp
          class="hotspot"
          @click="router.push({
            name: 'BambooHot',
          })"
        />
        <div
          class="shuang-gou-she-se-group"
        >
          <button
            class="watch-detail animation-show-hide"
            @click="onClickShuangGouEntry"
          >
            查看详情
          </button>
          <div class="group-title">
            双钩设色
            <img
              class="deco"
              src="@/assets/images/more-content-deco.png"
              alt=""
              draggable="false"
            >
          </div>
        </div>
        <img
          class="bamboo-1_02"
          src="@/assets/images/fade-chapter-wood/1_02.png"
          alt=""
          draggable="false"
        >
        <div
          class="mo-zhu-group"
        >
          <div class="button-group">
            <button
              class="poem animation-show-hide"
              @click="onClickEntryAtMoZhu('PoemList')"
            >
              人文
            </button>
            <button
              class="animation-show-hide"
              @click="onClickEntryAtMoZhu('PaintingList')"
            >
              画作
            </button>
            <button
              class="animation-show-hide"
              @click="onClickEntryAtMoZhu('BambooBook')"
            >
              竹谱
            </button>
          </div>
          <div class="group-title">
            墨竹
            <img
              class="deco"
              src="@/assets/images/more-content-deco.png"
              alt=""
              draggable="false"
            >
          </div>
        </div>
        <img
          class="bamboo-1_03"
          src="@/assets/images/fade-chapter-wood/1_03.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-1_04"
          src="@/assets/images/fade-chapter-wood/1_04.png"
          alt=""
          draggable="false"
        >
      </div>
    </div>

    <PaginationComp
      class="pagination"
      :total="3"
      :idx="currentAnchorIdx"
    />
    <BtnBack
      @click="router.push({
        name: 'HomeView',
      })"
    />

    <OperationTip
      class="operation-tip"
      :direction="'h'"
      :text="'下一章'"
      :is-show="isShowOperationTip"
      :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"
        @ended="router.push({
          name: 'ShuanggouDetail',
        })"
      />
    </Transition>
    <Transition name="fade-in">
      <video
        v-if="isShowVideoFadeAtMoZhu"
        ref="videoFadeAtMoZhuEl"
        class="fade-to-other-page"
        src="@/assets/videos/fade-at-mo-zhu.mp4"
        playsinline
        webkit-playsinline="true"
        x5-video-player-type="h5"
      />
    </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
        webkit-playsinline="true"
        x5-video-player-type="h5"
      />
    </Transition>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount, inject, nextTick } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import PoemList from '@/views/PoemList.vue'
import paintingList from '@/views/PaintingList.vue'
import useSmoothSwipe from '@/useFunctions/useSmoothSwipe.js'
import { useWindowSize } from '@vueuse/core'
import OperationTip from "@/components/OperationTip.vue"
import useSizeAdapt from "@/useFunctions/useSizeAdapt.js"
import PaginationComp from "@/components/PaginationComp.vue"

const route = useRoute()
const router = useRouter()
const store = useStore()

const $env = inject('$env')

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const windowWidthDesign = 1560
const windowHeightDesign = 844

const scrollTarget = ref(null)
const { width: windowWidth, height: windowHeight } = useWindowSize()
const maxTranslateLength = computed(() => {
  return windowHeight.value * windowWidthDesign / windowHeightDesign
})
const { haveSwipedThisTime, translateLength, currentAnchorIdx, goingToAnchorIdx } = useSmoothSwipe({
  scrollTargetRef: scrollTarget,
  maxTranslateLength,
  viewportWidth: windowWidth,
  anchorPosList: [
    maxTranslateLength.value * 216 / windowWidthDesign - windowWidth.value / 2,
    maxTranslateLength.value * 967 / windowWidthDesign - windowWidth.value / 2,
    maxTranslateLength.value - windowWidth.value
  ],
  initialAnchorIdx: Number(route.query.anchorIdx) || 0
})

const bgInitialLeft = 0
const bgLeft = ref(bgInitialLeft)
watch(translateLength, (v) => {
  bgLeft.value = bgInitialLeft - v
}, {
  immediate: true,
})

const layer4SpeedFactor = 0.8 * 0.8 * 0.8
const layer4InitialLeft = 0
const layer4Left = ref(layer4InitialLeft)
watch(translateLength, (v) => {
  layer4Left.value = layer4InitialLeft - v * layer4SpeedFactor
}, {
  immediate: true,
})

const layer3SpeedFactor = 0.8 * 0.8
const layer3InitialLeft = 0
const layer3Left = ref(layer3InitialLeft)
watch(translateLength, (v) => {
  layer3Left.value = layer3InitialLeft - v * layer3SpeedFactor
}, {
  immediate: true,
})

const layer2SpeedFactor = 0.8
const layer2InitialLeft = 0
const layer2Left = ref(layer2InitialLeft)
watch(translateLength, (v) => {
  layer2Left.value = layer2InitialLeft - v * layer2SpeedFactor
}, {
  immediate: true,
})

const layer1InitialLeft = 0
const layer1Left = ref(layer1InitialLeft)
watch(translateLength, (v) => {
  layer1Left.value = layer1InitialLeft - v
}, {
  immediate: true,
})

const isShowOperationTip = ref(true)
const unwatch = watch(translateLength, (v) => {
  console.log(v)
  isShowOperationTip.value = false
  unwatch()
  // if (Math.abs(v - (scrollerEl.value.scrollHeight - scrollerEl.value.clientHeight)) <= 1) {
  //   router.push({
  //     name: 'MoreContent',
  //   })
  // }
})

const videoFadeAtShuangGouEl = ref(null)
const isShowVideoFadeAtShuangGou = ref(false)
function onClickShuangGouEntry() {
  isShowVideoFadeAtShuangGou.value = true
  nextTick(() => {
    videoFadeAtShuangGouEl.value.play()
  })
}

const videoFadeAtMoZhuEl = ref(null)
const isShowVideoFadeAtMoZhu = ref(false)
function onClickEntryAtMoZhu(pathName) {
  isShowVideoFadeAtMoZhu.value = true
  nextTick(() => {
    videoFadeAtMoZhuEl.value.addEventListener('ended', () => {
      router.push({
        name: pathName,
      })
    })
    videoFadeAtMoZhuEl.value.play()
  })
}

const videoFadeAtPage3El = ref(null)
const isShowVideoFadeAtPage3 = ref(false)
// function onClickEntryAtMoZhu(pathName) {
//   isShowVideoFadeAtMoZhu.value = true
//   nextTick(() => {
//     videoFadeAtMoZhuEl.value.addEventListener('ended', () => {
//       router.push({
//         name: pathName,
//       })
//     })
//     videoFadeAtMoZhuEl.value.play()
//   })
// }
watch(goingToAnchorIdx, (v) => {
  if (v === 2) {
    setTimeout(() => {
      isShowVideoFadeAtPage3.value = true
      nextTick(() => {
        videoFadeAtPage3El.value.addEventListener('ended', () => {
          router.push({
            name: 'Game',
          })
        })
        videoFadeAtPage3El.value.play()
      })
    }, 850)
  }
})
</script>

<style lang="less" scoped>
.button-common-style{
  font-family: KaiTi, KaiTi;
  font-weight: 400;
  font-size: calc(16px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
  writing-mode: vertical-lr;
  letter-spacing: 0.2em;
  white-space: pre;
  color: #B8AE7A;
}
.group-title-common-style{
  font-family: KingHwa_OldSong, KingHwa_OldSong;
  font-weight: 400;
  font-size: calc(48px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
  color: #474747;
  writing-mode: vertical-lr;
  letter-spacing: 0.2em;
  white-space: pre;
}

.more-content{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  >.scroll-target{
    height: 100%;
    width: 100%;
    display: flex;
    gap: 100px;
    overflow: hidden;
    >img.bg{
      position: absolute;
      height: 100%;
    }
    >.layer-4{
      position: absolute;
      height: 100%;
      >.bamboo-4_01{
        position: absolute;
        left: calc(0 * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        bottom: 0;
        height: calc(300px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }
      >.bamboo-4_02{
        position: absolute;
        bottom: 0;
        left: calc(120px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: calc(380px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }
      >.bamboo-4_03{
        position: absolute;
        bottom: 0;
        left: calc(1000px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: calc(518px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }
      >.bamboo-4_04{
        position: absolute;
        bottom: 0;
        left: calc(870px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: 100%;
      }
      >.bamboo-4_05{
        position: absolute;
        bottom: 0;
        left: calc(450px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: 100%;
      }
      >.bamboo-4_06{
        position: absolute;
        bottom: 0;
        left: calc(520px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: 100%;
      }
      >.bamboo-4_07{
        position: absolute;
        bottom: 0;
        left: calc(1000px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: 100%;
      }
    }
    >.layer-3{
      position: absolute;
      height: 100%;
      >.bamboo-3_01{
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(393px * v-bind('layer3SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }
      >.bamboo-3_02{
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(880px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }
    }
    >.layer-2{
      position: absolute;
      height: 100%;
      >.bamboo-2_01{
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(0px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }
      >.bamboo-2_03{
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(420px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }
      >.bamboo-2_02{
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(920px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }
    }
    >.layer-1{
      position: absolute;
      height: 100%;
      >.bamboo-1_01{
        position: absolute;
        top: 0;
        height: 100%;
        left: 0;
      }
      >.hotspot{
        position: absolute;
        top: calc(385px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        left: calc(71px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }
      >.shuang-gou-she-se-group{
        position: absolute;
        top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        left: calc(216px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        >button.watch-detail{
          position: absolute;
          top: calc(182px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
          left: 0;
          background-image: url(@/assets/images/fade-chapter-btn-bg-big.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          padding-top: calc(3px / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          .button-common-style();
        }
        >div.group-title{
          position: absolute;
          top: 0;
          left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
          .group-title-common-style();
          >img.deco{
            position: absolute;
            bottom: 0.9em;
            right: -0.05em;
            width: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
        }
      }
      >.bamboo-1_02{
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(352px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }
      >.mo-zhu-group{
        position: absolute;
        top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        left: calc(936px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        >.button-group{
          position: absolute;
          top: calc(75px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
          left: 0;
          display: flex;
          flex-direction: column;
          gap: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          >button{
            .button-common-style();
            background-image: url(@/assets/images/fade-chapter-btn-bg-small.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            padding-top: calc(3px / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
        }
        >div.group-title{
          position: absolute;
          top: 0;
          left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
          .group-title-common-style();
          >img.deco{
            position: absolute;
            bottom: 0.9em;
            right: 0.1em;
            width: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
        }
      }
      >.bamboo-1_03{
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(960px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }
      >.bamboo-1_04{
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(1336px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }
    }
  }
  >.pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }
  >.operation-tip{
    position: absolute;
    right: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    bottom: calc(74 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }
  >.fade-to-other-page{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>