NanjingMuseumWuJinZang-PC/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-min.jpg"
        alt=""
        draggable="false"
      >

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

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

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

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

        <HotspotComp
          class="hotspot"
          @click="
            router.replace({
              name: 'BambooHot',
            })
          "
        />

        <div class="shuang-gou-she-se-group">
          <div
            class="watch-detail animation-show-long-hide"
            @click="onClickShuangGouEntry"
          >
            查看详情
          </div>
          <div class="group-title">
            双钩设色
            <img
              class="deco"
              src="@/assets/images/more-content-deco.png"
              alt=""
              draggable="false"
            >
          </div>
        </div>

        <div class="mo-zhu-group">
          <div class="button-group">
            <div
              class="poem animation-show-long-hide"
              @click="onClickEntryAtMoZhu('PoemList')"
            >
              人文
            </div>
            <div
              class="animation-show-long-hide"
              @click="onClickEntryAtMoZhu('PaintingList')"
            >
              画作
            </div>
            <div
              class="animation-show-long-hide"
              @click="onClickEntryAtMoZhu('BambooBook')"
            >
              竹谱
            </div>
          </div>
          <div class="group-title">
            墨竹
            <img
              class="deco"
              src="@/assets/images/more-content-deco.png"
              alt=""
              draggable="false"
            >
          </div>
        </div>

        <div class="painting-creation-group">
          <div
            class="button-group"
          >
            <div
              class="poem animation-show-long-hide"
              @click="router.replace('/game')"
            >
              开始体验
            </div>
          </div>
          <div class="group-title">
            画作创作
            <img
              class="deco"
              src="@/assets/images/more-content-deco.png"
              alt=""
              draggable="false"
            >
          </div>
        </div>

        <div class="page-4-group">
          <img
            class="logo"
            src="@/assets/images/wu-jing-cang.png"
            alt=""
            draggable="false"
          >
          <div
            class="go-to-online-museum"
            @click="OpenScene()"
          >
            线上展厅
          </div>
          <div
            class="restart"
            @click="() => {
              store.state.haveShownStartup = false;
              router.replace('/?back=1');
            }"
          >
            重新开始
          </div>
          <div class="line-1 line">
            <span class="key">《无尽藏》展览策展人：</span><span class="value">庞鸥</span>
          </div>
          <div class="line-2 line">
            线上策展团队：
          </div>
          <div class="line-3 line">
            南京博物院：张莅坤 刘佳 李文彬 张晓婉
          </div>
          <div class="line-4 line">
            珠海市四维时代网络科技有限公司
          </div>
        </div>
      </div>
    </div>

    <!-- todo -->
    <BtnBack @click="router.replace('/?back=1')" />

    <OperationTip
      class="operation-tip"
      :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>

<script setup>
import { ref, computed, watch, onBeforeMount, nextTick } from "vue"
import { useRoute, useRouter } from "vue-router"
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()
const store = useStore()

const windowWidthDesign = 4674
const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏

const scrollTarget = ref(null)
const { width: windowWidth, height: windowHeight } = useWindowSize()

const maxTranslateLength = computed(() => {
  return (windowHeight.value * windowWidthDesign) / windowHeightDesign
})

const {
  translateLength,
} = useSmoothSwipe({
  scrollTargetRef: scrollTarget,
  maxTranslateLength,
  viewportWidth: windowWidth,
})

// 背景位移
const bgInitialLeft = 0
const bgLeft = ref(bgInitialLeft)
const bgSpeedFactor = 0.8 * 0.8 * 0.8 * 0.8

// layer4Left位移
const layer4SpeedFactor = 0.8 * 0.8 * 0.8
const layer4InitialLeft = 0
const layer4Left = ref(layer4InitialLeft)

// layer3Left位移
const layer3SpeedFactor = 0.8 * 0.8
const layer3InitialLeft = 600 * windowHeight.value / windowHeightDesign
const layer3Left = ref(layer3InitialLeft)

// layer2Left位移
const layer2SpeedFactor = 0.8
const layer2InitialLeft = 0
const layer2Left = ref(layer2InitialLeft)

// layer1Left位移
const layer1InitialLeft = 0
const layer1Left = ref(layer1InitialLeft)

watch(
  translateLength,
  (v) => {
    bgLeft.value = bgInitialLeft - v * bgSpeedFactor
    layer4Left.value = layer4InitialLeft - v * layer4SpeedFactor
    layer3Left.value = layer3InitialLeft - v * layer3SpeedFactor
    layer2Left.value = layer2InitialLeft - v * layer2SpeedFactor
    layer1Left.value = layer1InitialLeft - v
  },
  {
    immediate: true,
  }
)

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) {
  if (pathName === "PoemList") {
    isShowVideoFadeAtMoZhu.value = true
    nextTick(() => {
      videoFadeAtMoZhuEl.value.addEventListener("ended", () => {
        router.replace({
          name: pathName,
        })
      })
      videoFadeAtMoZhuEl.value.play()
    })
  } else {
    router.replace({
      name: pathName,
    })
  }
}

const videoFadeAtPage3El = ref(null)
const isShowVideoFadeAtPage3 = ref(false)

// 点击线上展厅
const OpenScene = () => {
  const musicDom = document.getElementById("bg-music")
  musicDom.pause()
  router.replace('/scene')
}
</script>

<style lang="less" scoped>
.button-common-style {
  font-family: 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;
  cursor: pointer;
}

.group-title-common-style {
  font-family: 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 {
  background-color: #fefefe;
  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 {
        height: 100%;
      }
    }

    > .layer-3 {
      position: absolute;
      height: 100%;
      > .bamboo {
        height: 100%;
      }
    }

    > .layer-2 {
      position: absolute;
      height: 100%;
      > .bamboo {
        height: 100%;
      }
    }

    > .layer-1 {
      position: absolute;
      height: 100%;
      > .bamboo {
        height: 100%;
      }
      > .hotspot {
        position: absolute;
        top: calc((721px - 71px) * v-bind("windowHeight") / v-bind("windowHeightDesign"));
        left: calc(515px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
      }
      > .shuang-gou-she-se-group {
        position: absolute;
        top: calc((314px - 71px) * v-bind("windowHeight") / v-bind("windowHeightDesign"));
        left: calc(276px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
        > .watch-detail {
          position: absolute;
          top: calc(
            208px * 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("windowHeight") / v-bind("windowHeightDesign"));
          .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(16px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
            height: calc(16px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          }
        }
      }
      > .mo-zhu-group {
        position: absolute;
        top: calc((314px - 71px) * v-bind("windowHeight") / v-bind("windowHeightDesign"));
        left: calc(1100px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
        > .button-group {
          position: absolute;
          width: calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          top: calc(75px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          left: 0;
          display: flex;
          flex-direction: column;
          gap: calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          > div {
            .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("windowHeight") / v-bind("windowHeightDesign"));
          }
        }
        > 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(16px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
            height: calc(16px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          }
        }
      }
      .painting-creation-group {
        position: absolute;
        left: calc(2100px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
        top: calc(243px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
        > .button-group {
          position: absolute;
          width: calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          top: calc(232px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          left: 0;
          display: flex;
          flex-direction: column;
          gap: calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          > div {
            .button-common-style();
            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("windowHeight") / v-bind("windowHeightDesign"));
          }
        }
        > 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.65em;
            width: calc(16px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
            height: calc(16px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          }
        }
      }

      > .page-4-group {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(3700px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
        font-family: "KingHwa_OldSong";
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        & > img.logo {
          margin-top: calc((200px - 71px) * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          width: calc(151px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
        }
        > .go-to-online-museum {
          width: calc(244px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          height: calc(110px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          background-image: url(@/assets/images/btn-online-museum-bg.png);
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
          white-space: nowrap;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: calc(62px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          font-size: calc(26px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          color: white;
          cursor: pointer;
        }
        > .restart {
          margin-top: calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          font-size: calc(26px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          color: #476446;
          white-space: nowrap;
          cursor: pointer;
        }
        >.line{
          white-space: pre;
          margin-top: calc(8px  * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-size: calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          color: #688067;
        }
        >.line-1{
          margin-top: calc(190px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          >.key{
            font-weight: bold;
          }
          .value{
          }
        }
        >.line-2{
          margin-top: calc(8px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          font-weight: bold;
        }
        >.line-3{
          margin-top: calc(8px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
        }
        >.line-4{
          margin-top: calc(8px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
        }
      }
    }
  }

  > .operation-tip {
    position: absolute;
    right: calc(
      44 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    bottom: calc(
      74 / v-bind("windowSizeWhenDesignForRef") *
        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>