样式修改

src/components/m-header/index.tsx

@@ -42,7 +42,7 @@ export default defineComponent({
       default: ''
     }
   },
-  emits: ['rightClick'],
+  emits: ["leftClick", 'rightClick'],
   setup(props, { emit, slots }) {
     const route = useRoute();
     const router = useRouter();
@@ -52,6 +52,7 @@ export default defineComponent({
     });
 
     const onClickLeft = () => {
+      emit('leftClick');
       if (browser().isApp) {
         postMessage({
           api: 'goBack'

src/views/creation/index-share.tsx

@@ -62,9 +62,6 @@ export default defineComponent({
     const router = useRouter();
     const isScreenScroll = ref(false)
     const creationHeight = ref(0)
-    const lottieDom = ref()
-    const lottieDom1 = ref()
-    const lottieDom2 = ref()
     const state = reactive({
       id: route.query.id,
       isEmpty:false,
@@ -247,15 +244,9 @@ export default defineComponent({
         const canvasDom = document.querySelector("#audioVisualizer") as HTMLCanvasElement
         const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
         player.on('play', () => {
-          lottieDom.value?.play()
-          lottieDom1.value?.play()
-          lottieDom2.value?.play()
           playVisualDraw()
         });
         player.on('pause', () => {
-          lottieDom.value?.pause()
-          lottieDom1.value?.pause()
-          lottieDom2.value?.pause()
           pauseVisualDraw()
         });
       }
@@ -531,9 +522,9 @@ export default defineComponent({
                       state.playType === 'Audio' &&
                       <div class={styles.audioBox}>
                         <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
-                        <Vue3Lottie ref={lottieDom} class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
-                        <Vue3Lottie ref={lottieDom1} class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
-                        <Vue3Lottie ref={lottieDom2} class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
+                        <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
+                        <Vue3Lottie class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
+                        <Vue3Lottie class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
                         <audio
                           crossorigin="anonymous"
                           id="audioMediaSrc"

src/views/creation/index.module.less

@@ -35,6 +35,7 @@
 .playSection{
   height: 210px;
   position: relative;
+  overflow: hidden;
   &::after{
     position: absolute;
     content: "";

src/views/creation/index.tsx

@@ -65,9 +65,6 @@ export default defineComponent({
     const route = useRoute();
     const router = useRouter();
     const isScreenScroll = ref(false)
-    const lottieDom = ref()
-    const lottieDom1 = ref()
-    const lottieDom2 = ref()
     const mStickyBottom = ref()
     const mStickyUpward = ref()
     const state = reactive({
@@ -205,15 +202,9 @@ export default defineComponent({
         const canvasDom = document.querySelector("#audioVisualizer") as HTMLCanvasElement
         const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
         player.on('play', () => {
-          lottieDom.value?.play()
-          lottieDom1.value?.play()
-          lottieDom2.value?.play()
           playVisualDraw()
         });
         player.on('pause', () => {
-          lottieDom.value?.pause()
-          lottieDom1.value?.pause()
-          lottieDom2.value?.pause()
           pauseVisualDraw()
         });
       }
@@ -517,7 +508,6 @@ export default defineComponent({
     });
 
     onUnmounted(() => {
-      setStatusBarTextColor(false)
       cleanScrollEvent()
       state._plrl?.destroy()
     });
@@ -553,6 +543,7 @@ export default defineComponent({
             title={state.musicDetail?.musicSheetName}
             border={false}
             isBack={route.query.platformType != 'ANALYSIS'}
+            onLeftClick={()=>{ setStatusBarTextColor(false) }}
           />
         </MSticky>
         <div class={styles.singer}>
@@ -564,9 +555,9 @@ export default defineComponent({
               state.playType === 'Audio' &&
               <div class={styles.audioBox}>
                 <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
-                <Vue3Lottie ref={lottieDom} class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
-                <Vue3Lottie ref={lottieDom1} class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
-                <Vue3Lottie ref={lottieDom2} class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
+                <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
+                <Vue3Lottie class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
+                <Vue3Lottie class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
                 <audio
                   crossorigin="anonymous"
                   id="audioMediaSrc"

src/views/creation/playCreation/index.module.less

@@ -2,6 +2,7 @@
   width: 100vw;
   height: 100vh;
   position: relative;
+  overflow: hidden;
   &.landscapeScreen{
     width: 100vh;
     height: 100vw;

src/views/creation/playCreation/index.tsx

@@ -29,9 +29,6 @@ export default defineComponent({
     const musicSheetId = decodeURIComponent(route.query.musicSheetId as string || '');
     const videoBgUrl = decodeURIComponent(route.query.videoBgUrl as string || '');
     const playType = resourceUrl.lastIndexOf('mp4') !== -1 ? 'Video' : 'Audio'
-    const lottieDom = ref()
-    const lottieDom1 = ref()
-    const lottieDom2 = ref()
     const landscapeScreen = ref(false)
     let _plrl:any
     const playIngShow = ref(true)
@@ -266,15 +263,9 @@ export default defineComponent({
         const canvasDom = document.querySelector("#audioVisualizer") as HTMLCanvasElement
         const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
         _plrl.on('play', () => {
-          lottieDom.value?.play()
-          lottieDom1.value?.play()
-          lottieDom2.value?.play()
           playVisualDraw()
         });
         _plrl.on('pause', () => {
-          lottieDom.value?.pause()
-          lottieDom1.value?.pause()
-          lottieDom2.value?.pause()
           pauseVisualDraw()
         });
       }
@@ -437,9 +428,9 @@ export default defineComponent({
           playType === 'Audio' ?
           <div class={styles.audioBox}>
             <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
-            <Vue3Lottie ref={lottieDom} class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
-            <Vue3Lottie ref={lottieDom1} class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
-            <Vue3Lottie ref={lottieDom2} class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
+            <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={false} loop={true}></Vue3Lottie>
+            <Vue3Lottie class={styles.audioBga1} animationData={audioBga1} autoPlay={false} loop={true}></Vue3Lottie>
+            <Vue3Lottie class={styles.audioBga2} animationData={audioBga2} autoPlay={false} loop={true}></Vue3Lottie>
             <audio
               crossorigin="anonymous"
               id="audioMediaSrc"