回放音频和视频 样式修改

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

@@ -223,21 +223,35 @@
     }
 }
 
-.playerBox {
-    width: 536px;
-    height: 314px;
+.playerBoxContent{
     background: #FFF8F8;
     box-shadow: inset 4px -3px 6px 0px #B2E8FF;
     border-radius: 20px;
     padding: 14px;
+    &.padPlayerBox{
+        padding: 12px;
+        .playerBoxCon{
+            width: 428px;
+        }
+    }
+    .playerBoxCon{
+        position: relative;
+        width: 536px;
+        padding-top: 56.25%;
+    }
+}
+.playerBox {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
     overflow: hidden;
+    border-radius: 16px;
     :global {
         .plyr {
-            border-radius: 16px;
             width: 100%;
             height: 100%;
-            box-shadow: 4px -3px 6px 0px #B2E8FF;
-
             .plyr__control.plyr__control--overlaid {
                 width: 48px;
                 height: 48px;
@@ -293,7 +307,7 @@
                     margin-left: 9px;
 
                     input[type=range] {
-                        color: #73C1FF;
+                        color: #1CACF1;
                         height: 20px;
                     }
 
@@ -306,6 +320,7 @@
                         height: 12px;
                         margin-top: -4px;
                         box-shadow: initial;
+                        background-color: #269EFE;
                     }
 
                     .plyr__progress__buffer {
@@ -319,7 +334,7 @@
                 .plyr__controls__item.plyr__time {
                     font-weight: 500;
                     font-size: 14px;
-                    color: #FFFFFF;
+                    color: #333333;
 
                     &.plyr__time--current {
                         margin-left: 9px;
@@ -329,23 +344,6 @@
             }
         }
     }
-    &.padPlayerBox{
-        width: 428px;
-        height: 252px;
-        padding: 12px;
-        .audioBox{
-            .audioBga1{
-                width: 112px;
-            }
-            .audioBga2{
-                width: 206px;
-            }
-            .audioVisualizer{
-                width: 288px;
-                height: 50px;
-            }
-        }
-    }
     .videoBox {
         width: 100%;
         height: 100%;
@@ -357,28 +355,6 @@
         background: url("./image/audioBg.png") no-repeat;
         background-size: 100% 100%;
         position: relative;
-        border-radius: 16px;
-        box-shadow: 4px -3px 6px 0px #B2E8FF;
-        overflow: hidden;
-
-        .audioBga {
-            width: 100%;
-            height: 88%;
-        }
-
-        .audioBga1 {
-            position: absolute;
-            left: 0;
-            top: 8px;
-            width: 146px;
-        }
-
-        .audioBga2 {
-            width: 268px;
-            position: absolute;
-            right: -24px;
-            top: -8px;
-        }
 
         :global {
             .plyr {
@@ -389,7 +365,11 @@
                 box-shadow: initial;
             }
         }
-
+        .audioBga{
+            position: absolute;
+            top: 44%;
+            transform: translateY(-50%);
+        }
         .audioVisualizer {
             position: absolute;
             top: 50%;

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

@@ -18,8 +18,6 @@ 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";
 import { EvaluatingReportDriver } from "/src/page-instrument/custom-plugins/guide-driver";
 
 // 音准、节奏、完整度
@@ -198,7 +196,7 @@ export default defineComponent({
             canvWidth: width,
             canvHeight: height,
             canvFillColor: "transparent",
-            lineColor: "rgba(255, 255, 255, 0.3)"
+            lineColor: "rgba(28,172,241, 0.58)"
           })
         }, 300);
 			}
@@ -473,18 +471,20 @@ export default defineComponent({
               shareData._plrl?.pause();
             }}
           >
-            <div class={[styles.playerBox, isPad && styles.padPlayerBox]}>
-              {mediaType.value === "audio" ? (
-                <div class={styles.audioBox}>
-                  <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
-                  <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={true} loop={true}></Vue3Lottie>
-                  <Vue3Lottie class={styles.audioBga1} animationData={audioBga1} autoPlay={true} loop={true}></Vue3Lottie>
-                  <Vue3Lottie class={styles.audioBga2} animationData={audioBga2} autoPlay={true} loop={true}></Vue3Lottie>
-                  <audio crossorigin="anonymous" id="audioSrc" src={scoreData.value.videoFilePath} controls="false" preload="metadata" playsinline />
+            <div class={[styles.playerBoxContent,isPad && styles.padPlayerBox]}>
+              <div class={[styles.playerBoxCon]}>
+                <div class={[styles.playerBox]}>
+                  {mediaType.value === "audio" ? (
+                    <div class={styles.audioBox}>
+                      <canvas class={styles.audioVisualizer} id="audioVisualizer"></canvas>
+                      <Vue3Lottie class={styles.audioBga} animationData={audioBga} autoPlay={true} loop={true}></Vue3Lottie>
+                      <audio crossorigin="anonymous" id="audioSrc" src={scoreData.value.videoFilePath} controls="false" preload="metadata" playsinline />
+                    </div>
+                  ) : (
+                    <video id="videoSrc" class={styles.videoBox} src={scoreData.value.videoFilePath} data-poster={videobg} preload="metadata" playsinline />
+                  )}
                 </div>
-              ) : (
-                <video id="videoSrc" class={styles.videoBox} src={scoreData.value.videoFilePath} data-poster={videobg} preload="metadata" playsinline />
-              )}
+              </div>
             </div>
           </Popup>