style: 评测报告ui问题修复

src/helpers/customMusicScore.ts

@@ -156,6 +156,7 @@ export const resetGivenFormate = () => {
 	
 };
 
+
 // 谱面优化
 export const resetFormate = () => {
 	container.value = document.getElementById('scrollContainer')

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

@@ -36,7 +36,7 @@
     .leftContent {
         .lcName {
             font-size: 18px;
-            font-weight: 400;
+            font-weight: 600;
             color: #000;
             line-height: 25px;
             margin-bottom: 2px;
@@ -121,7 +121,7 @@
         border-radius: 8px;
         .mScore, .mLabel {
             color: #000000;
-            font-size: 500;
+            font-weight: 600;
         }
     }
 }
@@ -139,7 +139,7 @@
         font-size: 10px;
         line-height: 14px;
         font-weight: 400;
-        padding: 0 6px;
+        padding: 0 10px;
         color: #999;
 
         .iconBtn {
@@ -221,25 +221,27 @@
         display: flex;
         align-items: center;
         margin-right: 16px;
-
+        &:last-child {
+            margin-right: 0;
+        }
         &>span {
             margin-left: 4px;
         }
     }
 }
 .shiyiClose {
-    width: 24px;
-    height: 24px;
+    width: 30px;
+    height: 30px;
     position: absolute;
-    right: -34px;
-    top: -20px;
+    right: -38px;
+    top: -26px;
     cursor: pointer;
 }
 .shiyiPopup{
     background: #fff;
     border-radius: 20px;
     width: 80vw;
-    max-width: 420px;
+    max-width: 460px;
     padding: 20px;
     position: relative;
     .shiyiTop {
@@ -267,7 +269,7 @@
         padding: 12px 0 12px 6px;
         span{
             margin-left: 12px;
-            font-size: 12px;
+            font-size: 14px;
             font-weight: 400;
         }
         svg {
@@ -308,7 +310,7 @@
             left: -5px;
         }
         span {
-            font-size: 12px;
+            font-size: 14px;
             font-weight: 400;
         }
     }

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

@@ -23,6 +23,7 @@ import Plyr from "plyr";
 import { browser } from "/src/utils";
 import Note from "../note";
 import { storeData } from "/src/store";
+import Title from "/src/page-instrument/header-top/title";
 
 type IItemType = "intonation" | "cadence" | "integrity";
 
@@ -88,7 +89,8 @@ export default defineComponent({
 						<img src={iconBack} />
 					</div>
 					<div class={styles.leftContent}>
-						<div class={styles.lcName}>{state.examSongName}</div>
+						{/* <div class={styles.lcName}>{state.examSongName}</div> */}
+						<Title class={styles.lcName} text={state.examSongName} rightView={false} />
 						<div class={styles.lcScore}>{level[scoreData.value.heardLevel]}｜综合分数：{scoreData.value.score}分</div>
 					</div>
 				</div>
@@ -216,7 +218,7 @@ export default defineComponent({
 									</div>
 									<div>
 										<Note fill="#FF2B29" />
-										<span>错音</span>
+										<span>演奏错误</span>
 									</div>							
 								</>
 							)}
@@ -350,7 +352,7 @@ export default defineComponent({
 							<img class={styles.shiyiTop} src={shiyiTop} />
 							<div class={styles.items}>
 								<div class={styles.item}>
-									<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={-2} y={0} />
+									<Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={-2} y={0} />
 									<span>黄色音符在上：演奏偏高</span>
 								</div>
 								<div class={styles.item}>
@@ -358,7 +360,7 @@ export default defineComponent({
 									<span>绿色音符：演奏正确</span>
 								</div>
 								<div class={styles.item}>
-									<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={-1} y={-3} />
+									<Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={-1} y={-3} />
 									<span>黄色音符在下：演奏偏低</span>
 								</div>
 								<div class={styles.item}>
@@ -366,7 +368,7 @@ export default defineComponent({
 									<span>红色音符：演奏错误</span>
 								</div>
 								<div class={styles.item}>
-									<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={0.5} y={-1} />
+									<Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={0.5} y={-1} />
 									<span>黄色音符在左：节奏偏快</span>
 								</div>
 								<div class={styles.item}>
@@ -374,7 +376,7 @@ export default defineComponent({
 									<span>紫色音符：时值不足</span>
 								</div>
 								<div class={styles.item}>
-									<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={-3} y={-2.5} />
+									<Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={-3} y={-2.5} />
 									<span>黄色音符在右：节奏偏慢</span>
 								</div>
 								<div class={styles.item}>

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

@@ -52,6 +52,7 @@
         overflow: initial;
         height: initial;
         max-height: initial;
+        transform: translateY(-3%) !important;
         & > #osmdCanvasPage1 {
           position: relative !important;
         }
@@ -68,6 +69,12 @@
   text-align: center;
 }
 
+.beam {
+  path {
+    fill: #ADADAD !important;
+    stroke: #ADADAD;
+  }
+}
 
 .right {
   path {

src/page-instrument/view-evaluat-report/index.tsx

@@ -191,13 +191,13 @@ export default defineComponent({
 			scoreData.intonation = res.data?.intonation;
 			scoreData.score = res.data?.score;
 			scoreData.videoFilePath = res.data?.videoFilePath || res.data?.recordFilePath;
-			scoreData.musicType = query.musicRenderType;
 			state.isEvaluatReport = true;
 			await getMusicDetail(resultData.musicalNotesPlayStats?.examSongId);
 			// 从练习记录进入评测报告，默认显示五线谱
 			// if (!query.musicRenderType) {
 			// 	state.musicRenderType = EnumMusicRenderType.staff
 			// }
+			scoreData.musicType = query.musicRenderType ? query.musicRenderType : state.musicRenderType;
 			detailData.isLoading = false;
 			// Promise.all([
 			// 	getMusicSheetDetail(resultData.musicalNotesPlayStats?.examSongId),
@@ -293,7 +293,7 @@ export default defineComponent({
 						const { width, height } = svgEl.getBoundingClientRect() || {}
 						// @ts-ignore
 						let { x, y } = svgEl?.getBBox() || {}
-						x = errType === 'HIGH' ? x + (width - 15)/2 + 1 : errType === 'LOW' ? x + (width - 15)/2 + 1 : errType === 'EARLY' ? x - Math.abs((width - 15)/2) - 12  : errType === 'LATE' ? x + width + 6 : x
+						x = errType === 'HIGH' ? x + (width - 15)/2 + 2 : errType === 'LOW' ? x + (width - 15)/2 + 2 : errType === 'EARLY' ? x - Math.abs((width - 15)/2) - 12  : errType === 'LATE' ? x + width + 6 : x
 						y = errType === 'HIGH' ? y - Math.abs((height-10)/2) - 10 : errType === 'LOW' ? y + height + 8 : errType === 'EARLY' ? y + (height - 10)/2 : errType === 'LATE' ? y + (height - 10)/2 : y
 						copySvg.setAttribute("x", x)
 						copySvg.setAttribute("y", y)
@@ -381,6 +381,11 @@ export default defineComponent({
 			state.osmd = osmd;
 			state.times = formateTimes(osmd);
 			console.log("🚀 ~ state.times:", state.times);
+			// @ts-ignore
+			const beams =  Array.from(new Set(document.getElementsByClassName('vf-beam')))
+			beams.forEach((item: any) => {
+				item.classList.add(styles.beam)
+			})
 			//setPathColor();
 			setViewColor();
 			// setMearureColor();

src/view/music-score/index.tsx

@@ -101,8 +101,8 @@ export default defineComponent({
 				// drawMetronomeMarks: false,
 				// drawLyricist: false,
 				// ...this.opotions,
+				
 			});
-
 			// osmd.EngravingRules.CompactMode = true // 紧凑模式
 			osmd.EngravingRules.PageRightMargin = 2;
 			osmd.EngravingRules.PageTopMargin = 10;