全屏

src/page-colexiu/detail/index.module.less

@@ -18,9 +18,7 @@
     background: var(--container-background);
 
     .headHeight {
-        position: fixed;
-        left: 0;
-        top: 0;
+        position: relative;
         width: 100%;
         height: var(--header-height);
         transition: margin .3s;
@@ -31,24 +29,13 @@
     }
 
     .container {
-        position: relative;
-        height: 100vh;
+        position: sticky;
+        top: 0;
+        height: calc(100vh - var(--header-height));
         margin: 0 10px;
         border-radius: 10px;
-        padding-top: var(--header-height);
-        overflow-x: hidden;
-        overflow-y: auto;
-        &::-webkit-scrollbar {
-            width: 0;
-            display: none;
-        }
-        :global{
-            #musicAndSelection{
-                overflow: auto;
-                height: initial;
-                max-height: initial;
-            }
-        }
+        transition: height .3s;
+        overflow: hidden;
     }
 }
 

src/page-colexiu/detail/index.tsx

@@ -71,7 +71,6 @@ export default defineComponent({
 		};
 
 		const setState = (data: any, index: number) => {
-			state.scrollContainer = "scrollContainer";
 			state.appName = "COLEXIU";
 			state.detailId = data.id;
 			state.xmlUrl = data.xmlFileUrl;
@@ -123,7 +122,7 @@ export default defineComponent({
 			Promise.all([sysMusicScoreAccompanimentQueryPage(query.id)]).then((values) => {
 				getMusicInfo(values[0]);
 			});
-			api_setEventTracking()
+			api_setEventTracking();
 		});
 
 		/** 渲染完成 */
@@ -144,7 +143,7 @@ export default defineComponent({
 				const beatLengthInMilliseconds = osmd?.Sheet?.SheetPlaybackSetting?.beatLengthInMilliseconds || (60 / bpm) * 1000;
 				handleInitTick(beatLengthInMilliseconds, osmd?.Sheet?.SheetPlaybackSetting?.Rhythm?.Numerator || 4);
 			}
-			api_cloudLoading()
+			api_cloudLoading();
 		};
 		/** 指法配置 */
 		const fingerConfig = computed<any>(() => {
@@ -184,13 +183,9 @@ export default defineComponent({
 			() => state.setting.displayFingering,
 			() => {
 				if (state.fingeringInfo.direction === "vertical") {
-					if (state.setting.displayFingering) {
-						document.getElementById("musicAndSelection")?.style.removeProperty("--music-zoom");
-					} else {
-						nextTick(() => {
-							resetMusicScore();
-						});
-					}
+					nextTick(() => {
+						resetMusicScore();
+					});
 				}
 			}
 		);
@@ -210,7 +205,7 @@ export default defineComponent({
 		return () => (
 			<div
 				class={[styles.detail, state.setting.eyeProtection && "eyeProtection"]}
-				style={{ paddingLeft: detailData.paddingLeft, opacity:  state.setting.camera ? `${state.setting.cameraOpacity / 100}` : ''}}
+				style={{ paddingLeft: detailData.paddingLeft, opacity: state.setting.camera ? `${state.setting.cameraOpacity / 100}` : "" }}
 			>
 				{!state.musicRendered && (
 					<div class={styles.skeleton}>
@@ -222,7 +217,7 @@ export default defineComponent({
 				</div>
 				<div
 					id="scrollContainer"
-					style={{ ...fingerConfig.value.container }}
+					style={{ ...fingerConfig.value.container, height: detailData.headerHide ? "100vh" : "" }}
 					class={[styles.container, !state.setting.displayCursor && "hideCursor"]}
 					onClick={(e: Event) => {
 						if (state.playState === "play") {

src/page-orchestra/detail/index.tsx

@@ -78,8 +78,6 @@ export default defineComponent({
 		};
 
 		const setState = (data: any, index: number) => {
-			// console.log("🚀 ~ data:", data)
-			state.scrollContainer = "scrollContainer";
 			state.detailId = data.id;
 			state.xmlUrl = data.xmlFileUrl;
 			state.partIndex = index;
@@ -221,9 +219,7 @@ export default defineComponent({
 		return () => (
 			<div
 				class={[styles.detail, state.setting.eyeProtection && "eyeProtection"]}
-				style={{ paddingLeft: detailData.paddingLeft, opacity: state.setting.camera ? `${state.setting.cameraOpacity / 100}` : "",
-			// "--header-height": detailData.headerHide ? "0" : "1.65333rem" 
-		}}
+				style={{ paddingLeft: detailData.paddingLeft, opacity: state.setting.camera ? `${state.setting.cameraOpacity / 100}` : "" }}
 				onClick={(e: Event) => {
 					if (state.playState === "play") {
 						detailData.headerHide = !detailData.headerHide;
@@ -238,7 +234,11 @@ export default defineComponent({
 				<div class={[styles.headHeight, detailData.headerHide && styles.headHide]} onClick={(e: Event) => e.stopPropagation()}>
 					<Transition name="van-slide-down">{state.musicRendered && <HeaderTop />}</Transition>
 				</div>
-				<div id="scrollContainer" style={{ ...fingerConfig.value.container, "height": detailData.headerHide ? "100vh" : ""  }} class={[styles.container, !state.setting.displayCursor && "hideCursor"]}>
+				<div
+					id="scrollContainer"
+					style={{ ...fingerConfig.value.container, height: detailData.headerHide ? "100vh" : "" }}
+					class={[styles.container, !state.setting.displayCursor && "hideCursor"]}
+				>
 					{/* 曲谱渲染 */}
 					{!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
 					{/* 播放 */}

src/state.ts

@@ -166,7 +166,7 @@ export const onLoadedmetadata = (evt: Event) => {
 /** 在渲染前后计算光标应该走到的音符 */
 const setStep = () => {
 	if (state.playState !== "play") {
-		console.log("结束播放");
+		console.log("暂停播放");
 		return;
 	}
 	let startTime = Date.now();
@@ -216,6 +216,7 @@ const autoResetPlay = () => {
 
 /** 播放完成事件 */
 export const onEnded = () => {
+	console.log("音频播放结束");
 	// 修改状态为结束
 	state.playEnd = true;
 	state.playState = "paused";
@@ -474,7 +475,7 @@ export const scrollViewNote = () => {
 	offsetTop = cursorElement.offsetTop;
 	if (offsetTop > 50) {
 		musicAndSelection.scrollTo({
-			top: offsetTop * state.musicZoom - 25,
+			top: offsetTop * state.musicZoom - 30,
 			behavior: "smooth",
 		});
 	} else {

src/view/evaluating/index.tsx

@@ -217,7 +217,6 @@ const recordedPlayMusic = async (res?: IPostMessage) => {
  * @returns
  */
 export const handleEndEvaluat = (isComplete = false) => {
-	console.log("触发结束");
 	// 没有开始评测 , 不是评测模式 , 不评分
 	if (!evaluatingData.startBegin || state.modeType !== "evaluating") return;
 	evaluatingData.startBegin = false;