宝贝展示阶段初步；精调元素位置初步；背景山水重复显示。

src/views/HomeView.vue

@@ -8,12 +8,22 @@
     @wheel.passive="onWheel"
     @dragstart.prevent
   >
-    <img
-      class="landscape"
-      src="@/assets/landscape.png"
-      alt=""
-      @dragstart.prevent
+    <div
+      ref="landscape-wrap"
+      class="landscape-wrap"
+      :style="{
+        left: landscapePositionleft,
+      }"
     >
+      <img
+        v-for="index in 3"
+        :key="index"
+        class="landscape"
+        src="@/assets/landscape.png"
+        alt=""
+        @dragstart.prevent
+      >
+    </div>
     <div
       class="people-far-wrap"
       :style="{
@@ -101,15 +111,19 @@ export default {
 
       // 镜头平移相关
       translateLength: 0,
-      landscapePositionRight: '-50%',
+      landscapePositionleft: '18.491%',
       peopleFarPositionRight: '0px',
       peopleNearPositionRight: '-30%',
-      introducePositionLeft: '2%',
+      introducePositionLeft: '3.347%',
 
       // 宝物渐入相关
       treasureFadeInProgress: 0,
       treasureFadeInProgressRightBorder: 2000,
 
+      // 宝物展示相关
+      treasureDisplayProgress: 0,
+      treasureDisplayProgressRightBorder: 10000,
+
       // 前景人物变色相关
       peopleNearColorStatus: 'no-color', // 'no-color', 'color'
       isPeopleNearColorChanging: false,
@@ -135,9 +149,10 @@ export default {
           // this.moveSpeed = 0
         }
 
+        this.landscapePositionleft = `calc(18.491% + ${vNew * 0.01}px)`
         this.peopleFarPositionRight = `calc(0px - ${vNew * 0.2}px)`
         this.peopleNearPositionRight = `calc(-30% - ${vNew * 0.8}px)`
-        this.introducePositionLeft = `calc(2% + ${vNew * 1}px)`
+        this.introducePositionLeft = `calc(3.347% + ${vNew * 1}px)`
       }
     },
     treasureFadeInProgress: {
@@ -159,7 +174,27 @@ export default {
           this.treasureFadeInProgress = this.treasureFadeInProgressRightBorder
           // this.moveSpeed = 0
         }
-        console.log(this.treasureFadeInProgress)
+      }
+    },
+    treasureDisplayProgress: {
+      handler(vNew, vOld) {
+        const leftBorder = 0
+
+        if (vOld >= leftBorder && vNew < leftBorder && this.tourState === 2) {
+          this.tourState = 1
+        } else if (vOld <= this.treasureDisplayProgressRightBorder && vNew > this.treasureDisplayProgressRightBorder && this.tourState === 2) {
+          this.tourState = 3
+        }
+
+        if (vNew < leftBorder) {
+          vNew = leftBorder
+          this.treasureDisplayProgress = leftBorder
+          // this.moveSpeed = 0
+        } else if (vNew > this.treasureDisplayProgressRightBorder) {
+          vNew = this.treasureDisplayProgressRightBorder
+          this.treasureDisplayProgress = this.treasureDisplayProgressRightBorder
+          // this.moveSpeed = 0
+        }
       }
     }
   },
@@ -197,12 +232,15 @@ export default {
         this.translateLength -= e.deltaY
       } else if (this.tourState === 1) {
         this.treasureFadeInProgress += e.deltaY
+      } else if (this.tourState === 2) {
+        this.treasureDisplayProgress += e.deltaY
       }
     },
     inertanceEffect() {
       const timeStamp = Date.now()
       const timeElapsed = timeStamp - this.lastAnimationTimeStamp
 
+      // 速度减慢
       if (this.moveSpeed > 0) {
         this.moveSpeed -= 0.003 * timeElapsed
         if (this.moveSpeed < 0) {
@@ -215,10 +253,13 @@ export default {
         }
       }
 
+      // 根据速度更新“距离”
       if (this.tourState === 0) {
         this.translateLength += this.moveSpeed * timeElapsed
       } else if (this.tourState === 1) {
         this.treasureFadeInProgress -= this.moveSpeed * timeElapsed
+      } else if (this.tourState === 2) {
+        this.treasureDisplayProgress -= this.moveSpeed * timeElapsed
       }
 
       this.lastAnimationTimeStamp = timeStamp
@@ -253,11 +294,14 @@ export default {
   background-size: contain;
   position: relative;
   overflow: hidden;
-  .landscape {
-    height: 30%;
+  .landscape-wrap {
     position: absolute;
+    height: 30%;
     top: 0;
-    right: 0;
+    display: flex;
+    > .landscape {
+      height: 100%;
+    }
   }
   > .people-far-wrap {
     position: absolute;
@@ -303,6 +347,7 @@ export default {
   .introduce {
     position: absolute;
     top: 5%;
+    width: 13.727%;
   }
   .fade-mask {
     position: absolute;