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: summaryOpacity > 0 ? `${90 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px` : `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        width: summaryOpacity > 0 ? `calc(225 / 308 * 100%)`: paintingWidth == 485 ? `110%`: `${paintingWidth / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        height: summaryOpacity > 0 ? `${523 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px` :`${paintingHeight / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
      }"
    >
      <div
        class="size-sign-h"
        :style="{
          opacity: 0,
        }"
      >
        <img
          class=""
          src="@/assets/images/size-sign-h.png"
          alt=""
          draggable="false"
        >
        <span>100.6cm</span>
      </div>
      <div
        class="size-sign-v"
        :style="{
          opacity: 0,
        }"
      >
        <img
          class=""
          src="@/assets/images/size-sign-v.png"
          alt=""
          draggable="false"
        >
        <span>151.7cm</span>
      </div>
      <!-- 绿色幕布层 -->
      <div
        class="green-box"
        :style="{opacity: stemGreenOpacity || leafGreenOpacity || stoneGreenOpacity}"
      />
      <img
        class="painting-border"
        src="@/assets/images/painting-border-new.png"
        alt=""
        draggable="false"
      >
      <img
        class="painting-stem"
        src="@/assets/images/home-painting.jpg"
        alt=""
        draggable="false"
      >
      <img
        class="painting-stem"
        src="@/assets/images/home-painting.jpg"
        alt=""
        draggable="false"
      >
      <img
        class="painting-stem"
        :style="{
          opacity: stemOpacity,
        }"
        src="@/assets/images/home-1.jpg"
        alt=""
        draggable="false"
      >
      <img
        class="painting-stem"
        :style="{
          opacity: stemOpacity1,
          zIndex: 2,
        }"
        src="@/assets/images/home-1-1.jpg"
        alt=""
        draggable="false"
      >
      <img
        class="painting-stem"
        :style="{
          opacity: stemOpacity2,
          zIndex: 2,
        }"
        src="@/assets/images/home-1-2.jpg"
        alt=""
        draggable="false"
      >
      <img
        class="painting-leaf"
        :style="{
          opacity: leafOpacity,
          zIndex: 2,
        }"
        src="@/assets/images/home-2.jpg"
        alt=""
        draggable="false"
      >
      <img
        class="painting-leaf"
        :style="{
          opacity: leafOpacity1,
          zIndex: 2,
        }"
        src="@/assets/images/home-2-1.jpg"
        alt=""
        draggable="false"
      >

      <img
        class="painting-leaf"
        :style="{
          opacity: leafOpacity2,
          zIndex: 2,
        }"
        src="@/assets/images/home-2-2.jpg"
        alt=""
        draggable="false"
      >
      <img
        class="painting-leaf"
        :style="{
          opacity: leafOpacity3,
          zIndex: 2,
        }"
        src="@/assets/images/home-2-3.jpg"
        alt=""
        draggable="false"
      >
      <img
        class="painting-stone"
        :style="{
          opacity: stoneOpacity,
        }"
        src="@/assets/images/home-3.jpg"
        alt=""
        draggable="false"
      >
      <img
        class="painting-stone"
        :style="{
          opacity: stoneOpacity1,
          zIndex: 2,
        }"
        src="@/assets/images/home-3-1.jpg"
        alt=""
        draggable="false"
      >
    </div>

    <!-- 热点层 -->
    <div
      class="hotspot-wrap"
      :style="{
        top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        width: summaryOpacity > 0 ? `calc(215 / 308 * 100%)`: paintingWidth == 485 ? `110%`: `${paintingWidth / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
      }"
    >
      <HotspotForHomepage
        v-show="isShowHotspot"
        class="hotspot-1"
        @click="isShowHotspotDetail1 = true"
      />
      <HotspotForHomepage
        v-show="false"
        class="hotspot-2"
        @click="showBigPainting"
      />
      <HotspotForHomepage
        v-show="isShowHotspot"
        class="hotspot-3"
        @click="isShowHotspotDetail3 = true"
      />
    </div>

    <!-- 文字介绍 -->
    <div
      ref="longDesc"
      v-touch:swipe.left="onSwipeLeft"
      v-touch:swipe.right="onSwipeRight"
      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="" />



    <!-- stem title -->
    <div
      class="fixed-desc detail-title-stem"
      :style="{
        top: `${( stemOpacity1 > 0 || stemOpacity2 >0? paintingTop + 670 : paintingTop + 750 ) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: stemTextOpacity,
      }"
    >
      三竿修竹
    </div>

    <div
      class="fixed-desc detail-title-stem"
      :style="{
        top: `${( stoneOpacity1 > 0 ? paintingTop + 500 : paintingTop + 580 ) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: stoneTextOpacity,
      }"
    >
      卧石
    </div>

    <div
      class="fixed-desc detail-title-stem"
      :style="{
        top: `${( leafOpacity1 > 0 || leafOpacity2 >0 || leafOpacity3 >0? paintingTop + 330 : paintingTop + 410 ) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: leafTextOpacity,
      }"
    >
      竹叶
    </div>
    <div
      class="fixed-desc detail-desc-stem"
      :style="{
        top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: stemGreenOpacity,
      }"
      v-html="detailDescStem"
    />
    <div
      class="fixed-desc detail-desc-leaf"
      :style="{
        top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: leafGreenOpacity,
      }"
      v-html="leafOpacity1 > 0 ? detailDescLeaf1 :leafOpacity2> 0? detailDescLeaf2:detailDescLeaf3"
    />
    <div
      class="fixed-desc detail-desc-stone"
      :style="{
        top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: stoneGreenOpacity,
      }"
      v-html="detailDescStone"
    />
    <div
      class="fixed-desc summary-desc"
      :style="{
        top: `${(paintingTop + 700) / 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}%`,
          backgroundColor:stemGreenOpacity > 0 || leafGreenOpacity > 0 || stoneGreenOpacity > 0?'rgba(85,116,83,0.8)':''
        }"
      />
    </div>
    <OperationTip
      v-if="isStartupOver"
      class="operation-tip"
      text="向左划动"
      direction="h"
      :is-show="isShowOperationTip"
    />

    <div
      ref="scrollerEl"
      class="scroller"
      @touchstart="handletouchstart($event)"
      @touchend="touchEnd($event)"
    >
      <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
        webkit-playsinline="true"
        x5-video-player-type="h5"
        @ended="router.push({
          name: 'MoreContentChange',
        })"
      />
    </Transition>
    <Transition name="fade-in">
      <BtnSkip
        v-if="isShowSkip"
        @click="router.push({
          name: 'MoreContentChange',
        })"
      />
    </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 detailDescLeaf1 = configText.homepagePaintingDetailDescLeaf1
const detailDescLeaf2 = configText.homepagePaintingDetailDescLeaf2
const detailDescLeaf3 = configText.homepagePaintingDetailDescLeaf3
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 = -80
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 = 485
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
let paintingHeightMovedDown = 758

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 stemShowAt1 = stemHideFisishAt + window.innerHeight * 0
const stemShowFinishAt1 = stemShowAt1 + window.innerHeight * 0.25
const stemHideAt1 = stemShowFinishAt1 + window.innerHeight * 0.3
const stemHideFisishAt1 = stemHideAt1 + window.innerHeight * 0.25
const stemOpacity1 = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= stemShowAt1) {
    ret = 0
  } else if (scrollerElScrollTop.value > stemShowAt1 && scrollerElScrollTop.value < stemShowFinishAt1) {
    ret = (scrollerElScrollTop.value - stemShowAt1) / (stemShowFinishAt1 - stemShowAt1)
  } else if (scrollerElScrollTop.value >= stemShowFinishAt1 && scrollerElScrollTop.value <= stemHideAt1) {
    ret = 1
  } else if (scrollerElScrollTop.value > stemHideAt1 && scrollerElScrollTop.value < stemHideFisishAt1) {
    ret = 1 - (scrollerElScrollTop.value - stemHideAt1) / (stemHideFisishAt1 - stemHideAt1)
  } else {
    ret = 0
  }
  return ret
})

const stemShowAt2 = stemHideFisishAt1 + window.innerHeight * 0
const stemShowFinishAt2 = stemShowAt2 + window.innerHeight * 0.25
const stemHideAt2 = stemShowFinishAt2 + window.innerHeight * 0.3
const stemHideFisishAt2 = stemHideAt2 + window.innerHeight * 0.25
const stemOpacity2 = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= stemShowAt1) {
    ret = 0
  } else if (scrollerElScrollTop.value > stemShowAt2 && scrollerElScrollTop.value < stemShowFinishAt2) {
    ret = (scrollerElScrollTop.value - stemShowAt2) / (stemShowFinishAt2 - stemShowAt2)
  } else if (scrollerElScrollTop.value >= stemShowFinishAt2 && scrollerElScrollTop.value <= stemHideAt2) {
    ret = 1
  } else if (scrollerElScrollTop.value > stemHideAt2 && scrollerElScrollTop.value < stemHideFisishAt2) {
    ret = 1 - (scrollerElScrollTop.value - stemHideAt2) / (stemHideFisishAt - stemHideAt2)

  } else {
    ret = 0
  }
  return ret
})

const stemShowText = stemShowAt
const stemShowTextFinishAt = stemShowFinishAt
const stemTextHideAt = stemHideAt2
const stemHideTextFisishAt = stemHideFisishAt2
const stemTextOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= stemShowText) {
    ret = 0
  } else if (scrollerElScrollTop.value > stemShowText && scrollerElScrollTop.value < stemShowTextFinishAt) {
    ret = (scrollerElScrollTop.value - stemShowText) / (stemShowTextFinishAt - stemShowText)
  } else if (scrollerElScrollTop.value >= stemShowTextFinishAt && scrollerElScrollTop.value <= stemTextHideAt) {
    ret = 1
  } else if (scrollerElScrollTop.value > stemTextHideAt && scrollerElScrollTop.value < stemHideTextFisishAt) {
    ret = 1 - (scrollerElScrollTop.value - stemTextHideAt) / (stemHideTextFisishAt - stemTextHideAt)
  } else {
    ret = 0
  }
  return ret
})

const stemShowGreen = stemShowAt1
const stemShowGreenFinishAt = stemShowFinishAt1
const stemGreenHideAt = stemHideAt2
const stemHideGreenFisishAt = stemHideFisishAt2
const stemGreenOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= stemShowGreen) {
    ret = 0
  } else if (scrollerElScrollTop.value > stemShowGreen && scrollerElScrollTop.value < stemShowGreenFinishAt) {
    ret = (scrollerElScrollTop.value - stemShowGreen) / (stemShowGreenFinishAt - stemShowGreen)
  } else if (scrollerElScrollTop.value >= stemShowGreenFinishAt && scrollerElScrollTop.value <= stemGreenHideAt) {
    ret = 1
  } else if (scrollerElScrollTop.value > stemGreenHideAt && scrollerElScrollTop.value < stemHideGreenFisishAt) {
    ret = 1 - (scrollerElScrollTop.value - stemGreenHideAt) / (stemHideGreenFisishAt - stemGreenHideAt)
  } else {
    ret = 0
  }
  return ret
})

const leafShowAt = stemHideFisishAt2 + (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 leafShowAt1 = leafHideFisishAt + (0 * window.innerHeight)
const leafShowFinishAt1 = leafShowAt1 + (0.25 * window.innerHeight)
const leafHideAt1 = leafShowFinishAt1 + (0.3 * window.innerHeight)
const leafHideFisishAt1 = leafHideAt1 + (0.25 * window.innerHeight)
const leafOpacity1 = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= leafShowAt1) {
    ret = 0
  } else if (scrollerElScrollTop.value > leafShowAt1 && scrollerElScrollTop.value < leafShowFinishAt1) {
    ret = (scrollerElScrollTop.value - leafShowAt1) / (leafShowFinishAt1 - leafShowAt1)
  } else if (scrollerElScrollTop.value >= leafShowFinishAt1 && scrollerElScrollTop.value <= leafHideAt1) {
    ret = 1
  } else if (scrollerElScrollTop.value > leafHideAt1 && scrollerElScrollTop.value < leafHideFisishAt1) {
    ret = 1 - (scrollerElScrollTop.value - leafHideAt1) / (leafHideFisishAt1 - leafHideAt1)
  } else {
    ret = 0
  }
  return ret
})

const leafShowAt2 = leafHideFisishAt1 + (0 * window.innerHeight)
const leafShowFinishAt2 = leafShowAt2 + (0.25 * window.innerHeight)
const leafHideAt2 = leafShowFinishAt2 + (0.3 * window.innerHeight)
const leafHideFisishAt2 = leafHideAt2 + (0.25 * window.innerHeight)
const leafOpacity2 = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= leafShowAt2) {
    ret = 0
  } else if (scrollerElScrollTop.value > leafShowAt2 && scrollerElScrollTop.value < leafShowFinishAt2) {
    ret = (scrollerElScrollTop.value - leafShowAt2) / (leafShowFinishAt2 - leafShowAt2)
  } else if (scrollerElScrollTop.value >= leafShowFinishAt2 && scrollerElScrollTop.value <= leafHideAt2) {
    ret = 1
  } else if (scrollerElScrollTop.value > leafHideAt2 && scrollerElScrollTop.value < leafHideFisishAt2) {
    ret = 1 - (scrollerElScrollTop.value - leafHideAt2) / (leafHideFisishAt2 - leafHideAt2)
  } else {
    ret = 0
  }
  return ret
})

const leafShowAt3 = leafHideFisishAt2 + (0 * window.innerHeight)
const leafShowFinishAt3 = leafShowAt3 + (0.25 * window.innerHeight)
const leafHideAt3 = leafShowFinishAt3 + (0.3 * window.innerHeight)
const leafHideFisishAt3 = leafHideAt3 + (0.25 * window.innerHeight)
const leafOpacity3 = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= leafShowAt3) {
    ret = 0
  } else if (scrollerElScrollTop.value > leafShowAt3 && scrollerElScrollTop.value < leafShowFinishAt3) {
    ret = (scrollerElScrollTop.value - leafShowAt3) / (leafShowFinishAt3 - leafShowAt3)
  } else if (scrollerElScrollTop.value >= leafShowFinishAt3 && scrollerElScrollTop.value <= leafHideAt3) {
    ret = 1
  } else if (scrollerElScrollTop.value > leafHideAt3 && scrollerElScrollTop.value < leafHideFisishAt3) {
    ret = 1 - (scrollerElScrollTop.value - leafHideAt3) / (leafHideFisishAt3 - leafHideAt3)
  } else {
    ret = 0
  }
  return ret
})

const leafShowText = leafShowAt
const leafShowTextFinishAt = leafShowFinishAt
const leafTextHideAt = leafHideAt3
const leafHideTextFisishAt = leafHideFisishAt3
const leafTextOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= leafShowText) {
    ret = 0
  } else if (scrollerElScrollTop.value > leafShowText && scrollerElScrollTop.value < leafShowTextFinishAt) {
    ret = (scrollerElScrollTop.value - leafShowText) / (leafShowTextFinishAt - leafShowText)
  } else if (scrollerElScrollTop.value >= leafShowTextFinishAt && scrollerElScrollTop.value <= leafTextHideAt) {
    ret = 1
  } else if (scrollerElScrollTop.value > leafTextHideAt && scrollerElScrollTop.value < leafHideTextFisishAt) {
    ret = 1 - (scrollerElScrollTop.value - leafTextHideAt) / (leafHideTextFisishAt - leafTextHideAt)
  } else {
    ret = 0
  }
  return ret
})

const leafShowGreen = leafShowAt1
const leafShowGreenFinishAt = leafShowFinishAt1
const leafGreenHideAt = leafHideAt3
const leafHideGreenFisishAt = leafHideFisishAt3
const leafGreenOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= leafShowGreen) {
    ret = 0
  } else if (scrollerElScrollTop.value > leafShowGreen && scrollerElScrollTop.value < leafShowGreenFinishAt) {
    ret = (scrollerElScrollTop.value - leafShowGreen) / (leafShowGreenFinishAt - leafShowGreen)
  } else if (scrollerElScrollTop.value >= leafShowGreenFinishAt && scrollerElScrollTop.value <= leafGreenHideAt) {
    ret = 1
  } else if (scrollerElScrollTop.value > leafGreenHideAt && scrollerElScrollTop.value < leafHideGreenFisishAt) {
    ret = 1 - (scrollerElScrollTop.value - leafGreenHideAt) / (leafHideGreenFisishAt - leafGreenHideAt)
  } else {
    ret = 0
  }
  return ret
})








const stoneShowAt = leafHideFisishAt3 + (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 stoneShowAt1 = stoneHideFinishAt + (0 * window.innerHeight)
const stoneShowFinishAt1 = stoneShowAt1 + (0.25 * window.innerHeight)
const stoneHideAt1 = stoneShowFinishAt1 + (0.3 * window.innerHeight)
const stoneHideFinishAt1 = stoneHideAt1 + (0.25 * window.innerHeight)
const stoneOpacity1 = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= stoneShowAt1) {
    ret = 0
  } else if (scrollerElScrollTop.value > stoneShowAt1 && scrollerElScrollTop.value < stoneShowFinishAt1) {
    ret = (scrollerElScrollTop.value - stoneShowAt1) / (stoneShowFinishAt1 - stoneShowAt1)
  } else if (scrollerElScrollTop.value >= stoneShowFinishAt1 && scrollerElScrollTop.value <= stoneHideAt1) {
    ret = 1
  } else if (scrollerElScrollTop.value > stoneHideAt1 && scrollerElScrollTop.value < stoneHideFinishAt1) {
    ret = 1 - (scrollerElScrollTop.value - stoneHideAt1) / (stoneHideFinishAt1 - stoneHideAt1)
  } else {
    ret = 0
  }
  return ret
})

const stoneShowGreen = stoneShowAt1
const stoneShowGreenFinishAt = stoneShowFinishAt1
const stoneGreenHideAt = stoneHideAt1
const stoneHideGreenFisishAt = stoneHideFinishAt1
const stoneGreenOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= stoneShowGreen) {
    ret = 0
  } else if (scrollerElScrollTop.value > stoneShowGreen && scrollerElScrollTop.value < stoneShowGreenFinishAt) {
    ret = (scrollerElScrollTop.value - stoneShowGreen) / (stoneShowGreenFinishAt - stoneShowGreen)
  } else if (scrollerElScrollTop.value >= stoneShowGreenFinishAt && scrollerElScrollTop.value <= stoneGreenHideAt) {
    ret = 1
  } else if (scrollerElScrollTop.value > stoneGreenHideAt && scrollerElScrollTop.value < stoneHideGreenFisishAt) {
    ret = 1 - (scrollerElScrollTop.value - stoneGreenHideAt) / (stoneHideGreenFisishAt - stoneGreenHideAt)
  } else {
    ret = 0
  }
  return ret
})



const stoneShowText = stoneShowAt
const stoneShowTextFinishAt = stoneShowFinishAt
const stoneTextHideAt = stoneHideAt1
const stoneHideTextFisishAt = stoneHideFinishAt1
const stoneTextOpacity = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= stoneShowText) {
    ret = 0
  } else if (scrollerElScrollTop.value > stoneShowText && scrollerElScrollTop.value < stoneShowTextFinishAt) {
    ret = (scrollerElScrollTop.value - stoneShowText) / (stoneShowTextFinishAt - stoneShowText)
  } else if (scrollerElScrollTop.value >= stoneShowTextFinishAt && scrollerElScrollTop.value <= stoneTextHideAt) {
    ret = 1
  } else if (scrollerElScrollTop.value > stoneTextHideAt && scrollerElScrollTop.value < stoneHideTextFisishAt) {
    ret = 1 - (scrollerElScrollTop.value - stoneTextHideAt) / (stoneHideTextFisishAt - stoneTextHideAt)
  } else {
    ret = 0
  }
  return ret
})

const summaryShowAt = stoneHideFinishAt1 + 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

  console.log('scrollerElScrollTop.value', scrollerElScrollTop.value)
  if (scrollerElScrollTop.value >= summaryShowAt) {
    ret = true
  } else {
    return false
  }
  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 isShowBtnGoNextPage = ref(false)
watch(scrollerElScrollTop, (v) => {
  if (Math.abs(v + windowHeight.value - scrollerEl.value.scrollHeight) < 3) {
    isShowBtnGoNextPage.value = true
  } else {
    isShowBtnGoNextPage.value = false
  }
})

function smoothScrollTo(element, finalPosition, duration = 500, startTime = performance.now()) {

  const currentTime = performance.now()
  const timeElapsed = currentTime - startTime
  const progress = Math.min(timeElapsed / duration, 1) // 确保进度不超过1
  const currentPos = element.scrollTop
  const newPos = currentPos + (finalPosition - currentPos) * progress
  element.scrollTop = newPos

  if (progress < 1 && finalPosition == scrollerPositionList[curStep.value] * scrollerEl.value.scrollHeight) {
    // console.log('最后位置', finalPosition)
    requestAnimationFrame(() => smoothScrollTo(element, finalPosition, duration, startTime))
  }
}

const curStep = ref(0)

const scrollerPositionList = [0, 0.115, 0.173, 0.265, 0.346, 0.416, 0.508, 0.589, 0.658, 0.716, 0.809, 1]
const scrollerPositionTimeRight = [6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
const scrollerPositionTimeLeft = [6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]


const onSwipeLeft = () => {
  if (curStep.value < scrollerPositionList.length - 1) {
    curStep.value ++
    const pp = scrollerPositionList[curStep.value]
    const startTime = performance.now()
    requestAnimationFrame(() => {smoothScrollTo(scrollerEl.value, pp * scrollerEl.value.scrollHeight, scrollerPositionTimeRight[curStep.value], startTime)})
  }

}

const onSwipeRight = () => {
  if (curStep.value > 0) {
    curStep.value --
    const pp = scrollerPositionList[curStep.value] * scrollerEl.value.scrollHeight
    const startTime = performance.now()
    requestAnimationFrame(() => {smoothScrollTo(scrollerEl.value, pp, scrollerPositionTimeLeft[curStep.value], startTime)})
  }
}

const lastX = ref(0)
// 开始滑动
const handletouchstart = (event) => {
  lastX.value = event.changedTouches[0].pageX
}

// 监听活动
const touchEnd = (event) => {
  let currentX = event.changedTouches[0].pageX
  let tx = currentX - lastX.value
  if (tx < 0) {
    if (curStep.value < scrollerPositionList.length - 1) {
      curStep.value ++
      const pp = scrollerPositionList[curStep.value]
      const startTime = performance.now()
      requestAnimationFrame(() => {smoothScrollTo(scrollerEl.value, pp * scrollerEl.value.scrollHeight, scrollerPositionTimeRight[curStep.value], startTime)})
    }
  } else if (tx > 0) {
    if (curStep.value > 0) {
      curStep.value --
      const pp = scrollerPositionList[curStep.value] * scrollerEl.value.scrollHeight
      const startTime = performance.now()
      requestAnimationFrame(() => {smoothScrollTo(scrollerEl.value, pp, scrollerPositionTimeLeft[curStep.value], startTime)})
    }
  }
}



function onClickGoNextPage() {
  isShowBtnGoNextPage.value = false
  isShowVideoFadeToNextPage.value = true
  nextTick(() => {
    videoFadeToNextPageEl.value.play()
  })
  setTimeout(() => {
    isShowSkip.value = true
  }, 2000)
}
</script>

<style lang="less" scoped>
*{
  transition: all 1s;
}
.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: 20;
  }

  >.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);
    z-index: 1;

    >.green-box{
      width: 200vw;
      height: 200vh;
      background: rgba(85, 116, 83, 0.8);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2;
      overflow: hidden;
      transition: opacity 1s ease;
    }

    >.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(225 / 308 * 100%);
    }

  }

  >.hotspot-wrap {
    position: absolute;
    left: 50%;
    top: calc(92 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
    transform: translate(-46%, 0);
    width: calc(264 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(517 / 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(50 / 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;
    animation: none;
    z-index: 10;

    >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;
    z-index:2;
  }
  >.detail-title-stem{
    font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    letter-spacing: 2px;
    transition: top 1s ease;
    position:relative;
    z-index:2;
  }
  >.detail-desc-stem{
    display: block;
    margin-top: 10%;
  }
  >.detail-desc-leaf{
    display: block;
    margin-top: 6%;
  }
  >.detail-desc-stone{
    display: block;
    margin-top: 8%;
  }



  >.progress-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15px;
    z-index: 3;

    >.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%;
    transform: translateX(-50%);
    // bottom: calc(77 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }

  >.scroller {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: transform 2s ease;
    z-index:3;

    >.inner {
      width: 100%;
    }
  }

  >.hotspot-detail {
    z-index: 21;
  }

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