feat：修改微信浏览器bug和首页优化

src/App.vue

@@ -9,6 +9,10 @@
       />
     </transition>
   </router-view>
+  <audio
+    id="bg-music"
+    src="./configMultiMedia/music/music1.mp3"
+  />
 </template>
 
 <script setup>
@@ -71,7 +75,8 @@ onMounted(() => {
         if (dom && document.documentElement.clientWidth < 1000) {
           dom.style.height = document.documentElement.clientHeight + "px"
           dom.style.width = document.documentElement.clientWidth + "px"
-
+          window.windowWidth = document.documentElement.clientWidth + "px"
+          window.windowHeight = document.documentElement.clientHeight + "px"
         }
       }, 100)
     },

src/components/BtnSkip.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="btn-skip">
+  <div
+    v-show="isReady"
+    class="btn-skip"
+  >
     <div class="text">
       跳过
     </div>
@@ -28,6 +31,14 @@ const {
 } = useSizeAdapt()
 
 const $env = inject('$env')
+
+const isReady = ref(false)
+
+onMounted(()=>{
+  setTimeout(() => {
+    isReady.value = true
+  }, 1500)
+})
 </script>
 
 <style lang="less" scoped>

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import MoreContent from '../views/MoreContent.vue'
+import MoreContentChange from '../views/MoreContentChange.vue'
 import PoemList from '../views/PoemList.vue'
 import PaintingList from '../views/PaintingList.vue'
 import PaintingDetailList from '../views/PaintingDetailList.vue'
@@ -24,6 +25,11 @@ const routes = [
     component: HomeView,
   },
   {
+    path: '/more-content-change',
+    name: 'MoreContentChange',
+    component: MoreContentChange,
+  },
+  {
     path: '/more-content',
     name: 'MoreContent',
     component: MoreContent,
@@ -78,7 +84,6 @@ const routes = [
     path: '/onlone-scene',
     name: 'OnlineScene',
     component: OnlineSceneView
-
   }
 ]
 

src/views/HomeView copy.vue

@@ -230,7 +230,6 @@
       v-if="isStartupOver"
       class="operation-tip"
       text="了解作品"
-      direction="h"
       :is-show="isShowOperationTip"
     />
 

src/views/HomeView(横向滑动).vue

@@ -35,15 +35,15 @@
     <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`,
+        top: summaryOpacity > 0 ? `${90 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px` : `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        width: summaryOpacity > 0 ? `calc(225 / 308 * 100%)`: paintingWidth == 485 ? `110%`: `${paintingWidth / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        height: summaryOpacity > 0 ? `${523 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px` :`${paintingHeight / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
       }"
     >
       <div
         class="size-sign-h"
         :style="{
-          opacity: sizeOpacity,
+          opacity: 0,
         }"
       >
         <img
@@ -57,7 +57,7 @@
       <div
         class="size-sign-v"
         :style="{
-          opacity: sizeOpacity,
+          opacity: 0,
         }"
       >
         <img
@@ -68,6 +68,11 @@
         >
         <span>151.7cm</span>
       </div>
+      <!-- 绿色幕布层 -->
+      <div
+        class="green-box"
+        :style="{opacity: stemGreenOpacity || leafGreenOpacity || stoneGreenOpacity}"
+      />
       <img
         class="painting-border"
         src="@/assets/images/painting-border-new.png"
@@ -75,7 +80,13 @@
         draggable="false"
       >
       <img
-        class="painting"
+        class="painting-stem"
+        src="@/assets/images/home-painting.jpg"
+        alt=""
+        draggable="false"
+      >
+      <img
+        class="painting-stem"
         src="@/assets/images/home-painting.jpg"
         alt=""
         draggable="false"
@@ -85,7 +96,27 @@
         :style="{
           opacity: stemOpacity,
         }"
-        src="@/assets/images/home-painting-stem.png"
+        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"
       >
@@ -93,8 +124,40 @@
         class="painting-leaf"
         :style="{
           opacity: leafOpacity,
+          zIndex: 2,
         }"
-        src="@/assets/images/home-painting-leaf.png"
+        src="@/assets/images/home-2.jpg"
+        alt=""
+        draggable="false"
+      >
+      <img
+        class="painting-leaf"
+        :style="{
+          opacity: leafOpacity1,
+          zIndex: 2,
+        }"
+        src="@/assets/images/home-2-1.jpg"
+        alt=""
+        draggable="false"
+      >
+
+      <img
+        class="painting-leaf"
+        :style="{
+          opacity: leafOpacity2,
+          zIndex: 2,
+        }"
+        src="@/assets/images/home-2-2.jpg"
+        alt=""
+        draggable="false"
+      >
+      <img
+        class="painting-leaf"
+        :style="{
+          opacity: leafOpacity3,
+          zIndex: 2,
+        }"
+        src="@/assets/images/home-2-3.jpg"
         alt=""
         draggable="false"
       >
@@ -103,7 +166,17 @@
         :style="{
           opacity: stoneOpacity,
         }"
-        src="@/assets/images/home-painting-stone.png"
+        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"
       >
@@ -122,7 +195,7 @@
         @click="isShowHotspotDetail1 = true"
       />
       <HotspotForHomepage
-        v-show="isShowHotspot"
+        v-show="false"
         class="hotspot-2"
         @click="showBigPainting"
       />
@@ -159,11 +232,44 @@
         {{ item }}
       </p>
     </div>
+
+
+
+    <!-- stem title -->
+    <div
+      class="fixed-desc detail-title-stem"
+      :style="{
+        top: `${( stemOpacity1 > 0 || stemOpacity2 >0? paintingTop + 670 : paintingTop + 750 ) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        opacity: stemTextOpacity,
+      }"
+    >
+      三竿修竹
+    </div>
+
+    <div
+      class="fixed-desc detail-title-stem"
+      :style="{
+        top: `${( stoneOpacity1 > 0 ? paintingTop + 500 : paintingTop + 580 ) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        opacity: stoneTextOpacity,
+      }"
+    >
+      卧石
+    </div>
+
+    <div
+      class="fixed-desc detail-title-stem"
+      :style="{
+        top: `${( leafOpacity1 > 0 || leafOpacity2 >0 || leafOpacity3 >0? paintingTop + 330 : paintingTop + 410 ) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        opacity: leafTextOpacity,
+      }"
+    >
+      竹叶
+    </div>
     <div
       class="fixed-desc detail-desc-stem"
       :style="{
-        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        opacity: stemOpacity,
+        top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        opacity: stemGreenOpacity,
       }"
     >
       {{ detailDescStem }}
@@ -171,8 +277,8 @@
     <div
       class="fixed-desc detail-desc-leaf"
       :style="{
-        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        opacity: leafOpacity,
+        top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        opacity: leafGreenOpacity,
       }"
     >
       {{ detailDescLeaf }}
@@ -180,8 +286,8 @@
     <div
       class="fixed-desc detail-desc-stone"
       :style="{
-        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        opacity: stoneOpacity,
+        top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        opacity: stoneGreenOpacity,
       }"
     >
       {{ detailDescStone }}
@@ -189,7 +295,7 @@
     <div
       class="fixed-desc summary-desc"
       :style="{
-        top: `${(paintingTop + 550) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        top: `${(paintingTop + 700) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: summaryOpacity,
       }"
     >
@@ -197,7 +303,9 @@
     </div>
 
     <div class="progress-bar">
-      <div class="bar-artwork-desc" />
+      <div
+        class="bar-artwork-desc"
+      />
       <img
         class="progress-bar-node-1"
         src="@/assets/images/progress-bar-node-1.png"
@@ -223,13 +331,14 @@
         class="mask"
         :style="{
           width: `${(1 - scrollerElScrollTop / summaryHideAt) * 100}%`,
+          backgroundColor:stemGreenOpacity > 0 || leafGreenOpacity > 0 || stoneGreenOpacity > 0?'rgba(85,116,83,0.8)':''
         }"
       />
     </div>
     <OperationTip
       v-if="isStartupOver"
       class="operation-tip"
-      text="了解作品"
+      text="向左划动"
       direction="h"
       :is-show="isShowOperationTip"
     />
@@ -291,7 +400,7 @@
         webkit-playsinline="true"
         x5-video-player-type="h5"
         @ended="router.push({
-          name: 'MoreContent',
+          name: 'MoreContentChange',
         })"
       />
     </Transition>
@@ -299,7 +408,7 @@
       <BtnSkip
         v-if="isShowSkip"
         @click="router.push({
-          name: 'MoreContent',
+          name: 'MoreContentChange',
         })"
       />
     </Transition>
@@ -348,8 +457,6 @@ const scrollerEl = ref(null)
 const scrollerElScrollTop = ref(0)
 function onScroll() {
   scrollerElScrollTop.value = scrollerEl.value.scrollTop
-
-  // console.log('当前高度', scrollerElScrollTop.value / scrollerEl.value.scrollHeight )
 }
 onMounted(() => {
   scrollerEl.value.addEventListener('scroll', onScroll)
@@ -397,7 +504,7 @@ 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 paingtingTopMovedDown = -80
 const paintingTop = computed(() => {
   let ret = null
   if (scrollerElScrollTop.value <= paintingMoveUpAt) {
@@ -416,7 +523,7 @@ const paintingTop = computed(() => {
 
 const paintingWidthInitial = 308
 const paintingWidthMovedUp = 250
-const paintingWidthMovedDown = 308
+const paintingWidthMovedDown = 485
 const paintingWidth = computed(() => {
   let ret = null
   if (scrollerElScrollTop.value <= paintingMoveUpAt) {
@@ -435,7 +542,8 @@ const paintingWidth = computed(() => {
 
 const paintingHeightInitial = 523
 const paintingHeightMovedUp = 425
-const paintingHeightMovedDown = 523
+let paintingHeightMovedDown = 758
+
 const paintingHeight = computed(() => {
   let ret = null
   if (scrollerElScrollTop.value <= paintingMoveUpAt) {
@@ -468,6 +576,7 @@ const longDescOpacity = computed(() => {
   return ret
 })
 watch(scrollerElScrollTop, (vNew, vOld) => {
+  console.log('scrollerElScrollTop', vNew / scrollerEl.value.scrollHeight)
   if (vNew > paintingMoveUpFinishAt) {
     // longDesc.value.scrollTop = vNew - paintingMoveUpFinishAt
   } else if (vNew < vOld && vNew <= paintingMoveUpFinishAt) {
@@ -475,6 +584,8 @@ watch(scrollerElScrollTop, (vNew, vOld) => {
   }
 })
 
+
+// 第一页
 const stemShowAt = longDescHideFinishAt + window.innerHeight * 0
 const stemShowFinishAt = stemShowAt + window.innerHeight * 0.25
 const stemHideAt = stemShowFinishAt + window.innerHeight * 0.3
@@ -495,7 +606,91 @@ const stemOpacity = computed(() => {
   return ret
 })
 
-const leafShowAt = stemHideFisishAt + (0 * window.innerHeight)
+
+
+
+const stemShowAt1 = stemHideFisishAt + window.innerHeight * 0
+const stemShowFinishAt1 = stemShowAt1 + window.innerHeight * 0.25
+const stemHideAt1 = stemShowFinishAt1 + window.innerHeight * 0.3
+const stemHideFisishAt1 = stemHideAt1 + window.innerHeight * 0.25
+const stemOpacity1 = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= stemShowAt1) {
+    ret = 0
+  } else if (scrollerElScrollTop.value > stemShowAt1 && scrollerElScrollTop.value < stemShowFinishAt1) {
+    ret = (scrollerElScrollTop.value - stemShowAt1) / (stemShowFinishAt1 - stemShowAt1)
+  } else if (scrollerElScrollTop.value >= stemShowFinishAt1 && scrollerElScrollTop.value <= stemHideAt1) {
+    ret = 1
+  } else if (scrollerElScrollTop.value > stemHideAt1 && scrollerElScrollTop.value < stemHideFisishAt1) {
+    ret = 1 - (scrollerElScrollTop.value - stemHideAt1) / (stemHideFisishAt1 - stemHideAt1)
+  } else {
+    ret = 0
+  }
+  return ret
+})
+
+const stemShowAt2 = stemHideFisishAt1 + window.innerHeight * 0
+const stemShowFinishAt2 = stemShowAt2 + window.innerHeight * 0.25
+const stemHideAt2 = stemShowFinishAt2 + window.innerHeight * 0.3
+const stemHideFisishAt2 = stemHideAt2 + window.innerHeight * 0.25
+const stemOpacity2 = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= stemShowAt1) {
+    ret = 0
+  } else if (scrollerElScrollTop.value > stemShowAt2 && scrollerElScrollTop.value < stemShowFinishAt2) {
+    ret = (scrollerElScrollTop.value - stemShowAt2) / (stemShowFinishAt2 - stemShowAt2)
+  } else if (scrollerElScrollTop.value >= stemShowFinishAt2 && scrollerElScrollTop.value <= stemHideAt2) {
+    ret = 1
+  } else if (scrollerElScrollTop.value > stemHideAt2 && scrollerElScrollTop.value < stemHideFisishAt2) {
+    ret = 1 - (scrollerElScrollTop.value - stemHideAt2) / (stemHideFisishAt - stemHideAt2)
+
+  } else {
+    ret = 0
+  }
+  return ret
+})
+
+const stemShowText = stemShowAt
+const stemShowTextFinishAt = stemShowFinishAt
+const stemTextHideAt = stemHideAt2
+const stemHideTextFisishAt = stemHideFisishAt2
+const stemTextOpacity = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= stemShowText) {
+    ret = 0
+  } else if (scrollerElScrollTop.value > stemShowText && scrollerElScrollTop.value < stemShowTextFinishAt) {
+    ret = (scrollerElScrollTop.value - stemShowText) / (stemShowTextFinishAt - stemShowText)
+  } else if (scrollerElScrollTop.value >= stemShowTextFinishAt && scrollerElScrollTop.value <= stemTextHideAt) {
+    ret = 1
+  } else if (scrollerElScrollTop.value > stemTextHideAt && scrollerElScrollTop.value < stemHideTextFisishAt) {
+    ret = 1 - (scrollerElScrollTop.value - stemTextHideAt) / (stemHideTextFisishAt - stemTextHideAt)
+  } else {
+    ret = 0
+  }
+  return ret
+})
+
+const stemShowGreen = stemShowAt1
+const stemShowGreenFinishAt = stemShowFinishAt1
+const stemGreenHideAt = stemHideAt2
+const stemHideGreenFisishAt = stemHideFisishAt2
+const stemGreenOpacity = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= stemShowGreen) {
+    ret = 0
+  } else if (scrollerElScrollTop.value > stemShowGreen && scrollerElScrollTop.value < stemShowGreenFinishAt) {
+    ret = (scrollerElScrollTop.value - stemShowGreen) / (stemShowGreenFinishAt - stemShowGreen)
+  } else if (scrollerElScrollTop.value >= stemShowGreenFinishAt && scrollerElScrollTop.value <= stemGreenHideAt) {
+    ret = 1
+  } else if (scrollerElScrollTop.value > stemGreenHideAt && scrollerElScrollTop.value < stemHideGreenFisishAt) {
+    ret = 1 - (scrollerElScrollTop.value - stemGreenHideAt) / (stemHideGreenFisishAt - stemGreenHideAt)
+  } else {
+    ret = 0
+  }
+  return ret
+})
+
+const leafShowAt = stemHideFisishAt2 + (0 * window.innerHeight)
 const leafShowFinishAt = leafShowAt + (0.25 * window.innerHeight)
 const leafHideAt = leafShowFinishAt + (0.3 * window.innerHeight)
 const leafHideFisishAt = leafHideAt + (0.25 * window.innerHeight)
@@ -515,7 +710,114 @@ const leafOpacity = computed(() => {
   return ret
 })
 
-const stoneShowAt = leafHideFisishAt + (0 * window.innerHeight)
+const leafShowAt1 = leafHideFisishAt + (0 * window.innerHeight)
+const leafShowFinishAt1 = leafShowAt1 + (0.25 * window.innerHeight)
+const leafHideAt1 = leafShowFinishAt1 + (0.3 * window.innerHeight)
+const leafHideFisishAt1 = leafHideAt1 + (0.25 * window.innerHeight)
+const leafOpacity1 = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= leafShowAt1) {
+    ret = 0
+  } else if (scrollerElScrollTop.value > leafShowAt1 && scrollerElScrollTop.value < leafShowFinishAt1) {
+    ret = (scrollerElScrollTop.value - leafShowAt1) / (leafShowFinishAt1 - leafShowAt1)
+  } else if (scrollerElScrollTop.value >= leafShowFinishAt1 && scrollerElScrollTop.value <= leafHideAt1) {
+    ret = 1
+  } else if (scrollerElScrollTop.value > leafHideAt1 && scrollerElScrollTop.value < leafHideFisishAt1) {
+    ret = 1 - (scrollerElScrollTop.value - leafHideAt1) / (leafHideFisishAt1 - leafHideAt1)
+  } else {
+    ret = 0
+  }
+  return ret
+})
+
+const leafShowAt2 = leafHideFisishAt1 + (0 * window.innerHeight)
+const leafShowFinishAt2 = leafShowAt2 + (0.25 * window.innerHeight)
+const leafHideAt2 = leafShowFinishAt2 + (0.3 * window.innerHeight)
+const leafHideFisishAt2 = leafHideAt2 + (0.25 * window.innerHeight)
+const leafOpacity2 = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= leafShowAt2) {
+    ret = 0
+  } else if (scrollerElScrollTop.value > leafShowAt2 && scrollerElScrollTop.value < leafShowFinishAt2) {
+    ret = (scrollerElScrollTop.value - leafShowAt2) / (leafShowFinishAt2 - leafShowAt2)
+  } else if (scrollerElScrollTop.value >= leafShowFinishAt2 && scrollerElScrollTop.value <= leafHideAt2) {
+    ret = 1
+  } else if (scrollerElScrollTop.value > leafHideAt2 && scrollerElScrollTop.value < leafHideFisishAt2) {
+    ret = 1 - (scrollerElScrollTop.value - leafHideAt2) / (leafHideFisishAt2 - leafHideAt2)
+  } else {
+    ret = 0
+  }
+  return ret
+})
+
+const leafShowAt3 = leafHideFisishAt2 + (0 * window.innerHeight)
+const leafShowFinishAt3 = leafShowAt3 + (0.25 * window.innerHeight)
+const leafHideAt3 = leafShowFinishAt3 + (0.3 * window.innerHeight)
+const leafHideFisishAt3 = leafHideAt3 + (0.25 * window.innerHeight)
+const leafOpacity3 = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= leafShowAt3) {
+    ret = 0
+  } else if (scrollerElScrollTop.value > leafShowAt3 && scrollerElScrollTop.value < leafShowFinishAt3) {
+    ret = (scrollerElScrollTop.value - leafShowAt3) / (leafShowFinishAt3 - leafShowAt3)
+  } else if (scrollerElScrollTop.value >= leafShowFinishAt3 && scrollerElScrollTop.value <= leafHideAt3) {
+    ret = 1
+  } else if (scrollerElScrollTop.value > leafHideAt3 && scrollerElScrollTop.value < leafHideFisishAt3) {
+    ret = 1 - (scrollerElScrollTop.value - leafHideAt3) / (leafHideFisishAt3 - leafHideAt3)
+  } else {
+    ret = 0
+  }
+  return ret
+})
+
+const leafShowText = leafShowAt
+const leafShowTextFinishAt = leafShowFinishAt
+const leafTextHideAt = leafHideAt3
+const leafHideTextFisishAt = leafHideFisishAt3
+const leafTextOpacity = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= leafShowText) {
+    ret = 0
+  } else if (scrollerElScrollTop.value > leafShowText && scrollerElScrollTop.value < leafShowTextFinishAt) {
+    ret = (scrollerElScrollTop.value - leafShowText) / (leafShowTextFinishAt - leafShowText)
+  } else if (scrollerElScrollTop.value >= leafShowTextFinishAt && scrollerElScrollTop.value <= leafTextHideAt) {
+    ret = 1
+  } else if (scrollerElScrollTop.value > leafTextHideAt && scrollerElScrollTop.value < leafHideTextFisishAt) {
+    ret = 1 - (scrollerElScrollTop.value - leafTextHideAt) / (leafHideTextFisishAt - leafTextHideAt)
+  } else {
+    ret = 0
+  }
+  return ret
+})
+
+const leafShowGreen = leafShowAt1
+const leafShowGreenFinishAt = leafShowFinishAt1
+const leafGreenHideAt = leafHideAt3
+const leafHideGreenFisishAt = leafHideFisishAt3
+const leafGreenOpacity = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= leafShowGreen) {
+    ret = 0
+  } else if (scrollerElScrollTop.value > leafShowGreen && scrollerElScrollTop.value < leafShowGreenFinishAt) {
+    ret = (scrollerElScrollTop.value - leafShowGreen) / (leafShowGreenFinishAt - leafShowGreen)
+  } else if (scrollerElScrollTop.value >= leafShowGreenFinishAt && scrollerElScrollTop.value <= leafGreenHideAt) {
+    ret = 1
+  } else if (scrollerElScrollTop.value > leafGreenHideAt && scrollerElScrollTop.value < leafHideGreenFisishAt) {
+    ret = 1 - (scrollerElScrollTop.value - leafGreenHideAt) / (leafHideGreenFisishAt - leafGreenHideAt)
+  } else {
+    ret = 0
+  }
+  return ret
+})
+
+
+
+
+
+
+
+
+const stoneShowAt = leafHideFisishAt3 + (0 * window.innerHeight)
 const stoneShowFinishAt = stoneShowAt + (0.25 * window.innerHeight)
 const stoneHideAt = stoneShowFinishAt + (0.3 * window.innerHeight)
 const stoneHideFinishAt = stoneHideAt + (0.25 * window.innerHeight)
@@ -535,7 +837,69 @@ const stoneOpacity = computed(() => {
   return ret
 })
 
-const summaryShowAt = stoneHideFinishAt + window.innerHeight * 0
+const stoneShowAt1 = stoneHideFinishAt + (0 * window.innerHeight)
+const stoneShowFinishAt1 = stoneShowAt1 + (0.25 * window.innerHeight)
+const stoneHideAt1 = stoneShowFinishAt1 + (0.3 * window.innerHeight)
+const stoneHideFinishAt1 = stoneHideAt1 + (0.25 * window.innerHeight)
+const stoneOpacity1 = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= stoneShowAt1) {
+    ret = 0
+  } else if (scrollerElScrollTop.value > stoneShowAt1 && scrollerElScrollTop.value < stoneShowFinishAt1) {
+    ret = (scrollerElScrollTop.value - stoneShowAt1) / (stoneShowFinishAt1 - stoneShowAt1)
+  } else if (scrollerElScrollTop.value >= stoneShowFinishAt1 && scrollerElScrollTop.value <= stoneHideAt1) {
+    ret = 1
+  } else if (scrollerElScrollTop.value > stoneHideAt1 && scrollerElScrollTop.value < stoneHideFinishAt1) {
+    ret = 1 - (scrollerElScrollTop.value - stoneHideAt1) / (stoneHideFinishAt1 - stoneHideAt1)
+  } else {
+    ret = 0
+  }
+  return ret
+})
+
+const stoneShowGreen = stoneShowAt1
+const stoneShowGreenFinishAt = stoneShowFinishAt1
+const stoneGreenHideAt = stoneHideAt1
+const stoneHideGreenFisishAt = stoneHideFinishAt1
+const stoneGreenOpacity = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= stoneShowGreen) {
+    ret = 0
+  } else if (scrollerElScrollTop.value > stoneShowGreen && scrollerElScrollTop.value < stoneShowGreenFinishAt) {
+    ret = (scrollerElScrollTop.value - stoneShowGreen) / (stoneShowGreenFinishAt - stoneShowGreen)
+  } else if (scrollerElScrollTop.value >= stoneShowGreenFinishAt && scrollerElScrollTop.value <= stoneGreenHideAt) {
+    ret = 1
+  } else if (scrollerElScrollTop.value > stoneGreenHideAt && scrollerElScrollTop.value < stoneHideGreenFisishAt) {
+    ret = 1 - (scrollerElScrollTop.value - stoneGreenHideAt) / (stoneHideGreenFisishAt - stoneGreenHideAt)
+  } else {
+    ret = 0
+  }
+  return ret
+})
+
+
+
+const stoneShowText = stoneShowAt
+const stoneShowTextFinishAt = stoneShowFinishAt
+const stoneTextHideAt = stoneHideAt1
+const stoneHideTextFisishAt = stoneHideFinishAt1
+const stoneTextOpacity = computed(() => {
+  let ret = null
+  if (scrollerElScrollTop.value <= stoneShowText) {
+    ret = 0
+  } else if (scrollerElScrollTop.value > stoneShowText && scrollerElScrollTop.value < stoneShowTextFinishAt) {
+    ret = (scrollerElScrollTop.value - stoneShowText) / (stoneShowTextFinishAt - stoneShowText)
+  } else if (scrollerElScrollTop.value >= stoneShowTextFinishAt && scrollerElScrollTop.value <= stoneTextHideAt) {
+    ret = 1
+  } else if (scrollerElScrollTop.value > stoneTextHideAt && scrollerElScrollTop.value < stoneHideTextFisishAt) {
+    ret = 1 - (scrollerElScrollTop.value - stoneTextHideAt) / (stoneHideTextFisishAt - stoneTextHideAt)
+  } else {
+    ret = 0
+  }
+  return ret
+})
+
+const summaryShowAt = stoneHideFinishAt1 + window.innerHeight * 0
 const summaryShowFinishAt = summaryShowAt + window.innerHeight * 0.25
 const summaryHideAt = summaryShowFinishAt + window.innerHeight * 0.3
 const summaryHideFisishAt = summaryHideAt + window.innerHeight * 0.25
@@ -577,10 +941,12 @@ const sizeOpacity = computed(() => {
 
 const isShowHotspot = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= sizeShowAt) {
-    ret = false
+
+  // console.log('scrollerElScrollTop.value', scrollerElScrollTop.value <= sizeShowAt)
+  if (scrollerElScrollTop.value <= sizeShowAt && scrollerElScrollTop.value > 0) {
+    ret = true
   } else {
-    return true
+    return false
   }
   return ret
 })
@@ -601,29 +967,7 @@ function showBigPainting() {
 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) {
@@ -633,44 +977,6 @@ watch(scrollerElScrollTop, (v) => {
   }
 })
 
-// const lastX = ref(0)
-// function isDesktopUsingViewportWidth() {
-//   return window.matchMedia('(min-width: 769px)').matches
-// }
-
-// 开始滑动
-// const handletouchstart = (event) => {
-//   // pc端通过mouse移动
-//   if (isDesktopUsingViewportWidth) {
-//     lastX.value = event.pageX
-//   } else {
-//     lastX.value = event.changedTouches[0].pageX
-//   }
-// }
-
-const direction = ref(null)
-
-
-
-// 监听活动
-// const touchMove = (event) => {
-//   let currentX = event.changedTouches[0].pageX
-//   let tx = currentX - lastX.value
-
-//   if (tx < -30) {
-//     // 右滑
-//     direction.value = 'right'
-//     // 页面2--600，页面3--1000
-
-//   } else if (tx > 30) {
-//     // 左滑
-//     direction.value = 'left'
-//   } else {
-//     direction.value = null
-//   }
-// }
-
-
 function smoothScrollTo(element, finalPosition, duration = 500, startTime = performance.now()) {
 
   const currentTime = performance.now()
@@ -681,42 +987,21 @@ function smoothScrollTo(element, finalPosition, duration = 500, startTime = perf
   element.scrollTop = newPos
 
   if (progress < 1 && finalPosition == scrollerPositionList[curStep.value] * scrollerEl.value.scrollHeight) {
-    console.log('最后位置', finalPosition)
+    // console.log('最后位置', finalPosition)
     requestAnimationFrame(() => smoothScrollTo(element, finalPosition, duration, startTime))
   }
 }
 
 const curStep = ref(0)
 
-const scrollerPositionList = [0, 0.17, 0.33, 0.46, 0.62, 1]
-const scrollerPositionTimeRight = [6000, 6000, 15000, 15000, 15000, 4000]
-const scrollerPositionTimeLeft = [6000, 6000, 15000, 15000, 15000, 15000]
-
-
-
+const scrollerPositionList = [0, 0.115, 0.173, 0.265, 0.346, 0.416, 0.508, 0.589, 0.658, 0.716, 0.809, 1]
+const scrollerPositionTimeRight = [12000, 12000, 12000, 12000, 12000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
+const scrollerPositionTimeLeft = [12000, 12000, 12000, 12000, 12000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
 
-// const handletouchend = () => {
-//   if (direction.value == 'right' && curStep.value < scrollerPositionList.length - 1) {
-//     curStep.value ++
-//     console.log('right', 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 (direction.value == 'left' && 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)})
-//   }
-//   direction.value = null
-
-// }
 
 const onSwipeLeft = () => {
   if (curStep.value < scrollerPositionList.length - 1) {
-    console.log('右滑下一步', curStep.value)
     curStep.value ++
-    console.log('right', curStep.value)
     const pp = scrollerPositionList[curStep.value]
     const startTime = performance.now()
     requestAnimationFrame(() => {smoothScrollTo(scrollerEl.value, pp * scrollerEl.value.scrollHeight, scrollerPositionTimeRight[curStep.value], startTime)})
@@ -726,7 +1011,6 @@ const onSwipeLeft = () => {
 
 const onSwipeRight = () => {
   if (curStep.value > 0) {
-    console.log('左滑返回', curStep.value)
     curStep.value --
     const pp = scrollerPositionList[curStep.value] * scrollerEl.value.scrollHeight
     const startTime = performance.now()
@@ -773,7 +1057,7 @@ function onClickGoNextPage() {
   }
 
   >.startup {
-    z-index: 10;
+    z-index: 20;
   }
 
   >.title-wrap {
@@ -814,6 +1098,19 @@ function onClickGoNextPage() {
     position: absolute;
     left: 50%;
     transform: translate(-50%, 0);
+    z-index: 1;
+
+    >.green-box{
+      width: 200vw;
+      height: 200vh;
+      background: rgba(85, 116, 83, 0.8);
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      overflow: hidden;
+      transition: opacity 1s ease;
+    }
 
     >.size-sign-h {
       position: absolute;
@@ -882,16 +1179,17 @@ function onClickGoNextPage() {
       left: 50%;
       top: 54%;
       transform: translate(-50%, -50%);
-      width: calc(245 / 308 * 100%);
+      width: calc(225 / 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'));
+    width: calc(264 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(434 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     z-index: 7;
     pointer-events: none;
 
@@ -964,14 +1262,25 @@ function onClickGoNextPage() {
     font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     text-align: justify;
+    z-index:2;
+  }
+  >.detail-title-stem{
+    font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    letter-spacing: 2px;
+    transition: top 1s ease;
+    position:relative;
+    z-index:2;
   }
 
+
+
   >.progress-bar {
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 15px;
+    z-index: 3;
 
     >.bar-artwork-desc {
       position: absolute;
@@ -1049,6 +1358,7 @@ function onClickGoNextPage() {
     height: 100%;
     overflow: hidden;
     transition: transform 2s ease;
+    z-index:3;
 
     >.inner {
       width: 100%;
@@ -1056,7 +1366,7 @@ function onClickGoNextPage() {
   }
 
   >.hotspot-detail {
-    z-index: 20;
+    z-index: 21;
   }
 
   >.hotspot-detail.painting-detail {

src/views/HotspotDetail3.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="hotspot-detail-3">
+  <div
+    class="hotspot-detail-3"
+    :style="{background: `url(${state == 1 ? hots3StateBg1 : state == 2 ? hots3StateBg2 : hots3StateBg3})`,backgroundSize:'cover'}"
+  >
     <!-- 阴影 -->
     <img
       class="shadow-box"
@@ -102,9 +105,9 @@ const {
 // 轴1  卷2 册3
 const state = ref(1)
 
-const homeBg = computed(() => {
-  return `url(${state.value == 1 ? hots3StateBg1 : state.value == 2 ? hots3StateBg2 : hots3StateBg3})`
-})
+// const homeBg = computed(() => {
+//   return `url(${state.value == 1 ? hots3StateBg1 : state.value == 2 ? hots3StateBg2 : hots3StateBg3})`
+// })
 
 const shadow = computed(() => {
   return state.value == 1 ? hots3StateShadow1 : state.value == 2 ? hots3StateShadow2 : hots3StateShadow3
@@ -136,8 +139,8 @@ const goState2 = () => {
   top: 0;
   width: 100%;
   height: 100%;
-  background-image: v-bind(homeBg);
-  background-size: cover;
+  // background-image: v-bind(homeBg);
+  // background-size: cover;
   background-repeat: no-repeat;
   background-position: top left;
   display: flex;

src/views/MoreContent.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="more-content">
+  <div
+    v-if="isReady"
+    class="more-content"
+  >
     <div
       ref="scrollTarget"
       v-touch:swipe.left="onSwipeLeft"
@@ -419,7 +422,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount, inject, nextTick } from "vue"
+import { ref, computed, watch, onMounted, onBeforeMount, inject, nextTick } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import PoemList from '@/views/PoemList.vue'
@@ -486,40 +489,9 @@ const saveTitle = () => {
   }
 }
 
-const resizeTimer = ref(null)
-
-onMounted(() => {
-
-  window.addEventListener('resize', () => {
-    window.setTimeout(() => {
-      // 根元素
-      const dom = document.querySelector("#app")
-      if (dom && document.documentElement.clientWidth < 1000) {
-        dom.style.height = document.documentElement.clientHeight + "px"
-        dom.style.width = document.documentElement.clientWidth + "px"
-        windowWidth.value = document.documentElement.clientWidth
-        windowHeight.value = document.documentElement.clientHeight
-      }
-    }, 100)
-  })
-
-  setTimeout(() => {
-    window.dispatchEvent(new Event('resize'))
-  }, 200)
-  window.closeGame = () => {
-    isShowGamePage.value = false
-  }
 
 
 
-  window.isShowToastFromGame = () => {
-    isShowToastFromGame.value = true
-    input1.value = ''
-    input2.value = ''
-  }
-
-})
-
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -531,30 +503,7 @@ const windowHeightDesign = 844
 const scrollTarget = ref(null)
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 
-const time = ref()
-
-onMounted(() => {
-  // windowWidth.value = document.documentElement.clientWidth
-  // windowHeight.value = document.documentElement.clientHeight
-  window.addEventListener(
-    "resize",
-    () => {
-      //@ts-ignore
-      clearTimeout(time.value)
-      //@ts-ignore
-      time.value = window.setTimeout(() => {
-        // 根元素
-        const dom = document.querySelector("#app")
-        if (dom && document.documentElement.clientWidth < 1000) {
-          dom.style.height = document.documentElement.clientHeight + "px"
-          dom.style.width = document.documentElement.clientWidth + "px"
 
-        }
-      }, 100)
-    },
-    true
-  )
-})
 const maxTranslateLength = computed(() => {
   return windowHeight.value * windowWidthDesign / windowHeightDesign
 })
@@ -678,6 +627,46 @@ watch(goingToAnchorIdx, (v) => {
     // }, 850)
   }
 })
+
+const isReady = ref(false)
+
+onBeforeMount(() => {
+  window.addEventListener('resize', () => {
+    window.setTimeout(() => {
+    // 根元素
+      const dom = document.querySelector("#app")
+      if (dom && document.documentElement.clientWidth < 1000) {
+        windowWidth.value = document.documentElement.clientWidth
+        windowHeight.value = document.documentElement.clientHeight
+      }
+    }, 100)
+  })
+
+  setTimeout(() => {
+    isReady.value = true
+  }, 500)
+})
+
+onMounted(() => {
+
+  window.dispatchEvent(new Event('resize'))
+
+  const dom = document.querySelector("#app")
+  windowWidth.value = window.windowWidth
+  windowHeight.value = window.windowHeight
+
+
+  window.closeGame = () => {
+    isShowGamePage.value = false
+  }
+
+  window.isShowToastFromGame = () => {
+    isShowToastFromGame.value = true
+    input1.value = ''
+    input2.value = ''
+  }
+
+})
 </script>
 
 <style lang="less" scoped>

src/views/MoreContentChange.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { onMounted } from "vue"
+import { useRouter } from "vue-router"
+
+const router = useRouter()
+onMounted(() => {
+  setTimeout(()=>{
+    router.replace({
+      name: 'MoreContent',
+    })
+  }, 100)
+})
+</script>
+
+<template>
+  <div class="" />
+</template>
+
+<style lang='less' scoped>
+
+</style>

src/views/PoemList（New）.vue

@@ -0,0 +1,310 @@
+<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.push({
+      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>

src/views/StartupView.vue

@@ -95,8 +95,10 @@ const isShowSkip = ref(false)
 const videoEl = ref(null)
 function onClickStart() {
   isShowVideo.value = true
+  const audioEl = document.getElementById('bg-music')
   nextTick(() => {
     videoEl.value.play()
+    audioEl.play()
   })
   setTimeout(() => {
     isShowSkip.value = true