回放视频 回放音频

src/page-instrument/header-top/title/index.module.less

@@ -0,0 +1,28 @@
+.container {
+  width: 170px;
+  height: 31px;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  border-radius: 18px;
+  padding: 6px 10px;
+
+  .noticeBar {
+    flex: 1;
+    padding: 0;
+  }
+  &.pcContainer {
+    width: 500px;
+  }
+}
+
+.icon {
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+}
+
+.status {
+  margin-left: auto;
+  flex-shrink: 0;
+}

src/page-instrument/header-top/title/index.tsx

@@ -0,0 +1,36 @@
+import { defineComponent } from 'vue'
+import { NoticeBar } from 'vant'
+import styles from './index.module.less'
+import state, { IPlatform } from "/src/state";
+
+import MusicIcon from '../image/music.png'
+import ArrowIcon from '../image/arrow.svg'
+
+export default defineComponent({
+  name: 'detail-title',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    rightView: {
+      type: Boolean,
+      default: true,
+    },
+    onClick: {
+      type: Function,
+    } as any
+  },
+  render() {
+    return (
+      <div class={[styles.container, state.platform === IPlatform.PC && styles.pcContainer]}>
+        <NoticeBar
+          text={this.text}
+          color="#000"
+          class={styles.noticeBar}
+          background="none"
+        />
+      </div>
+    )
+  }
+})

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

@@ -191,40 +191,120 @@
 
     :global {
         .van-popup__close-icon {
-            top: 0;
-            right: -30px;
-            background-color: #fff;
-            border-radius: 50%;
-            padding: 4px;
-            font-size: 16px;
-            color: var(--van-primary-color);
+            width: 32px;
+            height: 32px;
+            top: -3px;
+            right: -48px;
+            background: url("./image/closeImg.png") no-repeat;
+            background-size: 100% 100%;
+            &::before{
+                display: none;
+            }
         }
     }
 }
-
-.audiobox {
-    width: 40vw;
-
+.playerBox{
+    width: 537px;
+    height: 314px; 
+    background: #FFF8F8;
+    box-shadow: inset 4px -3px 6px 0px #B2E8FF;
+    border-radius: 20px;
+    padding: 14px;
     :global {
         .plyr {
-            border-radius: 20px;
+            border-radius: 16px;
             width: 100%;
+            height: 100%;
+            .plyr__control.plyr__control--overlaid{
+                width: 48px;
+                height: 48px;
+                background: url("./image/midPlay.png") no-repeat;
+                background-size: 100% 100%;
+                .plyr__sr-only, svg{
+                    display: none;
+                }
+            }
+            .plyr__controls{
+                background: initial;
+                padding: 0 20px 13px;
+                .plyr__controls__item.plyr__control{
+                    padding: 0;
+                    width: 18px;
+                    height: 18px;
+                    &:hover{
+                        background: initial;
+                    }
+                    .icon--pressed{
+                        width: 100%;
+                        height: 100%;
+                        background: url("./image//pause.png") no-repeat;
+                        background-size: 100% 100%;
+                        use{
+                            display: none;
+                        }
+                    }
+                    .icon--not-pressed{
+                        width: 100%;
+                        height: 100%;
+                        background: url("./image/play.png") no-repeat;
+                        background-size: 100% 100%;
+                        use{
+                            display: none;
+                        }
+                    }
+                }
+                .plyr__controls__item.plyr__progress__container{
+                    margin-left: 9px;
+                    input[type=range]{
+                        color: #73C1FF;
+                        height: 20px;
+                    }
+                    input[type="range"]::-webkit-slider-runnable-track {
+                        height: 4px;
+                    }
+                    input[type="range"]::-webkit-slider-thumb {
+                        width: 12px;
+                        height: 12px;
+                        margin-top: -4px;
+                    }
+                    .plyr__progress__buffer{
+                        height: 4px;
+                        color: rgba(115,193,255,0.8);
+                        background-color: #fff;
+                        margin-top: -2px;
+                    }
+                }
+                .plyr__controls__item.plyr__time{
+                    font-weight: 500;
+                    font-size: 14px;
+                    color: #FFFFFF;
+                    &.plyr__time--current{
+                        margin-left: 9px;
+                    }
+                }
+
+            }
         }
     }
-}
-
-.videobox {
-    display: flex;
-    align-items: center;
-    width: 80vw;
-    height: 80vh;
-
-    :global {
-        .plyr {
-            border-radius: 10px;
+    .audioBox{
+        width: 100%;
+        height: 100%;
+        background: url("./image/audioBg.png") no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        border-radius: 16px;
+        .audioBga{
             width: 100%;
             height: 100%;
         }
+        :global {
+            .plyr {
+                position: absolute;
+                height: initial;
+                left: 0;
+                bottom: 0;
+            }
+        }
     }
 }
 

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

@@ -24,6 +24,8 @@ import { browser } from "/src/utils";
 import Note from "../note";
 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";
 
 type IItemType = "intonation" | "cadence" | "integrity";
 
@@ -76,7 +78,7 @@ export default defineComponent({
 			nextTick(() => {
 				const id = mediaType.value === "audio" ? "#audioSrc" : "#videoSrc";
 				shareData._plrl = new Plyr(id, {
-					controls: ["play-large", "play", "progress", "current-time"],
+					controls: ["play-large", "play", "progress", "current-time", "duration"],
 					fullscreen: { enabled: false },
 				});
 				shareData.isInitPlyr = true;
@@ -303,7 +305,6 @@ export default defineComponent({
 					)}
 					</>							
 				}	
-
 				<Popup
 					teleport="body"
 					class={["popup-custom", "van-scale", styles.popup]}
@@ -314,19 +315,19 @@ export default defineComponent({
 						shareData._plrl?.pause();
 					}}
 				>
-					{mediaType.value === "audio" && (
-						<div class={styles.audiobox}>
-							<audio
-								id="audioSrc"
-								src={scoreData.value.videoFilePath}
-								controls="false"
-								preload="metadata"
-								playsinline
-							/>
-						</div>
-					)}
-					{mediaType.value === "video" && (
-						<div class={styles.videobox}>
+					<div class={styles.playerBox}>
+						{
+							mediaType.value === "audio" ? 
+							<div class={styles.audioBox}>
+								<Vue3Lottie class={styles.audioBga} animationData={audioBga} loop={true}></Vue3Lottie>
+								<audio
+									id="audioSrc"
+									src={scoreData.value.videoFilePath}
+									controls="false"
+									preload="metadata"
+									playsinline
+								/>
+							</div> : 
 							<video
 								id="videoSrc"
 								class={styles.videoBox}
@@ -335,8 +336,8 @@ export default defineComponent({
 								preload="metadata"
 								playsinline
 							/>
-						</div>
-					)}
+						}
+					</div>
 				</Popup>
 
 				<Popup