新增首页页面

src/plugins/index.js

@@ -13,7 +13,7 @@ const sound = new Howl({
 });
 
 // 背景音乐
-export function bgm(autoPlay) {
+export function createBGM() {
     const musicNode = createVNode(
         'div',
         {
@@ -21,18 +21,23 @@ export function bgm(autoPlay) {
             id: 'musicBtn',
             onClick: () => {
                 let auduoEle = document.querySelector("#audio")
+                let musicBox = document.querySelector("#musicBtn")
                 if (auduoEle.paused) {
                     auduoEle.play()
                     audioAni.play()
+                    musicBox.classList.add('music-on')
+                    musicBox.classList.remove('music-off')
                 } else {
+                    gsap.set('#musicBtn', { rotation: '0deg' })
                     auduoEle.pause()
                     audioAni.pause()
+                    musicBox.classList.add('music-off')
+                    musicBox.classList.remove('music-on')
                 }
             },
 
         },
     )
-
     const audioNode = createVNode(
         'audio',
         {
@@ -41,12 +46,12 @@ export function bgm(autoPlay) {
             src: new URL(`@/assets/media/bgm.mp3`, import.meta.url).href,
             autoPlay: true,
             loop: true,
-
         },
     )
 
     render(musicNode, document.body);
     render(audioNode, document.querySelector("#musicBtn"));
+    document.querySelector("#musicBtn").classList.add('music-on')
     let audioAni = gsap.timeline({ paused: true })
     audioAni.to('#musicBtn', { duration: 10, rotation: "+=360", repeat: -1, ease: 'none' })
     setTimeout(() => {