回放动画 添加云

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

@@ -297,6 +297,18 @@
             width: 100%;
             height: 88%;
         }
+        .audioBga1{
+            position: absolute;
+            left: 0;
+            top: 8px;
+            width: 146px;
+        }        
+        .audioBga2{
+            width: 268px;
+            position: absolute;
+            right: -24px;
+            top: -8px;
+        }
         :global {
             .plyr {
                 position: absolute;

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

@@ -26,6 +26,8 @@ import { storeData } from "/src/store";
 import Title from "/src/page-instrument/header-top/title";
 import { Vue3Lottie } from "vue3-lottie";
 import audioBga from "./image/audioBga.json";
+import audioBga1 from "./image/leftCloud.json";
+import audioBga2 from "./image/rightCloud.json";
 
 type IItemType = "intonation" | "cadence" | "integrity";
 
@@ -47,6 +49,8 @@ export default defineComponent({
 			_plrl: null as any,
 		});
 		const lottieDom = ref<any>()
+		const lottieDom1 = ref<any>()
+		const lottieDom2 = ref<any>()
 		const level: any = {
 			BEGINNER: "入门级",
 			ADVANCED: "进阶级",
@@ -90,10 +94,14 @@ export default defineComponent({
 						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 能获取到宽高
@@ -432,6 +440,8 @@ export default defineComponent({
 							<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>
 								<audio
 									crossorigin="anonymous"
 									id="audioSrc"