NanjingMuseumWuJinZang/src/views/HomeView copy.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`,
        width: `${paintingWidth / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        height: `${paintingHeight / 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`
      }"
    >
      <HotspotForHomepage
        v-show="isShowHotspot"
        class="hotspot-1"
        @click="isShowHotspotDetail1 = true"
      />
      <HotspotForHomepage
        v-show="isShowHotspot"
        class="hotspot-2"
        @click="showBigPainting"
      />
      <HotspotForHomepage
        v-show="isShowHotspot"
        class="hotspot-3"
        @click="isShowHotspotDetail3 = true"
      />
    </div>

    <!-- 文字介绍 -->
    <div
      ref="longDesc"
      class="long-desc"
      :style="{
        top: `${(paintingTop + paintingHeight + 53) / 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="{
        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: summaryOpacity,
      }"
    >
      {{ summaryDesc }}
    </div>

    <div
      class="progress-bar"
    >
      <div class="bar-artwork-desc" />
      <img
        class="progress-bar-node-1"
        src="@/assets/images/progress-bar-node-1.png"
        alt=""
        draggable="false"
      >
      <div class="bar-author-desc" />
      <img
        class="progress-bar-node-2"
        src="@/assets/images/progress-bar-node-2.png"
        alt=""
        draggable="false"
      >
      <div class="bar-artwork-enjoy" />
      <img
        class="progress-bar-node-3"
        src="@/assets/images/progress-bar-node-3.png"
        alt=""
        draggable="false"
      >

      <div
        class="mask"
        :style="{
          width: `${(1 - scrollerElScrollTop / summaryHideAt) * 100}%`,
        }"
      />
    </div>
    <OperationTip
      v-if="isStartupOver"
      class="operation-tip"
      text="了解作品"
      :is-show="isShowOperationTip"
    />

    <div
      ref="scrollerEl"
      class="scroller"
    >
      <div
        class="inner"
        :style="{
          height: summaryHideAt + windowHeight + 'px',
        }"
      />
    </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>

    <Transition name="fade-in">
      <video
        v-if="isShowVideoFadeToNextPage"
        ref="videoFadeToNextPageEl"
        class="fade-to-next-page"
        src="@/assets/videos/fade-from-home-to-more-content.mp4"
        playsinline
        muted
        webkit-playsinline="true"
        x5-video-player-type="h5"
        @ended="router.replace({
          name: 'MoreContent',
        })"
      />
    </Transition>
    <Transition name="fade-in">
      <BtnSkip
        v-if="isShowSkip"
        @click="router.replace({
          name: 'MoreContent',
        })"
      />
    </Transition>
    <BtnClickMe
      class="go-next-page"
      text="点击继续"
      :is-show="isShowBtnGoNextPage"
      @click="onClickGoNextPage"
    />
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, inject, onBeforeUnmount, onUnmounted, nextTick } 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'
import { useWindowSize } from '@vueuse/core'

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

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.removeEventListener('scroll', onScroll)
})

const isShowOperationTip = ref(true)
watch(scrollerElScrollTop, (v) => {
  if (v > 0) {
    isShowOperationTip.value = false
  }
})

const haveShownStartup = computed(() => {
  return store.state.haveShownStartup
})
const isStartupOver = ref(false)
const unwatch = watch(haveShownStartup, (v) => {
  if (v) {
    setTimeout(() => {
      isStartupOver.value = true
    }, 2000)
    unwatch()
  }
})


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

const paintingMoveUpAt = window.innerHeight * 0
const paintingTopInitial = 236
const paintingMoveUpFinishAt = paintingMoveUpAt + window.innerHeight * 1
const paintingTopMovedUp = 41
const paintingMoveDownAt = paintingMoveUpFinishAt + window.innerHeight * 0.5
const paintingMoveDownFinishAt = paintingMoveDownAt + window.innerHeight * 0.25
const paingtingTopMovedDown = 90
const paintingTop = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= paintingMoveUpAt) {
    ret = paintingTopInitial
  } else if (scrollerElScrollTop.value > paintingMoveUpAt && scrollerElScrollTop.value <= paintingMoveUpFinishAt) {
    ret = (scrollerElScrollTop.value - paintingMoveUpAt) / (paintingMoveUpFinishAt - paintingMoveUpAt) * (paintingTopMovedUp - paintingTopInitial) + paintingTopInitial
  } else if (scrollerElScrollTop.value > paintingMoveUpFinishAt && scrollerElScrollTop.value <= paintingMoveDownAt) {
    ret = paintingTopMovedUp
  } else if (scrollerElScrollTop.value > paintingMoveDownAt && scrollerElScrollTop.value <= paintingMoveDownFinishAt) {
    ret = (scrollerElScrollTop.value - paintingMoveDownAt) / (paintingMoveDownFinishAt - paintingMoveDownAt) * (paingtingTopMovedDown - paintingTopMovedUp) + paintingTopMovedUp
  } else {
    ret = paingtingTopMovedDown
  }
  return ret
})

const paintingWidthInitial = 308
const paintingWidthMovedUp = 250
const paintingWidthMovedDown = 308
const paintingWidth = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= paintingMoveUpAt) {
    ret = paintingWidthInitial
  } else if (scrollerElScrollTop.value > paintingMoveUpAt && scrollerElScrollTop.value <= paintingMoveUpFinishAt) {
    ret = (scrollerElScrollTop.value - paintingMoveUpAt) / (paintingMoveUpFinishAt - paintingMoveUpAt) * (paintingWidthMovedUp - paintingWidthInitial) + paintingWidthInitial
  } else if (scrollerElScrollTop.value > paintingMoveUpFinishAt && scrollerElScrollTop.value <= paintingMoveDownAt) {
    ret = paintingWidthMovedUp
  } else if (scrollerElScrollTop.value > paintingMoveDownAt && scrollerElScrollTop.value <= paintingMoveDownFinishAt) {
    ret = (scrollerElScrollTop.value - paintingMoveDownAt) / (paintingMoveDownFinishAt - paintingMoveDownAt) * (paintingWidthMovedDown - paintingWidthMovedUp) + paintingWidthMovedUp
  } else {
    ret = paintingWidthMovedDown
  }
  return ret
})

const paintingHeightInitial = 523
const paintingHeightMovedUp = 425
const paintingHeightMovedDown = 523
const paintingHeight = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= paintingMoveUpAt) {
    ret = paintingHeightInitial
  } else if (scrollerElScrollTop.value > paintingMoveUpAt && scrollerElScrollTop.value <= paintingMoveUpFinishAt) {
    ret = (scrollerElScrollTop.value - paintingMoveUpAt) / (paintingMoveUpFinishAt - paintingMoveUpAt) * (paintingHeightMovedUp - paintingHeightInitial) + paintingHeightInitial
  } else if (scrollerElScrollTop.value > paintingMoveUpFinishAt && scrollerElScrollTop.value <= paintingMoveDownAt) {
    ret = paintingHeightMovedUp
  } else if (scrollerElScrollTop.value > paintingMoveDownAt && scrollerElScrollTop.value <= paintingMoveDownFinishAt) {
    ret = (scrollerElScrollTop.value - paintingMoveDownAt) / (paintingMoveDownFinishAt - paintingMoveDownAt) * (paintingHeightMovedDown - paintingHeightMovedUp) + paintingHeightMovedUp
  } else {
    ret = paintingHeightMovedDown
  }
  return ret
})

const longDesc = ref(null)
const longDescShowFinishAt = window.innerHeight * 0.25
const longDescHideAt = longDescShowFinishAt + window.innerHeight * 1
const longDescHideFinishAt = longDescHideAt + window.innerHeight * 0.25
const longDescOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= longDescShowFinishAt) {
    ret = 1 - (longDescShowFinishAt - scrollerElScrollTop.value) / (longDescShowFinishAt)
  } else if (scrollerElScrollTop.value > longDescShowFinishAt && scrollerElScrollTop.value < longDescHideAt) {
    ret = 1
  } else {
    ret = 1 - (scrollerElScrollTop.value - longDescHideAt) / (longDescHideFinishAt - longDescHideAt)
  }
  return ret
})
watch(scrollerElScrollTop, (vNew, vOld) => {
  if (vNew > paintingMoveUpFinishAt) {
    longDesc.value.scrollTop = vNew - paintingMoveUpFinishAt
  } else if (vNew < vOld && vNew <= paintingMoveUpFinishAt) {
    longDesc.value.scrollTop = 0
  }
})

const stemShowAt = longDescHideFinishAt + window.innerHeight * 0
const stemShowFinishAt = stemShowAt + window.innerHeight * 0.25
const stemHideAt = stemShowFinishAt + window.innerHeight * 0.3
const stemHideFisishAt = stemHideAt + window.innerHeight * 0.25
const stemOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= stemShowAt) {
    ret = 0
  } else if (scrollerElScrollTop.value > stemShowAt && scrollerElScrollTop.value < stemShowFinishAt) {
    ret = (scrollerElScrollTop.value - stemShowAt) / (stemShowFinishAt - stemShowAt)
  } else if (scrollerElScrollTop.value >= stemShowFinishAt && scrollerElScrollTop.value <= stemHideAt) {
    ret = 1
  } else if (scrollerElScrollTop.value > stemHideAt && scrollerElScrollTop.value < stemHideFisishAt) {
    ret = 1 - (scrollerElScrollTop.value - stemHideAt) / (stemHideFisishAt - stemHideAt)
  } else {
    ret = 0
  }
  return ret
})

const leafShowAt = stemHideFisishAt + (0 * window.innerHeight)
const leafShowFinishAt = leafShowAt + (0.25 * window.innerHeight)
const leafHideAt = leafShowFinishAt + (0.3 * window.innerHeight)
const leafHideFisishAt = leafHideAt + (0.25 * window.innerHeight)
const leafOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= leafShowAt) {
    ret = 0
  } else if (scrollerElScrollTop.value > leafShowAt && scrollerElScrollTop.value < leafShowFinishAt) {
    ret = (scrollerElScrollTop.value - leafShowAt) / (leafShowFinishAt - leafShowAt)
  } else if (scrollerElScrollTop.value >= leafShowFinishAt && scrollerElScrollTop.value <= leafHideAt) {
    ret = 1
  } else if (scrollerElScrollTop.value > leafHideAt && scrollerElScrollTop.value < leafHideFisishAt) {
    ret = 1 - (scrollerElScrollTop.value - leafHideAt) / (leafHideFisishAt - leafHideAt)
  } else {
    ret = 0
  }
  return ret
})

const stoneShowAt = leafHideFisishAt + (0 * window.innerHeight)
const stoneShowFinishAt = stoneShowAt + (0.25 * window.innerHeight)
const stoneHideAt = stoneShowFinishAt + (0.3 * window.innerHeight)
const stoneHideFinishAt = stoneHideAt + (0.25 * window.innerHeight)
const stoneOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= stoneShowAt) {
    ret = 0
  } else if (scrollerElScrollTop.value > stoneShowAt && scrollerElScrollTop.value < stoneShowFinishAt) {
    ret = (scrollerElScrollTop.value - stoneShowAt) / (stoneShowFinishAt - stoneShowAt)
  } else if (scrollerElScrollTop.value >= stoneShowFinishAt && scrollerElScrollTop.value <= stoneHideAt) {
    ret = 1
  } else if (scrollerElScrollTop.value > stoneHideAt && scrollerElScrollTop.value < stoneHideFinishAt) {
    ret = 1 - (scrollerElScrollTop.value - stoneHideAt) / (stoneHideFinishAt - stoneHideAt)
  } else {
    ret = 0
  }
  return ret
})

const summaryShowAt = stoneHideFinishAt + window.innerHeight * 0
const summaryShowFinishAt = summaryShowAt + window.innerHeight * 0.25
const summaryHideAt = summaryShowFinishAt + window.innerHeight * 0.3
const summaryHideFisishAt = summaryHideAt + window.innerHeight * 0.25
const summaryOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= summaryShowAt) {
    ret = 0
  } else if (scrollerElScrollTop.value > summaryShowAt && scrollerElScrollTop.value < summaryShowFinishAt) {
    ret = (scrollerElScrollTop.value - summaryShowAt) / (summaryShowFinishAt - summaryShowAt)
  } else if (scrollerElScrollTop.value >= summaryShowFinishAt && scrollerElScrollTop.value <= summaryHideAt) {
    ret = 1
  } else if (scrollerElScrollTop.value > summaryHideAt && scrollerElScrollTop.value < summaryHideFisishAt) {
    ret = 1 - (scrollerElScrollTop.value - summaryHideAt) / (summaryHideFisishAt - summaryHideAt)
  } else {
    ret = 0
  }
  return ret
})

const sizeShowAt = stemShowAt
const sizeShowFinishAt = stemShowFinishAt
const sizeHideAt = stoneHideAt
const sizeHideFisishAt = stoneHideFinishAt
const sizeOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= sizeShowAt) {
    ret = 0
  } else if (scrollerElScrollTop.value > sizeShowAt && scrollerElScrollTop.value < sizeShowFinishAt) {
    ret = (scrollerElScrollTop.value - sizeShowAt) / (sizeShowFinishAt - sizeShowAt)
  } else if (scrollerElScrollTop.value >= sizeShowFinishAt && scrollerElScrollTop.value <= sizeHideAt) {
    ret = 1
  } else if (scrollerElScrollTop.value > sizeHideAt && scrollerElScrollTop.value < sizeHideFisishAt) {
    ret = 1 - (scrollerElScrollTop.value - sizeHideAt) / (sizeHideFisishAt - sizeHideAt)
  } else {
    ret = 0
  }
  return ret
})

const isShowHotspot = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= sizeShowAt) {
    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`)],
  })
}

/**
 * 跳转新页面
 */
const videoFadeToNextPageEl = ref(null)
const isShowVideoFadeToNextPage = ref(false)
const isShowSkip = ref(false)
// const fingerPosYWhenTouchStart = ref(0)
// const isAtBottomWhenTouchStart = ref(false)
// const handletouchstart = (event) => {
//   fingerPosYWhenTouchStart.value = event.changedTouches[0].pageY
//   if (Math.abs(scrollerEl.value.scrollTop + scrollerEl.value.clientHeight - scrollerEl.value.scrollHeight) <= 1) {
//     isAtBottomWhenTouchStart.value = true
//   } else {
//     isAtBottomWhenTouchStart.value = false
//   }
// }
// const touchMove = (event) => {
//   let currentY = event.changedTouches[0].pageY
//   let tY = currentY - fingerPosYWhenTouchStart.value
//   if (tY < -1 && isAtBottomWhenTouchStart.value) {
//     isShowVideoFadeToNextPage.value = true
//     nextTick(() => {
//       videoFadeToNextPageEl.value.play()
//     })
//     setTimeout(() => {
//       isShowSkip.value = true
//     }, 2000)
//   }
// }
const isShowBtnGoNextPage = ref(false)
watch(scrollerElScrollTop, (v) => {
  if (Math.abs(v + windowHeight.value - scrollerEl.value.scrollHeight) < 3) {
    isShowBtnGoNextPage.value = true
  } else {
    isShowBtnGoNextPage.value = false
  }
})
function onClickGoNextPage() {
  isShowBtnGoNextPage.value = false
  isShowVideoFadeToNextPage.value = true
  nextTick(() => {
    videoFadeToNextPageEl.value.play()
  })
  setTimeout(() => {
    isShowSkip.value = true
  }, 2000)
}
</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(36 / 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);
    >.size-sign-h{
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -105%);
      width: calc(245 / 308 * 100%);
      >img{
        width: 100%;
      }
      >span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-family: KaiTi, KaiTi;
        font-weight: 400;
        font-size: calc(16 / 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: 54%;
      transform: translate(80%, -50%);
      height: calc(371 / 523 * 100%);
      >img{
        height: 100%;
      }
      >span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-family: KaiTi, KaiTi;
        font-weight: 400;
        font-size: calc(16 / 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: 54%;
      transform: translate(-50%, -50%);
      width: calc(245 / 308 * 100%);
    }
  }
  >.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;
    &>div{
      z-index: 100;
    }
    >.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;
  }
  >.progress-bar{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15px;
    >.bar-artwork-desc{
      position: absolute;
      left: 0;
      bottom: 0;
      right: 10px;
      height: 3px;
      background-color: #A9D185;
    }
    >img.progress-bar-node-1{
      position: absolute;
      left: calc(0.6 * v-bind('longDescHideFinishAt') / v-bind('summaryHideAt') * 100%);
      bottom: 1px;
      width: 2.41px;
      height: 10.23px
    }
    >.bar-author-desc{
      position: absolute;
      left: 12px;
      bottom: 0;
      right: calc(v-bind('longDescHideFinishAt') / v-bind('summaryHideAt') * 100%);
      height: 3px;
      background: #A9D185;
    }
    >img.progress-bar-node-2{
      position: absolute;
      left: calc(v-bind('longDescHideFinishAt') / v-bind('summaryHideAt') * 100%);
      bottom: 1px;
      width: 7.5px;
      height: 10.8px
    }
    >.bar-artwork-enjoy{
      position: absolute;
      left: calc(v-bind('stoneShowAt') / v-bind('summaryHideAt') * 100%);
      bottom: 0;
      right: 0;
      height: 3px;
      background: #A9D185;
    }
    >img.progress-bar-node-3{
      position: absolute;
      right: 0;
      bottom: 1px;
      width: 9.7px;
      height: 10.8px
    }

    > .mask{
      position: absolute;
      right: 0;
      bottom: 0;
      height: 15px;
      background-color: #6e8175;
    }
  }
  >.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%;
    }
  }
  >.hotspot-detail{
    z-index: 10;
  }
  >.hotspot-detail.painting-detail{
    backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
  }
  >video.fade-to-next-page{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 20;
  }

  >button.go-next-page{
    position: absolute;
    left: 50%;
    bottom: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    z-index: 20;
    transform: translate(-50%, 0);
  }
}
</style>