删除冗余文件

src/views/HomeView copy.vue

@@ -1,936 +0,0 @@
-<template>
-  <div
-    class="home"
-  >
-    <div class="bg-mask" />
-    <Transition name="fade-out">
-      <Startup
-        v-if="!store.state.haveShownStartup"
-        class="startup"
-      />
-    </Transition>
-
-    <!-- 标题 -->
-    <div
-      class="title-wrap"
-      :style="{
-        opacity: titleOpacity,
-      }"
-    >
-      <img
-        class="title"
-        src="@/assets/images/home-title.png"
-        alt=""
-        draggable="false"
-      >
-      <div class="sub-text">
-        南京博物院<br>
-        绢本 墨笔<br>
-        元 李衎<br>
-      </div>
-    </div>
-
-    <!-- 画作 -->
-    <div
-      class="painting-wrap"
-      :style="{
-        top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        width: `${paintingWidth / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        height: `${paintingHeight / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-      }"
-    >
-      <div
-        class="size-sign-h"
-        :style="{
-          opacity: sizeOpacity,
-        }"
-      >
-        <img
-          class=""
-          src="@/assets/images/size-sign-h.png"
-          alt=""
-          draggable="false"
-        >
-        <span>100.6cm</span>
-      </div>
-      <div
-        class="size-sign-v"
-        :style="{
-          opacity: sizeOpacity,
-        }"
-      >
-        <img
-          class=""
-          src="@/assets/images/size-sign-v.png"
-          alt=""
-          draggable="false"
-        >
-        <span>151.7cm</span>
-      </div>
-      <img
-        class="painting-border"
-        src="@/assets/images/painting-border-new.png"
-        alt=""
-        draggable="false"
-      >
-      <img
-        class="painting"
-
-        src="@/assets/images/home-painting.jpg"
-        alt=""
-        draggable="false"
-      >
-      <img
-        class="painting-stem"
-        :style="{
-          opacity: stemOpacity,
-        }"
-        src="@/assets/images/home-painting-stem.png"
-        alt=""
-        draggable="false"
-      >
-      <img
-        class="painting-leaf"
-        :style="{
-          opacity: leafOpacity,
-        }"
-        src="@/assets/images/home-painting-leaf.png"
-        alt=""
-        draggable="false"
-      >
-      <img
-        class="painting-stone"
-        :style="{
-          opacity: stoneOpacity,
-        }"
-        src="@/assets/images/home-painting-stone.png"
-        alt=""
-        draggable="false"
-      >
-    </div>
-
-    <!-- 热点层 -->
-    <div
-      class="hotspot-wrap"
-      :style="{
-        top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`
-      }"
-    >
-      <HotspotForHomepage
-        v-show="isShowHotspot"
-        class="hotspot-1"
-        @click="isShowHotspotDetail1 = true"
-      />
-      <HotspotForHomepage
-        v-show="isShowHotspot"
-        class="hotspot-2"
-        @click="showBigPainting"
-      />
-      <HotspotForHomepage
-        v-show="isShowHotspot"
-        class="hotspot-3"
-        @click="isShowHotspotDetail3 = true"
-      />
-    </div>
-
-    <!-- 文字介绍 -->
-    <div
-      ref="longDesc"
-      class="long-desc"
-      :style="{
-        top: `${(paintingTop + paintingHeight + 53) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        opacity: longDescOpacity,
-      }"
-    >
-      <h3>作品简介：</h3>
-      <p
-        v-for="(item, index) in homepagePaintingDesc"
-        :key="index"
-      >
-        {{ item }}
-      </p>
-      <h3>作者简介：</h3>
-      <p
-        v-for="(item, index) in homepageAuthorDesc"
-        :key="index"
-      >
-        {{ item }}
-      </p>
-    </div>
-    <div
-      class="fixed-desc detail-desc-stem"
-      :style="{
-        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        opacity: stemOpacity,
-      }"
-    >
-      {{ detailDescStem }}
-    </div>
-    <div
-      class="fixed-desc detail-desc-leaf"
-      :style="{
-        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        opacity: leafOpacity,
-      }"
-    >
-      {{ detailDescLeaf }}
-    </div>
-    <div
-      class="fixed-desc detail-desc-stone"
-      :style="{
-        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        opacity: stoneOpacity,
-      }"
-    >
-      {{ detailDescStone }}
-    </div>
-    <div
-      class="fixed-desc summary-desc"
-      :style="{
-        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        opacity: summaryOpacity,
-      }"
-    >
-      {{ summaryDesc }}
-    </div>
-
-    <div
-      class="progress-bar"
-    >
-      <div class="bar-artwork-desc" />
-      <img
-        class="progress-bar-node-1"
-        src="@/assets/images/progress-bar-node-1.png"
-        alt=""
-        draggable="false"
-      >
-      <div class="bar-author-desc" />
-      <img
-        class="progress-bar-node-2"
-        src="@/assets/images/progress-bar-node-2.png"
-        alt=""
-        draggable="false"
-      >
-      <div class="bar-artwork-enjoy" />
-      <img
-        class="progress-bar-node-3"
-        src="@/assets/images/progress-bar-node-3.png"
-        alt=""
-        draggable="false"
-      >
-
-      <div
-        class="mask"
-        :style="{
-          width: `${(1 - scrollerElScrollTop / summaryHideAt) * 100}%`,
-        }"
-      />
-    </div>
-    <OperationTip
-      v-if="isStartupOver"
-      class="operation-tip"
-      text="了解作品"
-      :is-show="isShowOperationTip"
-    />
-
-    <div
-      ref="scrollerEl"
-      class="scroller"
-    >
-      <div
-        class="inner"
-        :style="{
-          height: summaryHideAt + windowHeight + 'px',
-        }"
-      />
-    </div>
-
-    <!-- 热点详情页 -->
-    <Transition name="fade-in-out">
-      <HotspotDetail1
-        v-if="isShowHotspotDetail1"
-        class="hotspot-detail"
-        @close="isShowHotspotDetail1 = false"
-      />
-    </Transition>
-    <!-- <Transition name="fade-in-out">
-      <PaintingDetail
-        v-if="isShowPaintingDetail"
-        :thumb="require(`@/assets/images/home-painting.jpg`)"
-        :title="'修篁树石图'"
-        :author="'李衎'"
-        :age="'元'"
-        :subtitle="'轴 绢本 墨笔'"
-        :location="'南京博物院藏'"
-        :painting-desc="homepagePaintingDesc.join('\n\n')"
-        :author-desc="homepageAuthorDesc.join('\n\n')"
-        :big-painting="require(`@/assets/images/home-painting-big.jpg`)"
-        :need-operation-tip="true"
-        class="hotspot-detail painting-detail"
-        @close="isShowPaintingDetail = false"
-      />
-    </Transition> -->
-    <Transition name="fade-in-out">
-      <HotspotDetail3
-        v-if="isShowHotspotDetail3"
-        class="hotspot-detail"
-        @close="isShowHotspotDetail3 = false"
-      />
-    </Transition>
-
-    <Transition name="fade-in">
-      <video
-        v-if="isShowVideoFadeToNextPage"
-        ref="videoFadeToNextPageEl"
-        class="fade-to-next-page"
-        src="@/assets/videos/fade-from-home-to-more-content.mp4"
-        playsinline
-        muted
-        webkit-playsinline="true"
-        x5-video-player-type="h5"
-        @ended="router.replace({
-          name: 'MoreContent',
-        })"
-      />
-    </Transition>
-    <Transition name="fade-in">
-      <BtnSkip
-        v-if="isShowSkip"
-        @click="router.replace({
-          name: 'MoreContent',
-        })"
-      />
-    </Transition>
-    <BtnClickMe
-      class="go-next-page"
-      text="点击继续"
-      :is-show="isShowBtnGoNextPage"
-      @click="onClickGoNextPage"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch, onMounted, inject, onBeforeUnmount, onUnmounted, nextTick } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
-import Startup from '@/views/StartupView.vue'
-import useSizeAdapt from "@/useFunctions/useSizeAdapt"
-import HotspotDetail1 from '@/views/HotspotDetail1.vue'
-// import PaintingDetail from '@/views/PaintingDetail.vue'
-import HotspotDetail3 from '@/views/HotspotDetail3.vue'
-import { api as viewerApi } from 'v-viewer'
-import { useWindowSize } from '@vueuse/core'
-
-const { width: windowWidth, height: windowHeight } = useWindowSize()
-
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
-const $env = inject('$env')
-
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
-
-const homepagePaintingDesc = configText.homepagePaintingDesc
-const homepageAuthorDesc = configText.homepageAuthorDesc
-const detailDescStem = configText.homepagePaintingDetailDescStem
-const detailDescLeaf = configText.homepagePaintingDetailDescLeaf
-const detailDescStone = configText.homepagePaintingDetailDescStone
-const summaryDesc = configText.homepagePaintingSummary
-
-const scrollerEl = ref(null)
-const scrollerElScrollTop = ref(0)
-function onScroll() {
-  scrollerElScrollTop.value = scrollerEl.value.scrollTop
-}
-onMounted(() => {
-  scrollerEl.value.addEventListener('scroll', onScroll)
-})
-onBeforeUnmount(() => {
-  scrollerEl.value.removeEventListener('scroll', onScroll)
-})
-
-const isShowOperationTip = ref(true)
-watch(scrollerElScrollTop, (v) => {
-  if (v > 0) {
-    isShowOperationTip.value = false
-  }
-})
-
-const haveShownStartup = computed(() => {
-  return store.state.haveShownStartup
-})
-const isStartupOver = ref(false)
-const unwatch = watch(haveShownStartup, (v) => {
-  if (v) {
-    setTimeout(() => {
-      isStartupOver.value = true
-    }, 2000)
-    unwatch()
-  }
-})
-
-
-const titleHideAt = window.innerHeight * 0
-const titleHideFinishAt = window.innerHeight * 0.75
-const titleOpacity = computed(() => {
-  let ret = null
-  if (scrollerElScrollTop.value <= titleHideAt) {
-    ret = 1
-  } else {
-    ret = 1 - (scrollerElScrollTop.value - titleHideAt) / (titleHideFinishAt - titleHideAt)
-  }
-  return ret
-})
-
-const paintingMoveUpAt = window.innerHeight * 0
-const paintingTopInitial = 236
-const paintingMoveUpFinishAt = paintingMoveUpAt + window.innerHeight * 1
-const paintingTopMovedUp = 41
-const paintingMoveDownAt = paintingMoveUpFinishAt + window.innerHeight * 0.5
-const paintingMoveDownFinishAt = paintingMoveDownAt + window.innerHeight * 0.25
-const paingtingTopMovedDown = 90
-const paintingTop = computed(() => {
-  let ret = null
-  if (scrollerElScrollTop.value <= paintingMoveUpAt) {
-    ret = paintingTopInitial
-  } else if (scrollerElScrollTop.value > paintingMoveUpAt && scrollerElScrollTop.value <= paintingMoveUpFinishAt) {
-    ret = (scrollerElScrollTop.value - paintingMoveUpAt) / (paintingMoveUpFinishAt - paintingMoveUpAt) * (paintingTopMovedUp - paintingTopInitial) + paintingTopInitial
-  } else if (scrollerElScrollTop.value > paintingMoveUpFinishAt && scrollerElScrollTop.value <= paintingMoveDownAt) {
-    ret = paintingTopMovedUp
-  } else if (scrollerElScrollTop.value > paintingMoveDownAt && scrollerElScrollTop.value <= paintingMoveDownFinishAt) {
-    ret = (scrollerElScrollTop.value - paintingMoveDownAt) / (paintingMoveDownFinishAt - paintingMoveDownAt) * (paingtingTopMovedDown - paintingTopMovedUp) + paintingTopMovedUp
-  } else {
-    ret = paingtingTopMovedDown
-  }
-  return ret
-})
-
-const paintingWidthInitial = 308
-const paintingWidthMovedUp = 250
-const paintingWidthMovedDown = 308
-const paintingWidth = computed(() => {
-  let ret = null
-  if (scrollerElScrollTop.value <= paintingMoveUpAt) {
-    ret = paintingWidthInitial
-  } else if (scrollerElScrollTop.value > paintingMoveUpAt && scrollerElScrollTop.value <= paintingMoveUpFinishAt) {
-    ret = (scrollerElScrollTop.value - paintingMoveUpAt) / (paintingMoveUpFinishAt - paintingMoveUpAt) * (paintingWidthMovedUp - paintingWidthInitial) + paintingWidthInitial
-  } else if (scrollerElScrollTop.value > paintingMoveUpFinishAt && scrollerElScrollTop.value <= paintingMoveDownAt) {
-    ret = paintingWidthMovedUp
-  } else if (scrollerElScrollTop.value > paintingMoveDownAt && scrollerElScrollTop.value <= paintingMoveDownFinishAt) {
-    ret = (scrollerElScrollTop.value - paintingMoveDownAt) / (paintingMoveDownFinishAt - paintingMoveDownAt) * (paintingWidthMovedDown - paintingWidthMovedUp) + paintingWidthMovedUp
-  } else {
-    ret = paintingWidthMovedDown
-  }
-  return ret
-})
-
-const paintingHeightInitial = 523
-const paintingHeightMovedUp = 425
-const paintingHeightMovedDown = 523
-const paintingHeight = computed(() => {
-  let ret = null
-  if (scrollerElScrollTop.value <= paintingMoveUpAt) {
-    ret = paintingHeightInitial
-  } else if (scrollerElScrollTop.value > paintingMoveUpAt && scrollerElScrollTop.value <= paintingMoveUpFinishAt) {
-    ret = (scrollerElScrollTop.value - paintingMoveUpAt) / (paintingMoveUpFinishAt - paintingMoveUpAt) * (paintingHeightMovedUp - paintingHeightInitial) + paintingHeightInitial
-  } else if (scrollerElScrollTop.value > paintingMoveUpFinishAt && scrollerElScrollTop.value <= paintingMoveDownAt) {
-    ret = paintingHeightMovedUp
-  } else if (scrollerElScrollTop.value > paintingMoveDownAt && scrollerElScrollTop.value <= paintingMoveDownFinishAt) {
-    ret = (scrollerElScrollTop.value - paintingMoveDownAt) / (paintingMoveDownFinishAt - paintingMoveDownAt) * (paintingHeightMovedDown - paintingHeightMovedUp) + paintingHeightMovedUp
-  } else {
-    ret = paintingHeightMovedDown
-  }
-  return ret
-})
-
-const longDesc = ref(null)
-const longDescShowFinishAt = window.innerHeight * 0.25
-const longDescHideAt = longDescShowFinishAt + window.innerHeight * 1
-const longDescHideFinishAt = longDescHideAt + window.innerHeight * 0.25
-const longDescOpacity = computed(() => {
-  let ret = null
-  if (scrollerElScrollTop.value <= longDescShowFinishAt) {
-    ret = 1 - (longDescShowFinishAt - scrollerElScrollTop.value) / (longDescShowFinishAt)
-  } else if (scrollerElScrollTop.value > longDescShowFinishAt && scrollerElScrollTop.value < longDescHideAt) {
-    ret = 1
-  } else {
-    ret = 1 - (scrollerElScrollTop.value - longDescHideAt) / (longDescHideFinishAt - longDescHideAt)
-  }
-  return ret
-})
-watch(scrollerElScrollTop, (vNew, vOld) => {
-  if (vNew > paintingMoveUpFinishAt) {
-    longDesc.value.scrollTop = vNew - paintingMoveUpFinishAt
-  } else if (vNew < vOld && vNew <= paintingMoveUpFinishAt) {
-    longDesc.value.scrollTop = 0
-  }
-})
-
-const stemShowAt = longDescHideFinishAt + window.innerHeight * 0
-const stemShowFinishAt = stemShowAt + window.innerHeight * 0.25
-const stemHideAt = stemShowFinishAt + window.innerHeight * 0.3
-const stemHideFisishAt = stemHideAt + window.innerHeight * 0.25
-const stemOpacity = computed(() => {
-  let ret = null
-  if (scrollerElScrollTop.value <= stemShowAt) {
-    ret = 0
-  } else if (scrollerElScrollTop.value > stemShowAt && scrollerElScrollTop.value < stemShowFinishAt) {
-    ret = (scrollerElScrollTop.value - stemShowAt) / (stemShowFinishAt - stemShowAt)
-  } else if (scrollerElScrollTop.value >= stemShowFinishAt && scrollerElScrollTop.value <= stemHideAt) {
-    ret = 1
-  } else if (scrollerElScrollTop.value > stemHideAt && scrollerElScrollTop.value < stemHideFisishAt) {
-    ret = 1 - (scrollerElScrollTop.value - stemHideAt) / (stemHideFisishAt - stemHideAt)
-  } else {
-    ret = 0
-  }
-  return ret
-})
-
-const leafShowAt = stemHideFisishAt + (0 * window.innerHeight)
-const leafShowFinishAt = leafShowAt + (0.25 * window.innerHeight)
-const leafHideAt = leafShowFinishAt + (0.3 * window.innerHeight)
-const leafHideFisishAt = leafHideAt + (0.25 * window.innerHeight)
-const leafOpacity = computed(() => {
-  let ret = null
-  if (scrollerElScrollTop.value <= leafShowAt) {
-    ret = 0
-  } else if (scrollerElScrollTop.value > leafShowAt && scrollerElScrollTop.value < leafShowFinishAt) {
-    ret = (scrollerElScrollTop.value - leafShowAt) / (leafShowFinishAt - leafShowAt)
-  } else if (scrollerElScrollTop.value >= leafShowFinishAt && scrollerElScrollTop.value <= leafHideAt) {
-    ret = 1
-  } else if (scrollerElScrollTop.value > leafHideAt && scrollerElScrollTop.value < leafHideFisishAt) {
-    ret = 1 - (scrollerElScrollTop.value - leafHideAt) / (leafHideFisishAt - leafHideAt)
-  } else {
-    ret = 0
-  }
-  return ret
-})
-
-const stoneShowAt = leafHideFisishAt + (0 * window.innerHeight)
-const stoneShowFinishAt = stoneShowAt + (0.25 * window.innerHeight)
-const stoneHideAt = stoneShowFinishAt + (0.3 * window.innerHeight)
-const stoneHideFinishAt = stoneHideAt + (0.25 * window.innerHeight)
-const stoneOpacity = computed(() => {
-  let ret = null
-  if (scrollerElScrollTop.value <= stoneShowAt) {
-    ret = 0
-  } else if (scrollerElScrollTop.value > stoneShowAt && scrollerElScrollTop.value < stoneShowFinishAt) {
-    ret = (scrollerElScrollTop.value - stoneShowAt) / (stoneShowFinishAt - stoneShowAt)
-  } else if (scrollerElScrollTop.value >= stoneShowFinishAt && scrollerElScrollTop.value <= stoneHideAt) {
-    ret = 1
-  } else if (scrollerElScrollTop.value > stoneHideAt && scrollerElScrollTop.value < stoneHideFinishAt) {
-    ret = 1 - (scrollerElScrollTop.value - stoneHideAt) / (stoneHideFinishAt - stoneHideAt)
-  } else {
-    ret = 0
-  }
-  return ret
-})
-
-const summaryShowAt = stoneHideFinishAt + window.innerHeight * 0
-const summaryShowFinishAt = summaryShowAt + window.innerHeight * 0.25
-const summaryHideAt = summaryShowFinishAt + window.innerHeight * 0.3
-const summaryHideFisishAt = summaryHideAt + window.innerHeight * 0.25
-const summaryOpacity = computed(() => {
-  let ret = null
-  if (scrollerElScrollTop.value <= summaryShowAt) {
-    ret = 0
-  } else if (scrollerElScrollTop.value > summaryShowAt && scrollerElScrollTop.value < summaryShowFinishAt) {
-    ret = (scrollerElScrollTop.value - summaryShowAt) / (summaryShowFinishAt - summaryShowAt)
-  } else if (scrollerElScrollTop.value >= summaryShowFinishAt && scrollerElScrollTop.value <= summaryHideAt) {
-    ret = 1
-  } else if (scrollerElScrollTop.value > summaryHideAt && scrollerElScrollTop.value < summaryHideFisishAt) {
-    ret = 1 - (scrollerElScrollTop.value - summaryHideAt) / (summaryHideFisishAt - summaryHideAt)
-  } else {
-    ret = 0
-  }
-  return ret
-})
-
-const sizeShowAt = stemShowAt
-const sizeShowFinishAt = stemShowFinishAt
-const sizeHideAt = stoneHideAt
-const sizeHideFisishAt = stoneHideFinishAt
-const sizeOpacity = computed(() => {
-  let ret = null
-  if (scrollerElScrollTop.value <= sizeShowAt) {
-    ret = 0
-  } else if (scrollerElScrollTop.value > sizeShowAt && scrollerElScrollTop.value < sizeShowFinishAt) {
-    ret = (scrollerElScrollTop.value - sizeShowAt) / (sizeShowFinishAt - sizeShowAt)
-  } else if (scrollerElScrollTop.value >= sizeShowFinishAt && scrollerElScrollTop.value <= sizeHideAt) {
-    ret = 1
-  } else if (scrollerElScrollTop.value > sizeHideAt && scrollerElScrollTop.value < sizeHideFisishAt) {
-    ret = 1 - (scrollerElScrollTop.value - sizeHideAt) / (sizeHideFisishAt - sizeHideAt)
-  } else {
-    ret = 0
-  }
-  return ret
-})
-
-const isShowHotspot = computed(() => {
-  let ret = null
-  if (scrollerElScrollTop.value <= sizeShowAt) {
-    ret = false
-  } else {
-    return true
-  }
-  return ret
-})
-
-const isShowHotspotDetail1 = ref(false)
-// const isShowPaintingDetail = ref(false)
-const isShowHotspotDetail3 = ref(false)
-
-function showBigPainting() {
-  viewerApi({
-    images: [require(`@/assets/images/home-painting-big.jpg`)],
-  })
-}
-
-/**
- * 跳转新页面
- */
-const videoFadeToNextPageEl = ref(null)
-const isShowVideoFadeToNextPage = ref(false)
-const isShowSkip = ref(false)
-// const fingerPosYWhenTouchStart = ref(0)
-// const isAtBottomWhenTouchStart = ref(false)
-// const handletouchstart = (event) => {
-//   fingerPosYWhenTouchStart.value = event.changedTouches[0].pageY
-//   if (Math.abs(scrollerEl.value.scrollTop + scrollerEl.value.clientHeight - scrollerEl.value.scrollHeight) <= 1) {
-//     isAtBottomWhenTouchStart.value = true
-//   } else {
-//     isAtBottomWhenTouchStart.value = false
-//   }
-// }
-// const touchMove = (event) => {
-//   let currentY = event.changedTouches[0].pageY
-//   let tY = currentY - fingerPosYWhenTouchStart.value
-//   if (tY < -1 && isAtBottomWhenTouchStart.value) {
-//     isShowVideoFadeToNextPage.value = true
-//     nextTick(() => {
-//       videoFadeToNextPageEl.value.play()
-//     })
-//     setTimeout(() => {
-//       isShowSkip.value = true
-//     }, 2000)
-//   }
-// }
-const isShowBtnGoNextPage = ref(false)
-watch(scrollerElScrollTop, (v) => {
-  if (Math.abs(v + windowHeight.value - scrollerEl.value.scrollHeight) < 3) {
-    isShowBtnGoNextPage.value = true
-  } else {
-    isShowBtnGoNextPage.value = false
-  }
-})
-function onClickGoNextPage() {
-  isShowBtnGoNextPage.value = false
-  isShowVideoFadeToNextPage.value = true
-  nextTick(() => {
-    videoFadeToNextPageEl.value.play()
-  })
-  setTimeout(() => {
-    isShowSkip.value = true
-  }, 2000)
-}
-</script>
-
-<style lang="less" scoped>
-.home {
-  width: 100%;
-  height: 100%;
-  background-image: url(@/assets/images/home-painting-line-small.jpg);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center center;
-  // 滚动条，只设置某一项可能导致不生效。
-  ::-webkit-scrollbar { width: 0; height: 0; }
-  >.bg-mask{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(60, 89, 71, 0.65);
-    backdrop-filter: blur(calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
-  }
-  >.startup{
-    z-index: 10;
-  }
-  >.title-wrap{
-    position: absolute;
-    left: 50%;
-    top: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    transform: translate(-50%);
-    width: calc(43 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(180 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    z-index: 5;
-    >img.title{
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-    }
-    >.sub-text{
-      position: absolute;
-      left: 110%;
-      top: 46%;
-      transform: translateY(-50%);
-      writing-mode: vertical-lr;
-      font-family: KaiTi;
-      font-weight: 400;
-      font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      color: #FFFFFF;
-      line-height: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      white-space: pre;
-      letter-spacing: 0.2em;
-      text-align: center;
-    }
-  }
-  >.painting-wrap{
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, 0);
-    >.size-sign-h{
-      position: absolute;
-      left: 50%;
-      top: 0;
-      transform: translate(-50%, -105%);
-      width: calc(245 / 308 * 100%);
-      >img{
-        width: 100%;
-      }
-      >span{
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        font-family: KaiTi;
-        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;
-        font-weight: 400;
-        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        color: #FFFFFF;
-        line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        text-shadow: 0px 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #F8DD86;
-        writing-mode: vertical-lr;
-      }
-    }
-    >img.painting-border{
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-    }
-    >img.painting, img.painting-stem, img.painting-leaf, img.painting-stone{
-      position: absolute;
-      left: 50%;
-      top: 54%;
-      transform: translate(-50%, -50%);
-      width: calc(245 / 308 * 100%);
-    }
-  }
-  >.hotspot-wrap{
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, 0);
-    width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(522 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    z-index: 7;
-    pointer-events: none;
-    &>div{
-      z-index: 100;
-    }
-    >.hotspot-1{
-      position: absolute;
-      top: calc(54 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      right: calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      pointer-events: initial;
-    }
-    >.hotspot-2{
-      position: absolute;
-      left: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      top: calc(222 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      pointer-events: initial;
-    }
-    >.hotspot-3{
-      position: absolute;
-      bottom: calc(-10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      right: calc(-10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      pointer-events: initial;
-    }
-  }
-  >.long-desc{
-    position: absolute;
-    left: 50%;
-    bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    transform: translate(-50%, 0);
-    color: white;
-    overflow: auto;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    font-family: KaiTi;
-    color: #FFFFFF;
-    >h3{
-      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      margin-bottom: 0.5em;
-      font-weight: 600;
-    }
-    >p{
-      font-weight: 400;
-      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      text-align: justify;
-      margin-bottom: 0.5em;
-    }
-  }
-  >.fixed-desc{
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: 20%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-family: KaiTi;
-    color: #FFFFFF;
-    font-weight: 400;
-    font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    text-align: justify;
-  }
-  >.progress-bar{
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 15px;
-    >.bar-artwork-desc{
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      right: 10px;
-      height: 3px;
-      background-color: #A9D185;
-    }
-    >img.progress-bar-node-1{
-      position: absolute;
-      left: calc(0.6 * v-bind('longDescHideFinishAt') / v-bind('summaryHideAt') * 100%);
-      bottom: 1px;
-      width: 2.41px;
-      height: 10.23px
-    }
-    >.bar-author-desc{
-      position: absolute;
-      left: 12px;
-      bottom: 0;
-      right: calc(v-bind('longDescHideFinishAt') / v-bind('summaryHideAt') * 100%);
-      height: 3px;
-      background: #A9D185;
-    }
-    >img.progress-bar-node-2{
-      position: absolute;
-      left: calc(v-bind('longDescHideFinishAt') / v-bind('summaryHideAt') * 100%);
-      bottom: 1px;
-      width: 7.5px;
-      height: 10.8px
-    }
-    >.bar-artwork-enjoy{
-      position: absolute;
-      left: calc(v-bind('stoneShowAt') / v-bind('summaryHideAt') * 100%);
-      bottom: 0;
-      right: 0;
-      height: 3px;
-      background: #A9D185;
-    }
-    >img.progress-bar-node-3{
-      position: absolute;
-      right: 0;
-      bottom: 1px;
-      width: 9.7px;
-      height: 10.8px
-    }
-
-    > .mask{
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      height: 15px;
-      background-color: #6e8175;
-    }
-  }
-  >.operation-tip{
-    position: absolute;
-    left: 50%;
-    bottom: calc(77 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    transform: translateX(-50%);
-  }
-  >.scroller{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    >.inner{
-      width: 100%;
-    }
-  }
-  >.hotspot-detail{
-    z-index: 10;
-  }
-  >.hotspot-detail.painting-detail{
-    backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
-  }
-  >video.fade-to-next-page{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    z-index: 20;
-  }
-
-  >button.go-next-page{
-    position: absolute;
-    left: 50%;
-    bottom: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    z-index: 20;
-    transform: translate(-50%, 0);
-  }
-}
-</style>

src/views/HotspotDetail1 copy.vue

@@ -1,160 +0,0 @@
-<template>
-  <div class="hotspot-detail-1">
-    <div class="bg-mask" />
-    <div class="row row-1">
-      <div class="text">
-        <h3>
-          {{ craftInfo[3].title }}666
-        </h3>
-        <p>
-          {{ craftInfo[3].desc }}
-        </p>
-      </div>
-      <div class="image">
-        <img
-          class=""
-          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[3].title}.png`"
-          alt=""
-          draggable="false"
-        >
-      </div>
-    </div>
-    <div class="row row-2">
-      <div class="text">
-        <h3>
-          {{ craftInfo[4].title }}
-        </h3>
-        <p>
-          {{ craftInfo[4].desc }}
-        </p>
-      </div>
-      <div class="image">
-        <img
-          class=""
-          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[4].title}.png`"
-          alt=""
-          draggable="false"
-        >
-      </div>
-    </div>
-    <div class="row row-3">
-      <div class="text">
-        <h3>
-          {{ craftInfo[5].title }}
-        </h3>
-        <p>
-          {{ craftInfo[5].desc }}
-        </p>
-      </div>
-      <div class="image">
-        <img
-          class=""
-          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[5].title}.png`"
-          alt=""
-          draggable="false"
-        >
-      </div>
-    </div>
-    <BtnBack
-      color="green"
-      @click="emit('close')"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch, onMounted, inject } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
-import useSizeAdapt from "@/useFunctions/useSizeAdapt"
-
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
-
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
-const $env = inject('$env')
-
-const emit = defineEmits(['close'])
-
-const craftInfo = configText.craft
-
-</script>
-
-<style lang="less" scoped>
-.hotspot-detail-1{
-  position: absolute;
-  left: 0;
-  top: 0;
-  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;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  >.bg-mask{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(48, 74, 56, 0.70);
-    backdrop-filter: blur(calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
-    z-index: -1;
-  }
-  >.row{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    >.text{
-      width: calc(170 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >h3{
-        font-family: KaiTi;
-        font-weight: 400;
-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        color: #FFFFFF;
-        line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        margin-bottom: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        text-align: end;
-      }
-      >p{
-        font-family: KaiTi;
-        font-weight: 400;
-        font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        color: rgba(255, 255, 255, 0.8);
-        line-height: 1.3;
-        text-align: justify;
-      }
-    }
-    >.image{
-      flex: 0 0 auto;
-      width: calc(159 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(159 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      border-radius: 50%;
-      border: 1px solid #FFFFFF;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      >img{
-        width: calc(131 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(131 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        border-radius: 50%;
-      }
-    }
-  }
-  >.row-1{
-    flex-direction: row-reverse
-  }
-  >.row-3{
-    flex-direction: row-reverse
-  }
-}
-</style>

src/views/PoemList copy 2.vue

@@ -1,775 +0,0 @@
-<template>
-  <!-- pc端才使用 v-touch-->
-  <!--
-    v-touch:swipe.left="() => onSwipeChange(1)"
-    v-touch:swipe.right="() => onSwipeChange(-1)"
-    :swipe-options="{ direction: 'horizontal' }"
-
--->
-  <div
-    class="poem-list-page"
-    @touchstart="(e) => touchstart(e.touches[0].pageX)"
-    @touchmove="(e) => touchmove(e.touches[0].pageX)"
-    @touchend="(e) => touchend((val) => onSwipeChange(val))"
-  >
-    <div
-      class="RWbox"
-      :style="`width: ${domWidth}px; left:-${
-        baseRWboxLeft ? 500 : indexAc * pageWidth
-      }px`"
-    >
-      <div
-        v-for="(item1, index1) in listRes"
-        :key="index1"
-        :class="`ROW ROW${item1.waiClass + 1} ROWW${index1 + 1}`"
-        :style="`width:${pageWidth}px; opacity:${
-          index1 === indexAc ? '1' : isOpcMove ? '0' : ''
-        }`"
-      >
-        <img
-          v-for="(item2, index2) in item1.imgArr"
-          :key="index2"
-          :style="`transform: translateX(${isMoveFu(
-            index1,
-            item2.moveNum
-          )}px) translateZ(0);`"
-          :class="item2.classTxt"
-          :src="require(`@/assets/images/RW/${item2.imgName}.png`)"
-          alt=""
-        >
-
-        <!-- 诗句内容 -->
-        <div
-          class="ROWtxt"
-          :class="[`typesetting-${getTypesettingIdx(item1['类型'])}`]"
-        >
-          <div class="inner-wrap">
-            <div class="title-wrap">
-              <h1>《{{ item1["标题"] }}》</h1>
-              <div class="sub-title">
-                <span class="author">{{ item1["作者"] }}</span>
-                <span class="age">{{ item1["朝代"] }}</span>
-              </div>
-            </div>
-            <p>{{ item1["正文"] }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 最底部的文字提示 -->
-    <div :class="`RWind ${txtTit ? 'RWindShow' : ''}`">
-      暂无更多内容
-    </div>
-
-    <!-- 操作提示 -->
-    <OperationTip
-      class="operation-tip"
-      :direction="'h'"
-      :text="'下一章'"
-      color="green"
-      :is-show="isShowOperationTip"
-    />
-
-    <!-- 返场视频 -->
-    <div :class="`backVideo ${backVideoFlag ? 'backVideoShow' : ''}`">
-      <video
-        ref="backVideoRef"
-        src="@/assets/images/RW/play.mp4"
-        playsinline
-        muted
-        webkit-playsinline="true"
-        x5-video-player-type="h5"
-      />
-    </div>
-
-    <!-- 返回按钮 -->
-    <div class="RWback">
-      <BtnBack
-        class="button-back"
-        @click="btnBackFu"
-      />
-    </div>
-
-    <!-- 选择 时代 -->
-    <div
-      :class="`RWsBtn ${ageFlga ? 'RWsBtnHide' : ''}`"
-      @click="ageFlga = true"
-    >
-      <img
-        class=""
-        :src="require(`@/assets/images/icon_menu.png`)"
-        alt=""
-      >
-    </div>
-
-    <!-- 选择时代出来的元素 -->
-    <div :class="`RWage ${ageFlga ? 'RWageShow' : ''}`">
-      <div
-        v-for="item in ageList"
-        :key="item"
-        :class="`RWageRow ${ageAc === item ? 'RWageRowAc' : ''}`"
-        @click="cutAgeFu(item)"
-      >
-        {{ item }}
-      </div>
-      <div
-        class="RWageImg"
-        @click="ageFlga = false"
-      >
-        <img
-          class=""
-          :src="require(`@/assets/images/icon_close.png`)"
-          alt=""
-        >
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue"
-import { useRouter } from "vue-router"
-import useSizeAdapt from "@/useFunctions/useSizeAdapt"
-import { arrList } from "./PoemList.js"
-import useMoveFu from "../moveFu"
-
-/**
- * 排版
- */
-function getTypesettingIdx(poemType) {
-  switch (poemType) {
-  case "七绝":
-    return 1
-  case "七律":
-    return 2
-  case "五绝":
-    return 3
-  case "五律":
-    return 4
-  default:
-    return 2
-  }
-}
-
-const { touchstart, touchmove, touchend } = useMoveFu()
-
-// 提示语的显示隐藏
-const titShow = ref(true)
-
-const router = useRouter()
-// 返场视频ref
-const backVideoRef = ref("")
-const backVideoFlag = ref(false)
-
-// 点击返回
-const btnBackFu = () => {
-  backVideoRef.value.play()
-  setTimeout(() => {
-    backVideoFlag.value = true
-  }, 100)
-
-  setTimeout(() => {
-    router.replace({
-      name: "MoreContent",
-      query: {
-        anchorIdx: 1,
-      },
-    })
-  }, 2200)
-}
-
-const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
-
-const listRes = ref(arrList)
-
-// 元素总宽度
-const domWidth = ref(0)
-const pageWidth = ref(0)
-
-// 当前选中索引
-const indexAc = ref(0)
-
-const baseRWboxLeft = ref(true)
-
-onMounted(() => {
-  setTimeout(() => {
-    baseRWboxLeft.value = false
-  }, 500)
-})
-
-// 底部文字提示显示和隐藏
-const txtTit = ref(false)
-
-const poemList = configExcel["诗词"]
-
-const isOpcMove = ref(true)
-
-// 时代数组
-const ageList = ref([])
-// 时代选中
-const ageAc = ref(poemList[0]["朝代"])
-
-// 时代显示隐藏切换
-const ageFlga = ref(false)
-
-// 切换时代
-const cutAgeFu = (val) => {
-  const index = listRes.value.findIndex((v) => v["朝代"] === val)
-
-  if (indexAc.value === index) return
-
-  titShow.value = false
-
-  isOpcMove.value = false
-
-  setTimeout(() => {
-    isOpcMove.value = true
-  }, 500)
-  indexAc.value = index
-  ageAc.value = val
-}
-
-onMounted(() => {
-  const tempArr = []
-  const imgDataLenght = arrList.length
-  // 整个数组能分为多少段，向上取整
-  const isArrNum = Math.ceil(poemList.length / imgDataLenght)
-  for (let i = 0; i < isArrNum; i++) {
-    tempArr.push(poemList.slice(i * imgDataLenght, (i + 1) * imgDataLenght))
-  }
-
-  const ageListTemp = []
-
-  const arrRes = []
-
-  tempArr.forEach((v1) => {
-    v1.forEach((v2, i2) => {
-      v2.imgArr = arrList[i2]
-      v2.waiClass = i2
-      arrRes.push(v2)
-      if (!ageListTemp.includes(v2["朝代"])) ageListTemp.push(v2["朝代"])
-    })
-  })
-  // console.log("-----", arrRes)
-  ageList.value = ageListTemp
-  listRes.value = arrRes
-
-  const fullWidth = window.innerWidth >= 500 ? 500 : window.innerWidth
-
-  pageWidth.value = fullWidth
-  // 总盒子的宽度
-  domWidth.value = fullWidth * poemList.length
-})
-
-// 向右是-1
-// 向左是 1
-const indexFlag = ref(0)
-const isShowOperationTip = ref(true)
-
-// 左右滑动
-const onSwipeChange = (val) => {
-  isShowOperationTip.value = false
-  let numResTemp = indexAc.value + val
-
-  let indexFlagTemp = -val
-
-  if (val === -1 && indexAc.value === 0) {
-    // 第一个页面左滑
-
-    txtTit.value = true
-    setTimeout(() => {
-      txtTit.value = false
-    }, 1000)
-    return
-  }
-  if (val === 1 && indexAc.value === listRes.value.length - 1) {
-    // numResTemp = 0
-
-    txtTit.value = true
-    setTimeout(() => {
-      txtTit.value = false
-    }, 1000)
-    return
-  }
-
-  titShow.value = false
-
-  indexAc.value = numResTemp
-
-  indexFlag.value = indexFlagTemp
-
-  // 底部朝代也要变化
-  ageAc.value = listRes.value[numResTemp]["朝代"]
-}
-
-// 是否触发移动的逻辑
-const isMoveFu = (index, num) => {
-  let numRes
-  if (index === indexAc.value) numRes = 0
-  else numRes = indexFlag.value * num * 2
-
-  return numRes
-}
-</script>
-
-<style lang="less" scoped>
-body {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-}
-
-.poem-list-page {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-color: #f3f4ef;
-
-  .RWsBtn {
-    position: absolute;
-    z-index: 22;
-    right: 20px;
-    bottom: 20px;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 1;
-    transition: all 0.5s;
-    & > img {
-      width: 20px;
-    }
-  }
-  .RWsBtnHide {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .RWage {
-    position: absolute;
-    z-index: 22;
-    right: -220px;
-    bottom: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    width: calc(100% - 70px);
-    height: 30px;
-    transition: all 0.5s;
-    opacity: 0;
-    pointer-events: none;
-    .RWageRow {
-      transition: all 0.5s;
-      width: 30px;
-      height: 30px;
-      border-radius: 4px;
-      background-color: rgba(0, 0, 0, 0.5);
-      font-family: KingHwa_OldSong;
-      font-size: 16px;
-      margin-right: 15px;
-      text-align: center;
-      line-height: 30px;
-      color: #fff;
-      border: 1px solid transparent;
-    }
-    .RWageRowAc {
-      color: #d6cda1;
-      border: 1px solid #d6cda1;
-      font-size: 18px;
-    }
-    .RWageImg {
-      width: 30px;
-      height: 30px;
-      border-radius: 50%;
-      background-color: rgba(0, 0, 0, 0.5);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      & > img {
-        width: 20px;
-      }
-    }
-  }
-  .RWageShow {
-    right: 20px;
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .RWbox {
-    width: 8000px;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    display: flex;
-    background-image: url("../assets/images/RW/bg_caizhi.jpg");
-    background-size: contain;
-    transition: left 0.8s;
-
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    .ROW {
-      position: relative;
-      transition: opacity 1.2s;
-      & > img {
-        position: absolute;
-        bottom: 0;
-        height: 100%;
-        transition: transform 1s;
-        -webkit-transform: translateZ(0);
-        -moz-transform: translateZ(0);
-        -ms-transform: translateZ(0);
-        -o-transform: translateZ(0);
-
-        transform: translateZ(0);
-        -webkit-backface-visibility: hidden;
-        backface-visibility: hidden;
-      }
-    }
-
-    .ROW {
-      .ROW1_1 {
-        left: 0;
-      }
-      .ROW1_2 {
-        z-index: 2;
-        right: 0;
-      }
-      .ROW1_3 {
-        right: 5%;
-      }
-      .ROW2_1 {
-        z-index: 2;
-        left: -38%;
-      }
-      .ROW2_2 {
-        right: 5%;
-      }
-      .ROW2_3 {
-        z-index: 3;
-        right: -20%;
-      }
-      .ROW3_1 {
-        left: -36%;
-      }
-      .ROW3_2 {
-        height: 15%;
-        left: 10%;
-      }
-      .ROW3_3 {
-        z-index: 2;
-        height: 15%;
-        right: 10%;
-      }
-      .ROW3_4 {
-        right: 0%;
-      }
-      .ROW3_5 {
-        right: -5%;
-      }
-      .ROW4_1 {
-        left: -35%;
-      }
-      .ROW4_2 {
-        left: -40%;
-        height: 15%;
-      }
-      .ROW4_3 {
-        left: 10%;
-        height: 20%;
-      }
-      .ROW4_4 {
-        right: 6%;
-        height: 15%;
-      }
-      .ROW4_5 {
-        right: -17%;
-      }
-      .ROW5_1 {
-        left: -45%;
-      }
-      .ROW5_2 {
-        z-index: 2;
-        left: -17%;
-      }
-      .ROW5_3 {
-        z-index: 3;
-        left: 5%;
-        height: 15%;
-      }
-      .ROW5_4 {
-        z-index: 3;
-        left: 30%;
-        height: 15%;
-      }
-      .ROW5_5 {
-        right: -6%;
-      }
-      .ROW6_1 {
-        z-index: 3;
-        left: 2%;
-        height: 15%;
-      }
-      .ROW6_2 {
-        left: -10%;
-      }
-      .ROW6_3 {
-        z-index: 2;
-        left: -13%;
-      }
-      .ROW6_4 {
-        right: -10%;
-      }
-      .ROW6_5 {
-        right: -10%;
-      }
-    }
-
-    .ROWtxt {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      writing-mode: vertical-rl;
-      position: relative;
-      z-index: 10;
-      .inner-wrap {
-        > .title-wrap {
-          position: relative;
-          width: fit-content;
-          height: fit-content;
-          > h1 {
-            font-family: KingHwa_OldSong;
-            font-weight: 400;
-            font-size: calc(
-              36 / v-bind("windowSizeWhenDesignForRef") *
-                v-bind("windowSizeInCssForRef")
-            );
-            color: black;
-            line-height: calc(
-              36 / v-bind("windowSizeWhenDesignForRef") *
-                v-bind("windowSizeInCssForRef")
-            );
-            white-space: pre;
-            letter-spacing: 0.1em;
-          }
-          > .sub-title {
-            position: absolute;
-            left: 0;
-            top: 50%;
-            transform: translate(-140%, -50%);
-            display: flex;
-            align-items: center;
-            > .author {
-              white-space: pre;
-              font-family: KaiTi;
-              font-weight: 400;
-              font-size: 20px;
-              color: #b9aa70;
-              letter-spacing: 0em;
-              margin-inline-end: calc(
-                6 / v-bind("windowSizeWhenDesignForRef") *
-                  v-bind("windowSizeInCssForRef")
-              );
-            }
-            > .age {
-              display: inline-block;
-              width: calc(
-                21 / v-bind("windowSizeWhenDesignForRef") *
-                  v-bind("windowSizeInCssForRef")
-              );
-              height: calc(
-                21 / v-bind("windowSizeWhenDesignForRef") *
-                  v-bind("windowSizeInCssForRef")
-              );
-              background-color: #b6a261;
-              border-radius: 50%;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              font-family: KaiTi;
-              font-weight: 400;
-              font-size: calc(
-                16 / v-bind("windowSizeWhenDesignForRef") *
-                  v-bind("windowSizeInCssForRef")
-              );
-              color: #ffffff;
-            }
-          }
-        }
-        > p {
-          margin-right: calc(
-            40 / v-bind("windowSizeWhenDesignForRef") *
-              v-bind("windowSizeInCssForRef")
-          );
-          font-family: KaiTi;
-          font-weight: 400;
-          font-size: calc(
-            20 / v-bind("windowSizeWhenDesignForRef") *
-              v-bind("windowSizeInCssForRef")
-          );
-          color: black;
-          line-height: 1.6em;
-          white-space: pre;
-          letter-spacing: 0.2em;
-        }
-      }
-    }
-    .ROWtxt.typesetting-1 {
-      > .inner-wrap {
-        transform: translate(10%, -20%);
-        > p {
-          margin-top: calc(
-            232 / v-bind("windowSizeWhenDesignForRef") *
-              v-bind("windowSizeInCssForRef")
-          );
-        }
-      }
-    }
-    .ROWtxt.typesetting-2 {
-      > .inner-wrap {
-        transform: translate(10%, -4%);
-        > p {
-          margin-top: calc(
-            102 / v-bind("windowSizeWhenDesignForRef") *
-              v-bind("windowSizeInCssForRef")
-          );
-        }
-      }
-    }
-    .ROWtxt.typesetting-3 {
-      > .inner-wrap {
-        transform: translate(0, -9%);
-        > p {
-          margin-top: calc(
-            135 / v-bind("windowSizeWhenDesignForRef") *
-              v-bind("windowSizeInCssForRef")
-          );
-        }
-      }
-    }
-    .ROWtxt.typesetting-4 {
-      > .inner-wrap {
-        transform: translate(10%, -10%);
-        > p {
-          margin-top: calc(
-            200 / v-bind("windowSizeWhenDesignForRef") *
-              v-bind("windowSizeInCssForRef")
-          );
-        }
-      }
-    }
-  }
-
-  .ROW1 {
-    .ROWtxt {
-      padding-top: 15%;
-      padding-right: 40%;
-    }
-  }
-  .ROW2 {
-    .ROWtxt {
-      padding-right: 24%;
-    }
-  }
-  .ROW3 {
-    .ROWtxt {
-      padding-right: 30%;
-    }
-  }
-  .ROWW19 {
-    .ROWtxt {
-      padding-top: 87%;
-    }
-  }
-
-  // 底部文字提示
-  .RWind {
-    position: absolute;
-    bottom: 15%;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 100;
-    font-size: 12px;
-    color: #b9aa70;
-    letter-spacing: 4px;
-    opacity: 0;
-    transition: opacity 0.5s;
-    pointer-events: none;
-    font-family: KingHwa_OldSong;
-  }
-  .RWindShow {
-    opacity: 1;
-  }
-
-  // 操作提示
-  .operation-tip {
-    position: absolute;
-    z-index: 30;
-    left: 50%;
-    bottom: 7%;
-    transform: translateX(-50%);
-    color: #7f9470;
-    font-size: 12px;
-    letter-spacing: 3px;
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-    opacity: 1;
-    transition: opacity 1s;
-
-    img {
-      width: 30px;
-    }
-  }
-
-  .operation-tipHide {
-    opacity: 0;
-  }
-  // 返场视频
-  .backVideo {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 30;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 2s;
-    & > video {
-      width: 100%;
-    }
-  }
-  .backVideoShow {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  // 返回按钮
-  .RWback {
-    position: absolute;
-    z-index: 22;
-    left: 20px;
-    bottom: 20px;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .btn-back {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    max-width: 100%;
-    max-height: 100%;
-  }
-}
-</style>

src/views/PoemList copy.vue

@@ -1,497 +0,0 @@
-<template>
-  <div class="poem-list-page">
-    <!-- 背景序列帧 -->
-    <Transition name="fade-in-out">
-      <SerialFrames
-        v-if="getTypesettingIdx(currentPoem['类型']) === 1"
-        class="bg-serial-frames-1"
-        :image-src="require(`@/assets/images/serial-frame-poem-list-1.png`)"
-        :total-width="13001"
-        :height="852"
-        :frame-number="33"
-        :frame-duration="55"
-      />
-      <SerialFrames
-        v-else-if="getTypesettingIdx(currentPoem['类型']) === 2"
-        class="bg-serial-frames-2"
-        :image-src="require(`@/assets/images/serial-frame-poem-list-2.png`)"
-        :total-width="13001"
-        :height="852"
-        :frame-number="33"
-        :frame-duration="55"
-      />
-      <SerialFrames
-        v-else-if="getTypesettingIdx(currentPoem['类型']) === 3"
-        class="bg-serial-frames-3"
-        :image-src="require(`@/assets/images/serial-frame-poem-list-3.png`)"
-        :total-width="13001"
-        :height="852"
-        :frame-number="33"
-        :frame-duration="55"
-      />
-      <SerialFrames
-        v-else-if="getTypesettingIdx(currentPoem['类型']) === 4"
-        class="bg-serial-frames-4"
-        :image-src="require(`@/assets/images/serial-frame-poem-list-1.png`)"
-        :total-width="13001"
-        :height="852"
-        :frame-number="33"
-        :frame-duration="55"
-      />
-    </Transition>
-
-    <Transition name="fade-in-out">
-      <img
-        v-if="getTypesettingIdx(currentPoem['类型']) === 1"
-        class="bg"
-        src="@/assets/images/poem-list-bg-1.jpg"
-        alt=""
-        draggable="false"
-      >
-      <img
-        v-else-if="getTypesettingIdx(currentPoem['类型']) === 2"
-        class="bg"
-        src="@/assets/images/poem-list-bg-2.jpg"
-        alt=""
-        draggable="false"
-      >
-      <img
-        v-else-if="getTypesettingIdx(currentPoem['类型']) === 3"
-        class="bg"
-        src="@/assets/images/poem-list-bg-3.jpg"
-        alt=""
-        draggable="false"
-      >
-      <img
-        v-else
-        class="bg"
-        src="@/assets/images/poem-list-bg-4.jpg"
-        alt=""
-        draggable="false"
-      >
-    </Transition>
-    <Swiper
-      class="poem-list"
-      :slides-per-view="1"
-      direction="vertical"
-      @swiper="onSwiper"
-      @slideChange="onSlideChange"
-    >
-      <SwiperSlide
-        v-for="(item, index) in poemList"
-        :key="index"
-        class="poem-item"
-        :class="[`typesetting-${getTypesettingIdx(item['类型'])}`]"
-      >
-        <div class="inner-wrap">
-          <div class="title-wrap">
-            <h1>《{{ item['标题'] }}》</h1>
-            <div class="sub-title">
-              <span class="author">{{ item['作者'] }}</span>
-              <span class="age">{{ item['朝代'] }}</span>
-            </div>
-          </div>
-          <p>{{ item['正文'] }}</p>
-        </div>
-      </SwiperSlide>
-    </Swiper>
-
-    <BtnBack
-      v-show="!isShowMenu"
-      class="button-back"
-      @click="router.replace({
-        name: 'MoreContent',
-        query: {
-          anchorIdx: 1,
-        }
-      })"
-    />
-    <Transition
-      v-show="isShowOperationTipShadow"
-      name="fade-out"
-    >
-      <div class="operation-tip-shadow" />
-    </Transition>
-    <OperationTip
-      class="operation-tip"
-      text="下一首"
-      :is-show="isShowOperationTip"
-    />
-    <!-- 选择时间 -->
-    <button
-      v-show="!isShowMenu"
-      class="menu-btn"
-      @click="isShowMenu = true"
-    >
-      <img
-        class=""
-        src="@/assets/images/icon_menu.png"
-        alt=""
-        draggable="false"
-      >
-    </button>
-
-    <Transition name="fade-in-out">
-      <menu v-show="isShowMenu">
-        <ul>
-          <button
-            v-for="(item, index) in menuList"
-            :key="index"
-            :class="{
-              active: item === currentPoem['朝代']
-            }"
-            @click="onClickMenuItem(item)"
-          >
-            <img
-              class="bg"
-              :src="require(`@/assets/images/poem-menu-item-bg${item === currentPoem['朝代'] ? '-active' : ''}.png`)"
-              alt=""
-              draggable="false"
-              :style="{
-                transform: `rotate(${90 * (index % 5)}deg)`
-              }"
-            >
-            <span>{{ item }}</span>
-          </button>
-        </ul>
-        <button
-          class="close"
-          @click="isShowMenu = false"
-        >
-          <img
-            class=""
-            src="@/assets/images/icon_close.png"
-            alt=""
-            draggable="false"
-          >
-        </button>
-      </menu>
-    </Transition>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch, onMounted, inject } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
-import useSizeAdapt from "@/useFunctions/useSizeAdapt"
-
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
-const $env = inject('$env')
-
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
-
-const poemList = configExcel['诗词']
-
-/**
- * 当前古诗
- */
-const currentIdx = ref(0)
-const currentPoem = computed(() => {
-  return poemList[currentIdx.value]
-})
-
-/**
- * 排版
- */
-function getTypesettingIdx(poemType) {
-  switch (poemType) {
-  case '七绝':
-    return 1
-  case '七律':
-    return 2
-  case '五绝':
-    return 3
-  case '五律':
-    return 4
-  default:
-    return 2
-  }
-}
-
-/**
- * swiper
- */
-let swiper = null
-const onSwiper = (swiperP) => {
-  swiper = swiperP
-}
-const onSlideChange = (e) => {
-  currentIdx.value = e.activeIndex
-}
-
-/**
- * 操作提示
- */
-const isShowOperationTip = ref(true)
-const unwatch = watch(currentIdx, (v) => {
-  isShowOperationTip.value = false
-  isShowOperationTipShadow.value = false
-  unwatch()
-})
-const isShowOperationTipShadow = ref(true)
-setTimeout(() => {
-  isShowOperationTipShadow.value = false
-}, 2000)
-
-/**
- * 目录
- */
-const isShowMenu = ref(false)
-const temp = configExcel['诗词'].map((item) => {
-  return item['朝代']
-})
-const menuList = Array.from(new Set(temp))
-function onClickMenuItem(menuItemName) {
-  const targetIdx = poemList.findIndex((item) => {
-    return item['朝代'] === menuItemName
-  })
-  swiper.slideTo(targetIdx)
-  isShowMenu.value = false
-}
-</script>
-
-<style lang="less" scoped>
-.poem-list-page{
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #dde6db;
-  ::-webkit-scrollbar { width: 0; height: 0; }
-
-  >.bg-serial-frames-1, .bg-serial-frames-4{
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(0, 0) scale(0.8);
-    transform-origin: top left;
-    z-index: 1;
-  }
-  >.bg-serial-frames-2{
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    transform: translate(0, 0) scale(0.8);
-    transform-origin: bottom right;
-    z-index: 1;
-  }
-  >.bg-serial-frames-3{
-    position: absolute;
-    top: 0;
-    right: 0;
-    transform: translate(0, 0) scale(0.8);
-    transform-origin: top right;
-    z-index: 1;
-  }
-
-  >.bg{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  >.poem-list{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    .poem-item{
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      writing-mode: vertical-rl;
-      position: relative;
-      .inner-wrap{
-        >.title-wrap{
-          position: relative;
-          width: fit-content;
-          height: fit-content;
-          >h1{
-            font-family: KingHwa_OldSong;
-            font-weight: 400;
-            font-size: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-            color: #476446;
-            line-height: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-            white-space: pre;
-            letter-spacing: 0.1em;
-          }
-          >.sub-title{
-            position: absolute;
-            left: 0;
-            top: 50%;
-            transform: translate(-140%, -50%);
-            display: flex;
-            align-items: center;
-            >.author{
-              white-space: pre;
-              font-family: KaiTi;
-              font-weight: 400;
-              font-size: 20px;
-              color: #476446;
-              letter-spacing: 0.3em;
-              margin-inline-end: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-            }
-            >.age{
-              display: inline-block;
-              width: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-              height: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-              background-color: #b6a261;
-              border-radius: 50%;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              font-family: KaiTi;
-              font-weight: 400;
-              font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-              color: #FFFFFF;
-            }
-          }
-        }
-        >p{
-          margin-right: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          font-family: KaiTi;
-          font-weight: 400;
-          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          color: #476446;
-          line-height: 1.8em;
-          white-space: pre;
-          letter-spacing: 0.2em;
-        }
-      }
-    }
-    .poem-item.typesetting-1{
-      >.inner-wrap{
-        transform: translate(10%, -20%);
-        >p{
-          margin-top: calc(232 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        }
-      }
-    }
-    .poem-item.typesetting-2{
-      >.inner-wrap{
-        transform: translate(10%, -4%);
-        >p{
-          margin-top: calc(102 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        }
-      }
-    }
-    .poem-item.typesetting-3{
-      >.inner-wrap{
-        transform: translate(0, -9%);
-        >p{
-          margin-top: calc(135 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        }
-      }
-    }
-    .poem-item.typesetting-4{
-      >.inner-wrap{
-        transform: translate(10%, -10%);
-        >p{
-          margin-top: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        }
-      }
-    }
-  }
-  >.button-back{
-    z-index: 10;
-  }
-  >.operation-tip-shadow{
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 20%;
-    background: linear-gradient( rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 100%);
-    z-index: 9;
-  }
-  >.operation-tip{
-    position: absolute;
-    left: 50%;
-    bottom: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    transform: translateX(-50%);
-    z-index: 10;
-  }
-  >.menu-btn{
-    position: absolute;
-    right: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    bottom: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    z-index: 10;
-    width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    >img{
-      width: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    }
-  }
-  >menu{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: hsl(96deg 22% 38% / 52%);
-    border-radius: 0px 0px 0px 0px;
-    backdrop-filter: blur(calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
-    z-index: 15;
-    >ul{
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      gap: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >button{
-        width: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: KingHwa_OldSong;
-        font-weight: 400;
-        font-size: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        color: #FFFFFF;
-        position: relative;
-        >img.bg{
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
-        }
-      }
-      >button.active{
-        color: #F4E09D;
-      }
-    }
-    >button.close{
-      position: absolute;
-      right: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      bottom: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      z-index: 10;
-      width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >img{
-        width: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      }
-    }
-  }
-}
-</style>

src/views/PoemList（New）.vue

@@ -1,310 +0,0 @@
-<template>
-  <div class="poem-list-page">
-    <div
-      class="RWbox"
-      :style="`width: ${domWidth}px; left:-${indexAc * pageWidth}px`"
-    >
-      <!-- 第一种状态 -->
-
-      <!-- <div
-        class="ROW1"
-        :style="`width:${pageWidth}px`"
-      >
-        <img
-          :style="`transform: translateX(${indexAc===0?0:(-80*3)}px);`"
-          class="ROW1_1"
-          :src="require(`@/assets/images/RW/3_01.png`)"
-          alt=""
-        >
-        <img
-          :style="`transform: translateX(${indexAc===0?0:(-100*3)}px);`"
-          class="ROW1_2"
-          :src="require(`@/assets/images/RW/1_01.png`)"
-          alt=""
-        >
-        <img
-          :style="`transform: translateX(${indexAc===0?0:(-60*3)}px);`"
-          class="ROW1_3"
-          :src="require(`@/assets/images/RW/3_02.png`)"
-          alt=""
-        >
-      </div> -->
-
-      <!-- 第二种状态 -->
-      <div
-        class="ROW2"
-        :style="`width:${pageWidth}px`"
-      >
-        <img
-          :style="`transform: translateX(${indexAc===0?0:(-80*3)}px);`"
-          class="ROW1_1"
-          :src="require(`@/assets/images/RW/3_01.png`)"
-          alt=""
-        >
-        <img
-          :style="`transform: translateX(${indexAc===0?0:(-100*3)}px);`"
-          class="ROW1_2"
-          :src="require(`@/assets/images/RW/1_01.png`)"
-          alt=""
-        >
-        <img
-          :style="`transform: translateX(${indexAc===0?0:(-60*3)}px);`"
-          class="ROW1_3"
-          :src="require(`@/assets/images/RW/3_02.png`)"
-          alt=""
-        >
-      </div>
-
-      <!-- <div
-        v-for="(item, index) in poemList"
-        :key="index"
-        :style="`width:${pageWidth}px`"
-        class="ROW ROW1"
-      >
-      </div> -->
-    </div>
-
-    <!-- 操作提示 -->
-    <OperationTip
-      class="operation-tip"
-      :direction="'h'"
-      :text="'下一章'"
-      :is-show="isShowOperationTip"
-      color="green"
-    />
-
-    <!-- 返场视频 -->
-    <div :class="`backVideo ${backVideoFlag ? 'backVideoShow' : ''}`">
-      <video
-        ref="backVideoRef"
-        muted
-        src="@/assets/images/RW/play.mp4"
-      />
-    </div>
-
-    <!-- 返回按钮 -->
-    <BtnBack
-      v-show="!isShowMenu"
-      color="green"
-      class="button-back"
-      @click="btnBackFu"
-    />
-
-    <!-- 临时操作按钮 -->
-    <div class="aaaa">
-      <div @click="aaaaFu(1)">
-        ++++
-      </div>
-      <br>
-      <div @click="aaaaFu(-1)">
-        ----
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch, onMounted, inject } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
-import useSizeAdapt from "@/useFunctions/useSizeAdapt"
-
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
-const $env = inject("$env")
-
-// 返场视频ref
-const backVideoRef = ref("")
-const backVideoFlag = ref(false)
-
-// 点击返回
-const btnBackFu = () => {
-  backVideoRef.value.play()
-  setTimeout(() => {
-    backVideoFlag.value = true
-  }, 100)
-
-  setTimeout(() => {
-    router.replace({
-      name: "MoreContent",
-      query: {
-        anchorIdx: 1,
-      },
-    })
-  }, 2200)
-}
-
-const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
-
-const poemList = configExcel["诗词"]
-
-// 元素总宽度
-const domWidth = ref(0)
-const pageWidth = ref(0)
-
-// 当前选中索引
-const indexAc = ref(0)
-
-onMounted(() => {
-  pageWidth.value = window.innerWidth
-  // 总盒子的宽度
-  domWidth.value = window.innerWidth * poemList.length
-})
-
-/**
- * 当前古诗
- */
-const currentIdx = ref(0)
-const currentPoem = computed(() => {
-  return poemList[currentIdx.value]
-})
-
-/**
- * 排版
- */
-function getTypesettingIdx(poemType) {
-  switch (poemType) {
-  case "七绝":
-    return 1
-  case "七律":
-    return 2
-  case "五绝":
-    return 3
-  case "五律":
-    return 4
-  default:
-    return 2
-  }
-}
-
-/**
- * swiper
- */
-let swiper = null
-const onSwiper = (swiperP) => {
-  swiper = swiperP
-}
-const onSlideChange = (e) => {
-  currentIdx.value = e.activeIndex
-}
-
-/**
- * 操作提示
- */
-const isShowOperationTip = ref(true)
-const unwatch = watch(currentIdx, (v) => {
-  isShowOperationTip.value = false
-  isShowOperationTipShadow.value = false
-  unwatch()
-})
-const isShowOperationTipShadow = ref(true)
-setTimeout(() => {
-  isShowOperationTipShadow.value = false
-}, 2000)
-
-/**
- * 目录
- */
-const isShowMenu = ref(false)
-const temp = configExcel["诗词"].map((item) => {
-  return item["朝代"]
-})
-const menuList = Array.from(new Set(temp))
-function onClickMenuItem(menuItemName) {
-  const targetIdx = poemList.findIndex((item) => {
-    return item["朝代"] === menuItemName
-  })
-  swiper.slideTo(targetIdx)
-  isShowMenu.value = false
-}
-
-const aaaaFu = (val) => {
-  indexAc.value += val
-  // const dom = document.querySelector(".poem-list-page")
-  // dom.scrollLeft = dom.scrollLeft + window.innerWidth
-}
-</script>
-
-<style lang="less" scoped>
-.poem-list-page {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-color: #f3f4ef;
-  .aaaa {
-    position: fixed;
-    z-index: 50;
-    bottom: 100px;
-    left: 100px;
-  }
-
-  .RWbox {
-    width: 8000px;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    display: flex;
-    background-image: url("../assets/images/RW/bg_caizhi.jpg");
-    background-size: cover;
-    transition: all 1.2s;
-
-
-    .ROW1 {
-      position: relative;
-      &>img{
-        position: absolute;
-        bottom: 0;
-        height: 100%;
-        transition: all .8s;
-      }
-      .ROW1_1 {
-        left: 0;
-      }
-      .ROW1_2 {
-        z-index: 2;
-        right: 0;
-      }
-      .ROW1_3 {
-        right: 5%;
-      }
-    }
-  }
-
-  // 操作提示
-  .operation-tip {
-    position: absolute;
-    left: 50%;
-    bottom: calc(
-      17 / v-bind("windowSizeWhenDesignForRef") *
-        v-bind("windowSizeInCssForRef")
-    );
-    transform: translateX(-50%);
-    z-index: 10;
-  }
-  // 返场视频
-  .backVideo {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 30;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 2s;
-    & > video {
-      width: 100%;
-    }
-  }
-  .backVideoShow {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  // 返回按钮
-  .btn-back {
-    z-index: 10;
-  }
-}
-</style>