取消回放 动画播放

src/page-instrument/view-evaluat-report/component/share-top/index.module.less

@@ -227,7 +227,7 @@
     box-shadow: inset 4px -3px 6px 0px #B2E8FF;
     border-radius: 20px;
     padding: 14px;
-
+    overflow: hidden;
     :global {
         .plyr {
             border-radius: 16px;

src/page-instrument/view-evaluat-report/component/share-top/index.tsx

@@ -42,9 +42,6 @@ export default defineComponent({
       isInitPlyr: false,
       _plrl: null as any,
     });
-    const lottieDom = ref<any>();
-    const lottieDom1 = ref<any>();
-    const lottieDom2 = ref<any>();
     const level: any = {
       BEGINNER: "入门级",
       ADVANCED: "进阶级",
@@ -100,15 +97,9 @@ export default defineComponent({
 						const canvasDom = document.querySelector("#audioVisualizer") as HTMLCanvasElement
 						const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
 						shareData._plrl.on('play', () => {
-							lottieDom.value?.play()
-							lottieDom1.value?.play()
-							lottieDom2.value?.play()
 							playVisualDraw()
 						});
 						shareData._plrl.on('pause', () => {
-							lottieDom.value?.pause()
-							lottieDom1.value?.pause()
-							lottieDom2.value?.pause()
 							pauseVisualDraw()
 						});
 					}, 300); // 弹窗动画是0.25秒 这里用定时器 确保canvas 能获取到宽高
@@ -444,9 +435,9 @@ export default defineComponent({
               {mediaType.value === "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="audioSrc" src={scoreData.value.videoFilePath} controls="false" preload="metadata" playsinline />
                 </div>
               ) : (