过度章节：竹林层次感

README.md

@@ -5,6 +5,11 @@
 
 ## 任一存的todos
 
+### bug fix
+邵总
+
+左右滑
+
 ### 优化
 内容扩展页 按钮边框
 
@@ -16,9 +21,6 @@
 
 内容扩展页 操作提示文字竖着
 
-### 开发
-竹林层次
-
 ### 保存成果
 组件：序列帧
 

src/useFunctions/useSmoothSwipe.js

@@ -77,7 +77,7 @@ export default function useSmoothSwipe({
       const destinationIdx = anchorPosListInner.findIndex((item) => {
         return item - translateLength.value > 1
       })
-      if (Number.isInteger(destinationIdx) && !isTweening) {
+      if ((destinationIdx !== -1) && !isTweening) {
         isTweening = true
         tween = new TWEEN.Tween(translateLength)
         tween.to({
@@ -94,7 +94,7 @@ export default function useSmoothSwipe({
       const destinationIdx = anchorPosListInnerReverse.findIndex((item) => {
         return item - translateLength.value < -1
       })
-      if (Number.isInteger(destinationIdx) && !isTweening) {
+      if ((destinationIdx !== -1) && !isTweening) {
         isTweening = true
         tween = new TWEEN.Tween(translateLength)
         tween.to({

src/views/MoreContent.vue

@@ -9,69 +9,185 @@
       @touchmove="touchMove($event)"
     >
       <img
-        class="temp-bg"
+        class="bg"
         :style="{
-          left: tempBgLeft + 'px'
+          left: bgLeft + 'px'
         }"
-        src="@/assets/images/bg-more-content.jpg"
+        src="@/assets/images/fade-chapter-wood/bg-more-content.jpg"
         alt=""
         draggable="false"
       >
 
-      <HotspotComp
-        class="hotspot"
+      <div
+        class="layer-4"
         :style="{
-          left: hotspotLeft + 'px',
+          left: layer4Left + 'px',
         }"
-        @click="router.push({
-          name: 'BambooHot',
-        })"
-      />
+      >
+        <img
+          class="bamboo-4_01"
+          src="@/assets/images/fade-chapter-wood/4_01.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_02"
+          src="@/assets/images/fade-chapter-wood/4_02.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_03"
+          src="@/assets/images/fade-chapter-wood/4_03.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_04"
+          src="@/assets/images/fade-chapter-wood/4_04.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_05"
+          src="@/assets/images/fade-chapter-wood/4_05.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_06"
+          src="@/assets/images/fade-chapter-wood/4_06.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-4_07"
+          src="@/assets/images/fade-chapter-wood/4_07.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
 
       <div
-        class="shuang-gou-she-se-group"
+        class="layer-3"
         :style="{
-          left: shuangGouSheSeGroupLeft + 'px'
+          left: layer3Left + 'px',
         }"
       >
-        <button
-          class="watch-detail"
-          @click="onClickShuangGouEntry"
+        <img
+          class="bamboo-3_01"
+          src="@/assets/images/fade-chapter-wood/3_01.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-3_02"
+          src="@/assets/images/fade-chapter-wood/3_02.png"
+          alt=""
+          draggable="false"
         >
-          查看详情
-        </button>
-        <h2 class="group-title">
-          双钩设色
-        </h2>
       </div>
 
       <div
-        class="mo-zhu-group"
+        class="layer-2"
         :style="{
-          left: moZhuGroupLeft + 'px'
+          left: layer2Left + 'px',
         }"
       >
-        <div class="button-group">
-          <button
-            class="poem"
-            @click="onClickEntryAtMoZhu('PoemList')"
-          >
-            人文
-          </button>
-          <button
-            @click="onClickEntryAtMoZhu('PaintingList')"
-          >
-            画作
-          </button>
+        <img
+          class="bamboo-2_01"
+          src="@/assets/images/fade-chapter-wood/2_01.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-2_03"
+          src="@/assets/images/fade-chapter-wood/2_03.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-2_02"
+          src="@/assets/images/fade-chapter-wood/2_02.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
+
+      <div
+        class="layer-1"
+        :style="{
+          left: layer1Left + 'px',
+        }"
+      >
+        <img
+          class="bamboo-1_01"
+          src="@/assets/images/fade-chapter-wood/1_01.png"
+          alt=""
+          draggable="false"
+        >
+        <HotspotComp
+          class="hotspot"
+          @click="router.push({
+            name: 'BambooHot',
+          })"
+        />
+        <div
+          class="shuang-gou-she-se-group"
+        >
           <button
-            @click="onClickEntryAtMoZhu('BambooBook')"
+            class="watch-detail"
+            @click="onClickShuangGouEntry"
           >
-            竹谱
+            查看详情
           </button>
+          <h2 class="group-title">
+            双钩设色
+          </h2>
+        </div>
+        <img
+          class="bamboo-1_02"
+          src="@/assets/images/fade-chapter-wood/1_02.png"
+          alt=""
+          draggable="false"
+        >
+        <div
+          class="mo-zhu-group"
+        >
+          <div class="button-group">
+            <button
+              class="poem"
+              @click="onClickEntryAtMoZhu('PoemList')"
+            >
+              人文
+            </button>
+            <button
+              @click="onClickEntryAtMoZhu('PaintingList')"
+            >
+              画作
+            </button>
+            <button
+              @click="onClickEntryAtMoZhu('BambooBook')"
+            >
+              竹谱
+            </button>
+          </div>
+          <h2 class="group-title">
+            墨竹
+          </h2>
         </div>
-        <h2 class="group-title">
-          墨竹
-        </h2>
+        <img
+          class="bamboo-1_03"
+          src="@/assets/images/fade-chapter-wood/1_03.png"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="bamboo-1_04"
+          src="@/assets/images/fade-chapter-wood/1_04.png"
+          alt=""
+          draggable="false"
+        >
       </div>
     </div>
 
@@ -166,28 +282,37 @@ const { haveSwipedThisTime, translateLength, currentAnchorIdx } = useSmoothSwipe
   ]
 })
 
-const tempBgInitialLeft = 0
-const tempBgLeft = ref(tempBgInitialLeft)
+const bgInitialLeft = 0
+const bgLeft = ref(bgInitialLeft)
+watch(translateLength, (v) => {
+  bgLeft.value = bgInitialLeft - v
+})
+
+const layer4SpeedFactor = 0.8 * 0.8 * 0.8
+const layer4InitialLeft = 0
+const layer4Left = ref(layer4InitialLeft)
 watch(translateLength, (v) => {
-  tempBgLeft.value = tempBgInitialLeft - v
+  layer4Left.value = layer4InitialLeft - v * layer4SpeedFactor
 })
 
-const hotspotInitialLeft = 71 * windowHeight.value / windowHeightDesign
-const hotspotLeft = ref(hotspotInitialLeft)
+const layer3SpeedFactor = 0.8 * 0.8
+const layer3InitialLeft = 0
+const layer3Left = ref(layer3InitialLeft)
 watch(translateLength, (v) => {
-  hotspotLeft.value = hotspotInitialLeft - v
+  layer3Left.value = layer3InitialLeft - v * layer3SpeedFactor
 })
 
-const shuangGouSheSeGroupInitialLeft = 216 * windowHeight.value / windowHeightDesign
-const shuangGouSheSeGroupLeft = ref(shuangGouSheSeGroupInitialLeft)
+const layer2SpeedFactor = 0.8
+const layer2InitialLeft = 0
+const layer2Left = ref(layer2InitialLeft)
 watch(translateLength, (v) => {
-  shuangGouSheSeGroupLeft.value = shuangGouSheSeGroupInitialLeft - v
+  layer2Left.value = layer2InitialLeft - v * layer2SpeedFactor
 })
 
-const moZhuGroupInitialLeft = 936 * windowHeight.value / windowHeightDesign
-const moZhuGroupLeft = ref(moZhuGroupInitialLeft)
+const layer1InitialLeft = 0
+const layer1Left = ref(layer1InitialLeft)
 watch(translateLength, (v) => {
-  moZhuGroupLeft.value = moZhuGroupInitialLeft - v
+  layer1Left.value = layer1InitialLeft - v
 })
 
 const isShowOperationTip = ref(true)
@@ -278,52 +403,167 @@ const touchMove = (event) => {
   user-select: none;
   >.scroll-target{
     height: 100%;
-    width: fit-content;
+    width: 100%;
     display: flex;
     gap: 100px;
     overflow: hidden;
-    >img.temp-bg{
+    >img.bg{
       position: absolute;
       height: 100%;
     }
-    >.hotspot{
+    >.layer-4{
+      position: absolute;
+      height: 100%;
+      >.bamboo-4_01{
+        position: absolute;
+        left: calc(0 * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        bottom: 0;
+        height: calc(300px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.bamboo-4_02{
+        position: absolute;
+        bottom: 0;
+        left: calc(120px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: calc(380px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.bamboo-4_03{
+        position: absolute;
+        bottom: 0;
+        left: calc(1000px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: calc(518px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.bamboo-4_04{
+        position: absolute;
+        bottom: 0;
+        left: calc(870px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: 100%;
+      }
+      >.bamboo-4_05{
+        position: absolute;
+        bottom: 0;
+        left: calc(450px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: 100%;
+      }
+      >.bamboo-4_06{
+        position: absolute;
+        bottom: 0;
+        left: calc(520px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: 100%;
+      }
+      >.bamboo-4_07{
+        position: absolute;
+        bottom: 0;
+        left: calc(1000px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        height: 100%;
+      }
+    }
+    >.layer-3{
       position: absolute;
-      top: calc(385px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      height: 100%;
+      >.bamboo-3_01{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(479px * v-bind('layer3SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.bamboo-3_02{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(880px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
     }
-    >.shuang-gou-she-se-group{
+    >.layer-2{
       position: absolute;
-      top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
-      >button.watch-detail{
+      height: 100%;
+      >.bamboo-2_01{
         position: absolute;
-        top: calc(182px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
-        left: 0;
-        .button-common-style();
+        top: 0;
+        height: 100%;
+        left: calc(0px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.bamboo-2_03{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(503px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >h2.group-title{
+      >.bamboo-2_02{
         position: absolute;
         top: 0;
-        left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
-        .group-title-common-style();
+        height: 100%;
+        left: calc(894px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
     }
-    >.mo-zhu-group{
+    >.layer-1{
       position: absolute;
-      top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
-      >.button-group{
+      height: 100%;
+      >.bamboo-1_01{
         position: absolute;
-        top: calc(75px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        top: 0;
+        height: 100%;
         left: 0;
-        display: flex;
-        flex-direction: column;
-        >button{
+      }
+      >.hotspot{
+        position: absolute;
+        top: calc(385px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(71px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.shuang-gou-she-se-group{
+        position: absolute;
+        top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(216px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        >button.watch-detail{
+          position: absolute;
+          top: calc(182px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+          left: 0;
           .button-common-style();
         }
+        >h2.group-title{
+          position: absolute;
+          top: 0;
+          left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
+          .group-title-common-style();
+        }
+      }
+      >.bamboo-1_02{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(352px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+      }
+      >.mo-zhu-group{
+        position: absolute;
+        top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        left: calc(936px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+        >.button-group{
+          position: absolute;
+          top: calc(75px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+          left: 0;
+          display: flex;
+          flex-direction: column;
+          >button{
+            .button-common-style();
+          }
+        }
+        >h2.group-title{
+          position: absolute;
+          top: 0;
+          left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
+          .group-title-common-style();
+        }
+      }
+      >.bamboo-1_03{
+        position: absolute;
+        top: 0;
+        height: 100%;
+        left: calc(960px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
-      >h2.group-title{
+      >.bamboo-1_04{
         position: absolute;
         top: 0;
-        left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));;
-        .group-title-common-style();
+        height: 100%;
+        left: calc(1336px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
       }
     }
   }