点击热点，人物变彩色

src/assets/style/my-reset.css

@@ -3,4 +3,8 @@ button {
   padding: 0;
   cursor: pointer;
   background: transparent;
+}
+
+img {
+  user-select: none;
 }

src/components/HotSpot.vue

@@ -1,15 +1,16 @@
 <template>
-  <div class="shabi">
+  <div class="hot-spot">
     <img
       class="hot-spot__img"
       src="@/assets/hotspot.png"
       alt=""
+      draggable="false"
     >
   </div>
 </template>
 
 <style lang="less" scoped>
-.shabi {
+.hot-spot {
   width: 50px;
   height: 50px;
   cursor: pointer;

src/main.js

@@ -4,4 +4,8 @@ import router from './router'
 import store from './store'
 import HotSpot from '@/components/HotSpot.vue'
 
-createApp(App).use(store).use(router).component('hot-spot', HotSpot).mount('#app')
+createApp(App)
+  .use(store)
+  .use(router)
+  .component('HotSpot', HotSpot)
+  .mount('#app')

src/views/HomeView.vue

@@ -19,22 +19,30 @@
         right: peopleFarPositionRight,
       }"
     >
-      <hot-spot class="hot-spot" />
       <img
-        src="@/assets/people-far-no-color.png"
+        src="@/assets/people-far.png"
         alt=""
         draggable="false"
       >
     </div>
-    <img
+    <div
       class="people-near"
       :style="{
         right: peopleNearPositionRight,
       }"
-      src="@/assets/people-near.png"
-      alt=""
-      draggable="false"
     >
+      <img
+        class="peopleNearSerialFrames"
+        :class="peopleNearColorStatus"
+        src="@/assets/people-near-serial-frame.png"
+        alt=""
+        draggable="false"
+      >
+      <HotSpot
+        class="hot-spot"
+        @click="onClickPeopleNearHotSpot"
+      />
+    </div>
     <img
       class="introduce"
       :style="{
@@ -66,7 +74,8 @@ export default {
       lastAnimationTimeStamp: 0,
       animationFrameId: null,
 
-      lastMoveEventX: 0,
+      peopleNearColorStatus: 'no-color', // 'no-color', 'color'
+      isPeopleNearColorChanging: false,
     }
   },
   watch: {
@@ -135,6 +144,22 @@ export default {
 
       this.lastAnimationTimeStamp = timeStamp
       this.animationFrameId = requestAnimationFrame(this.inertanceEffect)
+    },
+    onClickPeopleNearHotSpot() {
+      if (this.isPeopleNearColorChanging) {
+        return
+      } else {
+        if (this.peopleNearColorStatus === 'no-color') {
+          this.peopleNearColorStatus = 'color'
+        } else {
+          this.peopleNearColorStatus = 'no-color'
+        }
+        this.isPeopleNearColorChanging = true
+        setTimeout(() => {
+          this.isPeopleNearColorChanging = false
+        }, 2500)
+      }
+
     }
   }
 }
@@ -149,25 +174,16 @@ export default {
   background-size: contain;
   position: relative;
   overflow: hidden;
-  user-select: none;
   .landscape {
     height: 30%;
     position: absolute;
     top: 0;
     right: 0;
-    user-select: none;
   }
   .people-far {
     position: absolute;
     top: 20%;
     height: 60%;
-    user-select: none;
-    > .hot-spot {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      top: 0;
-    }
     > img {
       height: 100%;
     }
@@ -175,13 +191,33 @@ export default {
   .people-near {
     position: absolute;
     bottom: 0;
-    height: 90%;
-    user-select: none;
+    width: 600px;
+    height: 800px;
+    transform: scale(calc(90vh / 800px));
+    overflow: hidden;
+    > .hot-spot {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 15%;
+    }
+    > .peopleNearSerialFrames {
+      position: absolute;
+      height: 100%;
+      transition-property: left;
+      transition-duration: 2.5s;
+      transition-timing-function: steps(59, jump-end);
+      &.no-color {
+        left: 0;
+      }
+      &.color {
+        left: calc(-100% * 59)
+      }
+    }
   }
   .introduce {
     position: absolute;
     top: 5%;
-    user-select: none;
   }
 }
 </style>