fix:更新首页交互

src/views/HomeView.vue

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