添加中止文物展示的按钮

src/views/HomeView.vue

@@ -136,6 +136,17 @@
       >
     </div>
 
+    <button
+      v-if="[0, 1, 2].includes(tourState)"
+      class="btn-stop-treasure-display"
+      @click="onClickStopTreasureDisplay"
+    >
+      <img
+        src="@/assets/button-stop.png"
+        alt=""
+      >
+    </button>
+
     <div
       v-show="[1].includes(tourState)"
       class="treasure-frames-wrap"
@@ -354,6 +365,9 @@ export default {
   },
   unmounted() {
     cancelAnimationFrame(this.animationFrameId)
+    this.treasureFadeInTween.stop()
+    this.treasureFadeOutTween.stop()
+    clearInterval(this.treasureFrameIntervalId)
   },
   methods: {
     onMouseDown(e) {
@@ -451,6 +465,16 @@ export default {
 
       this.treasureFadeInTween.start()
     },
+    onClickStopTreasureDisplay() {
+      this.tourState = 3
+      this.treasureFadeInTween.stop()
+      this.treasureFadeOutTween.stop()
+      clearInterval(this.treasureFrameIntervalId)
+      this.treasureFrameCurNum = 0
+      this.$refs.treasure.style.left = this.treasureFadeInInitialLeft + 'px'
+      this.$refs.treasure.style.top = this.treasureFadeInInitialTop + 'px'
+      this.$refs.treasure.style.transform = `translate(-50%, -50%) scale(1)`
+    },
     onTreasureFrameLoad(idx) {
       this.treasureFrameStateList[idx] = true
     },
@@ -565,6 +589,13 @@ export default {
       object-fit: cover;
     }
   }
+  .btn-stop-treasure-display {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 4;
+    border: none;
+  }
   .treasure-frames-wrap {
     position: absolute;
     top: 0;