变色效果展示从前景人物改为背景人物负责

src/views/HomeView.vue

@@ -32,13 +32,14 @@
     >
       <img
         class="people-far"
-        src="@/assets/people-far.png"
+        :class="peopleFarColorStatus"
+        src="@/assets/people-far-serial-frame-400-600-60.png"
         alt=""
         @dragstart.prevent
       >
       <HotSpot
         class="hot-spot"
-        @click="onClickPeopleNearHotSpot"
+        @click="onClickPeopleFarHotSpot"
       />
     </div>
     <div
@@ -50,8 +51,7 @@
     >
       <img
         class="people-near"
-        :class="peopleNearColorStatus"
-        src="@/assets/people-near-serial-frame-400-600-60.png"
+        src="@/assets/people-near.png"
         alt=""
         @dragstart.prevent
       >
@@ -68,10 +68,6 @@
         alt=""
         @dragstart.prevent
       >
-      <HotSpot
-        class="hot-spot"
-        @click="onClickPeopleNearHotSpot"
-      />
     </div>
     <img
       class="introduce"
@@ -167,9 +163,9 @@ export default {
       treasureFadeOutProgress: 0,
       treasureFadeOutProgressRightBorder,
 
-      // 前景人物变色相关
-      peopleNearColorStatus: 'no-color', // 'no-color', 'color'
-      isPeopleNearColorChanging: false,
+      // 远处人物变色相关
+      peopleFarColorStatus: 'no-color', // 'no-color', 'color'
+      isPeopleFarColorChanging: false,
     }
   },
   watch: {
@@ -345,18 +341,18 @@ export default {
       this.lastAnimationTimeStamp = timeStamp
       this.animationFrameId = requestAnimationFrame(this.inertanceEffect)
     },
-    onClickPeopleNearHotSpot() {
-      if (this.isPeopleNearColorChanging) {
+    onClickPeopleFarHotSpot() {
+      if (this.isPeopleFarColorChanging) {
         return
       } else {
-        if (this.peopleNearColorStatus === 'no-color') {
-          this.peopleNearColorStatus = 'color'
+        if (this.peopleFarColorStatus === 'no-color') {
+          this.peopleFarColorStatus = 'color'
         } else {
-          this.peopleNearColorStatus = 'no-color'
+          this.peopleFarColorStatus = 'no-color'
         }
-        this.isPeopleNearColorChanging = true
+        this.isPeopleFarColorChanging = true
         setTimeout(() => {
-          this.isPeopleNearColorChanging = false
+          this.isPeopleFarColorChanging = false
         }, 2500)
       }
     },
@@ -391,24 +387,10 @@ export default {
   > .people-far-wrap {
     position: absolute;
     top: 25%;
-    height: 55%;
-    > .people-far {
-      height: 100%;
-    }
-    > .hot-spot {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      top: 10%;
-    }
-  }
-  .people-near-wrap {
-    position: absolute;
-    bottom: -13%;
-    height: 100vh;
-    width: calc(100vh * 400 / 600);
+    height: 55vh;
+    width: calc(55vh * 400 / 600);
     overflow: hidden;
-    > .people-near {
+    > .people-far {
       position: absolute;
       height: 100%;
       transition-property: left;
@@ -425,7 +407,16 @@ export default {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      top: 17%;
+      top: 10%;
+    }
+  }
+  .people-near-wrap {
+    position: absolute;
+    bottom: -13%;
+    height: 100vh;
+    overflow: hidden;
+    > .people-near {
+      height: 100%;
     }
     > .treasure {
       position: absolute;