NanjingMuseumWuJinZang-PC/src/views/HomeView.vue

<script setup>
import { ref, computed, nextTick, onMounted } from "vue"
import { useRouter, useRoute } from "vue-router"
import { useStore } from "vuex"
import Startup from "@/views/StartupView.vue"
import useRollFu from "../rollFu.js"

import HotspotDetail3 from "@/views/HotspotDetail3.vue"
import HotspotDetail1 from "@/views/HotspotDetail1.vue"
import PaintingDetail from '@/views/PaintingDetail.vue'

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

const { handleScroll } = useRollFu()

const isShowOperationTip = ref(true)

const isShowHotspotDetail1 = ref(false)
const isShowHotspotDetail3 = ref(false)

const curPageIndex = ref(0)

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 isShowVideoFadeToNextPage = ref(false)
const isShowSkip = ref(false)
const videoFadeToNextPageEl = ref(null)

const paintingState = ref('1')
const isShowPaintingDetial = ref(false)


const longTitleText = computed(() => {
  return curPageIndex.value == 1
    ? "三竿修竹"
    : curPageIndex.value == 2
      ? "竹叶"
      : curPageIndex.value == 3
        ? "卧石、枯树和灌木"
        : ""
})

// 滑动逻辑
const scrollFu = (val) => {
  if (val == -1) {
    // 上滚
    // console.log("上滚")
    curPageIndex.value =
      curPageIndex.value > 0 ? curPageIndex.value - 1 : curPageIndex.value
  } else if (val == 1) {
    // 下滚
    console.log("下滚")
    isShowOperationTip.value = false
    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)
    }
  }
}
onMounted(() => {
  if (route.query.page) {
    curPageIndex.value = parseInt(route.query.page)
  }
})
</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"
      class="scroller"
      @wheel="($event) => handleScroll($event, (val) => scrollFu(val))"
    >
      <div class="scroller-content" />
    </div>
    <!-- 背景 -->
    <div class="bg-mask" />
    <!-- 开场动画 -->
    <Transition name="fade-out">
      <Startup
        v-if="!store.state.haveShownStartup"
        class="startup"
      />
      <!-- <Startup
        v-if="true"
        class="startup"
      /> -->
    </Transition>
    <!-- 首页标题 -->
    <div
      class="title-wrap"
      :style="{
        opacity: curPageIndex == 0 ? 1 : 0,
      }"
    >
      <img
        class="title"
        src="@/assets/images/home-title.png"
        alt=""
        draggable="false"
      >
      <div class="sub-text">
        南京博物院<br>
        绢本 墨笔<br>
        元 李衎<br>
      </div>
    </div>

    <!-- 作品、作者简介 -->
    <div
      ref="longDesc"
      class="long-desc"
      :class="{ 'long-desc-ac': curPageIndex == 0 || curPageIndex == 4 }"
      :style="{ opacity: curPageIndex == 0 || curPageIndex == 4 ? 1 : 0 }"
    >
      <div
        class="page2-box"
        @click="
          // () => {
          //   router.push('/painting-detail?idx=home');
          // }
          isShowPaintingDetial =true,
          paintingState = '1'
        "
      >
        <img
          src="@/assets/images/icon_home_detail-min.png"
          alt=""
        >
        <div>作品简介</div>
      </div>
      <div
        class="page2-box"
        style="margin-top: 10px"
        @click="
          // () => {
          //   router.push('/painting-detail?idx=home&state=2');
          // }
          isShowPaintingDetial =true,
          paintingState = '2'
        "
      >
        <img
          src="@/assets/images/icon_home_author-min.png"
          alt=""
        >
        <div>作者简介</div>
      </div>
    </div>

    <!-- 画作 -->
    <div
      class="painting-wrap"
      :class="{
        'painting-wrap2': curPageIndex == 1 || curPageIndex == 3,
        'painting-wrap3': curPageIndex == 2,
      }"
      @click="
        () => {
          curPageIndex == 1 ? (curPageIndex = 2) : '';
        }
      "
    >
      <img
        class="painting-border"
        src="@/assets/images/painting-border-new.png"
        alt=""
        draggable="false"
      >
      <img
        class="painting-stem"
        src="@/assets/images/home-painting1.jpg"
        alt=""
        draggable="false"
      >
      <img
        class="painting-stem"
        src="@/assets/images/home-painting2.jpg"
        alt=""
        draggable="false"
      >
      <img
        :style="{ opacity: curPageIndex == 1 ? 1 : 0, zIndex: 3 }"
        class="painting-stem"
        src="@/assets/images/home-painting-stem.jpg"
        alt=""
      >

      <img
        class="painting-stem"
        src="@/assets/images/img_zhuye-min2.png"
        alt=""
        :style="{
          opacity: curPageIndex == 2 ? 1 : 0,
          zIndex: 2,
        }"
        draggable="false"
      >

      <img
        class="painting-stem"
        src="@/assets/images/img_stone_all-min.png"
        :style="{
          opacity: curPageIndex == 3 ? 1 : 0,
          zIndex: 2,
        }"
        alt=""
        draggable="false"
      >
    </div>

    <!-- 热点层1 -->
    <div class="hotspot-wrap">
      <HotspotForHomepage
        v-show="curPageIndex == 0 || curPageIndex == 4"
        class="hotspot-1"
        @click="isShowHotspotDetail1 = true"
      />
      <HotspotForHomepage
        v-show="curPageIndex == 0 || curPageIndex == 4"
        class="hotspot-3"
        @click="isShowHotspotDetail3 = true"
      />
    </div>

    <!-- 轴/卷/册热点详情 -->
    <Transition name="fade-in-out">
      <HotspotDetail3
        v-if="isShowHotspotDetail3"
        class="hotspot-detail"
        @close="isShowHotspotDetail3 = false"
      />
    </Transition>

    <!-- 材质热点详情 -->
    <Transition name="fade-in-out">
      <HotspotDetail1
        v-if="isShowHotspotDetail1"
        class="hotspot-detail"
        @close="isShowHotspotDetail1 = false"
      />
    </Transition>

    <!-- 滑动提示 -->
    <OperationTip
      v-show="curPageIndex == 0"
      class="operation-tip"
      text="向下滑动"
      :is-show="isShowOperationTip"
    />

    <!-- 画作详情 -->
    <PaintingDetail
      v-if="isShowPaintingDetial"
      class="painting-detail"
      :idx="'home'"
      :state="paintingState"
      @close="isShowPaintingDetial = false"
    />

    <!-- 文字介绍 -->
    <div
      class="text-box"
      :style="{
        opacity:
          curPageIndex == 1 ||
          curPageIndex == 2 ||
          curPageIndex == 3 ||
          curPageIndex == 4
            ? 1
            : 0,
        left: curPageIndex == 4 ? '4%':''
      }"
    >
      <div class="text-box-title">
        {{ longTitleText }}
      </div>
      <!-- <div v-if="curPageIndex == 2">
        竹子的画法
      </div> -->
      <div
        class="text-box-desc"
        v-html="longDescText"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
.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;
    overflow: auto;
    background: rgba(255, 255, 0, 0);
    position: absolute;
    top: 0;
    z-index: 10;
    opacity: 0;
    .scroller-content {
      width: 100%;
      height: 200vh;
    }
  }
  > .bg-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    // background: rgba(60, 89, 71, 0.65);
    background: url(@/assets/images/bg-mask.png);
    background-size: 100% 100%;
  }

  > .startup {
    z-index: 20;
  }

  > .title-wrap {
    position: absolute;
    right: 25%;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 45%;
    z-index: 5;
    transition: opacity 1.5s ease;

    > img.title {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    > .sub-text {
      position: absolute;
      left: 110%;
      top: 46%;
      transform: translateY(-50%);
      writing-mode: vertical-lr;
      font-family: KaiTi;
      font-weight: 400;
      font-size: 20px;
      color: #ffffff;
      line-height: 30px;
      white-space: pre;
      letter-spacing: 0.2em;
      text-align: center;
    }
  }
  > .long-desc {
    position: absolute;
    bottom: 30px;
    right: 30px;
    color: white;
    overflow: hidden;
    font-family: KaiTi;
    color: #ffffff;
    animation: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 10;
    transition: opacity 1.5s ease;

    > .page2-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      > img {
        width: 75%;
        margin-bottom: 10px;
      }

      > div {
        font-size: calc(
          20 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        font-family: KaiTi;
      }
    }
  }
  > .painting-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 551.84px;
    height: 937.05px;
    // 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%;
      height: 100%;
      position: absolute;
    }

    > .painting-stem {
      width: 80%;
      height: calc(
        371 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      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;
    left: 50%;
    top: 50%;
    transform: translate(-46%, -50%);
    width: 551.84px;
    height: 937.05px;
    z-index: 7;
    pointer-events: none;
    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 {
      position: absolute;
      top: 100px;
      right: 25px;
      pointer-events: initial;
    }

    // > .hotspot-2 {
    //   position: absolute;
    //   left: 60px;
    //   top: 60px;
    //   pointer-events: initial;
    // }

    > .hotspot-3 {
      position: absolute;
      bottom: 0px;
      right: 25px;
      pointer-events: initial;
    }
  }
  > .hotspot-detail {
    z-index: 21;
  }

  > .operation-tip {
    position: absolute;
    right: 30px;
    transform: translateX(-50%);
    top: 50%;
    transform: translateY(-50%);
  }
  >.painting-detail{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;

  }

  > .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;
    transition: left 1.5s ease;
    .text-box-title {
      font-size: 42px;
      line-height: 48px;
      margin-bottom: 30px;
    }
    .text-box-desc{
      text-indent: 2em;
    }
  }
}
</style>