添加热点，调整热点位置，更新热点外观

src/components/times/timecommon.vue

@@ -39,21 +39,20 @@
         </div>
       </div>
     </div>
-    <div
-      class="hotspot-icon-wrapper animation-show-hide"
-      v-for="item in info.hotspots"
+    <img
+      class="hotspot-icon animation-show-hide"
+      v-for="item in info.hotspots.filter((hotspot) => {
+        return hotspot.x && hotspot.y
+      })"
       @click="onClickItem(item)"
       :key="item.id"
       :style="{
         left: item.x + ($isRotate ? 'vw' : 'vh'),
         top: item.y + ($isRotate ? 'vw' : 'vh'),
       }"
-    >
-      <div
-        class="hotspot-icon"
-        v-if="item.x && item.y"
-      />
-    </div>
+      draggable="false"
+      src="@/assets/images/hotspot_icon.png"
+    />
   </div>
 </template>
 
@@ -220,31 +219,11 @@ const onClickItem = item => {
       height: 80%;
     }
   }
-  .hotspot-icon-wrapper {
+  .hotspot-icon {
     position: absolute;
-    .hotspot-icon {
-      --thiscolor: #783435;
-      width: 0.8rem;
-      height: 0.8rem;
-      border-radius: 50%;
-      display: inline-block;
-      background: var(--thiscolor);
-      position: relative;
-      cursor: pointer;
-      &::after {
-        position: absolute;
-        width: 200%;
-        height: 200%;
-        content: '';
-        border-radius: 50%;
-        display: inline-block;
-        border: 1px solid var(--thiscolor);
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-    }
+    width: 4rem;
+    height: 4rem;
+    transform: translate(-40%, -40%);
   }
 }
 </style>