Browse Source

style: 评测报告ui优化

TIANYONG 1 year ago
parent
commit
0a1669ef3d

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

@@ -7,6 +7,7 @@
     flex-shrink: 0;
     padding: 10px 22px;
     background-color: #fff;
+    position: relative;
 }
 
 .android {
@@ -40,6 +41,12 @@
             color: #000;
             line-height: 25px;
             margin-bottom: 2px;
+            padding: 0 !important;
+            :global{
+                .van-notice-bar{
+                    padding: 0 !important;
+                }
+              }
         }
         .lcScore {
             font-size: 12px;
@@ -95,6 +102,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 60%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
     .cItem {
         width: 64px;
         height: 50px;
@@ -269,7 +281,7 @@
         padding: 12px 0 12px 6px;
         span{
             margin-left: 12px;
-            font-size: 14px;
+            font-size: 12px;
             font-weight: 400;
         }
         svg {
@@ -310,7 +322,7 @@
             left: -5px;
         }
         span {
-            font-size: 14px;
+            font-size: 12px;
             font-weight: 400;
         }
     }

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

@@ -120,7 +120,7 @@ export default defineComponent({
 							onClick={() => handleChange("integrity")}
 							class={[styles.cItem, itemType.value === "integrity" && styles.active]}>
 							<span class={styles.mScore}>{scoreData.value.integrity}分</span>
-							<span class={styles.mLabel}>完度</span>
+							<span class={styles.mLabel}>完度</span>
 						</div>
 					}
 				</div>
@@ -233,7 +233,7 @@ export default defineComponent({
 								itemType.value === "integrity" && 
 								<div>
 									<Note fill="#2ABC6F" />
-									<span>演奏正确</span>
+									<span>时值正确</span>
 								</div>								
 							}
 							<div>
@@ -292,7 +292,7 @@ export default defineComponent({
 								itemType.value === "integrity" && 
 								<div>
 									<img class={styles.firstIcon3} src={firstCorrect} />
-									<span>演奏正确</span>
+									<span>时值正确</span>
 								</div>								
 							}							
 							<div>
@@ -357,7 +357,7 @@ export default defineComponent({
 								</div>
 								<div class={styles.item}>
 									<Note fill="#2ABC6F" />
-									<span>绿色音符:演奏正确</span>
+									<span>绿色音符:演奏/时值正确</span>
 								</div>
 								<div class={styles.item}>
 									<Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={-1} y={-3} />
@@ -394,7 +394,7 @@ export default defineComponent({
 								</div>
 								<div class={styles.itemTone}>
 									<img class={styles.firstIcon3} src={firstCorrect} />
-									<span>绿色音符:演奏正确</span>
+									<span>绿色音符:演奏/时值正确</span>
 								</div>
 								<div class={styles.itemTone}>
 									<img class={styles.firstIcon1} src={firstBottom} />

+ 12 - 3
src/page-instrument/view-evaluat-report/index.tsx

@@ -250,7 +250,13 @@ export default defineComponent({
 			if (scoreData.itemType === 'cadence') {
 				return detailData.musicalNotesPlayStats.filter((item: any) => include.includes(item.rhythmicAssessment.result))
 			} else {
-				return detailData.musicalNotesPlayStats.filter((item: any) => include.includes(item.pitchAssessment.result))
+				return detailData.musicalNotesPlayStats.filter((item: any) => {
+					let result = item.pitchAssessment.result
+					if (scoreData.itemType === 'integrity') {
+						result = (result === 'HIGH' || result === 'LOW' || result === 'WRONG') ? 'RIGHT' : result
+					}
+					return include.includes(result)
+				})
 			}
 		  }
 	  
@@ -267,11 +273,14 @@ export default defineComponent({
 				useedid.value.push(active.id)
 				const svgEl = document.getElementById('vf-' + active.id)
 				const stemEl = document.getElementById('vf-' + active.id + '-stem')
-				const errType = scoreData.itemType === 'cadence' ? note.rhythmicAssessment.result : note.pitchAssessment.result
+				let errType = scoreData.itemType === 'cadence' ? note.rhythmicAssessment.result : note.pitchAssessment.result
 				// console.log(1111222,errType)
-				const isNeedCopyElement = ['HIGH', 'LOW', 'EARLY', 'LATE'].includes(
+				const isNeedCopyElement = scoreData.itemType === 'integrity' ? false : ['HIGH', 'LOW', 'EARLY', 'LATE'].includes(
 				  errType
 				)
+				if (scoreData.itemType === 'integrity') {
+					errType = errType = (note.pitchAssessment.result === 'HIGH' || note.pitchAssessment.result === 'LOW' || note.pitchAssessment.result === 'WRONG') ? 'RIGHT' : errType
+				}
 				stemEl?.classList.add(colorsClass[errType])
 				svgEl?.classList.add(colorsClass[errType])
 				if (svgEl && isNeedCopyElement) {