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

README.md

@@ -5,21 +5,21 @@
 
 ## 任一存的todos
 
-### 优化
-内容扩展页 按钮边框
+### bug fix
+邵总
 
-内容扩展页 标题装饰小圈
+### 优化
+内容扩展页 按钮边框 上下空间大小不对称
 
 内容扩展页 落叶开发
 
-内容扩展页 回到这一页时复原
-
 内容扩展页 操作提示文字竖着
 
-### 开发
-竹林层次
+开始按钮位置 不同屏幕里适配
 
 ### 保存成果
 组件：序列帧
 
-useFunction: useSmoothSwipe.js
+useFunction: useSmoothSwipe.js
+
+避免滑动触发浏览器原生行为的方法

src/components/BtnSkip.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="btn-skip">
+    <div class="text">
+      跳过
+    </div>
+    <img
+      class="arrow"
+      src="@/assets/images/icon_arrow-right.png"
+      alt=""
+      draggable="false"
+    >
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+import useSizeAdapt from '@/useFunctions/useSizeAdapt.js'
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const $env = inject('$env')
+</script>
+
+<style lang="less" scoped>
+.btn-skip{
+  position: absolute;
+  width: calc(74 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  height: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  right: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  background-image: url(@/assets/images/btn_skip.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 30;
+  >.text{
+    font-family: KingHwa_OldSong, KingHwa_OldSong;
+    font-weight: 400;
+    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    color: #FFFFFF;
+  }
+  >img.arrow{
+    margin-left: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+}
+</style>

src/components/LongImageSerialFrames.vue

@@ -43,18 +43,30 @@ const props = defineProps({
     type: Number,
     default: 41
   },
+  loop: {
+    type: Boolean,
+    default: true,
+  }
 })
 
 const frameWidth = ref(props.totalWidth / props.frameNumber)
 console.assert(Number.isInteger(frameWidth.value), `序列帧的每帧宽度不是整数，可能导致播放时抖动！总宽度：${props.totalWidth}，帧数：${props.frameNumber}，每帧宽度：${frameWidth.value}`)
 
+const emit = defineEmits(['over'])
+
 const frameIdx = ref(0)
 let intervalId = null
 onMounted(() => {
   intervalId = setInterval(() => {
     frameIdx.value++
     if (frameIdx.value === props.frameNumber) {
-      frameIdx.value = 0
+      if (props.loop) {
+        frameIdx.value = 0
+      } else {
+        frameIdx.value--
+        clearInterval(intervalId)
+        emit('over')
+      }
     }
   }, props.frameDuration)
 })
@@ -68,7 +80,6 @@ onBeforeUnmount(() => {
 .single-long-image-serial-frames {
   position: absolute;
   overflow: hidden;
-  pointer-events: none;
   > .long-image {
     position: absolute;
     height: 100%;

src/main.js

@@ -18,6 +18,7 @@ import BtnBack from '@/components/BtnBack.vue'
 import OperationTip from '@/components/OperationTip.vue'
 import HotspotComp from '@/components/HotspotComp.vue'
 import SerialFrames from '@/components/LongImageSerialFrames.vue'
+import BtnSkip from '@/components/BtnSkip.vue'
 
 console.log(`version: ${process.env.VUE_APP_VERSION}`)
 console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)
@@ -89,6 +90,7 @@ app.use(store)
   .component('Swiper', Swiper)
   .component('SwiperSlide', SwiperSlide)
   .component('SerialFrames', SerialFrames)
+  .component('BtnSkip', BtnSkip)
   .mount('#app')
 
 //  you can reset the default options at any other time

src/store/index.js

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

src/useFunctions/useSmoothSwipe.js

@@ -6,13 +6,14 @@ export default function useSmoothSwipe({
   maxTranslateLength,
   viewportWidth = document.documentElement.clientWidth,
   anchorPosList,
+  initialAnchorIdx = 0,
 } = {}) {
 
   const isOperating = ref(false)
   const haveSwipedThisTime = ref(false)
   let hasOperatedThisTimeTimeoutId = null
 
-  let translateLength = ref(anchorPosList[0])
+  let translateLength = ref(anchorPosList[initialAnchorIdx])
   let maxTranslateLengthInner = Infinity
 
   let animationFrameId = null
@@ -26,7 +27,7 @@ export default function useSmoothSwipe({
     return a > b
   })
   let anchorPosListInnerReverse = [...anchorPosListInner].reverse()
-  const currentAnchorIdx = ref(0)
+  const currentAnchorIdx = ref(initialAnchorIdx)
 
   watch(isOperating, (v) => {
     if (v) {
@@ -77,7 +78,7 @@ export default function useSmoothSwipe({
       const destinationIdx = anchorPosListInner.findIndex((item) => {
         return item - translateLength.value > 1
       })
-      if (Number.isInteger(destinationIdx) && !isTweening) {
+      if ((destinationIdx !== -1) && !isTweening) {
         isTweening = true
         tween = new TWEEN.Tween(translateLength)
         tween.to({
@@ -94,7 +95,7 @@ export default function useSmoothSwipe({
       const destinationIdx = anchorPosListInnerReverse.findIndex((item) => {
         return item - translateLength.value < -1
       })
-      if (Number.isInteger(destinationIdx) && !isTweening) {
+      if ((destinationIdx !== -1) && !isTweening) {
         isTweening = true
         tween = new TWEEN.Tween(translateLength)
         tween.to({

src/views/BambooBookView.vue

@@ -1,18 +1,23 @@
 <script setup>
 import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 import BambooBookScene1 from '@/views/BambooBookScene1.vue'
 import BambooBookScene2 from '@/views/BambooBookScene2.vue'
 import BambooBookScene3 from '@/views/BambooBookScene3.vue'
 
-
-
-
 // 当前滑动到第几屏
 const curIndex = ref(0)
 
 const toBack = () => {
-  window.history.back()
+  router.push({
+    name: 'MoreContent',
+    query: {
+      anchorIdx: 1,
+    }
+  })
 }
 
 // 第三屏

src/views/BambooHotView.vue

@@ -1,7 +1,10 @@
 <script setup>
 import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
+const router = useRouter()
+
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -125,7 +128,12 @@ const scrollFn = () => {
 }
 
 const goBack = () => {
-  window.history.back()
+  router.push({
+    name: 'MoreContent',
+    query: {
+      anchorIdx: 0,
+    }
+  })
 }
 
 

src/views/HomeView.vue

@@ -255,6 +255,14 @@
         })"
       />
     </Transition>
+    <Transition name="fade-in">
+      <BtnSkip
+        v-if="isShowSkip"
+        @click="router.push({
+          name: 'MoreContent',
+        })"
+      />
+    </Transition>
   </div>
 </template>
 
@@ -468,6 +476,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) => {
@@ -481,11 +490,14 @@ const handletouchstart = (event) => {
 const touchMove = (event) => {
   let currentY = event.changedTouches[0].pageY
   let tY = currentY - fingerPosYWhenTouchStart.value
-  if (tY < -5 && isAtBottomWhenTouchStart.value) {
+  if (tY < -1 && isAtBottomWhenTouchStart.value) {
     isShowVideoFadeToNextPage.value = true
     nextTick(() => {
       videoFadeToNextPageEl.value.play()
     })
+    setTimeout(() => {
+      isShowSkip.value = true
+    }, 2000)
   }
 }
 

src/views/MoreContent.vue

@@ -5,73 +5,201 @@
     <div
       ref="scrollTarget"
       class="scroll-target"
-      @touchstart="handletouchstart($event)"
-      @touchmove="touchMove($event)"
     >
       <img
-        class="temp-bg"
+        class="bg"
         :style="{
-          left: tempBgLeft + 'px'
+          left: bgLeft + 'px'
         }"
-        src="@/assets/images/bg-more-content.jpg"
+        src="@/assets/images/fade-chapter-wood/bg-more-content.jpg"
         alt=""
         draggable="false"
       >
 
-      <HotspotComp
-        class="hotspot"
+      <div
+        class="layer-4"
         :style="{
-          left: hotspotLeft + 'px',
+          left: layer4Left + 'px',
         }"
-        @click="router.push({
-          name: 'BambooHot',
-        })"
-      />
+      >
+        <img
+          class="bamboo-4_01"
+          src="@/assets/images/fade-chapter-wood/4_01.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_02"
+          src="@/assets/images/fade-chapter-wood/4_02.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_03"
+          src="@/assets/images/fade-chapter-wood/4_03.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_04"
+          src="@/assets/images/fade-chapter-wood/4_04.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_05"
+          src="@/assets/images/fade-chapter-wood/4_05.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_06"
+          src="@/assets/images/fade-chapter-wood/4_06.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_07"
+          src="@/assets/images/fade-chapter-wood/4_07.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
 
       <div
-        class="shuang-gou-she-se-group"
+        class="layer-3"
         :style="{
-          left: shuangGouSheSeGroupLeft + 'px'
+          left: layer3Left + 'px',
         }"
       >
-        <button
-          class="watch-detail"
-          @click="onClickShuangGouEntry"
+        <img
+          class="bamboo-3_01"
+          src="@/assets/images/fade-chapter-wood/3_01.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-3_02"
+          src="@/assets/images/fade-chapter-wood/3_02.png"
+          alt=""
+          draggable="false"
         >
-          查看详情
-        </button>
-        <h2 class="group-title">
-          双钩设色
-        </h2>
       </div>
 
       <div
-        class="mo-zhu-group"
+        class="layer-2"
         :style="{
-          left: moZhuGroupLeft + 'px'
+          left: layer2Left + 'px',
         }"
       >
-        <div class="button-group">
-          <button
-            class="poem"
-            @click="onClickEntryAtMoZhu('PoemList')"
-          >
-            人文
-          </button>
-          <button
-            @click="onClickEntryAtMoZhu('PaintingList')"
-          >
-            画作
-          </button>
+        <img
+          class="bamboo-2_01"
+          src="@/assets/images/fade-chapter-wood/2_01.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-2_03"
+          src="@/assets/images/fade-chapter-wood/2_03.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-2_02"
+          src="@/assets/images/fade-chapter-wood/2_02.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
+
+      <div
+        class="layer-1"
+        :style="{
+          left: layer1Left + 'px',
+        }"
+      >
+        <img
+          class="bamboo-1_01"
+          src="@/assets/images/fade-chapter-wood/1_01.png"
+          alt=""
+          draggable="false"
+        >
+        <HotspotComp
+          class="hotspot"
+          @click="router.push({
+            name: 'BambooHot',
+          })"
+        />
+        <div
+          class="shuang-gou-she-se-group"
+        >
           <button
-            @click="onClickEntryAtMoZhu('BambooBook')"
+            class="watch-detail animation-show-hide"
+            @click="onClickShuangGouEntry"
           >
-            竹谱
+            查看详情
           </button>
+          <div class="group-title">
+            双钩设色
+            <img
+              class="deco"
+              src="@/assets/images/more-content-deco.png"
+              alt=""
+              draggable="false"
+            >
+          </div>
         </div>
-        <h2 class="group-title">
-          墨竹
-        </h2>
+        <img
+          class="bamboo-1_02"
+          src="@/assets/images/fade-chapter-wood/1_02.png"
+          alt=""
+          draggable="false"
+        >
+        <div
+          class="mo-zhu-group"
+        >
+          <div class="button-group">
+            <button
+              class="poem animation-show-hide"
+              @click="onClickEntryAtMoZhu('PoemList')"
+            >
+              人文
+            </button>
+            <button
+              class="animation-show-hide"
+              @click="onClickEntryAtMoZhu('PaintingList')"
+            >
+              画作
+            </button>
+            <button
+              class="animation-show-hide"
+              @click="onClickEntryAtMoZhu('BambooBook')"
+            >
+              竹谱
+            </button>
+          </div>
+          <div class="group-title">
+            墨竹
+            <img
+              class="deco"
+              src="@/assets/images/more-content-deco.png"
+              alt=""
+              draggable="false"
+            >
+          </div>
+        </div>
+        <img
+          class="bamboo-1_03"
+          src="@/assets/images/fade-chapter-wood/1_03.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-1_04"
+          src="@/assets/images/fade-chapter-wood/1_04.png"
+          alt=""
+          draggable="false"
+        >
       </div>
     </div>
 
@@ -86,7 +214,9 @@
       />
     </div>
     <BtnBack
-      @click="router.go(-1)"
+      @click="router.push({
+        name: 'HomeView',
+      })"
     />
 
     <OperationTip
@@ -163,31 +293,51 @@ const { haveSwipedThisTime, translateLength, currentAnchorIdx } = useSmoothSwipe
     maxTranslateLength.value * 216 / windowWidthDesign - windowWidth.value / 2,
     maxTranslateLength.value * 967 / windowWidthDesign - windowWidth.value / 2,
     maxTranslateLength.value - windowWidth.value
-  ]
+  ],
+  initialAnchorIdx: Number(route.query.anchorIdx)
+})
+
+const bgInitialLeft = 0
+const bgLeft = ref(bgInitialLeft)
+watch(translateLength, (v) => {
+  bgLeft.value = bgInitialLeft - v
+}, {
+  immediate: true,
 })
 
-const tempBgInitialLeft = 0
-const tempBgLeft = ref(tempBgInitialLeft)
+const layer4SpeedFactor = 0.8 * 0.8 * 0.8
+const layer4InitialLeft = 0
+const layer4Left = ref(layer4InitialLeft)
 watch(translateLength, (v) => {
-  tempBgLeft.value = tempBgInitialLeft - v
+  layer4Left.value = layer4InitialLeft - v * layer4SpeedFactor
+}, {
+  immediate: true,
 })
 
-const hotspotInitialLeft = 71 * windowHeight.value / windowHeightDesign
-const hotspotLeft = ref(hotspotInitialLeft)
+const layer3SpeedFactor = 0.8 * 0.8
+const layer3InitialLeft = 0
+const layer3Left = ref(layer3InitialLeft)
 watch(translateLength, (v) => {
-  hotspotLeft.value = hotspotInitialLeft - v
+  layer3Left.value = layer3InitialLeft - v * layer3SpeedFactor
+}, {
+  immediate: true,
 })
 
-const shuangGouSheSeGroupInitialLeft = 216 * windowHeight.value / windowHeightDesign
-const shuangGouSheSeGroupLeft = ref(shuangGouSheSeGroupInitialLeft)
+const layer2SpeedFactor = 0.8
+const layer2InitialLeft = 0
+const layer2Left = ref(layer2InitialLeft)
 watch(translateLength, (v) => {
-  shuangGouSheSeGroupLeft.value = shuangGouSheSeGroupInitialLeft - v
+  layer2Left.value = layer2InitialLeft - v * layer2SpeedFactor
+}, {
+  immediate: true,
 })
 
-const moZhuGroupInitialLeft = 936 * windowHeight.value / windowHeightDesign
-const moZhuGroupLeft = ref(moZhuGroupInitialLeft)
+const layer1InitialLeft = 0
+const layer1Left = ref(layer1InitialLeft)
 watch(translateLength, (v) => {
-  moZhuGroupLeft.value = moZhuGroupInitialLeft - v
+  layer1Left.value = layer1InitialLeft - v
+}, {
+  immediate: true,
 })
 
 const isShowOperationTip = ref(true)
@@ -226,27 +376,36 @@ function onClickEntryAtMoZhu(pathName) {
 }
 
 /**
- * 左滑跳转新页面
+ * 跳转下一个页面
  */
-const fingerPosXWhenTouchStart = ref(0)
-const isAtBorderWhenTouchStart = ref(false)
-const handletouchstart = (event) => {
-  fingerPosXWhenTouchStart.value = event.changedTouches[0].pageX
-  if (Math.abs(maxTranslateLength.value - translateLength.value - windowWidth.value) < 1) {
-    isAtBorderWhenTouchStart.value = true
-  } else {
-    isAtBorderWhenTouchStart.value = false
-  }
-}
-const touchMove = (event) => {
-  let currentX = event.changedTouches[0].pageX
-  let tX = currentX - fingerPosXWhenTouchStart.value
-  if (tX < -1 && isAtBorderWhenTouchStart.value) {
+// const fingerPosXWhenTouchStart = ref(0)
+// const isAtBorderWhenTouchStart = ref(false)
+// const handletouchstart = (event) => {
+//   fingerPosXWhenTouchStart.value = event.changedTouches[0].pageX
+//   if (Math.abs(maxTranslateLength.value - translateLength.value - windowWidth.value) < 1) {
+//     isAtBorderWhenTouchStart.value = true
+//   } else {
+//     isAtBorderWhenTouchStart.value = false
+//   }
+// }
+// const touchMove = (event) => {
+//   let currentX = event.changedTouches[0].pageX
+//   let tX = currentX - fingerPosXWhenTouchStart.value
+//   if (tX < -1 && isAtBorderWhenTouchStart.value) {
+//     router.push({
+//       name: 'Game',
+//     })
+//   }
+// }
+watch(currentAnchorIdx, (v) => {
+  if (v === 2) {
     router.push({
       name: 'Game',
     })
   }
-}
+}, {
+  immediate: true,
+})
 </script>
 
 <style lang="less" scoped>
@@ -278,52 +437,192 @@ const touchMove = (event) => {
   user-select: none;
   >.scroll-target{
     height: 100%;
-    width: fit-content;
+    width: 100%;
     display: flex;
     gap: 100px;
     overflow: hidden;
-    >img.temp-bg{
+    >img.bg{
+      position: absolute;
+      height: 100%;
+    }
+    >.layer-4{
       position: absolute;
       height: 100%;
+      >.bamboo-4_01{
+        position: absolute;
+        left: calc(0 * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        bottom: 0;
+        height: calc(300px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.bamboo-4_02{
+        position: absolute;
+        bottom: 0;
+        left: calc(120px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: calc(380px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.bamboo-4_03{
+        position: absolute;
+        bottom: 0;
+        left: calc(1000px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: calc(518px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.bamboo-4_04{
+        position: absolute;
+        bottom: 0;
+        left: calc(870px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: 100%;
+      }
+      >.bamboo-4_05{
+        position: absolute;
+        bottom: 0;
+        left: calc(450px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: 100%;
+      }
+      >.bamboo-4_06{
+        position: absolute;
+        bottom: 0;
+        left: calc(520px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: 100%;
+      }
+      >.bamboo-4_07{
+        position: absolute;
+        bottom: 0;
+        left: calc(1000px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: 100%;
+      }
     }
-    >.hotspot{
+    >.layer-3{
       position: absolute;
-      top: calc(385px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      height: 100%;
+      >.bamboo-3_01{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(393px * v-bind('layer3SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.bamboo-3_02{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(880px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
     }
-    >.shuang-gou-she-se-group{
+    >.layer-2{
       position: absolute;
-      top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
-      >button.watch-detail{
+      height: 100%;
+      >.bamboo-2_01{
         position: absolute;
-        top: calc(182px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
-        left: 0;
-        .button-common-style();
+        top: 0;
+        height: 100%;
+        left: calc(0px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.bamboo-2_03{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(420px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >h2.group-title{
+      >.bamboo-2_02{
         position: absolute;
         top: 0;
-        left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
-        .group-title-common-style();
+        height: 100%;
+        left: calc(920px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
     }
-    >.mo-zhu-group{
+    >.layer-1{
       position: absolute;
-      top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
-      >.button-group{
+      height: 100%;
+      >.bamboo-1_01{
         position: absolute;
-        top: calc(75px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        top: 0;
+        height: 100%;
         left: 0;
-        display: flex;
-        flex-direction: column;
-        >button{
+      }
+      >.hotspot{
+        position: absolute;
+        top: calc(385px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(71px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.shuang-gou-she-se-group{
+        position: absolute;
+        top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(216px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        >button.watch-detail{
+          position: absolute;
+          top: calc(182px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+          left: 0;
+          background-image: url(@/assets/images/fade-chapter-btn-bg-big.png);
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center center;
+          padding-top: calc(3px / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           .button-common-style();
         }
+        >div.group-title{
+          position: absolute;
+          top: 0;
+          left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
+          .group-title-common-style();
+          >img.deco{
+            position: absolute;
+            bottom: 0.9em;
+            right: -0.05em;
+            width: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          }
+        }
+      }
+      >.bamboo-1_02{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(352px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.mo-zhu-group{
+        position: absolute;
+        top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(936px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        >.button-group{
+          position: absolute;
+          top: calc(75px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+          left: 0;
+          display: flex;
+          flex-direction: column;
+          gap: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          >button{
+            .button-common-style();
+            background-image: url(@/assets/images/fade-chapter-btn-bg-small.png);
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center center;
+            padding-top: calc(3px / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          }
+        }
+        >div.group-title{
+          position: absolute;
+          top: 0;
+          left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
+          .group-title-common-style();
+          >img.deco{
+            position: absolute;
+            bottom: 0.9em;
+            right: 0.1em;
+            width: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          }
+        }
+      }
+      >.bamboo-1_03{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(960px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >h2.group-title{
+      >.bamboo-1_04{
         position: absolute;
         top: 0;
-        left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
-        .group-title-common-style();
+        height: 100%;
+        left: calc(1336px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
     }
   }

src/views/PaintingList.vue

@@ -152,7 +152,12 @@
     </ul>
     <BtnBack
       class="button-back"
-      @click="router.go(-1)"
+      @click="router.push({
+        name: 'MoreContent',
+        query: {
+          anchorIdx: 1,
+        }
+      })"
     />
     <OperationTip
       class="operation-tip"

src/views/PoemList.vue

@@ -99,7 +99,12 @@
     <BtnBack
       v-show="!isShowMenu"
       class="button-back"
-      @click="router.go(-1)"
+      @click="router.push({
+        name: 'MoreContent',
+        query: {
+          anchorIdx: 1,
+        }
+      })"
     />
     <Transition
       v-show="isShowOperationTipShadow"

src/views/ShuangGouSheSeDetail.vue

@@ -5,7 +5,12 @@ import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 const router = useRouter()
 
 const goBack = () => {
-  window.history.back()
+  router.push({
+    name: 'MoreContent',
+    query: {
+      anchorIdx: 0,
+    }
+  })
 }
 
 const {

src/views/StartupView.vue

@@ -19,27 +19,27 @@
       draggable="false"
     >
 
-    <Transition name="fade-in-out">
-      <div
+    <Transition name="fade-in">
+      <img
         v-if="isShowLoadingTip"
-        class="loading-tip animation-show-hide"
-      >
-        loading...
-      </div>
-      <button
-        v-else-if="isShowStartBtn"
-        class="start"
-        @click="onClickStart"
+        class="loading-tip"
+        src="@/assets/images/loading.png"
+        alt=""
+        draggable="false"
       >
-        <img
-          class="bg"
-          src="@/assets/images/start-btn-bg.png"
-          alt=""
-          draggable="false"
-        >
-        <span class="text">开始</span>
-      </button>
     </Transition>
+    <SerialFrames
+      v-if="!isShowLoadingTip"
+      class="btn-start"
+      :class="isStartBtnBlink ? 'animation-show-hide' : ''"
+      :image-src="require(`@/assets/images/btn-start.png`)"
+      :total-width="864"
+      :height="72"
+      :frame-number="12"
+      :loop="false"
+      @over="isStartBtnBlink = true"
+      @click="onClickStart"
+    />
 
     <Transition name="fade-in">
       <video
@@ -54,6 +54,12 @@
         @ended="onVideoEnd"
       />
     </Transition>
+    <Transition name="fade-in">
+      <BtnSkip
+        v-if="isShowSkip"
+        @click="onVideoEnd"
+      />
+    </Transition>
   </div>
 </template>
 
@@ -77,21 +83,22 @@ const {
 
 
 const isShowLoadingTip = ref(true)
-const isShowStartBtn = ref(false)
 setTimeout(() => {
   isShowLoadingTip.value = false
-}, 2000)
-setTimeout(() => {
-  isShowStartBtn.value = true
-}, 4000)
+}, 3000)
+const isStartBtnBlink = ref(false)
 
 const isShowVideo = ref(false)
+const isShowSkip = ref(false)
 const videoEl = ref(null)
 function onClickStart() {
   isShowVideo.value = true
   nextTick(() => {
     videoEl.value.play()
   })
+  setTimeout(() => {
+    isShowSkip.value = true
+  }, 2000)
 }
 function onVideoEnd() {
   store.dispatch('recordShownStartup')
@@ -134,43 +141,17 @@ function onVideoEnd() {
     position: absolute;
     left: 50%;
     bottom: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    transform: translateX(-50%);
-    font-family: KingHwa_OldSong, KingHwa_OldSong;
-    font-weight: 400;
-    font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    color: #FFFFFF;
-    line-height: 1.5em;
+    transform: translateX(-48%);
+    width: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
-  >button.start{
+  >.btn-start{
     position: absolute;
     left: 50%;
-    bottom: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    transform: translateX(-50%);
-    width: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    font-family: KaiTi, KaiTi;
-    font-weight: 400;
-    font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    color: #FFFFFF;
-    line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    >img.bg{
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-47%, -47%);
-      width: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      // animation-name: spin;
-      // animation-duration: 1s;
-      // animation-timing-function: linear;
-      // animation-iteration-count: infinite;
-    }
-    >.text{
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
+    bottom: calc(75 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translateX(-48%);
+    width: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
 
   >video.transition-video{