feats

src/components/BgMusic.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="bg-music">
-
+  <div class="bg-music" :class="{ ['icon-playing']: playing }" @click="handleClick" v-show="show">
+    <audio :src="url" ref="audioRef" loop @canplay="show = true" @play="handlePlay"></audio>
   </div>
 </template>
 
@@ -11,15 +11,61 @@ export default {
     const { origin, pathname } = window.location
 
     return {
+      show: false,
+      playing: false,
       url: `${origin}${pathname}/bg.mp3`
     }
+  },
+  mounted() {
+    document.body.addEventListener("click", this.handleClick);
+  },
+  methods: {
+    handleClick() {
+      if (!this.show || !this.$refs.audioRef) return;
+
+      if (this.playing) {
+        this.$refs.audioRef.pause();
+      } else {
+        this.$refs.audioRef.play();
+      }
+
+      this.playing = !this.playing
+    },
+
+    handlePlay() {
+      document.body.removeEventListener("click", this.handleClick);
+    }
   }
 }
 </script>
 
 <style lang="less" scoped>
 .bg-music {
-  width: 64px;
-  height: 64px;
+  position: fixed;
+  top: 1em;
+  right: 1em;
+  z-index: 10;
+
+  width: 2em;
+  height: 2em;
+  background-image: url('~@/assets/indexImg/play.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  &.icon-playing {
+    background-image: url('~@/assets/indexImg/paused.png');
+    animation: musicrotate 3s linear infinite;
+  }
+
+  & > audio {
+    max-width: 1px;
+    max-height: 1px;
+  }
+}
+
+@keyframes musicrotate {
+  100% {
+    transform: rotate(360deg);
+  }
 }
 </style>

src/pages/Honghe.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="index-box">
+    <bg-music />
     <popup :show="showPopup" @cancel="cancelFrom" :current-month="currentMonth" />
     <MyWinning :show="showMyWinning" :current-month="currentMonth" />
     <img class="topImage" src="../assets/indexImg/indexBgctop.jpg" alt />
@@ -143,7 +144,8 @@ export default {
   components: {
     Popup: () => import('@/components/Popup.vue'),
     WinningPopup: () => import('@/components/WinningPopup.vue'),
-    ImgBox: () => import('@/components/imgbox.vue')
+    ImgBox: () => import('@/components/imgbox.vue'),
+    BgMusic: () => import('@/components/BgMusic.vue'),
   },
   data() {
     return {