NanjingMuseumWuJinZang-PC/src/views/HomeView.vue

<script setup>
import { ref, inject } from "vue"
import { useRoute, useRouter } 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"


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

const $env = inject("$env")

const { handleScroll } = useRollFu()

const isShowOperationTip = ref(true)

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

// 滑动逻辑
const scrollFu = (val) => {

  if (val == -1) {
    // 上滚
    console.log("上滚")
  } else if (val == 1) {
    // 下滚
    console.log("下滚")
    isShowOperationTip.value = false
  }
}

const curPageIndex = ref(0)
</script>

<template>
  <div class="home">
    <!-- 滚动区域 -->
    <div
      ref="scroller"
      class="scroller"
      @wheel="($event) => handleScroll($event, (val) => scrollFu(val))"
    >
      <div class="scroller-content" />
    </div>
    <!-- 背景 -->
    <div
      class="bg-mask"
      :style="{ background: curPageIndex == 2 ? `rgba(85,116,83,0.8)` : `` }"
    />
    <!-- 开场动画 -->
    <Transition name="fade-out">
      <Startup
        v-if="!store.state.haveShownStartup"
        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 }"
      @touchstart="handletouchstart($event)"
      @touchend="touchEnd($event)"
    >
      <div
        class="page2-box"
        @click="isShowPaintingDesc = true"
      >
        <img
          src="@/assets/images/icon_home_detail-min.png"
          alt=""
        >
        <div>作品简介</div>
      </div>
      <div
        class="page2-box"
        style="margin-top: 10px"
        @click="isShowAuthorDesc = true"
      >
        <img
          src="@/assets/images/icon_home_author-min.png"
          alt=""
        >
        <div>作者简介</div>
      </div>
    </div>

    <!-- 画作 -->
    <div
      class="painting-wrap"
      :class="{
        'painting-wrap1': curPageIndex == 0,
        'painting-wrap2': curPageIndex == 1,
        'painting-wrap3': curPageIndex == 2 || curPageIndex == 3,
        'painting-wrap4': curPageIndex == 4,
        'painting-wrap5': curPageIndex == 5,
      }"
      @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 == 3 ? 1 : 0, zIndex: 3 }"
        class="painting-stem"
        src="@/assets/images/home-painting-stem.png"
        alt=""
      >

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

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

    <!-- 热点层1 -->
    <div class="hotspot-wrap">
      <HotspotForHomepage
        v-show="curPageIndex == 0"
        class="hotspot-1"
        @click="isShowHotspotDetail1 = true"
      />
      <HotspotForHomepage
        v-show="curPageIndex == 0"
        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"
    />
  </div>
</template>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  > .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%;
    // backdrop-filter: blur(
    //   calc(
    //     22 / v-bind("windowSizeWhenDesignForRef") *
    //       v-bind("windowSizeInCssForRef")
    //   )
    // );
  }

  > .startup {
    z-index: 20;
  }

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

    > 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;

    > .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;

    > .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%);
    }
  }

  > .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;

    & > div {
      z-index: 100;
      transition: all 1.5s ease-in-out;
      cursor: pointer;
    }

    > .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%);
  }
}
</style>