样式修改

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

@@ -6,9 +6,7 @@
     height: 100%;
     flex-shrink: 0;
     padding: 10px 22px;
-    background-color: rgba(6, 34, 87, 0.8);
-    backdrop-filter: blur(3px);
-    -webkit-backdrop-filter: blur(3px);
+    background: #FFFFFF;
     position: relative;
 }
 
@@ -43,7 +41,7 @@
         .lcName {
             font-size: 18px;
             font-weight: 600;
-            color: #fff;
+            color: #333333;
             height: 20px;
             line-height: 20px;
             margin-bottom: 2px;
@@ -57,14 +55,14 @@
                 }
 
                 .van-notice-bar__content {
-                    color: #fff;
+                    color: #333333;
                 }
             }
         }
 
         .lcScore {
             font-size: 12px;
-            color: #fff;
+            color: #777777;
             line-height: 18px;
             font-weight: normal;
         }
@@ -149,13 +147,13 @@
     }
 
     .active {
-        background: linear-gradient(270deg, rgba(27, 210, 255, 0.36) 0%, rgba(26, 173, 255, 0.36) 100%);
+        background: rgba(9,159,255,0.15);
         border-radius: 8px;
 
         .mScore,
         .mLabel {
-            color: #fff;
-            font-weight: normal;
+            color: #000000;
+            font-weight: 600;
         }
     }
 }
@@ -179,7 +177,7 @@
         line-height: 14px;
         font-weight: 400;
         padding: 0 5px;
-        color: #fff;
+        color: #999999;
         cursor: pointer;
 
         &+.btn {
@@ -413,7 +411,7 @@
     padding: 0 16px;
     height: 30px;
     border-radius: 18px;
-    background-color: rgba(0, 38, 99, 1);
+    background: #FFFFFF;
     z-index: 1;
     box-sizing: content-box;
 
@@ -428,7 +426,7 @@
 
         &>span {
             margin-left: 4px;
-            color: #fff;
+            color: #1A1A1A;
         }
 
         &>i {
@@ -451,7 +449,7 @@
 }
 
 .shiyiPopup {
-    background: #B0D8FF;
+    background: #fff;
     border-radius: 20px;
     width: 80vw;
     max-width: 460px;
@@ -465,7 +463,6 @@
         top: 10px;
         width: calc(100% - 20px);
         height: calc(100% - 20px);
-        background: #D5E8FF;
         border-radius: 14px;
     }
 

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

@@ -49,14 +49,14 @@ export default defineComponent({
     };
     // 颜色配置
     const bgColors = {
-      high: "#FF66A6",
-      low: "#FFB900",
-      right: "#65FFAE",
-      wrong: "#DA3736",
-      lack: "#7AB2FF",
-      not: "#FFFFFF",
-      fast: "#B366FF",
-      slow: "#FF7B00",
+      high: "#EF231D",
+      low: "#0E79FF",
+      right: "#01B996",
+      wrong: "#8F4EFB",
+      lack: "#FF8219",
+      not: "#ADADAD",
+      fast: "#F63582",
+      slow: "#FFAA00",
     };
     // console.log("🚀 ~ scoreData:", scoreData.value)
     const itemType = ref<IItemType>(state.isPercussion ? "cadence" : "intonation");
@@ -349,11 +349,11 @@ export default defineComponent({
                     <>
                       <div>
                         {/* <Note fill="rgba(255, 102, 166, 1)" shadowFill="#FFAB25" shadow x={-2} y={0} /> */}
-                        <Note fill="#FF66A6" />
+                        <Note fill="#EF231D" />
                         <span>演奏偏高</span>
                       </div>
                       <div>
-                        <Note fill="#FFB900" />
+                        <Note fill="#0E79FF" />
                         <span>演奏偏低</span>
                       </div>
                     </>
@@ -361,11 +361,11 @@ export default defineComponent({
                   {itemType.value === "cadence" && (
                     <>
                       <div>
-                        <Note fill="#B366FF" />
+                        <Note fill="#F63582" />
                         <span>节奏偏快</span>
                       </div>
                       <div>
-                        <Note fill="#FF7B00" />
+                        <Note fill="#FFAA00" />
                         <span>节奏偏慢</span>
                       </div>
                     </>
@@ -373,11 +373,11 @@ export default defineComponent({
                   {(itemType.value === "intonation" || itemType.value === "cadence") && (
                     <>
                       <div>
-                        <Note fill="#65FFAE" />
+                        <Note fill="#01B996" />
                         <span>演奏正确</span>
                       </div>
                       <div>
-                        <Note fill="#DA3736" />
+                        <Note fill="#8F4EFB" />
                         <span>演奏错误</span>
                       </div>
                     </>
@@ -385,18 +385,18 @@ export default defineComponent({
 
                   {itemType.value === "integrity" && (
                     <div>
-                      <Note fill="#7AB2FF" />
+                      <Note fill="#FF8219" />
                       <span>时值不足</span>
                     </div>
                   )}
                   {itemType.value === "integrity" && (
                     <div>
-                      <Note fill="#65FFAE" />
+                      <Note fill="#01B996" />
                       <span>演奏正确</span>
                     </div>
                   )}
                   <div>
-                    <Note fill="#FFFFFF" />
+                    <Note fill="#ADADAD" />
                     <span>未演奏</span>
                   </div>
                 </div>
@@ -497,35 +497,35 @@ export default defineComponent({
                 <div class={styles.items}>
                   <div class={styles.item}>
                     {/* <Note fill="rgba(42, 188, 111, 1)" shadowFill="#FFAB25" shadow x={-2} y={0} /> */}
-                    <Note fill="#FF66A6" />
+                    <Note fill="#EF231D" />
                     <span>玫红色音符：演奏偏高</span>
                   </div>
                   <div class={styles.item}>
-                    <Note fill="#24E37E" />
+                    <Note fill="#01B996" />
                     <span>绿色音符：演奏正确</span>
                   </div>
                   <div class={styles.item}>
-                    <Note fill="#FFB900" />
+                    <Note fill="#0E79FF" />
                     <span>黄色音符：演奏偏低</span>
                   </div>
                   <div class={styles.item}>
-                    <Note fill="#DA3736" />
+                    <Note fill="#8F4EFB" />
                     <span>红色音符：演奏错误</span>
                   </div>
                   <div class={styles.item}>
-                    <Note fill="#B366FF" />
+                    <Note fill="#F63582" />
                     <span>紫色音符：节奏偏快</span>
                   </div>
                   <div class={styles.item}>
-                    <Note fill="#7AB2FF" />
+                    <Note fill="#FF8219" />
                     <span>蓝色音符：时值不足</span>
                   </div>
                   <div class={styles.item}>
-                    <Note fill="#FF7B00" />
+                    <Note fill="#FFAA00" />
                     <span>橙色音符：节奏偏慢</span>
                   </div>
                   <div class={styles.item}>
-                    <Note fill="#FFFFFF" />
+                    <Note fill="#ADADAD" />
                     <span>白色音符：未演奏</span>
                   </div>
                 </div>
@@ -539,7 +539,7 @@ export default defineComponent({
                     <span>玫红色音符：演奏偏高</span>
                   </div>
                   <div class={styles.itemTone}>
-                    <i style={{ background: "#24E37E" }}></i>
+                    <i style={{ background: "#01B996" }}></i>
                     <span>绿色音符：演奏正确</span>
                   </div>
                   <div class={styles.itemTone}>

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

@@ -27,15 +27,7 @@
   width: 100vw;
   min-height: 100vh;
   --header-height: 62px;
-  // background: rgba(248, 242, 232, 1);
-  .pageBg {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover; /* 保持宽高比 */
-  }
+  background: #FFF8EC;
   :global {
 
     #cursorImg-0 {
@@ -99,8 +91,8 @@
 
 .right {
   path {
-    fill: #65FFAE;
-    stroke: #65FFAE;
+    fill: #01B996;
+    stroke: #01B996;
   }
 }
 
@@ -113,15 +105,15 @@
 
 .wrong {
   path {
-    fill: #DA3736;
-    stroke: #DA3736;
+    fill: #8F4EFB;
+    stroke: #8F4EFB;
   }
 }
 
 .notPlay {
   path {
-    fill: #FFFFFF;
-    stroke: #FFFFFF;
+    fill: #ADADAD;
+    stroke: #ADADAD;
   }
 }
 
@@ -136,16 +128,16 @@
 // 音准高
 .intonation_high {
   path{
-    fill: #FF66A6;
-    stroke: #FF66A6;
+    fill: #EF231D;
+    stroke: #EF231D;
   }
 }
 
 // 音准低
 .intonation_low {
   path{
-    fill: #FFB900;
-    stroke: #FFB900;
+    fill: #0E79FF;
+    stroke: #0E79FF;
   }
 }
 
@@ -160,24 +152,24 @@
 // 节奏快
 .cadence_fast {
   path {
-    fill: #B366FF;
-    stroke: #B366FF;
+    fill: #F63582;
+    stroke: #F63582;
   }
 }
 
 // 节奏慢
 .cadence_slow {
   path {
-    fill: #FF7B00;
-    stroke: #FF7B00;
+    fill: #FFAA00;
+    stroke: #FFAA00;
   }
 }
 
 // 完成度
 .integrity_wrong {
   path {
-    fill: #7AB2FF;
-    stroke: #7AB2FF;
+    fill: #FF8219;
+    stroke: #FF8219;
   }
 }
 
@@ -187,16 +179,3 @@
   width: 1;
   height: 1;
 }
-
-.bg2Left {
-  width: 52px;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-.bg2Right {
-  width: 52px;
-  position: absolute;
-  right: 0;
-  top: 0;
-}

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

@@ -16,9 +16,6 @@ import TopArrow from "./component/note/topArrow";
 import BottomArrow from "./component/note/bottomArrow";
 import LeftArrow from "./component/note/leftArrow";
 import RightArrow from "./component/note/rightArrow";
-import bgJson from "/src/page-instrument/view-detail/images/index.json";
-import bg2Left from "/src/page-instrument/view-detail/images/bg2_left_zs.png";
-import bg2Right from "/src/page-instrument/view-detail/images/bg2_right_zs.png";
 
 const colorsClass: any = {
   RIGHT: styles.right, // 正确
@@ -427,13 +424,7 @@ export default defineComponent({
       }
     );
     return () => (
-      <div class={[styles.detail, state.setting.eyeProtection && "eyeProtection", styles.shareBox]} style={{ paddingLeft: detailData.paddingLeft }}>
-        <img 
-          class={styles.pageBg} 
-          src={bgJson[2]} 
-        />
-        <img src={bg2Left} class={styles.bg2Left} />
-        <img src={bg2Right} class={styles.bg2Right} />       
+      <div class={[styles.detail, state.setting.eyeProtection && "eyeProtection", styles.shareBox]} style={{ paddingLeft: detailData.paddingLeft }}>   
         <Transition name="van-fade">
           {!state.musicRendered && (
             <div class={styles.skeleton}>
@@ -446,7 +437,7 @@ export default defineComponent({
         </div>
         <div id="scrollContainer" class={[styles.container, !state.setting.displayCursor && "hideCursor"]}>
           {/* 曲谱渲染 */}
-          {!detailData.isLoading && <MusicScore musicColor={"#FFFFFF"} onRendered={handleRendered} />}
+          {!detailData.isLoading && <MusicScore musicColor={"#000000"} onRendered={handleRendered} />}
           {
             <div class={styles.arrowSvg}>
               <TopArrow />

src/view/music-score/index.module.less

@@ -58,8 +58,8 @@
     }
     .vf-numbered_note_lines {
         rect {
-            fill: #FFFFFF;
-            stroke: #FFFFFF;
+            fill: #000;
+            stroke: #000;
         }
     }
     .vf-custom-rect {