fix:0708的一些修改

package.json

@@ -23,6 +23,8 @@
     "viewerjs": "^1.11.6",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
+    "vue-touch": "^2.0.0-beta.4",
+    "vue3-touch-events": "^4.1.8",
     "vuex": "^4.0.0"
   },
   "devDependencies": {

src/App.vue

@@ -44,6 +44,9 @@ html, body {
   // overscroll-behavior: none;
   overflow: hidden;
   height: 100%;
+  // display: flex;
+  // justify-content: center;
+  // align-items: center;
 }
 
 * {
@@ -58,6 +61,11 @@ input, textarea {
 
 #app {
   height: 100%;
+  max-width: 500px;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  overflow: hidden;
 }
 
 // 字体

src/main.js

@@ -23,6 +23,8 @@ import SerialFrames from '@/components/LongImageSerialFrames.vue'
 import BtnSkip from '@/components/BtnSkip.vue'
 import PaginationComp from '@/components/PaginationComp.vue'
 
+import Vue3TouchEvents from "vue3-touch-events"
+
 console.log(`version: ${process.env.VUE_APP_VERSION}`)
 console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)
 
@@ -87,6 +89,7 @@ app.use(store)
   .use(router)
   .use(VueViewer)
   .use(ElementPlus)
+  .use(Vue3TouchEvents)
   .component('BtnBack', BtnBack)
   .component('BtnClickMe', BtnClickMe)
   .component('OperationTip', OperationTip)

src/useFunctions/useSmoothSwipe.js

@@ -116,9 +116,56 @@ export default function useSmoothSwipe({
     }
   }
 
+  const onSwipeLeft = () => {
+    console.log('在左滑')
+    if (isTweening) {
+      return
+    }
+    const destinationIdx = anchorPosListInner.findIndex((item) => {
+      return item - translateLength.value > 1
+    })
+    if ((destinationIdx !== -1) && !isTweening) {
+      isTweening = true
+      tween = new TWEEN.Tween(translateLength)
+      tween.to({
+        value: anchorPosListInner[destinationIdx],
+      }, 1200)
+      tween.easing(TWEEN.Easing.Cubic.InOut)
+      tween.start()
+      goingToAnchorIdx.value = destinationIdx
+      tween.onComplete(() => {
+        isTweening = false
+        currentAnchorIdx.value = destinationIdx
+        goingToAnchorIdx.value = null
+      })
+    }
+
+  }
+
+  const onswipeRight = () => {
+    console.log('在左滑')
+    const destinationIdx = anchorPosListInnerReverse.findIndex((item) => {
+      return item - translateLength.value < -1
+    })
+    if ((destinationIdx !== -1) && !isTweening) {
+      isTweening = true
+      tween = new TWEEN.Tween(translateLength)
+      tween.to({
+        value: anchorPosListInnerReverse[destinationIdx],
+      }, 1200)
+      tween.easing(TWEEN.Easing.Cubic.InOut)
+      tween.start()
+      goingToAnchorIdx.value = anchorPosList.length - destinationIdx - 1
+      tween.onComplete(() => {
+        isTweening = false
+        currentAnchorIdx.value = anchorPosList.length - destinationIdx - 1
+        goingToAnchorIdx.value = null
+      })
+    }
+  }
+
   function onTouchEnd(e) {
     isOperating.value = false
-
   }
 
   function onTouchCancel() {
@@ -155,6 +202,8 @@ export default function useSmoothSwipe({
     onTouchStart,
     onTouchMove,
     onTouchEnd,
+    onSwipeLeft,
+    onswipeRight,
     onTouchCancel,
     translateLength,
     haveSwipedThisTime,

src/views/BambooBookScene1.vue

@@ -7,22 +7,12 @@ const {
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
-const lastX = ref(0)
-
-// 开始滑动
-const handletouchstart = (event) => {
-  lastX.value = event.changedTouches[0].pageX
+const onSwipeLeft = () => {
+  emit('slide-right')
 }
 
-// 监听活动
-const touchMove = (event) => {
-  let currentX = event.changedTouches[0].pageX
-  let tx = currentX - lastX.value
-  if (tx < 0) {
-    emit('slide-right')
-  } else if ( tx > 0 ) {
-    emit('slide-left')
-  }
+const onSwipeRight = () => {
+  emit('slide-left')
 }
 
 const emit = defineEmits(['slide-right', 'slide-left', 'close'])
@@ -36,9 +26,9 @@ const innerHeight = ref(window.innerHeight + 'px')
 
 <template>
   <div
+    v-touch:swipe.left="onSwipeLeft"
+    v-touch:swipe.right="onSwipeRight"
     class="screen-box"
-    @touchstart="handletouchstart($event)"
-    @touchmove="touchMove($event)"
   >
     <!-- 竹叶序列帧 -->
     <div class="xuliezheng" />

src/views/BambooBookScene2.vue

@@ -36,30 +36,22 @@ watch(
   { immediate: true }
 )
 
-const lastX = ref(0)
 
-// 开始滑动
-const handletouchstart = (event) => {
-  lastX.value = event.changedTouches[0].pageX
+
+const onSwipeLeft = () => {
+  emit('slide-left')
 }
 
-// 监听活动
-const touchMove = (event) => {
-  let currentX = event.changedTouches[0].pageX
-  let tx = currentX - lastX.value
-  if (tx < 0) {
-  } else if (tx > 0) {
-    emit('slide-left')
-  }
+const onSwipeRight = () => {
+  emit('slide-left')
 }
 
 
+
 // 叶子图片适应
 
 const x = window.innerWidth / window.innerHeight
 
-
-
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -68,9 +60,9 @@ const {
 
 <template>
   <div
+    v-touch:swipe.left="onSwipeLeft"
+    v-touch:swipe.right="onSwipeRight"
     class="screen-box"
-    @touchstart="handletouchstart($event)"
-    @touchmove="touchMove($event)"
   >
     <!-- <transition name="fade-in-out" /> -->
     <div class="screen-box2">

src/views/BambooHotView copy.vue

@@ -1,381 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import useSizeAdapt from "@/useFunctions/useSizeAdapt"
-
-const router = useRouter()
-
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
-
-const infoList = [
-  {
-    id: 0,
-    name: '楠竹',
-    images: 'img_nanzhu.png',
-    left: '13%',
-    disc: [
-      '又名毛竹，是散生型竹的代表。秆高直，坚硬。',
-      '径大20公分左右，是建筑上的好材料；',
-      '竹头是雕刻工艺品的好材料；',
-      '竹笋是最佳菜肴，称为“玉楠片”。',
-      '盛产于四川长宁、贵州赤水、',
-      '江西、浙江、湖南等地。'
-    ],
-    transform: 'translateX(-9%)'
-  },
-  {
-    id: 1,
-    name: '单竹',
-    images: 'img_danzhu.png',
-    left: '33%',
-    marginRight: '20%',
-    disc: [
-      '民间俗称“苦慈”，竹质细腻，纤维韧性极强，',
-      '可制成薄如蝉翼、细如发丝的竹篾丝，',
-      '编织成绸似、绢似的精美竹编工艺品。',
-    ],
-    transform: 'translateX(-28%)'
-  },
-  {
-    id: 2,
-    name: '水竹',
-    images: 'img_shuizhu.png',
-    left: '53%',
-    marginRight: '30%',
-    disc: [
-      '竿可高6米许，粗达3厘米；篷耳小，形状为卵形',
-      '或长椭圆形。锋舌边缘生有短白纤毛。',
-      '筝片直立，呈三角形至狭长三角形。叶片为线状',
-      '披针形或披针形，下表面基部有些许毛。',
-    ],
-    transform: 'translateX(-47%)'
-
-  },
-  {
-    id: 3,
-    name: '湘妃竹',
-    images: 'img_xiangfeizhu.png',
-    left: '72%',
-    marginRight: '24%',
-    disc: [
-      '中小型竹，竿高5米 |10米，竿环及箨',
-      '环隆起，竿箨黄褐色，有黑褐色斑点,',
-      '箨耳较小，矩圆形或镰形，箨叶三角形或带形,',
-      '橘红色，边缘绿色，叶带状披针形，叶舌发达，',
-      '有叶耳及长肩毛。',
-    ],
-    transform: 'translateX(-66%)'
-
-  }, {
-    id: 4,
-    name: '紫竹',
-    images: 'img_zizhu.png',
-    left: '93%',
-    marginRight: '25%',
-    disc: [
-      '紫竹幼竿绿色，覆盖细柔毛和白粉，幕环有毛，',
-      '籍鞘背面红褐色或绿色加深。斑点微小或无，',
-      '锌鞘上端常密集，带微量白粉和淡褐色刺毛。',
-      '叶片小而薄，窄披针形，先端尖长。',
-    ],
-    transform: 'translateX(-87%)'
-
-  },
-]
-
-const reverseArray = (array) => {
-  return array.slice().reverse()
-}
-
-
-const currentIndex = ref(0)
-
-const positionFrom = ref(`translateX(-0%)`)
-const positionEnd = ref(`translateX(-8%)`)
-
-const scrollableElement = ref(null)
-
-const isAnimation = ref(false)
-
-const lastX = ref(0)
-// 开始滑动
-const handletouchstart = (event) => {
-  lastX.value = event.changedTouches[0].pageX
-}
-
-// 监听活动
-const touchEnd = (event) => {
-  let currentX = event.changedTouches[0].pageX
-  let tx = currentX - lastX.value
-  if (tx < 0) {
-    // emit('slide-right')
-    if (currentIndex.value >= infoList.length - 1) {
-      return
-    } else {
-      currentIndex.value = currentIndex.value + 1
-      isAnimation.value = true
-      // setTimeout(() => {
-      //   isAnimation.value = false
-      // }, 1500)
-    }
-    // console.log(currentIndex.value + 1)
-  } else if (tx > 0) {
-    // currentIndex.value = currentIndex.value < 1 ? '' : currentIndex.value - 1
-    if (currentIndex.value <= 0) {
-      return
-    } else {
-      currentIndex.value = currentIndex.value - 1
-    }
-  }
-}
-
-
-
-// 进度条位置监听
-// const scrollFn = () => {
-//   // 获取当前文档流的 scrollLeft
-//   // let navIndex = 0
-//   // const scrollPosition =  || document.body.scrollLeft
-//   let element = document.getElementById('bamboo-hot')
-//   let elementScrollLeft = element.scrollLeft
-
-
-
-//   const zhulinClientWidth = document.getElementById('bamboo-hot').getBoundingClientRect().width
-
-//   const zhulinAllWidth = 3900 / windowSizeWhenDesignForRef.value * windowSizeInCssForRef.value.slice(0, -2)
-
-//   // const items = document.getElementsByClassName('bamboo-hot-item')
-
-//   // calc(3900 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-
-//   // const 253 / 12的width = x / 当前长度
-
-//   const items = document.getElementsByClassName('bamboo-hot-item')
-
-
-
-//   if (elementScrollLeft > items[0].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth && elementScrollLeft < items[1].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth) {
-//     currentIndex.value = 0
-//   } else if (elementScrollLeft > items[1].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth && elementScrollLeft < items[2].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth) {
-//     currentIndex.value = 1
-//   } else if (elementScrollLeft > items[2].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth && elementScrollLeft < items[3].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth) {
-//     currentIndex.value = 2
-//   } else if (elementScrollLeft > items[3].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth && elementScrollLeft < items[4].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth) {
-//     currentIndex.value = 3
-//   } else if (elementScrollLeft > items[4].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth) {
-//     currentIndex.value = 4
-//   }
-
-// }
-
-const goBack = () => {
-  router.push({
-    name: 'MoreContent',
-    query: {
-      anchorIdx: 0,
-    }
-  })
-}
-
-
-onMounted(() => {
-  // window.addEventListener(
-  //   "scroll",
-  //   scrollFn,
-  //   true
-  // )
-
-  // window.addEventListener('touchstart', () => {
-  //   //  手势按钮消失
-  //   let operationH = document.getElementById('operationH')
-  //   if (operationH) {
-  //     operationH.style.opacity = 0
-  //   }
-
-  //   window.removeEventListener('touchstart', () => {
-  //     //  手势按钮消失
-  //     let operationH = document.getElementById('operationH')
-  //     if (operationH) {
-  //       operationH.style.opacity = 0
-  //     }
-  //   })
-  // })
-
-  // setTimeout(() => {
-  //   if (scrollableElement.value) {
-  //     const zhulinClientWidth = document.getElementById('bamboo-hot').getBoundingClientRect().width
-  //     const zhulinAllWidth = 3900 / windowSizeWhenDesignForRef.value * windowSizeInCssForRef.value.slice(0, -2)
-  //     const items = document.getElementsByClassName('bamboo-hot-item')
-  //     // scrollableElement.value.scrollLeft = (383 / 390) * document.getElementById('bamboo-hot').getBoundingClientRect().width
-  //     scrollableElement.value.scrollLeft = items[0].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth + items[0].getBoundingClientRect().width + 60
-  //     console.log(scrollableElement.value.scrollLeft)
-  //   }
-  // }, 50)
-
-})
-</script>
-
-<template>
-  <div class="home">
-    <div
-      id="bamboo-hot"
-      ref="scrollableElement"
-      class="scorroll-box"
-      @touchstart="handletouchstart($event)"
-      @touchend="touchEnd($event)"
-    >
-      <div
-        id="bamboo-hot"
-        class="bamboo-hot-bg"
-        :class="{ 'goAnimaling': isAnimation }"
-      >
-        <div
-          v-for="(item, index) in infoList"
-          :key="item.id"
-          class="bamboo-hot-item"
-          :class="{ 'bamboo-hot-animation': currentIndex == index }"
-          :style="{ left: item.left }"
-        >
-          <img
-            :src="require(`@/assets/images/${item.images}`)"
-            alt=""
-          >
-          <div
-            class="disc-box"
-            :style="{ marginRight: item.marginRight ? item.marginRight : '' }"
-          >
-            <div
-              v-for="(item2) in reverseArray(item.disc)"
-              :key="item2"
-              class="disc-box-item"
-            >
-              {{ item2 }}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="system-btns">
-        <BtnBack @click="goBack" />
-        <OperationTip
-          id="operationH"
-          class="operation-h"
-          text=""
-          direction="h"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-::-webkit-scrollbar {
-  display: none;
-}
-
-.home {
-  width: 100%;
-  height: 100%;
-
-  .scorroll-box {
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    scrool-behavior: smooth;
-
-    .bamboo-hot-bg {
-      width: calc(3900 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-      height: 100%;
-      background-image: url(@/assets/images/bamboo-hot-bg.png);
-      background-size: 100% 100%;
-      position: relative;
-
-
-      .bamboo-hot-item {
-        position: absolute;
-        left: 0;
-        top: calc(103 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-        opacity: 0.1;
-
-
-        >img {
-          width: calc(150 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-        }
-
-        .disc-box {
-          display: flex;
-          justify-content: right;
-          margin-top: calc(50 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-
-          /* 垂直排列，从右向左 */
-          // direction: rtl;
-          .disc-box-item {
-            writing-mode: vertical-rl;
-            text-orientation: upright;
-            text-align: left;
-            font-family: 'KaiTi';
-            font-size: calc(16 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-            color: #474747;
-            line-height: calc(23 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-            align-items: justify;
-            letter-spacing: .3em;
-          }
-        }
-      }
-
-      .bamboo-hot-animation {
-        animation: fade-in 1.5s forwards;
-
-        @keyframes fade-in {
-          form {
-            opacity: 0;
-          }
-
-          to {
-            opacity: 1;
-          }
-        }
-      }
-
-    }
-
-    .goAnimaling {
-      animation: onanimaling 1.5s forwards;
-
-      // background-position: 383px;
-      @keyframes onanimaling {
-        0% {
-          transform: translateX(0);
-        }
-
-        100% {
-          transform: translateX(-8%);
-        }
-      }
-    }
-
-    .system-btns {
-      width: 100%;
-      padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
-      display: flex;
-      // flex-direction: column;
-      justify-content: flex-end;
-      position: absolute;
-      bottom: calc(60 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
-      z-index: 2;
-
-      .operation-h {
-        width: calc(36 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-        transition: opacity 0.5s ease-in-out;
-      }
-    }
-  }
-
-
-
-}
-</style>

src/views/BambooHotView.vue

@@ -93,8 +93,6 @@ const reverseArray = (array) => {
 
 const currentIndex = ref(0)
 
-const positionFrom = ref(`translateX(-0%)`)
-const positionEnd = ref(`translateX(-8%)`)
 
 const scrollableElement = ref(null)
 
@@ -131,6 +129,25 @@ const touchEnd = (event) => {
   }
 }
 
+const onSwipeLeft = () => {
+  if (currentIndex.value >= infoList.length - 1) {
+    return
+  } else {
+    currentIndex.value = currentIndex.value + 1
+    fangxiang.value = 1
+  }
+
+}
+
+const onSwipeRight = () => {
+  if (currentIndex.value <= 0) {
+    return
+  } else {
+    currentIndex.value = currentIndex.value - 1
+    fangxiang.value = -1
+  }
+}
+
 
 
 const goBack = () => {
@@ -152,9 +169,9 @@ onMounted(() => {
     <div
       id="bamboo-hot"
       ref="scrollableElement"
+      v-touch:swipe.left="onSwipeLeft"
+      v-touch:swipe.right="onSwipeRight"
       class="scorroll-box"
-      @touchstart="handletouchstart($event)"
-      @touchend="touchEnd($event)"
     >
       <div
         id="bamboo-hot"

src/views/GameView.vue

@@ -53,29 +53,27 @@ onMounted(() => {
 /**
  * 右滑返回
  */
-const fingerPosXWhenTouchStart = ref(0)
-const handletouchstart = (event) => {
-  fingerPosXWhenTouchStart.value = event.changedTouches[0].pageX
+
+const onSwipeLeft = () => {
+
 }
-const touchMove = (event) => {
-  let currentX = event.changedTouches[0].pageX
-  let tX = currentX - fingerPosXWhenTouchStart.value
-  if (tX > 1) {
-    router.push({
-      name: 'MoreContent',
-      query: {
-        anchorIdx: 1,
-      }
-    })
-  }
+
+const onSwipeRight = () => {
+  router.push({
+    name: 'MoreContent',
+    query: {
+      anchorIdx: 1,
+    }
+  })
 }
+
 </script>
 
 <template>
   <div
+    v-touch:swipe.left="onSwipeLeft"
+    v-touch:swipe.right="onSwipeRight"
     class="game-page"
-    @touchstart="handletouchstart($event)"
-    @touchmove="touchMove($event)"
   >
     <Toast
       ref="toast"

src/views/HomeView copy.vue

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

src/views/HomeView.vue

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

src/views/MoreContent.vue

@@ -34,18 +34,18 @@
           alt=""
           draggable="false"
         >
-        <img
+        <!-- <img
           class="bamboo-4_03"
           src="@/assets/images/fade-chapter-wood/4_03.png"
           alt=""
           draggable="false"
-        >
-        <img
+        > -->
+        <!-- <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"
@@ -64,6 +64,36 @@
           alt=""
           draggable="false"
         >
+        <img
+          class="bamboo-4_08"
+          src="@/assets/images/fade-chapter-wood/4_08.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_09"
+          src="@/assets/images/fade-chapter-wood/4_09.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_10"
+          src="@/assets/images/fade-chapter-wood/4_10.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_11"
+          src="@/assets/images/fade-chapter-wood/4_11.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_12"
+          src="@/assets/images/fade-chapter-wood/4_12.png"
+          alt=""
+          draggable="false"
+        >
       </div>
 
       <div
@@ -84,6 +114,18 @@
           alt=""
           draggable="false"
         >
+        <img
+          class="bamboo-3_03"
+          src="@/assets/images/fade-chapter-wood/3_03.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-3_04"
+          src="@/assets/images/fade-chapter-wood/3_04.png"
+          alt=""
+          draggable="false"
+        >
       </div>
 
       <div
@@ -110,6 +152,30 @@
           alt=""
           draggable="false"
         >
+        <!-- <img
+          class="bamboo-2_03"
+          src="@/assets/images/fade-chapter-wood/2_03.png"
+          alt=""
+          draggable="false"
+        > -->
+        <img
+          class="bamboo-2_04"
+          src="@/assets/images/fade-chapter-wood/2_04.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-2_04-1"
+          src="@/assets/images/fade-chapter-wood/2_04-1.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-2_05"
+          src="@/assets/images/fade-chapter-wood/2_05.png"
+          alt=""
+          draggable="false"
+        >
       </div>
 
       <div
@@ -200,6 +266,15 @@
           alt=""
           draggable="false"
         >
+        <div class="wei-ye-group">
+          图片+文字
+        </div>
+        <img
+          class="bamboo-1_05"
+          src="@/assets/images/fade-chapter-wood/1_05.png"
+          alt=""
+          draggable="false"
+        >
       </div>
     </div>
 
@@ -299,7 +374,8 @@ const { haveSwipedThisTime, translateLength, currentAnchorIdx, goingToAnchorIdx
   anchorPosList: [
     maxTranslateLength.value * 216 / windowWidthDesign - windowWidth.value / 2,
     maxTranslateLength.value * 967 / windowWidthDesign - windowWidth.value / 2,
-    maxTranslateLength.value - windowWidth.value
+    maxTranslateLength.value * 1860 / windowWidthDesign - windowWidth.value / 2,
+    // maxTranslateLength.value - windowWidth.value
   ],
   initialAnchorIdx: Number(route.query.anchorIdx) || 0
 })
@@ -397,17 +473,18 @@ const isShowVideoFadeAtPage3 = ref(false)
 // }
 watch(goingToAnchorIdx, (v) => {
   if (v === 2) {
-    setTimeout(() => {
-      isShowVideoFadeAtPage3.value = true
-      nextTick(() => {
-        videoFadeAtPage3El.value.addEventListener('ended', () => {
-          router.push({
-            name: 'Game',
-          })
-        })
-        videoFadeAtPage3El.value.play()
-      })
-    }, 850)
+    // 跳转到尾页
+    // setTimeout(() => {
+    //   isShowVideoFadeAtPage3.value = true
+    //   nextTick(() => {
+    //     videoFadeAtPage3El.value.addEventListener('ended', () => {
+    //       router.push({
+    //         name: 'Game',
+    //       })
+    //     })
+    //     videoFadeAtPage3El.value.play()
+    //   })
+    // }, 850)
   }
 })
 </script>
@@ -467,7 +544,7 @@ watch(goingToAnchorIdx, (v) => {
       >.bamboo-4_03{
         position: absolute;
         bottom: 0;
-        left: calc(1000px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(880px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         height: calc(518px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
       >.bamboo-4_04{
@@ -494,6 +571,37 @@ watch(goingToAnchorIdx, (v) => {
         left: calc(1000px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
         height: 100%;
       }
+      >.bamboo-4_08{
+        position: absolute;
+        bottom: 0;
+        height: calc(380px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(1553px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.bamboo-4_09{
+        position: absolute;
+        bottom: 0;
+        left: calc(1345px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: 100%;
+      }
+      >.bamboo-4_10{
+        position: absolute;
+        bottom: 0;
+        left: calc(1403px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: 100%;
+      }
+      >.bamboo-4_11{
+        position: absolute;
+        bottom: 0;
+        left: calc(1403px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: 100%;
+      }
+      >.bamboo-4_12{
+        position: absolute;
+        bottom: 0;
+        left: calc(1403px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: 100%;
+      }
+
     }
     >.layer-3{
       position: absolute;
@@ -510,6 +618,18 @@ watch(goingToAnchorIdx, (v) => {
         height: 100%;
         left: calc(880px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
+      >.bamboo-3_03{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(1290px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.bamboo-3_04{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(867px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
     }
     >.layer-2{
       position: absolute;
@@ -532,6 +652,30 @@ watch(goingToAnchorIdx, (v) => {
         height: 100%;
         left: calc(920px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
+      // >.bamboo-2_03{
+      //   position: absolute;
+      //   top: 0;
+      //   height: 100%;
+      //   left: calc(920px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      // }
+      >.bamboo-2_04{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(1281px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.bamboo-2_04-1{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(1820px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.bamboo-2_05{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(997px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
     }
     >.layer-1{
       position: absolute;
@@ -628,6 +772,12 @@ watch(goingToAnchorIdx, (v) => {
         height: 100%;
         left: calc(1336px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
+      >.bamboo-1_05{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(1860px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
     }
   }
   >.pagination {

src/views/PaintingDetail.vue

@@ -48,18 +48,19 @@
         opacity: isAnimating ? AnimationProgress.value / 100 : 1,
       }"
     >
-      <h1>{{ props.title }}</h1>
-      <p class="subtitle">
-        {{ `${props.author} （${props.age}）` }}
-      </p>
-      <p class="subtitle">
-        {{ props.subtitle }}
-      </p>
-      <p class="subtitle">
-        {{ props.location }}
-      </p>
-
-      <h2 v-if="paintingDesc">
+      <div class="info-title-content">
+        <h1>{{ props.title }}</h1>
+        <p class="subtitle">
+          {{ `${props.author} （${props.age}）` }}
+        </p>
+        <p class="subtitle">
+          {{ props.subtitle }}
+        </p>
+        <p class="subtitle">
+          {{ props.location }}
+        </p>
+      </div>
+      <!-- <h2 v-if="paintingDesc">
         作品简介：
       </h2>
       <div class="normal-text">
@@ -70,7 +71,7 @@
       </h2>
       <div class="normal-text">
         {{ authorDesc }}
-      </div>
+      </div> -->
     </div>
 
     <OperationTip
@@ -256,14 +257,19 @@ function showBigPainting() {
 </script>
 
 <style lang="less" scoped>
-.hotspot-detail-2{
+.hotspot-detail-2 {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  ::-webkit-scrollbar { width: 0; height: 0; }
-  >.painting-wrap{
+
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  >.painting-wrap {
     position: absolute;
     left: 50%;
     top: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -271,14 +277,16 @@ function showBigPainting() {
     width: calc(356 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(602 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     overflow: hidden;
-    >img.painting-border{
+
+    >img.painting-border {
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
     }
-    >.painting-wrap-2{
+
+    >.painting-wrap-2 {
       position: absolute;
       left: 50%;
       top: calc(110 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -286,27 +294,31 @@ function showBigPainting() {
       width: calc(v-bind('paintingWrapWidth') / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(v-bind('paintingWrapHeight') / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       overflow: auto;
-      >img.painting{
+
+      >img.painting {
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         width: 100%;
       }
-      >img.painting.oversize{
+
+      >img.painting.oversize {
         position: static;
         left: initial;
         top: initial;
         transform: initial;
       }
     }
-    >img.bottom-border-for-animation{
+
+    >img.bottom-border-for-animation {
       position: absolute;
       left: 0;
       width: 100%;
     }
   }
-  >.desc-text{
+
+  >.desc-text {
     position: absolute;
     left: 50%;
     bottom: 2%;
@@ -314,7 +326,50 @@ function showBigPainting() {
     width: calc(306 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(130 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     overflow: auto;
-    >h1{
+
+    .info-title-content {
+      >h1 {
+        text-align: center;
+        font-family: KaiTi, KaiTi;
+        font-weight: 400;
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        color: #FFFFFF;
+        margin-bottom: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+
+      >p.subtitle {
+        text-align: center;
+        font-family: KaiTi, KaiTi;
+        font-weight: 400;
+        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        color: rgba(255, 255, 255, 0.8);
+        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-bottom: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+
+      >h2 {
+        display: inline-block;
+        margin-top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: KaiTi, KaiTi;
+        color: #FFFFFF;
+        margin-top: 2em;
+        margin-bottom: 0.5em;
+        font-weight: 400;
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+
+      >.normal-text {
+        font-family: KaiTi, KaiTi;
+        color: #FFFFFF;
+        font-weight: 400;
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        text-align: justify;
+        white-space: pre-line;
+      }
+    }
+
+    >h1 {
       text-align: center;
       font-family: KaiTi, KaiTi;
       font-weight: 400;
@@ -322,7 +377,8 @@ function showBigPainting() {
       color: #FFFFFF;
       margin-bottom: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
-    >p.subtitle{
+
+    >p.subtitle {
       text-align: center;
       font-family: KaiTi, KaiTi;
       font-weight: 400;
@@ -331,7 +387,8 @@ function showBigPainting() {
       line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       margin-bottom: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
-    >h2{
+
+    >h2 {
       display: inline-block;
       margin-top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       font-family: KaiTi, KaiTi;
@@ -341,7 +398,8 @@ function showBigPainting() {
       font-weight: 400;
       font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
-    >.normal-text{
+
+    >.normal-text {
       font-family: KaiTi, KaiTi;
       color: #FFFFFF;
       font-weight: 400;
@@ -351,12 +409,14 @@ function showBigPainting() {
       white-space: pre-line;
     }
   }
-  >.operation-tip{
+
+  >.operation-tip {
     position: absolute;
     right: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     bottom: calc(49 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
-  >.operation-tip{
+
+  >.operation-tip {
     position: absolute;
     right: calc(49 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     bottom: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

src/views/ShuangGouSheSeDetail.vue

@@ -24,7 +24,7 @@ const reverseArray = (array) => {
 }
 
 const goPaintingDetail = () =>{
-  router.push('/shuanggou-painting-detail?idx=19')
+  router.push('/shuanggou-painting-detail?idx=0')
 }
 
 const x = window.innerWidth / window.innerHeight

src/views/ShuanggouPaintingDetail.vue

@@ -9,7 +9,7 @@
       @slideChange="onSlideChange"
     >
       <SwiperSlide
-        v-for="item in paintingList"
+        v-for="item in showPaintingList"
         :key="item['标题']"
         class="swiper-slider"
       >
@@ -65,6 +65,10 @@ const {
 
 const paintingList = configExcel['画作']
 
+const showPaintingList = computed(() => {
+  return paintingList.filter(item => item['标题'] === '竹禽图卷' || item['标题'] === '桃竹双凫图')
+})
+
 
 /**
  * swiper

yarn.lock

@@ -2014,6 +2014,16 @@ acorn-walk@^8.0.0, acorn-walk@^8.0.2:
   dependencies:
     acorn "^8.11.0"
 
+acorn@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+  integrity sha512-OLUyIIZ7mF5oaAUT1w0TFqQS81q3saT46x8t7ukpPjMNk+nbs4ZHhs7ToV8EWnLYLepjETXd4XaCE4uxkMeqUw==
+
+acorn@^4.0.1:
+  version "4.0.13"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+  integrity sha512-fu2ygVGuMmlzG8ZeRJ0bvR41nsAkxxhbyk8bZ1SS521Z7vmgJFTQQlfz/Mp/nJexGBz+v8sC9bM6+lNgskt4Ug==
+
 acorn@^7.4.0:
   version "7.4.1"
   resolved "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz"
@@ -2316,6 +2326,13 @@ braces@^3.0.3, braces@~3.0.2:
   dependencies:
     fill-range "^7.1.1"
 
+browser-resolve@^1.11.0:
+  version "1.11.3"
+  resolved "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
+  integrity sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==
+  dependencies:
+    resolve "1.1.7"
+
 browserslist@^4.0.0, browserslist@^4.16.3, browserslist@^4.21.10, browserslist@^4.21.4, browserslist@^4.22.2, browserslist@^4.23.0:
   version "4.23.1"
   resolved "https://registry.npmmirror.com/browserslist/-/browserslist-4.23.1.tgz"
@@ -2339,6 +2356,11 @@ buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
+builtin-modules@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+  integrity sha512-wxXCdllwGhI2kCC0MnvTGYTMvnVZTvqgypkiTI8Pa5tcz2i6VqsqwYGgqwXji+4RgCzms6EajE4IxiUH6HH8nQ==
+
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/bytes/-/bytes-3.0.0.tgz"
@@ -3332,6 +3354,21 @@ estraverse@^5.1.0, estraverse@^5.2.0:
   resolved "https://registry.npmmirror.com/estraverse/-/estraverse-5.3.0.tgz"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
+estree-walker@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz#bdafe8095383d8414d5dc2ecf4c9173b6db9412e"
+  integrity sha512-6/I1dwNKk0N9iGOU3ydzAAurz4NPo/ttxZNCqgIVbWFvWyzWBSNonRrJ5CpjDuyBfmM7ENN7WCzUi9aT/UPXXQ==
+
+estree-walker@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.3.1.tgz#e6b1a51cf7292524e7237c312e5fe6660c1ce1aa"
+  integrity sha512-a0V2EAQrmcBKl/RLr5Cu3qZBHC9tuWifbAXezwNLUCuHndgoEAakTenYcESK84nF123BOjKXi33kFc3z4F+Lkw==
+
+estree-walker@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
+  integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
+
 estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz"
@@ -3726,6 +3763,11 @@ gzip-size@^6.0.0:
   dependencies:
     duplexer "^0.1.2"
 
+hammerjs@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
+  integrity sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==
+
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/handle-thing/-/handle-thing-2.0.1.tgz"
@@ -4437,6 +4479,20 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+magic-string@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.16.0.tgz#970ebb0da7193301285fb1aa650f39bdd81eb45a"
+  integrity sha512-c4BEos3y6G2qO0B9X7K0FVLOPT9uGrjYwYRLFmDqyl5YMboUviyecnXWp94fJTSMwPw2/sf+CEYt5AGpmklkkQ==
+  dependencies:
+    vlq "^0.2.1"
+
+magic-string@^0.19.0:
+  version "0.19.1"
+  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.19.1.tgz#14d768013caf2ec8fdea16a49af82fc377e75201"
+  integrity sha512-AJRZGyg/F3QJUsgz/0Kh7HR09VZ1Mu/Nfyou9WtlXAYyMErN4BvtAOqwsYpHwT+UWbP2QlGPPmHTCvZjk0zcAw==
+  dependencies:
+    vlq "^0.2.1"
+
 magic-string@^0.30.10:
   version "0.30.10"
   resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.10.tgz"
@@ -4556,9 +4612,9 @@ minimalistic-assert@^1.0.0:
   resolved "https://registry.npmmirror.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz"
   integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
-minimatch@^3.0.4, minimatch@^3.1.1:
+minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.1.1:
   version "3.1.2"
-  resolved "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
   dependencies:
     brace-expansion "^1.1.7"
@@ -5513,9 +5569,14 @@ resolve-from@^4.0.0:
   resolved "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.10.0, resolve@^1.14.2:
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+  integrity sha512-9znBF0vBcaSN3W2j7wKvdERPwqTxSpCq+if5C0WoTCyV9n24rua28jeuQ2pL/HOf+yUe/Mef+H/5p60K0Id3bg==
+
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2:
   version "1.22.8"
-  resolved "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
   dependencies:
     is-core-module "^2.13.0"
@@ -5555,6 +5616,50 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+rollup-plugin-cleanup@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/rollup-plugin-cleanup/-/rollup-plugin-cleanup-0.1.4.tgz#9fed3ab4300988a882d63de3321e410cdafc6331"
+  integrity sha512-5TmT816PwinFF2w9RsgJ+5YaWFcXXtEThez9J+WBwmIAkndKEUngHjJxQr5gcBfGzOyK2U8iLTF1yEYdgJMwIw==
+  dependencies:
+    acorn "^3.3.0"
+    magic-string "^0.16.0"
+    rollup-pluginutils "^1.5.2"
+
+rollup-plugin-commonjs@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-7.1.0.tgz#c3a772c2e4a5fa13507f5c578b66cc13b0cb8a79"
+  integrity sha512-L+kW1RrHmQxapen8cZqBIHo78LXz+ASoyR4uRhzlwWL17UzhDMKtRXZpY4tt2PYm2Q7f1lkvxnEvnPU66Sc7dw==
+  dependencies:
+    acorn "^4.0.1"
+    estree-walker "^0.3.0"
+    magic-string "^0.19.0"
+    resolve "^1.1.7"
+    rollup-pluginutils "^2.0.1"
+
+rollup-plugin-node-resolve@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-2.1.1.tgz#cbb783b0d15b02794d58915350b2f0d902b8ddc8"
+  integrity sha512-UDDWQc9CzqzEhyoxSp6m0ZU29GhEJw+6HCqMfwoREwGlpKK7K68/4B3n/ysdU0tWz5YHwDKDpHF0MeH7fJIgaw==
+  dependencies:
+    browser-resolve "^1.11.0"
+    builtin-modules "^1.1.0"
+    resolve "^1.1.6"
+
+rollup-pluginutils@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
+  integrity sha512-SjdWWWO/CUoMpDy8RUbZ/pSpG68YHmhk5ROKNIoi2En9bJ8bTt3IhYi254RWiTclQmL7Awmrq+rZFOhZkJAHmQ==
+  dependencies:
+    estree-walker "^0.2.1"
+    minimatch "^3.0.2"
+
+rollup-pluginutils@^2.0.1:
+  version "2.8.2"
+  resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
+  integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
+  dependencies:
+    estree-walker "^0.6.1"
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz"
@@ -6250,6 +6355,11 @@ viewerjs@^1.11.6:
   resolved "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.11.6.tgz"
   integrity sha512-TlhdSp2oEOLFXvEp4psKaeTjR5zBjTRcM/sHUN8PkV1UWuY8HKC8n7GaVdW5Xqnwdr/F1OmzLik1QwDjI4w/nw==
 
+vlq@^0.2.1:
+  version "0.2.3"
+  resolved "https://registry.npmjs.org/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"
+  integrity sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow==
+
 vue-demi@*, vue-demi@>=0.14.8:
   version "0.14.8"
   resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.8.tgz"
@@ -6302,6 +6412,21 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-touch@^2.0.0-beta.4:
+  version "2.0.0-beta.4"
+  resolved "https://registry.npmjs.org/vue-touch/-/vue-touch-2.0.0-beta.4.tgz#0259a5fbf89fed12d5e5d789fffb99b874ae0501"
+  integrity sha512-UvbKsqf7HHwtXzuEodtzeDEX/lkq6ul1QcdHhl8VUKlDTYne5ey15RjNVTkDvigJaKvtVU0UB0x5NURNyRC37A==
+  dependencies:
+    hammerjs "^2.0.8"
+    rollup-plugin-cleanup "^0.1.4"
+    rollup-plugin-commonjs "^7.0.0"
+    rollup-plugin-node-resolve "^2.0.0"
+
+vue3-touch-events@^4.1.8:
+  version "4.1.8"
+  resolved "https://registry.npmjs.org/vue3-touch-events/-/vue3-touch-events-4.1.8.tgz#0cc7389a9fc2ecc6b34095b27d7174d5d3edc300"
+  integrity sha512-8Zs0mj5k/7R579JHsc5w1V2IqAkNlz2gJs18bRV4T5WyCMfd5sBf2ESJ2xR8z+n7ypgK8fQO5MmDOPal0Evf3Q==
+
 vue@^3.2.13:
   version "3.4.30"
   resolved "https://registry.npmmirror.com/vue/-/vue-3.4.30.tgz"