feat: 谱面样式修改

src/page-instrument/view-detail/index.module.less

@@ -53,6 +53,7 @@
         background-color: rgba(25, 140, 254, 0.7);
         opacity: var(--corsor-opacity);
         //transform: translateX(10PX);
+        z-index: 1 !important;
     }
 
     .staff {

src/state.ts

@@ -442,6 +442,8 @@ const state = reactive({
   midiSectionStart: 0,
   /** 音频文件是否加载完成 */
   audioDone: false,
+  /** 谱面svgdom节点 */
+  osmdSvgDom: null as any,
 });
 const browserInfo = browser();
 let offset_duration = 0;
@@ -1203,4 +1205,11 @@ export const followBeatPaly = () => {
       followBeatPaly();
     }
   });
-};
+};
+
+// let moveX = 0;
+// /** 移动svgdom */
+// export const moveSvgDom = (offset: number) => {
+//   moveX += offset;
+//   state.osmdSvgDom.style.transform = `translateX(${moveX}px)`;
+// }

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

@@ -22,6 +22,10 @@
             position: absolute !important;
             left: 0;
             top: 0;
+            // >svg {
+            //     background: antiquewhite;
+            //     transition: all 0.5s;
+            // }
         }
     }
 }

src/view/music-score/index.tsx

@@ -102,7 +102,7 @@ export default defineComponent({
 				drawPartNames: props.showPartNames, // 是否渲染声轨名称
 				drawComposer: false, // 渲染作者
 				defaultColorMusic: props.musicColor, // 颜色
-				//renderSingleHorizontalStaffline: true,
+				// renderSingleHorizontalStaffline: true,
 				// pageFormat: 'A4_P',
 				// autoBeam: true,
 				// drawMetronomeMarks: false,
@@ -128,7 +128,9 @@ export default defineComponent({
 			await osmd.load(musicData.score);
 			osmd.zoom = state.zoom;
 			osmd.render();
-			// console.log("🚀 ~ osmd:", osmd)
+			const svg: any = document.getElementById("osmdSvgPage1");
+			state.osmdSvgDom = svg;
+			// console.log("🚀 ~ osmd:", osmd, svg)
 			emit("rendered", osmd);
 			resetFormate();
 			resetGivenFormate();