Merge branch 'master' of http://192.168.0.115:3000/renyicun/NanjingMuseumWuJinZang

public/configText.js

@@ -1,13 +1,13 @@
 var configText = {
   homepagePaintingDesc: [
     `古人创作墨竹的灵感来自“因观竹影而得意。”又有“学画竹者，取一枝竹，因月夜照其影于素壁之上，则竹之真形出矣”，或者“每灯下照竹枝模影写真”，再或者“折小枝，就日影视之，皆欲精到”。画家通过日光、月影和灯下竹影写成墨竹。`,
-    `我们从文献与实物综合考察分析，墨竹起源于唐、五代，北宋时以文同为集大成者，经苏轼加持，形成了中国绘画史上影响最大的“湖州竹派”。`,
-    `该派既继承传统又重视写生，技法严谨，精神内涵丰富。李衎是元代湖州竹派的代表性画家。`,
+    // `我们从文献与实物综合考察分析，墨竹起源于唐、五代，北宋时以文同为集大成者，经苏轼加持，形成了中国绘画史上影响最大的“湖州竹派”。`,
+    // `该派既继承传统又重视写生，技法严谨，精神内涵丰富。李衎是元代湖州竹派的代表性画家。`,
   ],
   homepageAuthorDesc: [
     `李衎（1245年-1320年），字仲宾，号息斋道人，蓟丘（今北京）人。皇庆元年（1312年）任吏部尚书，拜集贤殿大学士，与赵孟頫相友善。死后追封蓟国公，谥文简。擅长画竹，墨竹初师王庭筠，继师文同，青绿设色师李颇。`,
     `李衎喜欢在绢上作画，尤其是晚期作品，因其身为官场显贵，有财力购买好绢，与南方文人好用纸大异其趣；又因绢质能增画面清贵感，符合其地位。此外，绢画是唐宋传统，可以增加古意。`,
-    `李衎早期竹图受金代王庭筠影响，如《竹梧兰石四清图》；晚期以文同笔墨写“真竹”，竹子的造型多源于他对竹子生态的研究。他的创作理念始终以“清”为指导原则，特别重视清润，这是他最根本的美学理念，并通过画作表达出一套伦理道德观念，因此他的画有强烈的象征主义特征。"`,
+    // `李衎早期竹图受金代王庭筠影响，如《竹梧兰石四清图》；晚期以文同笔墨写“真竹”，竹子的造型多源于他对竹子生态的研究。他的创作理念始终以“清”为指导原则，特别重视清润，这是他最根本的美学理念，并通过画作表达出一套伦理道德观念，因此他的画有强烈的象征主义特征。"`,
   ],
   homepagePaintingDetailDescStem: '坡石一隅的三竿修竹，两竿近，一竿远，近低远高，近开远合，两竿向右，一竿向左，一聚一分，构图稳定，法度森严。',
   homepagePaintingDetailDescLeaf: '竹叶的画法以“个”“介"“分”\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。',

src/App.vue

@@ -124,6 +124,7 @@ input, textarea {
   }
 }
 
+
 // 不断渐变显隐，显示时间较长 animation
 .animation-show-long-hide {
   animation: show-long-hide 2.5s infinite;

src/components/BtnClickMe.vue

@@ -0,0 +1,100 @@
+<template>
+  <Transition name="fade-in-out">
+    <button
+      v-show="isShow"
+      class="btn-click-me"
+    >
+      <div
+        v-if="props.text"
+        class="text animation-show-hide-half"
+      >
+        {{ props.text }}
+      </div>
+      <img
+        class=""
+        :src="require(`@/assets/images/icon-click-tip.png`)"
+        alt=""
+        draggable="false"
+      >
+    </button>
+  </Transition>
+</template>
+
+<script setup>
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import { ref, computed, watch, onMounted, inject } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'white', // 'green'
+  },
+  text: {
+    type: String,
+    default: '',
+  },
+  isShow: {
+    type: Boolean,
+    default: true,
+  }
+})
+
+const color = computed(() => {
+  if (props.color === 'white') {
+    return '#fff'
+  } else if (props.color === 'green') {
+    return '#7B916B'
+  } else {
+    return props.color
+  }
+})
+
+const isShow = computed(() => {
+  return props.isShow
+})
+</script>
+
+<style lang="less" scoped>
+.btn-click-me{
+  display: flex;
+  align-items: center;
+  >.text{
+    color: v-bind('color');
+    margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: KaiTi, KaiTi;
+    font-weight: 400;
+    font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >img{
+    width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  .animation-show-hide-half {
+    animation: show-hide 1.5s infinite;
+  }
+}
+@keyframes show-hide {
+    0% {
+      opacity: 0.4;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0.4;
+    }
+  }
+</style>

src/components/HotspotForHomepage.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="hotspot animation-show-hide-for-home-hotspot">
+    <img
+      class=""
+      src="@/assets/images/icon_hotspot.png"
+      alt=""
+      draggable="false"
+    >
+  </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')
+</script>
+
+<style lang="less" scoped>
+.hotspot{
+  width: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  >img{
+    width: 100%;
+    height: 100%;
+  }
+}
+.animation-show-hide-for-home-hotspot {
+  animation: show-hide 2.5s infinite;
+}
+@keyframes show-hide {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>

src/main.js

@@ -15,8 +15,10 @@ import 'swiper/css'
 import 'swiper/css/pagination' // 分页器样式
 
 import BtnBack from '@/components/BtnBack.vue'
+import BtnClickMe from '@/components/BtnClickMe.vue'
 import OperationTip from '@/components/OperationTip.vue'
 import HotspotComp from '@/components/HotspotComp.vue'
+import HotspotForHomepage from '@/components/HotspotForHomepage.vue'
 import SerialFrames from '@/components/LongImageSerialFrames.vue'
 import BtnSkip from '@/components/BtnSkip.vue'
 import PaginationComp from '@/components/PaginationComp.vue'
@@ -86,8 +88,10 @@ app.use(store)
   .use(VueViewer)
   .use(ElementPlus)
   .component('BtnBack', BtnBack)
+  .component('BtnClickMe', BtnClickMe)
   .component('OperationTip', OperationTip)
   .component('HotspotComp', HotspotComp)
+  .component('HotspotForHomepage', HotspotForHomepage)
   .component('Swiper', Swiper)
   .component('SwiperSlide', SwiperSlide)
   .component('SerialFrames', SerialFrames)

src/store/index.js

@@ -9,7 +9,7 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    haveShownStartup: process.env.VUE_APP_CLI_MODE === 'dev' ? false : false,
+    haveShownStartup: process.env.VUE_APP_CLI_MODE === 'dev' ? true : false,
     // loginStatus: loginStatusEnum.notLogin,
     // token: '',
     // userInfo: {

src/views/BambooBookScene2.vue

@@ -93,6 +93,7 @@ const {
           :style="{ width: x > 0.5 ? '100%' : '' }"
           :src=" ganImg"
           alt=""
+          @click="emit('next', curPart)"
         >
       </Transition>
       <Transition name="fade-in-out">
@@ -102,6 +103,7 @@ const {
           :style="{ width: x > 0.5 ? '100%' : '' }"
           :src=" zhiImg"
           alt=""
+          @click="emit('next', curPart)"
         >
       </Transition>
       <Transition name="fade-in-out">
@@ -111,6 +113,7 @@ const {
           :style="{ width: x > 0.5 ? '100%' : '' }"
           :src=" yeImg"
           alt=""
+          @click="emit('next', curPart)"
         >
       </Transition>
       <!-- 竹子部分选择 -->

src/views/GameView.vue

@@ -2,10 +2,13 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from "vue-router"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import { useStore } from 'vuex'
 
 import Toast from '@/components/ToastBox.vue'
 const router = useRouter()
 
+const store = useStore()
+
 // home-封面  unity-游戏 scene-线上展  reset-确认是否重新
 const mode = ref('home')
 
@@ -19,6 +22,7 @@ const goHome = () => {
 }
 
 const resetHome = () => {
+  store.commit('setShowingStartup', false)
   router.replace('/')
 }
 

src/views/HomeView.vue

@@ -34,7 +34,9 @@
     <div
       class="painting-wrap"
       :style="{
-        top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`
+        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
@@ -114,17 +116,17 @@
         top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`
       }"
     >
-      <HotspotComp
+      <HotspotForHomepage
         v-show="isShowHotspot"
         class="hotspot-1"
         @click="isShowHotspotDetail1 = true"
       />
-      <HotspotComp
+      <HotspotForHomepage
         v-show="isShowHotspot"
         class="hotspot-2"
         @click="showBigPainting"
       />
-      <HotspotComp
+      <HotspotForHomepage
         v-show="isShowHotspot"
         class="hotspot-3"
         @click="isShowHotspotDetail3 = true"
@@ -136,7 +138,7 @@
       ref="longDesc"
       class="long-desc"
       :style="{
-        top: `${(paintingTop + 540) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        top: `${(paintingTop + paintingHeight + 53) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: longDescOpacity,
       }"
     >
@@ -192,6 +194,38 @@
       {{ 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"
@@ -202,10 +236,13 @@
     <div
       ref="scrollerEl"
       class="scroller"
-      @touchstart="handletouchstart($event)"
-      @touchmove="touchMove($event)"
     >
-      <div class="inner" />
+      <div
+        class="inner"
+        :style="{
+          height: summaryHideAt + windowHeight + 'px',
+        }"
+      />
     </div>
 
     <!-- 热点详情页 -->
@@ -263,6 +300,12 @@
         })"
       />
     </Transition>
+    <BtnClickMe
+      class="go-next-page"
+      text="点击继续"
+      :is-show="isShowBtnGoNextPage"
+      @click="onClickGoNextPage"
+    />
   </div>
 </template>
 
@@ -276,6 +319,9 @@ 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()
@@ -327,124 +373,197 @@ const unwatch = watch(haveShownStartup, (v) => {
   }
 })
 
+
+const titleHideAt = window.innerHeight * 0
+const titleHideFinishAt = window.innerHeight * 0.75
 const titleOpacity = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 0.3) {
-    ret = 1 - (window.innerHeight * 0.3 - scrollerElScrollTop.value) / (window.innerHeight * 0.3)
-  } else if (scrollerElScrollTop.value > window.innerHeight * 0.3 && scrollerElScrollTop.value < window.innerHeight * 0.5) {
+  if (scrollerElScrollTop.value <= titleHideAt) {
     ret = 1
   } else {
-    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 0.5) / (window.innerHeight * (0.75 - 0.5))
+    ret = 1 - (scrollerElScrollTop.value - titleHideAt) / (titleHideFinishAt - titleHideAt)
   }
   return ret
 })
 
+const paintingMoveUpAt = window.innerHeight * 0
+const paintingTopInitial = 236
+const paintingMoveUpFinishAt = window.innerHeight * 1
+const paintingTopMovedUp = 41
+const paintingMoveDownAt = window.innerHeight * 2
+const paintingMoveDownFinishAt = window.innerHeight * 2.5
+const paingtingTopMovedDown = 90
 const paintingTop = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 0.5) {
-    ret = 180
-  } else if (scrollerElScrollTop.value > window.innerHeight * 0.5 && scrollerElScrollTop.value < window.innerHeight * 1) {
-    ret = (scrollerElScrollTop.value - window.innerHeight * 0.5) / (window.innerHeight * (1 - 0.5)) * (67 - 180) + 180
+  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 = 67
+    ret = paintingHeightMovedDown
   }
   return ret
 })
 
 const longDesc = ref(null)
+const longDescShowFinishAt = window.innerHeight * 0.5
+const longDescHideAt = longDescShowFinishAt + window.innerHeight * 1
+const longDescHideFinishAt = longDescHideAt + window.innerHeight * 0.5
 const longDescOpacity = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 0.3) {
-    ret = 1 - (window.innerHeight * 0.3 - scrollerElScrollTop.value) / (window.innerHeight * 0.3)
-  } else if (scrollerElScrollTop.value > window.innerHeight * 0.3 && scrollerElScrollTop.value < window.innerHeight * 2) {
+  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 - window.innerHeight * 2) / (window.innerHeight * (3 - 2))
+    ret = 1 - (scrollerElScrollTop.value - longDescHideAt) / (longDescHideFinishAt - longDescHideAt)
   }
   return ret
 })
 watch(scrollerElScrollTop, (vNew, vOld) => {
-  if (vNew > window.innerHeight * 1) {
-    longDesc.value.scrollTop = vNew - window.innerHeight * 1
-  } else if (vNew < vOld && vNew <= window.innerHeight * 1) {
+  if (vNew > paintingMoveUpFinishAt) {
+    longDesc.value.scrollTop = vNew - paintingMoveUpFinishAt
+  } else if (vNew < vOld && vNew <= paintingMoveUpFinishAt) {
     longDesc.value.scrollTop = 0
   }
 })
 
+const stemShowAt = longDescHideFinishAt + window.innerHeight * 0.1
+const stemShowFinishAt = stemShowAt + window.innerHeight * 0.5
+const stemHideAt = stemShowFinishAt + window.innerHeight * 0.5
+const stemHideFisishAt = stemShowFinishAt + window.innerHeight * 0.5
 const stemOpacity = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 3) {
+  if (scrollerElScrollTop.value <= stemShowAt) {
     ret = 0
-  } else if (scrollerElScrollTop.value > window.innerHeight * 3 && scrollerElScrollTop.value < window.innerHeight * 3.5) {
-    ret = (scrollerElScrollTop.value - window.innerHeight * 3) / (window.innerHeight * (3.5 - 3))
-  } else if (scrollerElScrollTop.value >= window.innerHeight * 3.5 && scrollerElScrollTop.value <= window.innerHeight * 4) {
+  } 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 > window.innerHeight * 4 && scrollerElScrollTop.value < window.innerHeight * 4.5) {
-    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 4) / (window.innerHeight * (4.5 - 4))
+  } else if (scrollerElScrollTop.value > stemHideAt && scrollerElScrollTop.value < stemHideFisishAt) {
+    ret = 1 - (scrollerElScrollTop.value - stemHideAt) / (stemHideFisishAt - stemHideAt)
   } else {
     ret = 0
   }
   return ret
 })
 
+const leafShowAt = stemHideFisishAt + (0.1 * window.innerHeight)
+const leafShowFinishAt = leafShowAt + (0.5 * window.innerHeight)
+const leafHideAt = leafShowFinishAt + (0.5 * window.innerHeight)
+const leafHideFisishAt = leafHideAt + (0.5 * window.innerHeight)
 const leafOpacity = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 5) {
+  if (scrollerElScrollTop.value <= leafShowAt) {
     ret = 0
-  } else if (scrollerElScrollTop.value > window.innerHeight * 5 && scrollerElScrollTop.value < window.innerHeight * 5.5) {
-    ret = (scrollerElScrollTop.value - window.innerHeight * 5) / (window.innerHeight * (5.5 - 5))
-  } else if (scrollerElScrollTop.value >= window.innerHeight * 5.5 && scrollerElScrollTop.value <= window.innerHeight * 6) {
+  } 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 > window.innerHeight * 6 && scrollerElScrollTop.value < window.innerHeight * 6.5) {
-    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 6) / (window.innerHeight * (6.5 - 6))
+  } else if (scrollerElScrollTop.value > leafHideAt && scrollerElScrollTop.value < leafHideFisishAt) {
+    ret = 1 - (scrollerElScrollTop.value - leafHideAt) / (leafHideFisishAt - leafHideAt)
   } else {
     ret = 0
   }
   return ret
 })
 
+const stoneShowAt = leafHideFisishAt + (0.1 * window.innerHeight)
+const stoneShowFinishAt = stoneShowAt + (0.5 * window.innerHeight)
+const stoneHideAt = stoneShowFinishAt + (0.5 * window.innerHeight)
+const stoneHideFinishAt = stoneHideAt + (0.5 * window.innerHeight)
 const stoneOpacity = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 7) {
+  if (scrollerElScrollTop.value <= stoneShowAt) {
     ret = 0
-  } else if (scrollerElScrollTop.value > window.innerHeight * 7 && scrollerElScrollTop.value < window.innerHeight * 7.5) {
-    ret = (scrollerElScrollTop.value - window.innerHeight * 7) / (window.innerHeight * (7.5 - 7))
-  } else if (scrollerElScrollTop.value >= window.innerHeight * 7.5 && scrollerElScrollTop.value <= window.innerHeight * 8) {
+  } 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 > window.innerHeight * 8 && scrollerElScrollTop.value < window.innerHeight * 8.5) {
-    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 8) / (window.innerHeight * (8.5 - 8))
+  } 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.3
+const summaryShowFinishAt = summaryShowAt + window.innerHeight * 0.5
+const summaryHideAt = summaryShowFinishAt + window.innerHeight * 0.5
+const summaryHideFisishAt = summaryHideAt + window.innerHeight * 0.5
 const summaryOpacity = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 9) {
+  if (scrollerElScrollTop.value <= summaryShowAt) {
     ret = 0
-  } else if (scrollerElScrollTop.value > window.innerHeight * 9 && scrollerElScrollTop.value < window.innerHeight * 9.5) {
-    ret = (scrollerElScrollTop.value - window.innerHeight * 9) / (window.innerHeight * (9.5 - 9))
-  } else if (scrollerElScrollTop.value >= window.innerHeight * 9.5 && scrollerElScrollTop.value <= window.innerHeight * 10) {
+  } 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 > window.innerHeight * 10 && scrollerElScrollTop.value < window.innerHeight * 10.5) {
-    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 10) / (window.innerHeight * (10.5 - 10))
+  } 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 <= window.innerHeight * 3) {
+  if (scrollerElScrollTop.value <= sizeShowAt) {
     ret = 0
-  } else if (scrollerElScrollTop.value > window.innerHeight * 3 && scrollerElScrollTop.value < window.innerHeight * 3.5) {
-    ret = (scrollerElScrollTop.value - window.innerHeight * 3) / (window.innerHeight * (3.5 - 3))
-  } else if (scrollerElScrollTop.value >= window.innerHeight * 3.5 && scrollerElScrollTop.value <= window.innerHeight * 8) {
+  } 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 > window.innerHeight * 8 && scrollerElScrollTop.value < window.innerHeight * 8.5) {
-    ret = 1 - (scrollerElScrollTop.value - window.innerHeight * 8) / (window.innerHeight * (8.5 - 8))
+  } else if (scrollerElScrollTop.value > sizeHideAt && scrollerElScrollTop.value < sizeHideFisishAt) {
+    ret = 1 - (scrollerElScrollTop.value - sizeHideAt) / (sizeHideFisishAt - sizeHideAt)
   } else {
     ret = 0
   }
@@ -453,7 +572,7 @@ const sizeOpacity = computed(() => {
 
 const isShowHotspot = computed(() => {
   let ret = null
-  if (scrollerElScrollTop.value <= window.innerHeight * 3) {
+  if (scrollerElScrollTop.value <= sizeShowAt) {
     ret = false
   } else {
     return true
@@ -472,35 +591,52 @@ 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
+// 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 {
-    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)
+    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>
@@ -528,7 +664,7 @@ const touchMove = (event) => {
   >.title-wrap{
     position: absolute;
     left: 50%;
-    top: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    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'));
@@ -560,14 +696,12 @@ const touchMove = (event) => {
     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'));
     >.size-sign-h{
       position: absolute;
       left: 50%;
       top: 0;
       transform: translate(-50%, -105%);
-      width: calc(309 * 0.9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(245 / 308 * 100%);
       >img{
         width: 100%;
       }
@@ -578,7 +712,7 @@ const touchMove = (event) => {
         transform: translate(-50%, -50%);
         font-family: KaiTi, KaiTi;
         font-weight: 400;
-        font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        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;
@@ -587,9 +721,9 @@ const touchMove = (event) => {
     >.size-sign-v{
       position: absolute;
       right: 0;
-      top: 50%;
+      top: 54%;
       transform: translate(80%, -50%);
-      height: calc(464 * 0.9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(371 / 523 * 100%);
       >img{
         height: 100%;
       }
@@ -600,7 +734,7 @@ const touchMove = (event) => {
         transform: translate(-50%, -50%);
         font-family: KaiTi, KaiTi;
         font-weight: 400;
-        font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        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;
@@ -617,9 +751,9 @@ const touchMove = (event) => {
     >img.painting, img.painting-stem, img.painting-leaf, img.painting-stone{
       position: absolute;
       left: 50%;
-      top: calc(103 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      transform: translate(-50%, 0);
-      width: calc(245 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      top: 54%;
+      transform: translate(-50%, -50%);
+      width: calc(245 / 308 * 100%);
     }
   }
   >.hotspot-wrap{
@@ -691,6 +825,66 @@ const touchMove = (event) => {
     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%;
@@ -706,7 +900,6 @@ const touchMove = (event) => {
     overflow: auto;
     >.inner{
       width: 100%;
-      height: 1050%;
     }
   }
   >.hotspot-detail{
@@ -715,7 +908,7 @@ const touchMove = (event) => {
   >.hotspot-detail.painting-detail{
     backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
   }
-  >.fade-to-next-page{
+  >video.fade-to-next-page{
     position: absolute;
     left: 0;
     top: 0;
@@ -724,5 +917,13 @@ const touchMove = (event) => {
     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/OnlineSceneView.vue

@@ -1,4 +1,8 @@
-<script setup lang='ts'>
+<script setup>
+import { useRoute, useRouter } from "vue-router"
+
+const route = useRoute()
+const router = useRouter()
 </script>
 
 <template>
@@ -7,6 +11,10 @@
       src="https://www.4dkankan.com/spg.html?m=KJ-et2X3su4ofm"
       frameborder="0"
     />
+    <BtnBack
+      class="btn-back"
+      @click="router.go(-1)"
+    />
   </div>
 </template>
 
@@ -18,6 +26,11 @@
     width: 100%;
     height: 100%;
   }
-
+  >.btn-back{
+    position: absolute;
+    left: 20px;
+    top: 25px;
+    transform: scale(1.2);
+  }
 }
 </style>