更新首页交互、所有提示逻辑、touch换成原生touch

public/configText.js

@@ -14,10 +14,11 @@ var configText = {
   ],
   homepagePaintingDetailDescStem2: '<span>坡石一隅的三竿修竹，两竿近，一竿远，近低</span><span style="font-size:1.3em">远高</span><span>，近开</span><span style="font-size:1.3em">远合</span><span>，两竿向右，一竿向左，</span><span style="font-size:1.3em">一聚</span><span>一分，构图稳定，法度森严。</span>',
   homepagePaintingDetailDescStem1: '<span>坡石一隅的三竿修竹，两竿近，一竿远，</span><span style="font-size:1.3em">近低</span><span>远高，</span><span style="font-size:1.3em">近开</span><span>远合，两竿向右，一竿向左，一聚</span><span style="font-size:1.3em">一分</span><span>，构图稳定，法度森严。</span>',
-
+  homepagePaintingDetailDescStem: '<span>坡石一隅的三竿修竹，两竿近，一竿远，</span><span style="font-size:1.3em">近低远高</span><span>，</span><span style="font-size:1.3em">近开远合</span><span>，两竿向右，一竿向左，</span><span style="font-size:1.3em">一聚一分</span><span>，构图稳定，法度森严。</span>',
   homepagePaintingDetailDescLeaf1: '<span>竹叶的画法以</span><span style="font-size:1.3em" >“个”</span><span>“介"“分”\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
   homepagePaintingDetailDescLeaf2: '<span>竹叶的画法以“个”</span><span style="font-size:1.3em">“介"</span><span>“分”\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
   homepagePaintingDetailDescLeaf3: '<span>竹叶的画法以“个”“介"</span><span style="font-size:1.3em" >“分”</span><span>\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
+  homepagePaintingDetailDescLeaf: '<span>竹叶的画法以</span><span style="font-size:1.3em" >“个”“介"“分”</span><span>\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
 
   homepagePaintingDetailDescStone: '<span style="font-size:1.3em">卧石、枯树和灌木</span><span>在竹下方，用低矮、枯梗、虚淡来衬托竹的挺拔、润泽和沉着。图中弥漫着敦厚温润、不瘟不火、从容淡定的神韵。</span>',
   homepagePaintingSummary: '赵孟頫对李衎的墨竹评价极高：“吾友李仲宾为此君写真，冥搜极讨，盖欲尽得竹之情状，二百年来，以画竹称者，皆未必能用意精深如仲宾也。”',

src/App.vue

@@ -1,12 +1,8 @@
 <template>
   <!-- <router-view /> -->
   <router-view v-slot="{ Component }">
-    <transition
-      name="fade-in-out"
-    >
-      <component
-        :is="Component"
-      />
+    <transition name="fade-in-out">
+      <component :is="Component" />
     </transition>
   </router-view>
   <audio
@@ -93,7 +89,8 @@ onMounted(() => {
 </script>
 
 <style lang="less">
-html, body {
+html,
+body {
   // overscroll-behavior: none;
   overflow: hidden;
   height: 100%;
@@ -105,7 +102,8 @@ html, body {
 }
 
 // 360浏览器不支持not()
-input, textarea {
+input,
+textarea {
   user-select: initial;
 }
 
@@ -128,6 +126,7 @@ input, textarea {
   font-family: 'KingHwa_OldSong';
   src: url('@/assets/style/KingHwa_OldSong.TTF');
 }
+
 @font-face {
   font-family: 'KaiTi';
   src: url('@/assets/style/SIMKAI.TTF');
@@ -143,6 +142,7 @@ input, textarea {
   transition: opacity 2s;
   pointer-events: none;
 }
+
 .fade-out-leave-to {
   opacity: 0;
 }
@@ -150,6 +150,7 @@ input, textarea {
 .fade-in-enter-active {
   transition: opacity 2s;
 }
+
 .fade-in-enter-from {
   opacity: 0;
 }
@@ -157,13 +158,16 @@ input, textarea {
 .fade-in-out-enter-active {
   transition: opacity 1s;
 }
+
 .fade-in-out-leave-active {
   transition: opacity 1s;
   pointer-events: none;
 }
+
 .fade-in-out-enter-from {
   opacity: 0;
 }
+
 .fade-in-out-leave-to {
   opacity: 0;
 }
@@ -172,13 +176,16 @@ input, textarea {
 .animation-show-hide {
   animation: show-hide 1.5s infinite;
 }
+
 @keyframes show-hide {
   0% {
     opacity: 0;
   }
+
   50% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }
@@ -189,16 +196,20 @@ input, textarea {
 .animation-show-long-hide {
   animation: show-long-hide 2.5s infinite;
 }
+
 @keyframes show-long-hide {
   0% {
     opacity: 0;
   }
+
   35% {
     opacity: 1;
   }
+
   65% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }
@@ -208,4 +219,44 @@ input, textarea {
 .viewer-backdrop {
   background-color: rgba(0, 0, 0, 90%) !important;
 }
+
+.viewer-backdrop-home {
+  background-color: #597557 !important;
+  backdrop-filter: blur(10px);
+}
+
+.big-tip {
+  position: fixed;
+  // width: 100px;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2016;
+  display: flex;
+  align-items: center;
+  font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  line-height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  font-family: KaiTi, KaiTi;
+  color: white;
+  transition: all 0.5s;
+  >img{
+    width: 30px;
+    height: 30px;
+    margin-left: 10px;
+  }
+}
+.viewer-button-home{
+  background: url(@/assets/images/icon_cancel.png);
+  background-size: 100% 100%;
+  background-color: rgba(0, 0, 0, 0) !important;
+  height: 40px !important;
+  right: 10px !important;
+  top: 10px !important;
+  width: 40px !important;
+  border: none !important;
+  -webkit-tap-highlight-color:none !important;
+}
+.viewer-button-home::before{
+  display: none !important;
+}
 </style>

src/components/HotspotForHomepage.vue

@@ -44,7 +44,7 @@ const $env = inject('$env')
     opacity: 0;
   }
   50% {
-    opacity: 0.4;
+    opacity: 1;
   }
   100% {
     opacity: 0;

src/components/OperationTip.vue

@@ -22,15 +22,8 @@
 
 <script setup>
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
-import { ref, computed, watch, onMounted, inject } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
+import { ref, computed, watch } from "vue"
 
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
-const $env = inject('$env')
 
 const {
   windowSizeInCssForRef,
@@ -75,9 +68,9 @@ watch(propIsShow, (v) => {
     isShow.value = false
   }
 })
-setTimeout(() => {
-  isShow.value = false
-}, 2000)
+// setTimeout(() => {
+//   isShow.value = false
+// }, 2000)
 </script>
 
 <style lang="less" scoped>

src/views/BambooBookScene1.vue

@@ -7,14 +7,34 @@ const {
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
-const onSwipeLeft = () => {
-  emit('slide-right')
+const isShowOperationTip = ref(true)
+
+const lastX = ref(0)
+// 开始滑动
+const handletouchstart = (event) => {
+  isShowOperationTip.value = false
+  lastX.value = event.changedTouches[0].pageX
 }
 
-const onSwipeRight = () => {
-  emit('slide-left')
+// 监听活动
+const touchEnd = (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 onSwipeLeft = () => {
+//   emit('slide-right')
+// }
+
+// const onSwipeRight = () => {
+//   emit('slide-left')
+// }
+
 const emit = defineEmits(['slide-right', 'slide-left', 'close'])
 
 const x = window.innerHeight / 1018
@@ -26,9 +46,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)"
+    @touchend="touchEnd($event)"
   >
     <!-- 竹叶序列帧 -->
     <div class="xuliezheng" />
@@ -43,6 +63,7 @@ const innerHeight = ref(window.innerHeight + 'px')
         class="operation-h"
         text=""
         direction="h"
+        :is-show="isShowOperationTip"
       />
       <img
         class="disc-img"

src/views/BambooHotView2/index.vue

@@ -261,6 +261,7 @@
         class="operation-h"
         text=""
         direction="h"
+        :is-show="isShowOperationTip"
       />
     </div>
   </div>
@@ -414,7 +415,7 @@ const animationFrameTask = () => {
   lastAnimationTimeStamp.value = timeStamp
   animationFrameId.value = requestAnimationFrame(animationFrameTask)
 }
-
+const isShowOperationTip = ref(true)
 const handleTouchstart = (e) => {
   if (hotVisible.value) return
 
@@ -423,6 +424,7 @@ const handleTouchstart = (e) => {
   lastMoveEventTimeStamp.value = 0
   lastAnimationTimeStamp.value = Date.now()
   lastTouchPos.value = e.changedTouches[0].clientX
+  isShowOperationTip.value = false
 }
 const handleTouchmove = (e) => {
   e.preventDefault()

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

@@ -31,12 +31,13 @@
     <!-- 画作 -->
     <div
       class="painting-wrap"
+      :class="{last:summaryOpacity > 0}"
       :style="{
         top: summaryOpacity > 0 ? `${90 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px` : `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         width: summaryOpacity > 0 ? `calc(225 / 308 * 100%)` : paintingWidth == 485 ? `110%` : `${paintingWidth / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         height: summaryOpacity > 0 ? `${523 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px` : `${paintingHeight / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        transform: `${currentPosition}`,
-        transition: currentPosition != '' ? `all 1.5s` : ``
+        transform: `${currentPosition != '' ? currentPosition : `translate(-50%, 0)`}`,
+        transition: currentPosition != '' ? `all 1s` : ``
       }"
     >
       <div
@@ -312,21 +313,41 @@
     <!-- 文字介绍 -->
     <div
       ref="longDesc"
-      v-touch:swipe.left="onSwipeLeft"
-      v-touch:swipe.right="onSwipeRight"
       class="long-desc"
       :style="{
-        top: `${(paintingTop + paintingHeight + 53) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        top: `${(paintingTop + paintingHeight + 60) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: longDescOpacity,
       }"
+      @touchstart="handletouchstart($event)"
+      @touchend="touchEnd($event)"
     >
+      <div
+        class="page2-box"
+        @click="isShowPaintingDesc = true"
+      >
+        <img
+          src="@/assets/images/icon_home_detail-min.png"
+          alt=""
+        >
+        <div>作品简介</div>
+      </div>
+      <div
+        class="page2-box"
+        @click="isShowAuthorDesc = true"
+      >
+        <img
+          src="@/assets/images/icon_home_author-min.png"
+          alt=""
+        >
+        <div>作者简介</div>
+      </div>
       <!-- <h3>作品简介：</h3> -->
-      <p
+      <!-- <p
         v-for="(item, index) in homepagePaintingDesc"
         :key="index"
       >
         {{ item }}
-      </p>
+      </p> -->
       <!-- <h3>作者简介：</h3>
       <p
         v-for="(item, index) in homepageAuthorDesc"
@@ -337,42 +358,111 @@
     </div>
 
     <!-- 展开作者简介 -->
-
-    <div
+    <!-- <div
       class="up-icon"
       :style="{
-        top: `${(paintingTop + paintingHeight + 300) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        top: `${(paintingTop + paintingHeight + 315) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: longDescOpacity,
       }"
       @click="isShowAuthorDesc = true"
     >
       <img src="@/assets/images/icon_up.png">
-    </div>
+    </div> -->
+    <!-- 作品简介 -->
     <div
-      v-show="isShowAuthorDesc"
-      class="author-box"
+      v-show="isShowPaintingDesc"
+      class="painting-box"
     >
+      <!-- 顶部画作 -->
       <img
-        class="top-icon"
-        src="@/assets/images/img_author.png"
+        class="painting-img"
+        src="@/assets/images/img_painting-box.png"
         alt=""
       >
-      <div class="author-desc">
+      <div
+        class="text-box"
+      >
         <p
-          v-for="(item, index) in homepageAuthorDesc"
+          v-for="(item,index) in homepagePaintingDesc"
           :key="index"
         >
           {{ item }}
         </p>
       </div>
+      <!-- <div class="bottom-box" /> -->
+      <img
+        class="back-btn"
+        src="@/assets/images/icon_back_white.png"
+        alt=""
+        @click="isShowPaintingDesc = false"
+      >
+      <!-- <BtnBack
+        class="system-btns"
+        @click="isShowPaintingDesc = false"
+      /> -->
+    </div>
+
+    <!-- 作者简介 -->
+    <div
+      v-show="isShowAuthorDesc"
+      class="author-box"
+    >
+      <div class="author-content">
+        <img
+          class="author-img"
+          src="@/assets/images/img_author-min.png"
+        >
+        <img
+          class="author-name"
+          src="@/assets/images/text_likan-min.png"
+        >
+
+        <div class="line" />
+        <div class="text-box">
+          <p
+            v-for="(item, index) in homepageAuthorDesc"
+            :key="index"
+          >
+            {{ item }}
+          </p>
+        </div>
+      </div>
+      <!-- 底部遮罩 -->
+      <!-- <div class="bottom-box" /> -->
       <img
-        class="down-icon"
-        src="@/assets/images/icon_down.png"
+        style="position: absolute;
+        bottom: 30px;
+        left: 20px;
+        width: 25px;"
+        src="@/assets/images/icon_back_white.png"
+        alt=""
         @click="isShowAuthorDesc = false"
       >
+      <!-- <BtnBack
+        class="system-btns"
+        @click="isShowAuthorDesc = false"
+      /> -->
     </div>
 
+    <!-- 竹杆提示 -->
+    <OperationTip
+      v-if="stemOpacity > 0"
+      class="stem-operation-h"
+      direction="h"
+    />
+    <!-- 竹叶提示 -->
+    <OperationTip
+      v-if="leafOpacity > 0"
+      class="leaf-operation-h"
+      direction="h"
+    />
 
+    <!-- 石头提示 -->
+    <OperationTip
+      v-if="stoneOpacity > 0"
+      class="stone-operation-h"
+      direction="h"
+    />
 
     <!-- stem title -->
     <!-- 上面 -->
@@ -380,7 +470,7 @@
       class="fixed-desc detail-title-stem"
       :style="{
         top: `${paintingTop + 750 / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
-        opacity:stemOpacity ,
+        opacity: stemOpacity,
       }"
     >
       三竿修竹
@@ -418,16 +508,16 @@
     <div
       class="fixed-desc detail-desc-stem"
       :style="{
-        top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        top: `${(paintingTop + 725) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: stemGreenOpacity,
 
       }"
-      v-html="stemOpacity1 > 0 ? detailDescStem1 : detailDescStem2 "
+      v-html="stemOpacity1 > 0 ? detailDescStem1 : detailDescStem2"
     />
     <div
       class="fixed-desc detail-desc-leaf"
       :style="{
-        top: `${(paintingTop + 750) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
+        top: `${(paintingTop + 725) / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`,
         opacity: leafGreenOpacity,
         zIndex: 4,
       }"
@@ -451,42 +541,21 @@
       {{ summaryDesc }}
     </div>
 
-    <div class="progress-bar">
+    <!-- <div class="progress-bar">
       <div
         class="bar-artwork-desc"
         :style="{
           width: `${scrollerElScrollTop / summaryHideAt * 100}%`,
         }"
       />
-      <!-- <img
-        class="progress-bar-node-1"
-        src="@/assets/images/progress-bar-node-1.png"
-        v-show="scrollerElScrollTop / summaryHideAt > 0.10"
-        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"
-      >
-      <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}%`,
-          backgroundColor:stemGreenOpacity > 0 || leafGreenOpacity > 0 || stoneGreenOpacity > 0?'rgba(85,116,83,0.8)':''
-        }"
-      /> -->
-    </div>
+    </div> -->
+    <ProgressBar
+      :style="{ opacity: curStep != 0 ? 1: 0}"
+      class="progress-bar"
+      :totle-unit="5"
+      :cur-percentage="curPercentage"
+      @go-to-slide="goToSlide"
+    />
     <OperationTip
       v-if="isStartupOver"
       class="operation-tip"
@@ -495,6 +564,13 @@
       :is-show="isShowOperationTip"
     />
 
+    <OperationTip
+      v-if="isBackFormOther"
+      class="operation-tip"
+      text="向左划动"
+      direction="h"
+    />
+
     <div
       ref="scrollerEl"
       class="scroller"
@@ -600,6 +676,9 @@ const {
 } = useSizeAdapt()
 
 const isShowAuthorDesc = ref(false)
+const isShowPaintingDesc = ref(false)
+
+
 
 
 
@@ -618,10 +697,14 @@ const scrollerEl = ref(null)
 const scrollerElScrollTop = ref(0)
 function onScroll() {
   scrollerElScrollTop.value = scrollerEl.value.scrollTop
-  console.log('当前滚动比例', scrollerElScrollTop.value / summaryHideAt, scrollerEl.value.scrollTop / scrollerEl.value.scrollHeight)
+  // console.log('当前滚动比例', scrollerElScrollTop.value / summaryHideAt, scrollerEl.value.scrollTop / scrollerEl.value.scrollHeight)
 }
+const isBackFormOther = ref(false)
 onMounted(() => {
   scrollerEl.value.addEventListener('scroll', onScroll)
+  if (window.location.href.includes('?back=1')) {
+    isBackFormOther.value = true
+  }
 })
 onBeforeUnmount(() => {
   scrollerEl.value.removeEventListener('scroll', onScroll)
@@ -685,27 +768,32 @@ const paintingTop = computed(() => {
 
 
 const paintingWidthInitial = 308
-const paintingWidthMovedUp = 250
+const paintingWidthMovedUp = 300
 const paintingWidthMovedDown = 485
 const paintingWidth = computed(() => {
   let ret = null
   if (scrollerElScrollTop.value <= paintingMoveUpAt) {
     ret = paintingWidthInitial
+    console.log(1, ret)
   } else if (scrollerElScrollTop.value > paintingMoveUpAt && scrollerElScrollTop.value <= paintingMoveUpFinishAt) {
     ret = (scrollerElScrollTop.value - paintingMoveUpAt) / (paintingMoveUpFinishAt - paintingMoveUpAt) * (paintingWidthMovedUp - paintingWidthInitial) + paintingWidthInitial
+    console.log(2, ret)
   } else if (scrollerElScrollTop.value > paintingMoveUpFinishAt && scrollerElScrollTop.value <= paintingMoveDownAt) {
     ret = paintingWidthMovedUp
+    console.log(3, ret)
   } else if (scrollerElScrollTop.value > paintingMoveDownAt && scrollerElScrollTop.value <= paintingMoveDownFinishAt) {
     ret = (scrollerElScrollTop.value - paintingMoveDownAt) / (paintingMoveDownFinishAt - paintingMoveDownAt) * (paintingWidthMovedDown - paintingWidthMovedUp) + paintingWidthMovedUp
+    console.log(4, ret)
   } else {
     ret = paintingWidthMovedDown
+    console.log(5, ret)
   }
   return ret
 })
 
 
 const paintingHeightInitial = 523
-const paintingHeightMovedUp = 425
+const paintingHeightMovedUp = 495
 let paintingHeightMovedDown = 758
 
 const paintingHeight = computed(() => {
@@ -1133,13 +1221,7 @@ const currentPosition = computed(() => {
   if (stoneOpacity3.value > 0) {
     return `translate(-25%, -6%) scale(2.2)`
   }
-  // if (leafOpacity.value > 0 || leafOpacity1.value > 0 || leafOpacity2.value > 0 || leafOpacity3.value > 0) {
-  //   return `translate(-57%, -40%) scale(3.7)`
-  // }
-  // if (stoneOpacity3.value > 0 || stoneOpacity2.value > 0 || stoneOpacity1.value > 0 || stoneOpacity.value > 0) {
-  //   return `translate(-57%, -40%) scale(4.65)`
-  // }
-  return ''
+  return `translate(-50%, 0)`
 })
 
 
@@ -1260,8 +1342,48 @@ const curStep = ref(0)
 
 const scrollerPositionList = [0, 0.078, 0.166, 0.228, 0.290, 0.353, 0.436, 0.509, 0.561, 0.644, 0.706, 0.769, 0.831, 1]
 const scrollerPositionTimeRight = [500, 300, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
-const scrollerPositionTimeLeft = [500, 300, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000]
+const scrollerPositionTimeLeft = [500, 300, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 300]
+
+// 进度条跳转
+const goToSlide = (index) => {
+  let step = 0
+  switch (index) {
+  case 0:
+    step = 0
+    break
+  case 1:
+    step = 2
+    break
+  case 2:
+    step = 5
+    break
+  case 3:
+    step = 9
+    break
+  case 4:
+    step = 13
+    break
+  }
+  curStep.value = step
+  const pp = scrollerPositionList[curStep.value]
+  const startTime = performance.now()
+  requestAnimationFrame(() => { smoothScrollTo(scrollerEl.value, pp * scrollerEl.value.scrollHeight, scrollerPositionTimeRight[curStep.value], startTime) })
+}
+
 
+// 进度条百分比
+const curPercentage = computed(() => {
+  if (curStep.value == scrollerPositionList.length - 1) {
+    return 100
+  } else if (curStep.value == 2) {
+    return 20
+  } else if (curStep.value == 5) {
+    return 40
+  } else if (curStep.value == 9) {
+    return 60
+  }
+  return Number.parseInt(curStep.value / scrollerPositionList.length * 100)
+})
 
 const onSwipeLeft = () => {
   if (curStep.value < scrollerPositionList.length - 1) {
@@ -1395,6 +1517,7 @@ function onClickGoNextPage() {
     left: 50%;
     transform: translate(-50%, 0);
     z-index: 1;
+    transform-origin: center;
 
     >.green-box {
       width: 200vw;
@@ -1481,7 +1604,10 @@ function onClickGoNextPage() {
 
 
   }
-
+  >.last{
+    left: calc(100% - ((225 / 308 * 100vw) * 2.35 ) / 2);
+    transform:scale(1) !important;
+  }
   >.hotspot-wrap {
     position: absolute;
     left: 50%;
@@ -1558,7 +1684,7 @@ function onClickGoNextPage() {
   >.long-desc {
     position: absolute;
     left: 50%;
-    bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     width: calc(309 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translate(-50%, 0);
     color: white;
@@ -1566,6 +1692,26 @@ function onClickGoNextPage() {
     font-family: KaiTi, KaiTi;
     color: #FFFFFF;
     animation: none;
+    display: flex;
+    justify-content: space-between;
+    z-index: 12;
+
+    >.page2-box {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      >img {
+        width: 45%;
+        margin-bottom: 10px;
+      }
+
+      >div {
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: KaiTi, KaiTi;
+      }
+    }
 
 
     >h3 {
@@ -1594,50 +1740,163 @@ function onClickGoNextPage() {
     }
   }
 
-  >.author-box {
+  >.painting-box {
     width: 100%;
     height: 100%;
-    background: rgba(85, 116, 83, 0.8);
+    background: rgba(73, 91, 71, 0.7);
+    backdrop-filter: blur(22.5px);
     position: fixed;
     top: 0;
     left: 0;
-    padding: 0 10%;
-    z-index: 12;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    // align-content: center;
     align-items: center;
+    // justify-content: center;
+    z-index: 15;
+    padding-top: 15%;
+    padding-left: 10%;
+    padding-right: 10%;
+
+    >.back-btn{
+      width: 25px;
+      left: 20px;
+      bottom: 30px;
+      position: absolute;
+    }
+    >.painting-img{
+      width: 70%;
+      margin-bottom: 20px;
+    }
 
-    >.top-icon {
-      width: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >.text-box {
+        width: 100%;
+        overflow: auto;
+
+        >p {
+          text-indent: 2em;
+          margin-bottom: 10px;
+          color: #FFFFFF;
+          font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          line-height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: KaiTi, KaiTi;
+        }
+      }
+
+    >.bottom-box{
+      width: 100%;
+      min-height: 10vh;
+      background: linear-gradient( 0deg, rgba(73, 91, 71, 0.7) 0%, rgba(115,115,115,0) 100%);
       position: absolute;
-      top: 10%;
-      transform: translateX(-50%);
-      left: 50%;
-      margin-bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      bottom: 0;
+      left: 0;
+    }
 
+    >.system-btns {
+      width: 30px;
+      height: 30px;
+      padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      position: fixed;
+      left: calc(30 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      bottom: calc(50 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      z-index: 2;
     }
+  }
+
+  >.author-box {
+    width: 100%;
+    height: 100%;
+    background: rgba(73, 91, 71, 0.7);
+    backdrop-filter: blur(22.5px);
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 0 10%;
+    z-index: 15;
+    padding-top: 15%;
+    padding-left: 10%;
+    padding-right: 10%;
 
-    >.author-desc {
+    >.author-content {
       width: 100%;
-      color: white;
+      height: 100%;
       overflow: auto;
-      font-family: KaiTi, KaiTi;
-      color: #FFFFFF;
-      animation: none;
-      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      >.author-img {
+        width: 40%;
+        margin-bottom: 5px;
+      }
 
+      >.author-name {
+        width: 50%;
+      }
+
+      >.line {
+        width: 100%;
+        min-height: 1px;
+        background: #E1EDD9;
+        margin: 15px auto;
+        content: "";
+      }
+
+      >.text-box {
+        width: 100%;
+
+        >p {
+          text-indent: 2em;
+          margin-bottom: 10px;
+          color: #FFFFFF;
+          font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          line-height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: KaiTi, KaiTi;
+        }
+      }
     }
 
-    >.down-icon {
+    >.bottom-box{
+      width: 100%;
+      min-height: 20vh;
+      background: linear-gradient( 0deg, rgba(73, 91, 71, 0.7) 0%, rgba(115,115,115,0) 100%);
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+
+    >.back-btn{
+      width: 25px;
+      left: 20px;
+      bottom: 30px;
       position: absolute;
-      transform: translateX(-50%);
-      left: 50%;
-      bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      width: calc(35 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
+
+    >.system-btns {
+      // width: 100%;
+      padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      position: fixed;
+      left: calc(30 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      bottom: calc(35 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      z-index: 34;
+    }
+  }
+
+  >.stem-operation-h {
+    z-index: 10;
+    left: 77% !important;
+    bottom: 36% !important;
+  }
+
+  >.leaf-operation-h {
+    z-index: 10;
+    left: 77% !important;
+    bottom: 36% !important;
+  }
+
+  >.stone-operation-h {
+    z-index: 10;
+    left: 77% !important;
+    bottom: 36% !important;
   }
 
   >.fixed-desc {
@@ -1687,10 +1946,15 @@ function onClickGoNextPage() {
   >.progress-bar {
     position: absolute;
     left: 0;
-    bottom: 0;
-    width: 100%;
+    bottom: 15px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
     height: 15px;
     z-index: 3;
+    color: #e1edd95d;
+    transition: all 1s;
+    z-index: 12;
 
     >.bar-artwork-desc {
       position: absolute;
@@ -1766,7 +2030,7 @@ function onClickGoNextPage() {
     top: 0;
     width: 100%;
     height: 100%;
-    overflow: auto;
+    overflow: hidden;
     transition: transform 2s ease;
     z-index: 3;
 
@@ -1796,9 +2060,10 @@ function onClickGoNextPage() {
   >button.go-next-page {
     position: absolute;
     left: 50%;
-    bottom: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     z-index: 20;
     transform: translate(-50%, 0);
   }
 }
-</style>
+</style>import { transform } from "lodash"
+

src/views/HotspotDetail1.vue

@@ -149,9 +149,6 @@ const ImgClick = (item) => {
   if (!isShowOperationTip.value) {
     isShowOperationTip.value = true
 
-    setTimeout(() => {
-      isShowOperationTip.value = false
-    }, 2000)
   }
 
   pageShow.value = true

src/views/HotspotDetail3.vue

@@ -41,6 +41,7 @@
         opacity: state === 2 ? 1 : 0
       }"
       class="content2"
+      @touchmove="handleScroll"
     >
       <img
         id="content2Img"
@@ -57,11 +58,12 @@
       alt=""
     >
     <OperationTip
-      v-if="state == 2"
+      v-show="state == 2 && isShowOperationTip"
       class="operation-tip"
       text="向左划动"
       direction="h"
       :color="'green'"
+      :is-show="isShowOperationTip"
     />
     <div class="btns-box">
       <img
@@ -123,6 +125,7 @@ const {
 } = useSizeAdapt()
 
 
+
 // 轴1  卷2 册3
 const state = ref(1)
 
@@ -135,22 +138,26 @@ const shadow = computed(() => {
 })
 
 const content2Dom = ref(null)
-
+const isShowOperationTip = ref(true)
 const goState2 = () => {
   state.value = 2
   setTimeout(() => {
     if (content2Dom.value) {
       const x = 310 / 780
       const allWidth = document.getElementById('content2Img').getBoundingClientRect().width
-      console.log(allWidth * x)
       content2Dom.value.scrollLeft = allWidth * x
+      isShowOperationTip.value = true
     }
   }, 5)
+}
 
-
+const handleScroll = () => {
+  isShowOperationTip.value = false
+  console.log('开始滑动')
 }
 
 
+
 </script>
 
 <style lang="less" scoped>

src/views/PaintingDetail.vue

@@ -86,13 +86,13 @@
 
     <div
       ref="descTextEl"
-      v-touch:swipe.top="onSwipeTop"
-      v-touch:swipe.bottom="onSwipeDown"
       class="desc-text"
       :class="{ 'desc-text-up': isUping }"
       :style="{
         opacity: isAnimating ? AnimationProgress.value / 100 : 1,
       }"
+      @touchstart="handletouchstartUp"
+      @touchend="touchEndUp"
     >
       <div
         class="info-title-content"
@@ -176,7 +176,7 @@ const store = useStore()
 
 const $env = inject("$env")
 
-const emit = defineEmits(["close"])
+const emit = defineEmits(["close", "touch-up"])
 
 const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
@@ -242,10 +242,29 @@ const props = defineProps({
   },
 })
 
+const lastY = ref(0)
+// 开始滑动
+const handletouchstartUp = (event) => {
+  emit('touch-up')
+  lastY.value = event.changedTouches[0].pageY
+}
+
 onMounted(() => {
   // console.log('pppppppp', props.direction, props.title)
 })
 
+const touchEndUp = (event) => {
+  let currentY = event.changedTouches[0].pageY
+  let ty = currentY - lastY.value
+  if (ty > 0 ) {
+    console.log('向下')
+    onSwipeDown()
+  } else if (ty < 0 ) {
+    console.log('向上')
+    onSwipeTop()
+  }
+}
+
 /**
  * 操作提示
  */

src/views/PaintingDetailList.vue

@@ -27,6 +27,7 @@
           :can-close="false"
           :direction="item['方向']"
           :size="item['尺寸'] ? getPaintingSize(item['尺寸']):''"
+          @touch-up="handletouchUp"
         >
           {{ item }}
         </PaintingDetail>
@@ -38,8 +39,9 @@
       :is-show="isShowOperationTip"
     />
     <OperationTip
-      v-if="isShowOperationTip2"
+      v-show="isShowOperationTip2"
       class="operation-tip2"
+      :is-show="isShowOperationTip2"
     />
     <BtnBack
       class="btn-back"
@@ -80,16 +82,23 @@ const onSwiper = (swiperP) => {
 const onSlideChange = (e) => {
   if (isShowOperationTip.value && e.activeIndex !== Number(route.query.idx)) {
     isShowOperationTip.value = false
+    setTimeout(() => {
+      isShowOperationTip2.value = true
+    }, 1000)
+
   }
 }
 
 const isShowOperationTip = ref(true)
 
 const isShowOperationTip2 = ref(false)
+
+// 上滑
+const handletouchUp = () => {
+  isShowOperationTip2.value = false
+  isShowOperationTip.value = false
+}
 onMounted(() => {
-  setTimeout(() => {
-    isShowOperationTip2.value = true
-  }, 4000)
 })
 </script>
 

src/views/PaintingList.vue

@@ -273,7 +273,14 @@ function getHiddenContentWidth(paintingGroup, ageName) {
 }
 
 const expandedAgeNameList = ref(new Set())
+
+const isShowOperationTip = ref(true)
+const unwatch = watch(menuElScrollLeft, (v) => {
+  isShowOperationTip.value = false
+  unwatch()
+})
 function onClickAge(ageName) {
+  isShowOperationTip.value = false
   if (expandedAgeNameList.value.has(ageName)) {
     expandedAgeNameList.value.delete(ageName)
   } else {
@@ -297,11 +304,7 @@ const specialDesc = configExcel['其他'][4]['修篁树石图'][1]['作品简介
 
 const isShowPaintingStyleDesc = ref(false)
 
-const isShowOperationTip = ref(true)
-const unwatch = watch(menuElScrollLeft, (v) => {
-  isShowOperationTip.value = false
-  unwatch()
-})
+
 
 </script>
 

src/views/PoemList.vue

@@ -56,6 +56,7 @@
       :direction="'h'"
       :text="'下一章'"
       color="green"
+      :is-show="isShowOperationTip"
     />
 
     <!-- 返场视频 -->
@@ -252,9 +253,11 @@ onMounted(() => {
 // 向右是-1
 // 向左是 1
 const indexFlag = ref(0)
+const isShowOperationTip = ref(true)
 
 // 左右滑动
 const onSwipeChange = (val) => {
+  isShowOperationTip.value = false
   let numResTemp = indexAc.value + val
 
   let indexFlagTemp = -val

src/views/ShuangGouSheSeDetail.vue

@@ -56,9 +56,11 @@ const text2 = [
 const curIndex = ref(0)
 
 const lastX = ref(0)
+const isShowOperationTip = ref(true)
 // 开始滑动
 const handletouchstart = (event) => {
   lastX.value = event.changedTouches[0].pageX
+  isShowOperationTip.value = false
 }
 
 // 监听活动
@@ -160,6 +162,7 @@ const curPercentage = computed(() => {
         class="operation-h"
         text=""
         direction="h"
+        :is-show="isShowOperationTip"
       />
 
       <!-- <OperationTip