Browse Source

feat: 一行谱页面修改

TIANYONG 6 months ago
parent
commit
021ea8bff6

+ 8 - 0
src/page-instrument/simple-detail/index.module.less

@@ -44,5 +44,13 @@ body {
             height: 0 !important;
             overflow: hidden;
         }
+        #cursorImg-0 {
+            margin-top: -20PX !important;
+            transform: translateX(6PX) !important;
+        }
     }
 }
+
+.whiteBg {
+    background: #fff;
+}

+ 6 - 4
src/page-instrument/simple-detail/index.tsx

@@ -19,6 +19,7 @@ export default defineComponent({
 			isLoading: true,
 			currentTime: 0, // 当前播放的时间
 			totalTime: 0, // 音视频总时长
+			backgroundRendMode: "" as "video" | "audio", // 嵌入的时音频还是视频
 		});
 
 		const communicateCb = (res: any) => {
@@ -98,6 +99,7 @@ export default defineComponent({
 
 		onMounted(async () => {
 			const id = query.id || '';
+			detailData.backgroundRendMode = query.backgroundRendMode;
 			state.isSimplePage = true;
 			await getMusicDetail(id, 'open');
 			detailData.isLoading = false;
@@ -128,7 +130,7 @@ export default defineComponent({
 			console.log("🚀 ~ state.times:", state.times, state);
 			nextTick(() => {
 				state.activeMeasureIndex = state.times[0].MeasureNumberXML;
-				fillWordColor();
+				// fillWordColor();
 			})
 			// 音符添加位置信息bbox
 			addNoteBBox(state.times);
@@ -193,14 +195,14 @@ export default defineComponent({
 		};
 
 		return () => (
-			<div class={styles.detail}>
+			<div class={[styles.detail, detailData.backgroundRendMode === 'video' && styles.whiteBg]}>
 				<div class={styles.mask}></div>
-				<div id="scrollContainer" class={[styles.container, "hideCursor"]}>
+				<div id="scrollContainer" class={[styles.container]}>
 					{/* 曲谱渲染 */}
 					{!detailData.isLoading && 
 					<MusicScore 
 						onRendered={handleRendered} 
-						musicColor={'#FFFFFF'}
+						musicColor={'#000000'}
 					/>}
 				</div>
 			</div>

+ 1 - 1
src/state.ts

@@ -2036,7 +2036,7 @@ watch(
         measureNum = nextMeasureNum
       }
       if (measureNum >= 0 && (measureNum === state.activeMeasureIndex || (measureNum < state.activeMeasureIndex && nextMeasureNum > state.activeMeasureIndex))) {
-        item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(1, 193, 181, 0.2)")
+        item.querySelector('.vf-custom-bg')?.setAttribute("fill", state.isSimplePage ? "rgba(45, 199, 170, 0.3)" : "rgba(1, 193, 181, 0.2)")
         // 预备小节
         if(state.sectionFirst && measureNum === state.sectionFirst.MeasureNumberXML && state.section.length === 2){
           item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(255, 193, 48, 0.15)")