谱面样式修改

src/helpers/customMusicScore.ts

@@ -613,16 +613,14 @@ export const resetFormate = () => {
 					}
 				} catch (error) {}
 				const bbox = stave?.getBBox() || {};
-				const bgColor = state.isEvaluatReport ? '#132D4C' : state.isCbsView ? 'transparent' : '#609FCF';
-				const botColor = state.isEvaluatReport ? '#040D1E' : state.isCbsView ? 'transparent' : '#2B70A5';
+				const bgColor = 'transparent';
 				const rect = `<rect class="vf-custom-bg" x="${bbox.x}" y="${bbox.y}" width="${bbox.width}" height="${bbox.height}" fill=${bgColor} />`
-				const rectBottom = `<rect class="vf-custom-bot" x="${bbox.x}" y="${bbox.y+bbox.height}" width="${bbox.width}" height="7.5" fill=${botColor} />`
 				// const filterDom = `<defs>
 				// 						<filter id="shadow">
 				// 						<feDropShadow dx="5" dy="5" stdDeviation="3" flood-color="black" />
 				// 						</filter>
 				// 					</defs>`
-				const customG = `<g>${rect}${rectBottom}</g>`
+				const customG = `<g>${rect}</g>`
 				try {
 					if (list.length) {
 						for(const _el of list) {

src/page-instrument/header-top/index.module.less

@@ -302,7 +302,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            background: #FFC121;
+            background: #0EA7FF;
             border-radius: 120px 120px 120px 1px;
             border: 1px solid #FFFFFF;
 

src/page-instrument/view-detail/index.tsx

@@ -562,7 +562,7 @@ export default defineComponent({
           {!detailData.isLoading && 
             <MusicScore 
               ref={musicScoreRef}
-              musicColor={state.isPreView || state.isCbsView ? '#000000' : '#FFFFFF'}
+              musicColor={'#000000'}
               showPartNames={state.isCombineRender}
               onRendered={handleOnRendered} 
             > 

src/page-instrument/view-detail/intonationLine/index.tsx

@@ -194,7 +194,7 @@ function drawProgressectMusic() {
    const filterProgressMusic = progressMusicData.progressMusic.filter(item => {
       return item.width !== 0
    })
-   drawPathRectByArr(canvasCtx!, filterProgressMusic, "#FFC121")
+   drawPathRectByArr(canvasCtx!, filterProgressMusic, "#0EA7FF")
 }
 
 /**

src/page-instrument/view-detail/smoothAnimation/index.ts

@@ -354,7 +354,7 @@ export function moveTranslateXNum(translateXNum: number) {
  */
 function smoothAnimationMove(pos: { x: number; y: number }, progresspointsPos: pointsPosType) {
    smoothAnimationState.smoothBotDom && (smoothAnimationState.smoothBotDom.style.transform = `translate(${pos.x}px, ${pos.y}px)`)
-   smoothAnimationState.canvasCtx && drawSmoothCurveProgress(smoothAnimationState.canvasCtx, progresspointsPos, "#FFC121")
+   smoothAnimationState.canvasCtx && drawSmoothCurveProgress(smoothAnimationState.canvasCtx, progresspointsPos, "#0EA7FF")
 }
 
 /**
@@ -508,7 +508,7 @@ function initCanvasSmooth() {
    smoothDomCtx.lineCap = "round"
    smoothDomCtx.lineJoin = "round"
    // 根据坐标花线
-   const defaultColor = state.isCbsView ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.6)";
+   const defaultColor = state.isCbsView ? "rgba(0,0,0,0.1)" : "#BDBDBD";
    drawLines(smoothDomCtx, smoothAnimationState.pointsPos, defaultColor)
    smoothAnimationState.canvasSmoothDom = smoothDom
 }

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

@@ -301,7 +301,6 @@ export default defineComponent({
           //   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) {

src/state.ts

@@ -2073,20 +2073,10 @@ watch(
         measureNum = nextMeasureNum
       }
       if (measureNum >= 0 && (measureNum === state.activeMeasureIndex || (measureNum < state.activeMeasureIndex && nextMeasureNum > state.activeMeasureIndex))) {
-        if (state.isCbsView) {
-          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#FFF6E1")
-        } else {
-          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#132D4C")
-          item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#040D1E")
-        }
+        item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(9,159,255,0.15)")
         // 预备小节
         if(state.sectionFirst && measureNum === state.sectionFirst.MeasureNumberXML && state.section.length === 2){
-          if (state.isCbsView) {
-            item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#E3F1FF")
-          } else {
-            item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#71B8BD")
-            item?.querySelector('.vf-custom-bot')?.setAttribute("fill", "#448F9C")
-          }
+          item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(255,193,48,0.15)")
         }
       } else {
         // 有选段只清除选段处的
@@ -2099,34 +2089,17 @@ watch(
             rightMeasureNumberXML = state.section[0].MeasureNumberXML
           }
           if(measureNum >= leftMeasureNumberXML && measureNum <= rightMeasureNumberXML){
-            if (!state.isCbsView) {
-              item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#609FCF")
-              item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#2B70A5")
-            } else {
-              item.querySelector('.vf-custom-bg')?.setAttribute("fill", 'transparent')
-            }
+            item.querySelector('.vf-custom-bg')?.setAttribute("fill", 'transparent')
           }
           if (measureNum >= leftMeasureNumberXML && measureNum <= rightMeasureNumberXML) {
-            if (state.isCbsView) {
-              item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(255,246,225,0.5)")
-            }
+            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(9,159,255,0.15)")
           }
           // 预备小节
           if(state.sectionFirst && measureNum === state.sectionFirst.MeasureNumberXML){
-            if (state.isCbsView) {
-              item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#E3F1FF")
-            } else {
-              item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#71B8BD")
-              item?.querySelector('.vf-custom-bot')?.setAttribute("fill", "#448F9C")
-            }
+            item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(255,193,48,0.15)")
           }
         } else {
-          if (!state.isCbsView) {
-            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#609FCF")
-            item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#2B70A5")
-          } else {
-            item.querySelector('.vf-custom-bg')?.setAttribute("fill", 'transparent')
-          }
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", 'transparent')
         }
       }
     })
@@ -2161,35 +2134,18 @@ watch(
         }
         // 小于选中置灰
         if (measureNum < leftMeasureNumberXML) {
-          if (!state.isCbsView) {
-            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(96,159,207,0.5)")
-            item.querySelector('.vf-custom-bot')?.setAttribute("fill", "rgba(43,112,165,0.5)")
-          } else {
-            item.querySelector('.vf-custom-bg')?.setAttribute("fill", 'transparent')
-          }
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", 'transparent')
         }
         // 大于选中置灰
         if(measureNum > rightMeasureNumberXML){
-          if (!state.isCbsView) {
-            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(96,159,207,0.5)")
-            item.querySelector('.vf-custom-bot')?.setAttribute("fill", "rgba(43,112,165,0.5)")
-          } else {
-            item.querySelector('.vf-custom-bg')?.setAttribute("fill", 'transparent')
-          }
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", 'transparent')
         }
         if (measureNum >= leftMeasureNumberXML && measureNum <= rightMeasureNumberXML) {
-          if (state.isCbsView) {
-            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(255,246,225,0.5)")
-          }
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(9,159,255,0.15)")
         }
         // 预备小节
         if(state.sectionFirst && measureNum === state.sectionFirst.MeasureNumberXML){
-          if (state.isCbsView) {
-            item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#E3F1FF")
-          } else {
-            item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#71B8BD")
-            item?.querySelector('.vf-custom-bot')?.setAttribute("fill", "#448F9C")
-          }
+          item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(255,193,48,0.15)")
         }        
       })
     }else{
@@ -2208,20 +2164,9 @@ watch(
           measureNum = nextMeasureNum
         }
         if (measureNum >= 0 && (measureNum === state.activeMeasureIndex || (measureNum < state.activeMeasureIndex && nextMeasureNum > state.activeMeasureIndex)) ) {
-          if (state.isCbsView) {
-            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "transparent")
-          } else {
-            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#132D4C")
-            item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#040D1E")
-          }
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(9,159,255,0.15)")
         } else {
-          if (state.isCbsView) {
-            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "transparent")
-          } else {
-            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#609FCF")
-            item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#2B70A5")
-          }
-
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "transparent")
         }
       })
     }

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

@@ -28,11 +28,11 @@
     }
     .noteActive {
         path {
-            fill: #FFC121;
-            stroke: #FFC121;
+            fill: #0EA7FF;
+            stroke: #0EA7FF;
         }
         rect {
-            stroke: #FFC121;
+            stroke: #0EA7FF;
         }
         transform-box: fill-box;
         transform-origin: center;
@@ -42,19 +42,19 @@
     }
     .lyricActive {
         text {
-            fill: #FFC121;
-            stroke: #FFC121;
+            fill: #0EA7FF;
+            stroke: #0EA7FF;
         }
     }
     .voiceActive {
         rect {
-            fill: #FFC121;
-            stroke: #FFC121;
+            fill: #0EA7FF;
+            stroke: #0EA7FF;
         }
     }
     .rectActive {
-        fill: #FFC121;
-        stroke: #FFC121;
+        fill: #0EA7FF;
+        stroke: #0EA7FF;
     }
     .vf-numbered_note_lines {
         rect {
@@ -62,14 +62,6 @@
             stroke: #FFFFFF;
         }
     }
-    .blueMusicXml {
-        .vf-stave {
-            >path {
-                fill: rgba(255,255,255,0.5);
-                stroke: rgba(255,255,255,0.5);
-            }
-        }
-    }
     .vf-custom-rect {
         position: relative;
         // stroke: grey;
@@ -92,7 +84,7 @@
         position: relative;
         width: 200px;
         height: 50px;
-        background: #FFC121;
+        background: #0EA7FF;
         z-index: 999;
     }
 }
@@ -135,36 +127,3 @@
         }        
    } 
 }
-.inGradualRangeBlue{
-    :global{
-         #cursorImg-0{
-             // opacity: 0 !important;
-         }
-         .noteActive {
-             path {
-                 fill: #ffffff !important;
-                 stroke: #ffffff !important;
-             }
- 
-             rect {
-                 stroke: #ffffff !important;
-             }
-         }
-         .lyricActive {
-             text {
-                 fill: #ffffff !important;
-                 stroke: #ffffff !important;
-             }
-         }
-         .voiceActive {
-             rect {
-                 fill: #ffffff !important;
-                 stroke: #ffffff !important;
-             }
-         }
-         .rectActive {
-             fill: #ffffff !important;
-             stroke: #ffffff !important;
-         }        
-    } 
- }

src/view/music-score/index.tsx

@@ -258,11 +258,9 @@ export default defineComponent({
 				id="musicAndSelection"
 				style={{ "--music-zoom": state.musicZoom }}
 				class={[
-					(isInTheGradualRange.value && state.isCbsView) && styles.inGradualRange,
-					(isInTheGradualRange.value && !state.isCbsView) && styles.inGradualRangeBlue,
+					isInTheGradualRange.value && styles.inGradualRange,
 					state.musicRenderType == EnumMusicRenderType.staff ? "staff" : "jianpuTone",
 					state.isSingleLine && "singleLineMusicBox",
-					(!state.isCreateImg && !state.isPreView && !state.isCbsView && state.musicRenderType === EnumMusicRenderType.staff) ? "blueMusicXml" : "",
 					state.isSingleLine && state.playState ==="play" && styles.notTouch,
 					!state.isSingleLine && (state.platform === "PC" || query.isCbs) &&  styles.pcCursorGrab
 

src/view/selection/index.module.less

@@ -142,7 +142,7 @@
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    background-color: #FFC121;
+    background-color: #0EA7FF;
     color: #673207;
     font-size: 14px;
     font-weight: 600;
@@ -319,21 +319,4 @@
     width: 2px;
     height: 2px;
     // background: #07c160;
-}
-
-// 阴影
-.staveBgContainer{
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    z-index: -100;
-    .staveBg{
-        position: absolute;
-        height: 8px !important;
-        background: linear-gradient(rgba(7, 24, 56, 0.5) 0%, #010D31 100%);
-        filter: blur(5Px);
-        opacity: 0.7;
-        margin-top: -4px;
-    }
 }

src/view/selection/index.tsx

@@ -269,30 +269,6 @@ export default defineComponent({
 		});
 		return () => (
 			<>
-				{
-					!state.isPreView &&
-					<div id="selectionBgBox" class={styles.staveBgContainer}>
-					{
-						selectData.staves.map((item: any) => {
-							return (
-								<>
-									{
-										item.staveBox && item.multipleRestMeasures <= 1 && 
-											<div 
-												style={{
-													left:item.staveBox.left,
-													top:`calc(${item.staveBox.top} + ${item.staveBox.height})`,
-													width:item.staveBox.width
-												}}
-												class={[styles.staveBg]}
-											></div>
-									}
-								</>
-							)
-						})
-					}
-					</div>					
-				}
 				<div
 					id="selectionBox"
 					class={[

src/view/tick/index.module.less

@@ -12,7 +12,7 @@
         background-color: #ffffff;
         border-radius: 50%;
         &:first-child{
-            background-color: #FFC121;
+            background-color: #0EA7FF;
         }
         &:last-child{
             margin-right: 0;