引入热点hot-spot组件

src/components/HotSpot.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="shabi">
+    <img
+      class="hot-spot__img"
+      src="@/assets/hotspot.png"
+      alt=""
+    >
+  </div>
+</template>
+
+<style lang="less" scoped>
+.shabi {
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+  > .hot-spot__img {
+    width: 100%;
+    animation: show-hide 1.8s infinite;
+  }
+}
+@keyframes show-hide {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>

src/main.js

@@ -2,5 +2,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import HotSpot from '@/components/HotSpot.vue'
 
-createApp(App).use(store).use(router).mount('#app')
+createApp(App).use(store).use(router).component('hot-spot', HotSpot).mount('#app')

src/views/HomeView.vue

@@ -19,6 +19,7 @@
         right: peopleFarPositionRight,
       }"
     >
+      <hot-spot class="hot-spot" />
       <img
         src="@/assets/people-far-no-color.png"
         alt=""
@@ -161,6 +162,12 @@ export default {
     top: 20%;
     height: 60%;
     user-select: none;
+    > .hot-spot {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 0;
+    }
     > img {
       height: 100%;
     }