feat: 评测报告新版UI1.1

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

@@ -363,13 +363,22 @@
 }
 
 .shiyiPopup {
-    background: #fff;
+    background: #7AAEE0;
     border-radius: 20px;
     width: 80vw;
     max-width: 460px;
-    padding: 20px;
+    padding: 10px;
     position: relative;
-
+    &::before {
+        content: "";
+        position: absolute;
+        left: 10px;
+        top: 10px;
+        width: calc(100% - 20px);
+        height: calc(100% - 20px);
+        background: #D5E8FF;
+        border-radius: 14px;
+    }
     .shiyiTop {
         position: absolute;
         width: 154px;
@@ -422,36 +431,16 @@
         &:nth-child(2n) {
             transform: translateX(20px);
         }
-
-        .firstIcon1 {
-            width: 12px;
-            height: 20px;
-        }
-
-        .firstIcon2 {
-            width: 19px;
-            height: 13px;
-        }
-
-        .firstIcon3 {
-            width: 12px;
-            height: 13px;
-        }
-
-        img {
-            position: absolute;
-            left: 0;
-            top: 50%;
-            transform: translateY(-50%);
-        }
-
-        .fiz {
-            left: -5px;
-        }
-
         span {
             font-size: 12px;
             font-weight: 400;
         }
+        &>i {
+            width: 12px;
+            height: 12px;
+            margin-right: 12px;
+            border-radius: 3px;
+            display: inline-block;
+        }
     }
 }

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

@@ -7,15 +7,7 @@ import iconBack from "./image/back_icon.png";
 import iconShiyi from "./image/icon-shiyi.svg";
 import iconhuifang from "./image/icon-huifang.svg";
 import shiyiTop from "./image/shiyi-top.png";
-import shiyiClose from "./image/shiyi-close.svg";
-import firstLeft from "./image/first-left.svg";
-import firstRight from "./image/first-right.svg";
-import firstTop from "./image/first-top.svg";
-import firstBottom from "./image/first-bottom.svg";
-import firstCorrect from "./image/first-correct.svg";
-import firstError from "./image/first-error.svg";
-import firstNot from "./image/first-not.svg";
-import firstLack from "./image/first-lack.svg";
+import shiyiClose from "./image/closeImg.png";
 import { Grid, GridItem, Popup } from "vant";
 import videobg from "./image/videobg.png";
 import "plyr/dist/plyr.css";
@@ -57,7 +49,7 @@ export default defineComponent({
 			low: '#FFB900',
 			right: '#65FFAE',
 			wrong: '#DA3736',
-			lack: '#0352C0',
+			lack: '#A5CBFF',
 			not: '#FFFFFF',
 			fast: '#B366FF',
 			slow: '#FF7B00'
@@ -202,11 +194,12 @@ export default defineComponent({
 							{itemType.value === "intonation" && (
 								<>
 									<div>
-										<Note fill="rgba(255, 102, 166, 1)" shadowFill="#FFAB25" shadow x={-2} y={0} />
+										{/* <Note fill="rgba(255, 102, 166, 1)" shadowFill="#FFAB25" shadow x={-2} y={0} /> */}
+										<Note fill="#FF66A6" />
 										<span>演奏偏高</span>
 									</div>
 									<div>
-										<Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={-1} y={-3} />
+										<Note fill="#FFB900" />
 										<span>演奏偏低</span>
 									</div>
 								</>
@@ -214,23 +207,23 @@ export default defineComponent({
 							{itemType.value === "cadence" && (
 								<>
 									<div>
-										<Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={0.5} y={-1} />
+										<Note fill="#B366FF" />
 										<span>节奏偏快</span>
 									</div>
 									<div>
-										<Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={-3} y={-2.5} />
-										<span>演奏偏低</span>
+										<Note fill="#FF7B00" />
+										<span>节奏偏慢</span>
 									</div>
 								</>
 							)}		
 							{(itemType.value === "intonation" || itemType.value === "cadence") && (
 								<>										
 									<div>
-										<Note fill="#2ABC6F" />
+										<Note fill="#65FFAE" />
 										<span>演奏正确</span>
 									</div>
 									<div>
-										<Note fill="#FF2B29" />
+										<Note fill="#DA3736" />
 										<span>演奏错误</span>
 									</div>							
 								</>
@@ -238,19 +231,19 @@ export default defineComponent({
 
 							{(itemType.value === "intonation" || itemType.value === "integrity") && (
 								<div>
-									<Note fill="#8F4EFB" />
+									<Note fill="#A5CBFF" />
 									<span>时值不足</span>
 								</div>
 							)}
 							{
 								itemType.value === "integrity" && 
 								<div>
-									<Note fill="#2ABC6F" />
+									<Note fill="#65FFAE" />
 									<span>时值正确</span>
 								</div>								
 							}
 							<div>
-								<Note fill="#ADADAD" />
+								<Note fill="#FFFFFF" />
 								<span>未演奏</span>
 							</div>
 						</div>
@@ -360,41 +353,43 @@ export default defineComponent({
 					closeable
 				>
 					<img onClick={() => shareData.shiyiShow = false }  class={styles.shiyiClose} src={shiyiClose} />
+					
 					{scoreData.value.musicType === 'staff' ?
 						<div class={styles.shiyiPopup}>
 							<img class={styles.shiyiTop} src={shiyiTop} />
 							<div class={styles.items}>
 								<div class={styles.item}>
-									<Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={-2} y={0} />
-									<span>黄色音符在上：演奏偏高</span>
+									{/* <Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={-2} y={0} /> */}
+									<Note fill="#FF66A6" />
+									<span>玫红色音符：演奏偏高</span>
 								</div>
 								<div class={styles.item}>
-									<Note fill="#2ABC6F" />
+									<Note fill="#4BED98" />
 									<span>绿色音符：演奏/时值正确</span>
 								</div>
 								<div class={styles.item}>
-									<Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={-1} y={-3} />
-									<span>黄色音符在下：演奏偏低</span>
+									<Note fill="#FFB900" />
+									<span>黄色音符：演奏偏低</span>
 								</div>
 								<div class={styles.item}>
-									<Note fill="#FF2B29" />
+									<Note fill="#DA3736" />
 									<span>红色音符：演奏错误</span>
 								</div>
 								<div class={styles.item}>
-									<Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={0.5} y={-1} />
-									<span>黄色音符在左：节奏偏快</span>
+									<Note fill="#B366FF" />
+									<span>紫色音符：节奏偏快</span>
 								</div>
 								<div class={styles.item}>
-									<Note fill="#8F4EFB" />
-									<span>紫色音符：时值不足</span>
+									<Note fill="#A5CBFF" />
+									<span>浅蓝色音符：时值不足</span>
 								</div>
 								<div class={styles.item}>
-									<Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={-3} y={-2.5} />
-									<span>黄色音符在右：节奏偏慢</span>
+									<Note fill="#FF7B00" />
+									<span>橙色音符：节奏偏慢</span>
 								</div>
 								<div class={styles.item}>
-									<Note fill="#ADADAD" />
-									<span>灰色音符：未演奏</span>
+									<Note fill="#FFFFFF" />
+									<span>白色音符：未演奏</span>
 								</div>
 							</div>
 						</div> : 
@@ -402,36 +397,36 @@ export default defineComponent({
 							<img class={styles.shiyiTop} src={shiyiTop} />
 							<div class={styles.items}>
 								<div class={styles.itemTone}>
-									<img class={styles.firstIcon1} src={firstTop} />
-									<span>黄色箭头朝上：演奏偏高</span>
+									<i style={{ background: bgColors.high }}></i>
+									<span>玫红色音符：演奏偏高</span>
 								</div>
 								<div class={styles.itemTone}>
-									<img class={styles.firstIcon3} src={firstCorrect} />
+									<i style={{ background: bgColors.right }}></i>
 									<span>绿色音符：演奏/时值正确</span>
 								</div>
 								<div class={styles.itemTone}>
-									<img class={styles.firstIcon1} src={firstBottom} />
-									<span>黄色箭头朝下：演奏偏低</span>
+									<i style={{ background: bgColors.low }}></i>
+									<span>黄色音符：演奏偏低</span>
 								</div>
 								<div class={styles.itemTone}>
-									<img class={styles.firstIcon3} src={firstError} />
+									<i style={{ background: bgColors.wrong }}></i>
 									<span>红色音符：演奏错误</span>
 								</div>
 								<div class={styles.itemTone}>
-									<img class={[styles.firstIcon2, styles.fiz]} src={firstLeft} />
-									<span>黄色箭头朝左：节奏偏快</span>
+									<i style={{ background: bgColors.fast }}></i>
+									<span>紫色音符：节奏偏快</span>
 								</div>
 								<div class={styles.itemTone}>
-									<img class={styles.firstIcon3} src={firstLack} />
-									<span>紫色音符：时值不足</span>
+									<i style={{ background: bgColors.lack }}></i>
+									<span>浅蓝色音符：时值不足</span>
 								</div>
 								<div class={styles.itemTone}>
-									<img class={styles.firstIcon2} src={firstRight} />
-									<span>黄色箭头朝右：节奏偏慢</span>
+									<i style={{ background: bgColors.slow }}></i>
+									<span>橙色音符：节奏偏慢</span>
 								</div>
 								<div class={styles.itemTone}>
-									<img class={styles.firstIcon3} src={firstNot} />
-									<span>灰色音符：未演奏</span>
+									<i style={{ background: bgColors.not }}></i>
+									<span>白色音符：未演奏</span>
 								</div>
 							</div>
 						</div>											

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

@@ -69,7 +69,7 @@
         max-height: initial;
         transform: translateY(-3%) !important;
         & > #osmdCanvasPage1 {
-          top: 1rem;
+          top: 0.5rem;
           position: relative !important;
         }
       }
@@ -171,8 +171,8 @@
 // 完成度
 .integrity_wrong {
   path {
-    fill: #0352C0;
-    stroke: #0352C0;
+    fill: #A5CBFF;
+    stroke: #A5CBFF;
   }
 }
 

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

@@ -284,6 +284,15 @@ export default defineComponent({
 				}
 				stemEl?.classList.add(colorsClass[errType])
 				svgEl?.classList.add(colorsClass[errType])
+				// console.log(123456,'添加颜色',errType)
+				// 评测过的音符，需要给小节添加背景色
+				if (errType !== 'NOT_PLAYED') {
+					const staveNote = svgEl?.parentNode?.parentNode?.querySelector('.vf-stave')
+					if (staveNote) {
+						staveNote.querySelector('.vf-custom-bg')?.setAttribute("fill", "#132D4C")
+						staveNote.querySelector('.vf-custom-bot')?.setAttribute("fill", "#040D1E")
+					}
+				}
 				if (svgEl && isNeedCopyElement) {
 				  stemEl?.classList.remove(colorsClass[errType])
 				  svgEl?.classList.remove(colorsClass[errType])