1

src/App.vue

@@ -1,18 +1,16 @@
 <template>
   <BgMusic />
-
   <router-view />
 </template>
 
 <script>
-import BgMusic from '@/components/BackPage.vue'
+import BgMusic from '@/components/BgMusic.vue'
 
 export default {
-  setup() {
-    return {
-      BgMusic
-    }
-  }
+  components: {
+    BgMusic
+  },
+  setup() {}
 }
 </script>
 

src/components/BgMusic.vue

@@ -1,44 +1,30 @@
 <template>
-  <div
-    class="bg-music"
-    :class="{ ['icon-playing']: playing }"
-    @click="handleClick"
-    v-show="data.value.show"
-  >
-    <audio
-      :src="data.value.url"
-      ref="audioRef"
-      loop
-      @loadedmetadata="data.value.show = true"
-      @play="handlePlay"
-    ></audio>
+  <div class="bg-music" :class="{ ['icon-playing']: playing }" @click="handleClick" v-show="show">
+    <audio :src="url" ref="audioRef" loop @loadedmetadata="show = true" @play="handlePlay"></audio>
   </div>
 </template>
 
-
-
 <script>
-import { onMounted, ref } from 'vue'
-
 export default {
-  setup() {
+  name: 'BgMusic',
+  data() {
     const { origin, pathname } = window.location
 
-    let data = ref({
+    return {
       show: false,
       playing: false,
       url: `${origin}${pathname}music/bg.mp3`
-    })
-
-    onMounted(() => {
-      document.body.addEventListener('click', this.handleClick)
+    }
+  },
+  mounted() {
+    document.body.addEventListener('click', this.handleClick)
 
-      this.$nextTick(() => {
-        this.handleIOSAudio()
-      })
+    this.$nextTick(() => {
+      this.handleIOSAudio()
     })
-
-    const handleIOSAudio = () => {
+  },
+  methods: {
+    handleIOSAudio() {
       const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
       if (isiOS) {
         document.addEventListener(
@@ -49,8 +35,8 @@ export default {
           false
         )
       }
-    }
-    const handleClick = () => {
+    },
+    handleClick() {
       if (!this.show || !this.$refs.audioRef) return
 
       if (this.playing) {
@@ -60,23 +46,15 @@ export default {
       }
 
       this.playing = !this.playing
-    }
+    },
 
-    const handlePlay = () => {
+    handlePlay() {
       document.body.removeEventListener('click', this.handleClick)
     }
-
-    return {
-      data,
-      handleIOSAudio,
-      handleClick,
-      handlePlay
-    }
   }
 }
 </script>
 
-
 <style lang="less" scoped>
 .bg-music {
   position: fixed;
@@ -91,7 +69,7 @@ export default {
   background-size: 100% 100%;
 
   &.icon-playing {
-    background-image: url('~@/assets/indexImg/paused.png');
+    background-image: url('~@/assets/ButtonImage/paused.png');
     animation: musicrotate 3s linear infinite;
   }