热点背景音乐

src/views/HomeWeb.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="hotspot-home">
+    <audio
+      ref="bg-audio"
+      class="bg-audio"
+      :src="bgAudioUrl"
+      loop
+      autoplay
+    />
+
     <button
       class="close"
       @click="onClickClose"
@@ -28,14 +36,25 @@
         v-html="descForShow"
       />
       <menu>
-        <!-- <button>
-        <img
-          class=""
-          src=""
-          alt=""
-          draggable="false"
+        <button
+          v-if="bgAudioUrl"
+          @click="isBgAudioMuted = !isBgAudioMuted"
         >
-      </button> -->
+          <img
+            v-show="isBgAudioMuted"
+            class="bg-audio-control"
+            src="@/assets/images/bg-audio.png"
+            alt=""
+            draggable="false"
+          >
+          <img
+            v-show="!isBgAudioMuted"
+            class="bg-audio-control"
+            src="@/assets/images/bg-audio-muted.png"
+            alt=""
+            draggable="false"
+          >
+        </button>
         <!-- <button @click="onClickLike">
           <img
             class="like"
@@ -237,7 +256,9 @@ export default {
   data() {
     return {
       hotspotData: {}, // 热点数据
+
       bgAudioUrl: "", //背景音频url
+      isBgAudioMuted: false,
 
       isShowImages: false,
       isShowVideos: false,
@@ -261,6 +282,17 @@ export default {
       }
     },
   },
+  watch: {
+    isBgAudioMuted: {
+      handler(vNew) {
+        if (vNew) {
+          this.$refs['bg-audio'].pause() // or toggle静音？
+        } else {
+          this.$refs['bg-audio'].play() // or toggle静音？
+        }
+      }
+    }
+  },
   async mounted() {
     await this.getData()
     this.$nextTick(() => {
@@ -374,6 +406,9 @@ export default {
   height: 810px;
   padding: 0 70px 0 0;
   color: #F1F3F4;
+  > .bg-audio {
+    display: none;
+  }
   > button.close {
     position: absolute;
     top: 10px;
@@ -423,13 +458,13 @@ export default {
     }
     > menu {
       position: absolute;
-      left: 412px;
+      right: 817px;
       bottom: 90px;
       > button {
         display: inline-block;
         width: 48px;
         height: 48px;
-        margin-right: 24px;
+        margin-left: 24px;
         position: relative;
         img {
           width: 100%;