浏览代码

feat: 一行谱页面修改

TIANYONG 8 月之前
父节点
当前提交
021ea8bff6
共有 3 个文件被更改,包括 15 次插入5 次删除
  1. 8 0
      src/page-instrument/simple-detail/index.module.less
  2. 6 4
      src/page-instrument/simple-detail/index.tsx
  3. 1 1
      src/state.ts

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

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

+ 1 - 1
src/state.ts

@@ -2036,7 +2036,7 @@ watch(
         measureNum = nextMeasureNum
         measureNum = nextMeasureNum
       }
       }
       if (measureNum >= 0 && (measureNum === state.activeMeasureIndex || (measureNum < state.activeMeasureIndex && nextMeasureNum > state.activeMeasureIndex))) {
       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){
         if(state.sectionFirst && measureNum === state.sectionFirst.MeasureNumberXML && state.section.length === 2){
           item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(255, 193, 48, 0.15)")
           item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(255, 193, 48, 0.15)")