NanjingMuseumWuJinZang/src/views/HomeView.vue

<template>
  <div
    class="home"
  >
    <div class="bg-mask" />
    <Transition name="fade-out">
      <Startup
        v-if="!store.state.haveShownStartup"
        class="startup"
      />
    </Transition>

    <!-- 标题 -->
    <div
      class="title-wrap"
      :style="{
        opacity: titleOpacity,
      }"
    >
      <img
        class="title"
        src="@/assets/images/home-title.png"
        alt=""
        draggable="false"
      >
      <div class="sub-text">
        南京博物院<br>
        绢本 墨笔<br>
        元 李衎<br>
      </div>
    </div>

    <!-- 画作 -->
    <div
      class="painting-wrap"
      :style="{
        top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`
      }"
    >
      <div
        class="size-sign-h"
        :style="{
          opacity: sizeOpacity,
        }"
      >
        <img
          class=""
          src="@/assets/images/size-sign-h.png"
          alt=""
          draggable="false"
        >
        <span>100.6cm</span>
      </div>
      <div
        class="size-sign-v"
        :style="{
          opacity: sizeOpacity,
        }"
      >
        <img
          class=""
          src="@/assets/images/size-sign-v.png"
          alt=""
          draggable="false"
        >
        <span>151.7cm</span>
      </div>
      <img
        class="painting-border"
        src="@/assets/images/painting-border-new.png"
        alt=""
        draggable="false"
      >
      <img
        class="painting"

        src="@/assets/images/home-painting.jpg"
        alt=""
        draggable="false"
      >
      <img
        class="painting-stem"
        :style="{
          opacity: stemOpacity,
        }"
        src="@/assets/images/home-painting-stem.png"
        alt=""
        draggable="false"
      >
      <img
        class="painting-leaf"
        :style="{
          opacity: leafOpacity,
        }"
        src="@/assets/images/home-painting-leaf.png"
        alt=""
        draggable="false"
      >
      <img
        class="painting-stone"
        :style="{
          opacity: stoneOpacity,
        }"
        src="@/assets/images/home-painting-stone.png"
        alt=""
        draggable="false"
      >
    </div>

    <!-- 热点层 -->
    <div
      class="hotspot-wrap"
      :style="{
        top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`
      }"
    >
      <HotspotComp
        v-show="isShowHotspot"
        class="hotspot-1"
        @click="isShowHotspotDetail1 = true"
      />
      <HotspotComp
        v-show="isShowHotspot"
        class="hotspot-2"
        @click="showBigPainting"
      />
      <HotspotComp
        v-show="isShowHotspot"
        class="hotspot-3"
        @click="isShowHotspotDetail3 = true"
      />
    </div>

    <!-- 文字介绍 -->
    <div
      ref="longDesc"
      class="long-desc"
      :style="{
        top: `${(paintingTop + 540) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: longDescOpacity,
      }"
    >
      <h3>作品简介：</h3>
      <p
        v-for="(item, index) in homepagePaintingDesc"
        :key="index"
      >
        {{ item }}
      </p>
      <h3>作者简介：</h3>
      <p
        v-for="(item, index) in homepageAuthorDesc"
        :key="index"
      >
        {{ item }}
      </p>
    </div>
    <div
      class="fixed-desc detail-desc-stem"
      :style="{
        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: stemOpacity,
      }"
    >
      {{ detailDescStem }}
    </div>
    <div
      class="fixed-desc detail-desc-leaf"
      :style="{
        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: leafOpacity,
      }"
    >
      {{ detailDescLeaf }}
    </div>
    <div
      class="fixed-desc detail-desc-stone"
      :style="{
        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: stoneOpacity,
      }"
    >
      {{ detailDescStone }}
    </div>
    <div
      class="fixed-desc summary-desc"
      :style="{
        opacity: summaryOpacity,
      }"
    >
      {{ summaryDesc }}
    </div>

    <OperationTip
      v-if="store.state.isStartupInvisible"
      class="operation-tip"
      text="了解作品"
      :is-show="isShowOperationTip"
    />

    <div
      ref="scrollerEl"
      class="scroller"
    >
      <div class="inner" />
    </div>

    <!-- 热点详情页 -->
    <Transition name="fade-in-out">
      <HotspotDetail1
        v-if="isShowHotspotDetail1"
        class="hotspot-detail"
        @close="isShowHotspotDetail1 = false"
      />
    </Transition>
    <!-- <Transition name="fade-in-out">
      <PaintingDetail
        v-if="isShowPaintingDetail"
        :thumb="require(`@/assets/images/home-painting.jpg`)"
        :title="'修篁树石图'"
        :author="'李衎'"
        :age="'元'"
        :subtitle="'轴 绢本 墨笔'"
        :location="'南京博物院藏'"
        :painting-desc="homepagePaintingDesc.join('\n\n')"
        :author-desc="homepageAuthorDesc.join('\n\n')"
        :big-painting="require(`@/assets/images/home-painting-big.jpg`)"
        :need-operation-tip="true"
        class="hotspot-detail painting-detail"
        @close="isShowPaintingDetail = false"
      />
    </Transition> -->
    <Transition name="fade-in-out">
      <HotspotDetail3
        v-if="isShowHotspotDetail3"
        class="hotspot-detail"
        @close="isShowHotspotDetail3 = false"
      />
    </Transition>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, inject, onBeforeUnmount } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import Startup from '@/views/StartupView.vue'
import useSizeAdapt from "@/useFunctions/useSizeAdapt"
import HotspotDetail1 from '@/views/HotspotDetail1.vue'
// import PaintingDetail from '@/views/PaintingDetail.vue'
import HotspotDetail3 from '@/views/HotspotDetail3.vue'
import { api as viewerApi } from 'v-viewer'

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

const $env = inject('$env')

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const homepagePaintingDesc = configText.homepagePaintingDesc
const homepageAuthorDesc = configText.homepageAuthorDesc
const detailDescStem = configText.homepagePaintingDetailDescStem
const detailDescLeaf = configText.homepagePaintingDetailDescLeaf
const detailDescStone = configText.homepagePaintingDetailDescStone
const summaryDesc = configText.homepagePaintingSummary

const scrollerEl = ref(null)
const scrollerElScrollTop = ref(0)
function onScroll() {
  scrollerElScrollTop.value = scrollerEl.value.scrollTop
}
onMounted(() => {
  scrollerEl.value.addEventListener('scroll', onScroll)
})
onBeforeUnmount(() => {
  scrollerEl.value.addEventListener('scroll', onScroll)
})

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

const isStartupInvisible = computed(() => {
  return store.state.isStartupInvisible
})

const titleOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= window.innerHeight * 0.3) {
    ret = 1 - (window.innerHeight * 0.3 - scrollerElScrollTop.value) / (window.innerHeight * 0.3)
  } else if (scrollerElScrollTop.value > window.innerHeight * 0.3 && scrollerElScrollTop.value < window.innerHeight * 0.5) {
    ret = 1
  } else {
    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 0.5) / (window.innerHeight * (0.75 - 0.5))
  }
  return ret
})

const paintingTop = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= window.innerHeight * 0.5) {
    ret = 180
  } else if (scrollerElScrollTop.value > window.innerHeight * 0.5 && scrollerElScrollTop.value < window.innerHeight * 1) {
    ret = (scrollerElScrollTop.value - window.innerHeight * 0.5) / (window.innerHeight * (1 - 0.5)) * (67 - 180) + 180
  } else {
    ret = 67
  }
  return ret
})

const longDesc = ref(null)
const longDescOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= window.innerHeight * 0.3) {
    ret = 1 - (window.innerHeight * 0.3 - scrollerElScrollTop.value) / (window.innerHeight * 0.3)
  } else if (scrollerElScrollTop.value > window.innerHeight * 0.3 && scrollerElScrollTop.value < window.innerHeight * 2) {
    ret = 1
  } else {
    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 2) / (window.innerHeight * (3 - 2))
  }
  return ret
})
watch(scrollerElScrollTop, (vNew, vOld) => {
  if (vNew > window.innerHeight * 1) {
    longDesc.value.scrollTop = vNew - window.innerHeight * 1
  } else if (vNew < vOld && vNew <= window.innerHeight * 1) {
    longDesc.value.scrollTop = 0
  }
})

const stemOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= window.innerHeight * 3) {
    ret = 0
  } else if (scrollerElScrollTop.value > window.innerHeight * 3 && scrollerElScrollTop.value < window.innerHeight * 3.5) {
    ret = (scrollerElScrollTop.value - window.innerHeight * 3) / (window.innerHeight * (3.5 - 3))
  } else if (scrollerElScrollTop.value >= window.innerHeight * 3.5 && scrollerElScrollTop.value <= window.innerHeight * 4) {
    ret = 1
  } else if (scrollerElScrollTop.value > window.innerHeight * 4 && scrollerElScrollTop.value < window.innerHeight * 4.5) {
    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 4) / (window.innerHeight * (4.5 - 4))
  } else {
    ret = 0
  }
  return ret
})

const leafOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= window.innerHeight * 5) {
    ret = 0
  } else if (scrollerElScrollTop.value > window.innerHeight * 5 && scrollerElScrollTop.value < window.innerHeight * 5.5) {
    ret = (scrollerElScrollTop.value - window.innerHeight * 5) / (window.innerHeight * (5.5 - 5))
  } else if (scrollerElScrollTop.value >= window.innerHeight * 5.5 && scrollerElScrollTop.value <= window.innerHeight * 6) {
    ret = 1
  } else if (scrollerElScrollTop.value > window.innerHeight * 6 && scrollerElScrollTop.value < window.innerHeight * 6.5) {
    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 6) / (window.innerHeight * (6.5 - 6))
  } else {
    ret = 0
  }
  return ret
})

const stoneOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= window.innerHeight * 7) {
    ret = 0
  } else if (scrollerElScrollTop.value > window.innerHeight * 7 && scrollerElScrollTop.value < window.innerHeight * 7.5) {
    ret = (scrollerElScrollTop.value - window.innerHeight * 7) / (window.innerHeight * (7.5 - 7))
  } else if (scrollerElScrollTop.value >= window.innerHeight * 7.5 && scrollerElScrollTop.value <= window.innerHeight * 8) {
    ret = 1
  } else if (scrollerElScrollTop.value > window.innerHeight * 8 && scrollerElScrollTop.value < window.innerHeight * 8.5) {
    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 8) / (window.innerHeight * (8.5 - 8))
  } else {
    ret = 0
  }
  return ret
})

const summaryOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= window.innerHeight * 9) {
    ret = 0
  } else if (scrollerElScrollTop.value > window.innerHeight * 9 && scrollerElScrollTop.value < window.innerHeight * 9.5) {
    ret = (scrollerElScrollTop.value - window.innerHeight * 9) / (window.innerHeight * (9.5 - 9))
  } else if (scrollerElScrollTop.value >= window.innerHeight * 9.5 && scrollerElScrollTop.value <= window.innerHeight * 10) {
    ret = 1
  } else if (scrollerElScrollTop.value > window.innerHeight * 10 && scrollerElScrollTop.value < window.innerHeight * 10.5) {
    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 10) / (window.innerHeight * (10.5 - 10))
  } else {
    ret = 0
  }
  return ret
})

const sizeOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= window.innerHeight * 3) {
    ret = 0
  } else if (scrollerElScrollTop.value > window.innerHeight * 3 && scrollerElScrollTop.value < window.innerHeight * 3.5) {
    ret = (scrollerElScrollTop.value - window.innerHeight * 3) / (window.innerHeight * (3.5 - 3))
  } else if (scrollerElScrollTop.value >= window.innerHeight * 3.5 && scrollerElScrollTop.value <= window.innerHeight * 8) {
    ret = 1
  } else if (scrollerElScrollTop.value > window.innerHeight * 8 && scrollerElScrollTop.value < window.innerHeight * 8.5) {
    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 8) / (window.innerHeight * (8.5 - 8))
  } else {
    ret = 0
  }
  return ret
})

const isShowHotspot = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= window.innerHeight * 3) {
    ret = false
  } else {
    return true
  }
  return ret
})

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

function showBigPainting() {
  viewerApi({
    images: [require(`@/assets/images/home-painting-big.jpg`)],
  })
}

</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  background-image: url(@/assets/images/home-painting-line-small.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  // 滚动条，只设置某一项可能导致不生效。
  ::-webkit-scrollbar { width: 0; height: 0; }
  >.bg-mask{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(60, 89, 71, 0.65);
    backdrop-filter: blur(calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
  }
  >.startup{
    z-index: 10;
  }
  >.title-wrap{
    position: absolute;
    left: 50%;
    top: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translate(-50%);
    width: calc(43 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(180 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    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, KaiTi;
      font-weight: 400;
      font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      color: #FFFFFF;
      line-height: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      white-space: pre;
      letter-spacing: 0.2em;
      text-align: center;
    }
  }
  >.painting-wrap{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(522 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    >.size-sign-h{
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -105%);
      width: calc(309 * 0.9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      >img{
        width: 100%;
      }
      >span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-family: KaiTi, KaiTi;
        font-weight: 400;
        font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        color: #FFFFFF;
        line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        text-shadow: 0px 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #F8DD86;
      }
    }
    >.size-sign-v{
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(80%, -50%);
      height: calc(464 * 0.9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      >img{
        height: 100%;
      }
      >span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-family: KaiTi, KaiTi;
        font-weight: 400;
        font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        color: #FFFFFF;
        line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        text-shadow: 0px 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #F8DD86;
        writing-mode: vertical-lr;
      }
    }
    >img.painting-border{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    >img.painting, img.painting-stem, img.painting-leaf, img.painting-stone{
      position: absolute;
      left: 50%;
      top: calc(103 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      transform: translate(-50%, 0);
      width: calc(245 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
  }
  >.hotspot-wrap{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(522 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    z-index: 7;
    pointer-events: none;
    >.hotspot-1{
      position: absolute;
      top: calc(54 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      right: calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      pointer-events: initial;
    }
    >.hotspot-2{
      position: absolute;
      left: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      top: calc(222 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      pointer-events: initial;
    }
    >.hotspot-3{
      position: absolute;
      bottom: calc(-10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      right: calc(-10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      pointer-events: initial;
    }
  }
  >.long-desc{
    position: absolute;
    left: 50%;
    bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translate(-50%, 0);
    color: white;
    overflow: auto;
    font-family: KaiTi, KaiTi;
    color: #FFFFFF;
    >h3{
      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      margin-bottom: 0.5em;
      font-weight: 600;
    }
    >p{
      font-weight: 400;
      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      text-align: justify;
      margin-bottom: 0.5em;
    }
  }
  >.fixed-desc{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: KaiTi, KaiTi;
    color: #FFFFFF;
    font-weight: 400;
    font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    text-align: justify;
  }
  >.operation-tip{
    position: absolute;
    left: 50%;
    bottom: calc(77 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translateX(-50%);
  }
  >.scroller{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    >.inner{
      width: 100%;
      height: 1000%;
    }
  }
  >.hotspot-detail{
    z-index: 10;
  }
  >.hotspot-detail.painting-detail{
    backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
  }
}
</style>