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"
      :class="{last:summaryOpacity > 0}"
      :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`,
        transform: `${currentPosition != '' ? currentPosition : `translate(-50%, 0)`}`,
        transition: currentPosition != '' ? `all 1s` : ``
      }"
    >
      <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 }"
      />
      <img
        class="painting-border"
        src="@/assets/images/painting-border-new.png"
        alt=""
        draggable="false"
      >
      <img
        class="painting-stem"
        src="@/assets/images/home-painting1.jpg"
        alt=""
        draggable="false"
      >
      <img
        class="painting-stem"
        src="@/assets/images/home-painting2.jpg"
        alt=""
        draggable="false"
      >

      <img
        class="painting-stem"
        src="@/assets/images/img_fen-min.png"
        :style="{
          opacity: leafOpacity3,
          zIndex: 2,
        }"
        alt=""
        draggable="false"
      >

      <img
        class="painting-stem"
        src="@/assets/images/img_ge-min.png"
        :style="{
          opacity: leafOpacity1,
          zIndex: 2,
        }"
        alt=""
        draggable="false"
      >



      <img
        class="painting-stem"
        src="@/assets/images/img_guanmu-min.png"
        :style="{
          opacity: stoneOpacity1,
        }"
        alt=""
        draggable="false"
      >

      <img
        class="painting-stem"
        src="@/assets/images/img_jie-min.png"
        alt=""
        :style="{
          opacity: leafOpacity2,
          zIndex: 2,
        }"
        draggable="false"
      >


      <img
        class="painting-stem"
        src="@/assets/images/img_kumu-min.png"
        :style="{
          opacity: stoneOpacity2,
        }"
        alt=""
        draggable="false"
      >

      <img
        class="painting-stem"
        src="@/assets/images/img_stone_all-min.png"
        :style="{
          opacity: stoneOpacity3,
        }"
        alt=""
        draggable="false"
      >

      <img
        class="painting-stem"
        src="@/assets/images/img_stone-min.png"
        :style="{
          opacity: stoneOpacity,
        }"
        alt=""
        draggable="false"
      >

      <img
        class="painting-stem"
        src="@/assets/images/img_zhuye-min.png"
        alt=""
        :style="{
          opacity: leafOpacity,
          zIndex: 2,
        }"
        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: 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
      v-show="leafOpacity1 > 0 || leafOpacity2 > 0 || leafOpacity3 > 0"
      :style="{
        opacity: leafTextOpacity,
      }"
      class="jianbian"
    />

    <!-- 石头文字层 -->

    <div
      class="stone-text-box"
      :style="{
        opacity: stoneOpacity3,
      }"
    >
      <img
        class="stone-text"
        src="@/assets/images/stone-text-min.png"
      >
    </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"
      class="long-desc"
      :style="{
        top: `${(paintingTop + paintingHeight + 60) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: longDescOpacity,
      }"
      @touchstart="handletouchstart($event)"
      @touchend="touchEnd($event)"
    >
      <div
        class="page2-box"
        @click="isShowPaintingDesc = true"
      >
        <img
          src="@/assets/images/icon_home_detail-min.png"
          alt=""
        >
        <div>作品简介</div>
      </div>
      <div
        class="page2-box"
        @click="isShowAuthorDesc = true"
      >
        <img
          src="@/assets/images/icon_home_author-min.png"
          alt=""
        >
        <div>作者简介</div>
      </div>
      <!-- <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="up-icon"
      :style="{
        top: `${(paintingTop + paintingHeight + 315) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: longDescOpacity,
      }"
      @click="isShowAuthorDesc = true"
    >
      <img src="@/assets/images/icon_up.png">
    </div> -->
    <!-- 作品简介 -->
    <div
      v-show="isShowPaintingDesc"
      class="painting-box"
    >
      <!-- 顶部画作 -->
      <img
        class="painting-img"
        src="@/assets/images/img_painting-box.png"
        alt=""
      >
      <div
        class="text-box"
      >
        <p
          v-for="(item,index) in homepagePaintingDesc"
          :key="index"
        >
          {{ item }}
        </p>
      </div>
      <!-- <div class="bottom-box" /> -->
      <img
        class="back-btn"
        src="@/assets/images/icon_back_white.png"
        alt=""
        @click="isShowPaintingDesc = false"
      >
      <!-- <BtnBack
        class="system-btns"
        @click="isShowPaintingDesc = false"
      /> -->
    </div>

    <!-- 作者简介 -->
    <div
      v-show="isShowAuthorDesc"
      class="author-box"
    >
      <div class="author-content">
        <img
          class="author-img"
          src="@/assets/images/img_author-min.png"
        >
        <img
          class="author-name"
          src="@/assets/images/text_likan-min.png"
        >

        <div class="line" />
        <div class="text-box">
          <p
            v-for="(item, index) in homepageAuthorDesc"
            :key="index"
          >
            {{ item }}
          </p>
        </div>
      </div>
      <!-- 底部遮罩 -->
      <!-- <div class="bottom-box" /> -->
      <img
        style="position: absolute;
        bottom: 30px;
        left: 20px;
        width: 25px;"
        src="@/assets/images/icon_back_white.png"
        alt=""
        @click="isShowAuthorDesc = false"
      >
      <!-- <BtnBack
        class="system-btns"
        @click="isShowAuthorDesc = false"
      /> -->
    </div>

    <!-- 竹杆提示 -->
    <OperationTip
      v-if="stemOpacity > 0"
      class="stem-operation-h"
      direction="h"
    />
    <!-- 竹叶提示 -->
    <OperationTip
      v-if="leafOpacity > 0"
      class="leaf-operation-h"
      direction="h"
    />

    <!-- 石头提示 -->
    <OperationTip
      v-if="stoneOpacity > 0"
      class="stone-operation-h"
      direction="h"
    />

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

    <div
      class="fixed-desc detail-title-stem"
      :style="{
        top: `${paintingTop + 500 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: stemTextOpacity2,
      }"
    >
      三竿修竹
    </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 + 725) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: stemGreenOpacity,

      }"
      v-html="stemOpacity1 > 0 ? detailDescStem1 : detailDescStem2"
    />
    <div
      class="fixed-desc detail-desc-leaf"
      :style="{
        top: `${(paintingTop + 725) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
        opacity: leafGreenOpacity,
        zIndex: 4,
      }"
      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"
        :style="{
          width: `${scrollerElScrollTop / summaryHideAt * 100}%`,
        }"
      />
    </div> -->
    <ProgressBar
      :style="{ opacity: curStep != 0 ? 1: 0}"
      class="progress-bar"
      :totle-unit="5"
      :cur-percentage="curPercentage"
      @go-to-slide="goToSlide"
    />
    <OperationTip
      v-if="isStartupOver"
      class="operation-tip"
      text="向左划动"
      direction="h"
      :is-show="isShowOperationTip"
    />

    <OperationTip
      v-if="isBackFormOther"
      class="operation-tip"
      text="向左划动"
      direction="h"
    />

    <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"
        muted
        @ended="router.replace({
          name: 'MoreContentChange',
        })"
      />
    </Transition>
    <Transition name="fade-in">
      <BtnSkip
        v-if="isShowSkip"
        @click="router.replace({
          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 isShowAuthorDesc = ref(false)
const isShowPaintingDesc = ref(false)






const homepagePaintingDesc = configText.homepagePaintingDesc
const homepageAuthorDesc = configText.homepageAuthorDesc
const detailDescStem1 = configText.homepagePaintingDetailDescStem1
const detailDescStem2 = configText.homepagePaintingDetailDescStem2
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
  // console.log('当前滚动比例', scrollerElScrollTop.value / summaryHideAt, scrollerEl.value.scrollTop / scrollerEl.value.scrollHeight)
}
const isBackFormOther = ref(false)
onMounted(() => {
  scrollerEl.value.addEventListener('scroll', onScroll)
  if (window.location.href.includes('?back=1')) {
    isBackFormOther.value = true
  }
})
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 = 300
const paintingWidthMovedDown = 485
const paintingWidth = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= paintingMoveUpAt) {
    ret = paintingWidthInitial
    console.log(1, ret)
  } else if (scrollerElScrollTop.value > paintingMoveUpAt && scrollerElScrollTop.value <= paintingMoveUpFinishAt) {
    ret = (scrollerElScrollTop.value - paintingMoveUpAt) / (paintingMoveUpFinishAt - paintingMoveUpAt) * (paintingWidthMovedUp - paintingWidthInitial) + paintingWidthInitial
    console.log(2, ret)
  } else if (scrollerElScrollTop.value > paintingMoveUpFinishAt && scrollerElScrollTop.value <= paintingMoveDownAt) {
    ret = paintingWidthMovedUp
    console.log(3, ret)
  } else if (scrollerElScrollTop.value > paintingMoveDownAt && scrollerElScrollTop.value <= paintingMoveDownFinishAt) {
    ret = (scrollerElScrollTop.value - paintingMoveDownAt) / (paintingMoveDownFinishAt - paintingMoveDownAt) * (paintingWidthMovedDown - paintingWidthMovedUp) + paintingWidthMovedUp
    console.log(4, ret)
  } else {
    ret = paintingWidthMovedDown
    console.log(5, ret)
  }
  return ret
})


const paintingHeightInitial = 523
const paintingHeightMovedUp = 495
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.45
const stemHideAt = stemShowFinishAt + window.innerHeight * 0.1
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)
    ret = 0
  } else if (scrollerElScrollTop.value >= stemShowFinishAt && scrollerElScrollTop.value <= stemHideAt) {
    ret = 1
    // } else if (scrollerElScrollTop.value > stemHideAt && scrollerElScrollTop.value < stemHideFisishAt) {
  } else if (scrollerElScrollTop.value > stemHideAt) {
    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 + 220
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 stemShowText2 = stemShowAt1
const stemShowTextFinishAt2 = stemShowFinishAt1
const stemTextHideAt2 = stemHideAt2
const stemHideTextFisishAt2 = stemHideFisishAt2 + 220
const stemTextOpacity2 = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= stemShowText2) {
    ret = 0
  } else if (scrollerElScrollTop.value > stemShowText2 && scrollerElScrollTop.value < stemShowTextFinishAt2) {
    ret = (scrollerElScrollTop.value - stemShowText2) / (stemShowTextFinishAt2 - stemShowText2)
  } else if (scrollerElScrollTop.value >= stemShowTextFinishAt2 && scrollerElScrollTop.value <= stemTextHideAt2) {
    ret = 1
  } else if (scrollerElScrollTop.value > stemTextHideAt2 && scrollerElScrollTop.value < stemHideTextFisishAt2) {
    ret = 1 - (scrollerElScrollTop.value - stemTextHideAt2) / (stemHideTextFisishAt2 - stemTextHideAt2)
  } 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 = 1 - (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 stoneShowAt2 = stoneHideFinishAt1 + (0 * window.innerHeight)
const stoneShowFinishAt2 = stoneShowAt2 + (0.25 * window.innerHeight)
const stoneHideAt2 = stoneShowFinishAt2 + (0.3 * window.innerHeight)
const stoneHideFinishAt2 = stoneHideAt2 + (0.25 * window.innerHeight)
const stoneOpacity2 = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= stoneShowAt2) {
    ret = 0
  } else if (scrollerElScrollTop.value > stoneShowAt2 && scrollerElScrollTop.value < stoneShowFinishAt2) {
    ret = (scrollerElScrollTop.value - stoneShowAt2) / (stoneShowFinishAt2 - stoneShowAt2)
  } else if (scrollerElScrollTop.value >= stoneShowFinishAt2 && scrollerElScrollTop.value <= stoneHideAt2) {
    ret = 1
  } else if (scrollerElScrollTop.value > stoneHideAt2 && scrollerElScrollTop.value < stoneHideFinishAt2) {
    ret = 1 - (scrollerElScrollTop.value - stoneHideAt2) / (stoneHideFinishAt2 - stoneHideAt2)
  } else {
    ret = 0
  }
  return ret
})


const stoneShowAt3 = stoneHideFinishAt2 + (0 * window.innerHeight)
const stoneShowFinishAt3 = stoneShowAt3 + (0.25 * window.innerHeight)
const stoneHideAt3 = stoneShowFinishAt3 + (0.3 * window.innerHeight)
const stoneHideFinishAt3 = stoneHideAt3 + (0.25 * window.innerHeight)
const stoneOpacity3 = computed(() => {
  let ret = null
  if (scrollerElScrollTop.value <= stoneShowAt3) {
    ret = 0
  } else if (scrollerElScrollTop.value > stoneShowAt3 && scrollerElScrollTop.value < stoneShowFinishAt3) {
    ret = (scrollerElScrollTop.value - stoneShowAt3) / (stoneShowFinishAt3 - stoneShowAt3)
  } else if (scrollerElScrollTop.value >= stoneShowFinishAt3 && scrollerElScrollTop.value <= stoneHideAt3) {
    ret = 1
  } else if (scrollerElScrollTop.value > stoneHideAt3 && scrollerElScrollTop.value < stoneHideFinishAt3) {
    ret = 1 - (scrollerElScrollTop.value - stoneHideAt3) / (stoneHideFinishAt3 - stoneHideAt3)
  } 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 currentPosition = computed(() => {
  if (leafOpacity.value > 0) {
    return `translate(-57%, -40%) scale(3.7)`
  }
  if (leafOpacity1.value > 0) {
    return `translate(-57%, -40%) scale(3.7)`
  }
  if (leafOpacity2.value > 0) {
    return `translate(-57%, -40%) scale(3.7)`
  }
  if (leafOpacity3.value > 0) {
    return `translate(-57%, -40%) scale(3.7)`
  }
  if (stoneOpacity.value > 0) {
    return `translate(-25%, -6%) scale(2.2)`
  }
  if (stoneOpacity1.value > 0) {
    return `translate(-25%, -6%) scale(2.2)`
  }
  if (stoneOpacity2.value > 0) {
    return `translate(-25%, -6%) scale(2.2)`
  }
  if (stoneOpacity3.value > 0) {
    return `translate(-25%, -6%) scale(2.2)`
  }
  return `translate(-50%, 0)`
})



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 = stoneHideFinishAt3 + 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 >= 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.078, 0.166, 0.228, 0.290, 0.353, 0.436, 0.509, 0.561, 0.644, 0.706, 0.769, 0.831, 1]
const scrollerPositionTimeRight = [500, 300, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
const scrollerPositionTimeLeft = [500, 300, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 300]

// 进度条跳转
const goToSlide = (index) => {
  let step = 0
  switch (index) {
  case 0:
    step = 0
    break
  case 1:
    step = 2
    break
  case 2:
    step = 5
    break
  case 3:
    step = 9
    break
  case 4:
    step = 13
    break
  }
  curStep.value = step
  const pp = scrollerPositionList[curStep.value]
  const startTime = performance.now()
  requestAnimationFrame(() => { smoothScrollTo(scrollerEl.value, pp * scrollerEl.value.scrollHeight, scrollerPositionTimeRight[curStep.value], startTime) })
}


// 进度条百分比
const curPercentage = computed(() => {
  if (curStep.value == scrollerPositionList.length - 1) {
    return 100
  } else if (curStep.value == 2) {
    return 20
  } else if (curStep.value == 5) {
    return 40
  } else if (curStep.value == 9) {
    return 60
  }
  return Number.parseInt(curStep.value / scrollerPositionList.length * 100)
})

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;
    transform-origin: center;

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


  }
  >.last{
    left: calc(100% - ((225 / 308 * 100vw) * 2.35 ) / 2);
    transform:scale(1) !important;
  }
  >.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;
    }
  }

  >.stone-text-box {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 3;
    width: calc(224 / var(--9ea40744-windowSizeWhenDesignForRef)* var(--9ea40744-windowSizeInCssForRef));
    background: linear-gradient(78deg, rgba(0, 0, 0, 0) 38%, #00000045 75%);
    height: 100%;

    >.stone-text {
      position: fixed;
      top: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      z-index: 3;
      width: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
  }

  >.jianbian {
    width: 100%;
    position: fixed;
    height: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    bottom: calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #00000082 100%);
    z-index: 3;

  }

  >.painting-leaf-hight {
    position: fixed;
    z-index: 2;
    width: 100%;
    transform: translate(0px, 0px);
    left: 0;
    top: 0;
  }

  >.long-desc {
    position: absolute;
    left: 50%;
    bottom: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translate(-50%, 0);
    color: white;
    overflow: hidden;
    font-family: KaiTi, KaiTi;
    color: #FFFFFF;
    animation: none;
    display: flex;
    justify-content: space-between;
    z-index: 12;

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

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

      >div {
        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: KaiTi, KaiTi;
      }
    }


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

  >.up-icon {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    z-index: 12;

    >img {
      width: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
  }

  >.painting-box {
    width: 100%;
    height: 100%;
    background: rgba(73, 91, 71, 0.7);
    backdrop-filter: blur(22.5px);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    // align-content: center;
    align-items: center;
    // justify-content: center;
    z-index: 15;
    padding-top: 15%;
    padding-left: 10%;
    padding-right: 10%;

    >.back-btn{
      width: 25px;
      left: 20px;
      bottom: 30px;
      position: absolute;
    }
    >.painting-img{
      width: 70%;
      margin-bottom: 20px;
    }

    >.text-box {
        width: 100%;
        overflow: auto;

        >p {
          text-indent: 2em;
          margin-bottom: 10px;
          color: #FFFFFF;
          font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          line-height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-family: KaiTi, KaiTi;
        }
      }

    >.bottom-box{
      width: 100%;
      min-height: 10vh;
      background: linear-gradient( 0deg, rgba(73, 91, 71, 0.7) 0%, rgba(115,115,115,0) 100%);
      position: absolute;
      bottom: 0;
      left: 0;
    }

    >.system-btns {
      width: 30px;
      height: 30px;
      padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
      position: fixed;
      left: calc(30 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
      bottom: calc(50 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
      z-index: 2;
    }
  }

  >.author-box {
    width: 100%;
    height: 100%;
    background: rgba(73, 91, 71, 0.7);
    backdrop-filter: blur(22.5px);
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 10%;
    z-index: 15;
    padding-top: 15%;
    padding-left: 10%;
    padding-right: 10%;

    >.author-content {
      width: 100%;
      height: 100%;
      overflow: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      >.author-img {
        width: 40%;
        margin-bottom: 5px;
      }

      >.author-name {
        width: 50%;
      }

      >.line {
        width: 100%;
        min-height: 1px;
        background: #E1EDD9;
        margin: 15px auto;
        content: "";
      }

      >.text-box {
        width: 100%;

        >p {
          text-indent: 2em;
          margin-bottom: 10px;
          color: #FFFFFF;
          font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          line-height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-family: KaiTi, KaiTi;
        }
      }
    }

    >.bottom-box{
      width: 100%;
      min-height: 20vh;
      background: linear-gradient( 0deg, rgba(73, 91, 71, 0.7) 0%, rgba(115,115,115,0) 100%);
      position: absolute;
      bottom: 0;
      left: 0;
    }

    >.back-btn{
      width: 25px;
      left: 20px;
      bottom: 30px;
      position: absolute;
    }

    >.system-btns {
      // width: 100%;
      padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
      position: fixed;
      left: calc(30 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
      bottom: calc(35 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
      z-index: 34;
    }
  }

  >.stem-operation-h {
    z-index: 10;
    left: 77% !important;
    bottom: 36% !important;
  }

  >.leaf-operation-h {
    z-index: 10;
    left: 77% !important;
    bottom: 36% !important;
  }

  >.stone-operation-h {
    z-index: 10;
    left: 77% !important;
    bottom: 36% !important;
  }

  >.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(18 / 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%;
    transition: all 0.5s;
  }

  >.detail-desc-leaf {
    display: block;
    margin-top: 6%;
  }

  >.detail-desc-stone {
    display: block;
    margin-top: 8%;
  }



  >.progress-bar {
    position: absolute;
    left: 0;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 15px;
    z-index: 3;
    color: #e1edd95d;
    transition: all 1s;
    z-index: 12;

    >.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(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    z-index: 20;
    transform: translate(-50%, 0);
  }
}
</style>import { transform } from "lodash"