feat: 评测报告新版UI

src/page-instrument/evaluat-model/evaluat-result/index.tsx

@@ -44,7 +44,9 @@ export default defineComponent({
 		}; 
 		/** 添加评测记录 */
 		const handleAddRecord = async () => {
-			// console.log("结束", evaluatingData.resultData);
+			console.log("结束", evaluatingData.resultData);
+			/** 生成评测记录的时候，记录当前评测的谱面类型，用于评测报告默认展示的谱面类型 */
+			evaluatingData.resultData.scoreData.musicType = state.musicRenderType;
 			const body = {
 				deviceType: browser().android ? "ANDROID" : "IOS", // 设备类型
 				intonation: evaluatingData.resultData.intonation, // 音准

src/page-instrument/view-evaluat-report/component/share-top/image/icon-huifang.svg

@@ -1,13 +1,46 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>button-normal备份 3</title>
+    <defs>
+        <linearGradient x1="17.1954441%" y1="14.7360422%" x2="84.4297%" y2="87.3517208%" id="linearGradient-1">
+            <stop stop-color="#50C6FF" offset="0%"></stop>
+            <stop stop-color="#6A8AFF" offset="34.1346154%"></stop>
+            <stop stop-color="#A070FF" offset="71.560861%"></stop>
+            <stop stop-color="#FF77F7" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="87.4717428%" y1="81.7088149%" x2="17.371674%" y2="8.96796691%" id="linearGradient-2">
+            <stop stop-color="#41F1CC" offset="0%"></stop>
+            <stop stop-color="#21CDFF" offset="47.8253805%"></stop>
+            <stop stop-color="#008CFF" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-3" x="0" y="0" width="33" height="33" rx="16.5"></rect>
+        <filter x="-6.1%" y="-6.1%" width="112.1%" height="112.1%" filterUnits="objectBoundingBox" id="filter-4">
+            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <filter x="-30.9%" y="-30.9%" width="161.8%" height="161.8%" filterUnits="objectBoundingBox" id="filter-5">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.419209967   0 0 0 0 0.533259737  0 0 0 0.796711101 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="评测报告（音准）" transform="translate(-639.000000, -13.000000)">
-            <g id="button-normal备份-3" transform="translate(639.000000, 13.000000)">
-                <rect id="button-normal" fill="#EFF9FF" x="0" y="0" width="33" height="33" rx="16.5"></rect>
-                <g id="编组" transform="translate(8.000000, 8.000000)">
-                    <path d="M6,11.2838533 L6,5.70732273 C6,5.16019142 6.56518082,4.82349524 7.0294365,5.09706089 L11.6518082,7.87480443 C12.1160639,8.14837008 12.1160639,8.84280597 11.6518082,9.11637162 L7.0294365,11.8941152 C6.56518082,12.1887243 6,11.8309846 6,11.2838533 Z" id="形状" fill="#2AAAE9" fill-rule="nonzero"></path>
-                    <path d="M8.5,17 C13.1944204,17 17,13.1944204 17,8.5 C17,3.80557963 13.1944204,0 8.5,0 C6.7502475,0 5.12397972,0.528700969 3.77223303,1.43506655 C2.5629265,2.24592396 1.57333404,3.35904678 0.911600214,4.66629045 C0.328527255,5.81814095 0,7.12070465 0,8.5" id="椭圆形" stroke="#2AAAE9" stroke-width="2.5" stroke-linecap="round"></path>
+        <g id="评测报告（音准）" transform="translate(-702.000000, -11.000000)">
+            <g id="button-normal备份-3" transform="translate(702.000000, 11.000000)">
+                <g id="button-normal">
+                    <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-3"></use>
+                    <use fill="url(#linearGradient-2)" fill-rule="evenodd" xlink:href="#path-3"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                </g>
+                <g id="编组" filter="url(#filter-5)" transform="translate(8.000000, 8.000000)">
+                    <path d="M6,11.2838533 L6,5.70732273 C6,5.16019142 6.56518082,4.82349524 7.0294365,5.09706089 L11.6518082,7.87480443 C12.1160639,8.14837008 12.1160639,8.84280597 11.6518082,9.11637162 L7.0294365,11.8941152 C6.56518082,12.1887243 6,11.8309846 6,11.2838533 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero"></path>
+                    <path d="M8.5,17 C13.1944204,17 17,13.1944204 17,8.5 C17,3.80557963 13.1944204,0 8.5,0 C6.7502475,0 5.12397972,0.528700969 3.77223303,1.43506655 C2.5629265,2.24592396 1.57333404,3.35904678 0.911600214,4.66629045 C0.328527255,5.81814095 0,7.12070465 0,8.5" id="椭圆形" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"></path>
                 </g>
             </g>
         </g>

src/page-instrument/view-evaluat-report/component/share-top/image/icon-shiyi.svg

@@ -1,11 +1,44 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>button-normal备份 2</title>
+    <defs>
+        <linearGradient x1="17.1954441%" y1="14.7360422%" x2="84.4297%" y2="87.3517208%" id="linearGradient-1">
+            <stop stop-color="#50C6FF" offset="0%"></stop>
+            <stop stop-color="#6A8AFF" offset="34.1346154%"></stop>
+            <stop stop-color="#A070FF" offset="71.560861%"></stop>
+            <stop stop-color="#FF77F7" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="87.4717428%" y1="81.7088149%" x2="17.371674%" y2="8.96796691%" id="linearGradient-2">
+            <stop stop-color="#41F1CC" offset="0%"></stop>
+            <stop stop-color="#21CDFF" offset="47.8253805%"></stop>
+            <stop stop-color="#008CFF" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-3" x="0" y="0" width="33" height="33" rx="16.5"></rect>
+        <filter x="-6.1%" y="-6.1%" width="112.1%" height="112.1%" filterUnits="objectBoundingBox" id="filter-4">
+            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <filter x="-23.7%" y="-23.7%" width="147.4%" height="147.4%" filterUnits="objectBoundingBox" id="filter-5">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.419209967   0 0 0 0 0.533259737  0 0 0 0.796711101 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="评测报告（音准）" transform="translate(-755.000000, -11.000000)">
             <g id="button-normal备份-2" transform="translate(755.000000, 11.000000)">
-                <rect id="button-normal" fill="#FFE5E7" x="0" y="0" width="33" height="33" rx="16.5"></rect>
-                <g id="编组" transform="translate(7.000000, 7.000000)" fill="#FF6173" fill-rule="nonzero" stroke="#FF6173">
+                <g id="button-normal">
+                    <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-3"></use>
+                    <use fill="url(#linearGradient-2)" fill-rule="evenodd" xlink:href="#path-3"></use>
+                    <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                </g>
+                <g id="编组" filter="url(#filter-5)" transform="translate(7.000000, 7.000000)" fill="#FFFFFF" fill-rule="nonzero" stroke="#FFFFFF">
                     <path d="M9.5,0 C4.25322823,0 0,4.25324263 0,9.5 C0,14.7467574 4.25324678,19 9.5,19 C14.7467532,19 19,14.7467574 19,9.5 C19,4.25324263 14.7467347,0 9.5,0 Z M9.49999096,17.5000093 C5.08224075,17.5000093 1.50001028,13.9181622 1.50001028,9.50000928 C1.50001028,5.08182021 5.08222266,1.50000928 9.49999096,1.50000928 C13.9185552,1.50000928 17.4999897,5.08182019 17.4999897,9.50000928 C17.4999897,13.9181622 13.9185552,17.5000093 9.49999096,17.5000093 Z" id="形状"></path>
                     <path d="M9.60242663,4.40820056 C8.69574736,4.40820056 7.97469307,4.6677898 7.4389318,5.18715088 C6.90315395,5.69822914 6.63526502,6.415299 6.63526502,7.33837705 L8.04487302,7.33837705 C8.04487302,6.81089915 8.14788552,6.40699959 8.35389392,6.12666179 C8.58443543,5.78879242 8.97191911,5.61974983 9.51601299,5.61974983 C9.94462863,5.61974983 10.2743981,5.73539395 10.5053048,5.96591863 C10.7358463,6.21324134 10.8512913,6.53471105 10.8512913,6.9303112 C10.8512913,7.24366409 10.739996,7.53608583 10.5173721,7.8081242 L10.3691112,7.9813165 C9.56127805,8.69838636 9.0790813,9.22189715 8.9224877,9.55148369 C8.75761128,9.87295341 8.67534734,10.2768696 8.67534736,10.763033 L8.67534736,10.9362087 L10.0970393,10.9362087 L10.0970393,10.763033 C10.0970393,10.4745617 10.1589364,10.2066731 10.2826809,9.95935037 C10.3977774,9.72050967 10.5626538,9.51431889 10.7769782,9.34134239 C11.3538881,8.83856355 11.7085558,8.51294411 11.8402179,8.36446749 C12.1450891,7.96075053 12.2978816,7.45383858 12.2978816,6.84373165 C12.2978816,6.08551327 12.050791,5.49202176 11.5561285,5.06338994 C11.0697654,4.62665788 10.4185259,4.40820056 9.60242663,4.40820056 Z M8.69988046,12.8015559 C8.51877034,12.9747482 8.42784181,13.1971561 8.42784181,13.4692111 C8.42784181,13.7412494 8.51877034,13.9638565 8.69988046,14.1368496 C8.8979878,14.3183413 9.1243464,14.4088879 9.38018456,14.4088879 C9.6522066,14.4088879 9.87859838,14.3223084 10.0600737,14.1493153 C10.2494998,13.976123 10.3445946,13.7495489 10.3445946,13.4692111 C10.3445946,13.2056547 10.2536329,12.9830477 10.0725228,12.8015559 C9.89104754,12.6285628 9.66015745,12.5419667 9.38018456,12.5419667 C9.11606357,12.5419667 8.88967177,12.6285628 8.69988046,12.8015559 Z" id="形状"></path>
                 </g>

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

@@ -6,7 +6,7 @@
     height: 100%;
     flex-shrink: 0;
     padding: 10px 22px;
-    background-color: #fff;
+    background-color: rgba(6, 34, 87, 0.45);
     position: relative;
 }
 
@@ -18,13 +18,13 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding-right: 14px;
+    padding-right: 10px;
     height: 100%;
 
     img {
         display: block;
-        width: 15px;
-        height: 24px;
+        width: 28px;
+        height: 28px;
     }
 }
 
@@ -41,22 +41,29 @@
         .lcName {
             font-size: 18px;
             font-weight: 600;
-            color: #000;
-            line-height: 25px;
+            color: #fff;
+            height: 20px;
+            line-height: 20px;
             margin-bottom: 2px;
             padding: 0 !important;
 
             :global {
                 .van-notice-bar {
+                    height: 20px;
+                    line-height: 20px;
                     padding: 0 !important;
                 }
+                .van-notice-bar__content {
+                    color: #fff;
+                }
             }
         }
 
         .lcScore {
             font-size: 12px;
-            color: #777777;
+            color: #fff;
             line-height: 18px;
+            font-weight: normal;
         }
     }
 }
@@ -70,7 +77,7 @@
         text-align: center;
         padding: 0 12px;
         white-space: nowrap;
-
+        
         &>div:first-child {
             font-size: 12px;
             color: #333333;
@@ -139,13 +146,13 @@
     }
 
     .active {
-        background: #CBEEFF;
+        background: linear-gradient( 270deg, rgba(27, 210, 255, 0.36) 0%, rgba(26, 173, 255, 0.36) 100%);
         border-radius: 8px;
 
         .mScore,
         .mLabel {
-            color: #000000;
-            font-weight: 600;
+            color: #fff;
+            font-weight: normal;
         }
     }
 }
@@ -164,7 +171,7 @@
         line-height: 14px;
         font-weight: 400;
         padding: 0 10px;
-        color: #999;
+        color: #fff;
         cursor: pointer;
 
         .iconBtn {
@@ -176,6 +183,7 @@
         span {
             margin-top: 2px;
             white-space: nowrap;
+            transform: scale(0.9);
         }
 
         .btnWrap {
@@ -318,7 +326,7 @@
     padding: 0 16px;
     height: 30px;
     border-radius: 18px;
-    background-color: rgba(255, 255, 255, .9);
+    background-color: rgba(0, 38, 99, 1);
     z-index: 1;
     box-sizing: content-box;
 
@@ -333,6 +341,14 @@
 
         &>span {
             margin-left: 4px;
+            color: #fff;
+        }
+        &>i {
+            width: 12px;
+            height: 12px;
+            margin-right: 2px;
+            border-radius: 3px;
+            display: inline-block;
         }
     }
 }

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

@@ -3,7 +3,7 @@ import styles from "./index.module.less";
 
 import { api_back } from "/src/helpers/communication";
 import state from "/src/state";
-import iconBack from "./image/icon-back.svg";
+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";
@@ -51,6 +51,17 @@ export default defineComponent({
 			ADVANCED: "进阶级",
 			PERFORMER: "大师级",
 		};
+		// 颜色配置
+		const bgColors = {
+			high: '#FF66A6',
+			low: '#FFB900',
+			right: '#65FFAE',
+			wrong: '#DA3736',
+			lack: '#0352C0',
+			not: '#FFFFFF',
+			fast: '#B366FF',
+			slow: '#FF7B00'
+		}
 		// console.log("🚀 ~ scoreData:", scoreData.value)
 		const itemType = ref<IItemType>("intonation");
 		/** 返回 */
@@ -191,7 +202,7 @@ export default defineComponent({
 							{itemType.value === "intonation" && (
 								<>
 									<div>
-										<Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={-2} y={0} />
+										<Note fill="rgba(255, 102, 166, 1)" shadowFill="#FFAB25" shadow x={-2} y={0} />
 										<span>演奏偏高</span>
 									</div>
 									<div>
@@ -251,11 +262,12 @@ export default defineComponent({
 							{itemType.value === "intonation" && (
 								<>
 									<div>
-										<img class={styles.firstIcon1} src={firstTop} />
+										{/* <img class={styles.firstIcon1} src={firstTop} /> */}
+										<i style={{ background: bgColors.high }}></i>
 										<span>演奏偏高</span>
 									</div>
 									<div>
-										<img class={styles.firstIcon1} src={firstBottom} />
+										<i style={{ background: bgColors.low }}></i>
 										<span>演奏偏低</span>
 									</div>
 								</>
@@ -263,11 +275,11 @@ export default defineComponent({
 							{itemType.value === "cadence" && (
 								<>
 									<div>
-										<img class={styles.firstIcon2} src={firstLeft} />
+										<i style={{ background: bgColors.fast }}></i>
 										<span>节奏偏快</span>
 									</div>
 									<div>
-										<img class={styles.firstIcon2} src={firstRight} />
+										<i style={{ background: bgColors.slow }}></i>
 										<span>节奏偏慢</span>
 									</div>
 								</>
@@ -275,30 +287,30 @@ export default defineComponent({
 							{(itemType.value === "intonation" || itemType.value === "cadence") && (	
 								<>			
 									<div>
-										<img class={styles.firstIcon3} src={firstCorrect} />
+										<i style={{ background: bgColors.right }}></i>
 										<span>演奏正确</span>
 									</div>
 									<div>
-										<img class={styles.firstIcon3} src={firstError} />
+										<i style={{ background: bgColors.wrong }}></i>
 										<span>演奏错误</span>
 									</div>							
 								</>
 							)}
 							{(itemType.value === "intonation" || itemType.value === "integrity") && (
 								<div>
-									<img class={styles.firstIcon3} src={firstLack} />
+									<i style={{ background: bgColors.lack }}></i>
 									<span>时值不足</span>
 								</div>
 							)}
 							{
 								itemType.value === "integrity" && 
 								<div>
-									<img class={styles.firstIcon3} src={firstCorrect} />
+									<i style={{ background: bgColors.right }}></i>
 									<span>时值正确</span>
 								</div>								
 							}							
 							<div>
-								<img class={styles.firstIcon3} src={firstNot} />
+								<i style={{ background: bgColors.not }}></i>
 								<span>未演奏</span>
 							</div>
 						</div>

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

@@ -27,7 +27,9 @@
   width: 100vw;
   min-height: 100vh;
   --header-height: 62px;
-  background: rgba(248, 242, 232, 1);
+  // background: rgba(248, 242, 232, 1);
+  background: url("../view-detail/images/bg2.png") no-repeat;
+  background-size: 100% 100%;
 
   :global {
 
@@ -67,6 +69,7 @@
         max-height: initial;
         transform: translateY(-3%) !important;
         & > #osmdCanvasPage1 {
+          top: 1rem;
           position: relative !important;
         }
       }
@@ -91,8 +94,8 @@
 
 .right {
   path {
-    fill: #2ABC6F;
-    stroke: #2ABC6F;
+    fill: #65FFAE;
+    stroke: #65FFAE;
   }
 }
 
@@ -105,43 +108,71 @@
 
 .wrong {
   path {
-    fill: #FF2B29;
-    stroke: #FF2B29;
+    fill: #DA3736;
+    stroke: #DA3736;
   }
 }
 
 .notPlay {
   path {
-    fill: #ADADAD;
-    stroke: #ADADAD;
+    fill: #FFFFFF;
+    stroke: #FFFFFF;
   }
 }
 
 // 音准
-.intonation_wrong,
-.intonation_high,
-.intonation_low{
+.intonation_wrong {
   path{
     fill: #FF9200;
     stroke: #FF9200;
   }
 }
 
+// 音准高
+.intonation_high {
+  path{
+    fill: #FF66A6;
+    stroke: #FF66A6;
+  }
+}
+
+// 音准低
+.intonation_low {
+  path{
+    fill: #FFB900;
+    stroke: #FFB900;
+  }
+}
+
 // 节奏
-.cadence_wrong,
-.cadence_fast,
-.cadence_slow {
+.cadence_wrong {
   path{
     fill: #FF9200;
     stroke: #FF9200;
   }
 }
 
+// 节奏快
+.cadence_fast {
+  path {
+    fill: #B366FF;
+    stroke: #B366FF;
+  }
+}
+
+// 节奏慢
+.cadence_slow {
+  path {
+    fill: #FF7B00;
+    stroke: #FF7B00;
+  }
+}
+
 // 完成度
 .integrity_wrong {
   path {
-    fill: #8F4EFB;
-    stroke: #8F4EFB;
+    fill: #0352C0;
+    stroke: #0352C0;
   }
 }
 

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

@@ -197,7 +197,8 @@ export default defineComponent({
 			// if (!query.musicRenderType) {
 			// 	state.musicRenderType = EnumMusicRenderType.staff
 			// }
-			scoreData.musicType = query.musicRenderType ? query.musicRenderType : state.musicRenderType;
+			// 评测报告展示什么类型的谱面
+			scoreData.musicType = query.musicRenderType ? query.musicRenderType : resultData.musicType ? resultData.musicType : state.musicRenderType;
 			detailData.isLoading = false;
 			// Promise.all([
 			// 	getMusicSheetDetail(resultData.musicalNotesPlayStats?.examSongId),
@@ -431,7 +432,7 @@ export default defineComponent({
 					class={[styles.container, !state.setting.displayCursor && "hideCursor"]}
 				>
 					{/* 曲谱渲染 */}
-					{!detailData.isLoading && <MusicScore musicColor={'#ADADAD'} onRendered={handleRendered} />}
+					{!detailData.isLoading && <MusicScore musicColor={'#FFFFFF'} onRendered={handleRendered} />}
 					{
 						<div class={styles.arrowSvg}>
 							<TopArrow />

vite.config.ts

@@ -76,9 +76,9 @@ export default defineConfig({
         // target: "https://kt.colexiu.com",
         // target: "https://test.lexiaoya.cn",
         // target: "https://kt.colexiu.com",
-        target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
+        // target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
         //target: "https://dev.resource.colexiu.com",
-        //target: "https://dev.kt.colexiu.com",
+        target: "https://test.kt.colexiu.com",
         //target: "https://mec.colexiu.com",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/instrument/, ""),