fix

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

@@ -9,14 +9,22 @@
     z-index: 10;
     --van-skeleton-paragraph-height: .8rem;
 }
-
+.bgContainer{
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: -10;
+    background: var(--container-background);
+}
 .detail {
+    position: relative;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     --header-height: 62px;
-    background: var(--container-background);
-
+    z-index: 1;
     .musicName {
         font-size: 16px;
         font-weight: bold;

src/page-orchestra/detail/index.tsx

@@ -70,10 +70,10 @@ export default defineComponent({
 			const musicInfo = {
 				...res.data,
 			};
-			if (res.data.background[index]){
-				for(let key in res.data.background[index]){
-					if (res.data.background[index][key]){
-						musicInfo[key] = res.data.background[index][key]
+			if (res.data.background[index]) {
+				for (let key in res.data.background[index]) {
+					if (res.data.background[index][key]) {
+						musicInfo[key] = res.data.background[index][key];
 					}
 				}
 			}
@@ -126,7 +126,7 @@ export default defineComponent({
 
 			// 检测是否原音和伴奏都有
 			if (!state.music || !state.accompany) {
-				state.playSource = state.music ? "music" : "background"
+				state.playSource = state.music ? "music" : "background";
 			}
 		};
 
@@ -228,79 +228,82 @@ export default defineComponent({
 
 		const guideShow = !localStorage.getItem("isFirstTip") || !localStorage.getItem("isFirstModel");
 		return () => (
-			<div
-				class={["van-safe-area-bottom", styles.detail, state.setting.eyeProtection && "eyeProtection"]}
-				style={{ paddingLeft: detailData.paddingLeft, opacity: state.setting.camera ? `${state.setting.cameraOpacity / 100}` : "" }}
-				onClick={(e: Event) => {
-					if (state.playState === "play") {
-						detailData.headerHide = !detailData.headerHide;
-					}
-				}}
-			>
-				{!state.musicRendered && (
-					<div class={styles.skeleton}>
-						<Skeleton class={styles.skeleton} row={8} />
-					</div>
-				)}
-				<div class={[styles.headHeight, detailData.headerHide && styles.headHide]} onClick={(e: Event) => e.stopPropagation()}>
-					<Transition name="van-slide-down">{state.musicRendered && <HeaderTop />}</Transition>
-				</div>
+			<div class={[state.setting.eyeProtection && "eyeProtection"]}>
+				<div style={{opacity: state.setting.camera ? `${state.setting.cameraOpacity / 100}` : ""}} class={styles.bgContainer}></div>
 				<div
-					id="scrollContainer"
-					style={{ ...fingerConfig.value.container, height: detailData.headerHide ? "100vh" : "" }}
-					class={[styles.container, !state.setting.displayCursor && "hideCursor"]}
+					class={["van-safe-area-bottom", styles.detail]}
+					style={{ paddingLeft: detailData.paddingLeft }}
+					onClick={(e: Event) => {
+						if (state.playState === "play") {
+							detailData.headerHide = !detailData.headerHide;
+						}
+					}}
 				>
-					{/* <div style={{display: detailData.headerHide ? 'none' : ''}} class={styles.musicName}>{state.examSongName}</div> */}
-					{/* 曲谱渲染 */}
-					{!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
-					{/* 播放 */}
-					{!detailData.isLoading && <AudioList />}
-					{/* 评测 */}
-					{state.modeType === "evaluating" && (
-						<>
-							<Evaluating />
-							{evaluatingData.rendered && <EvaluatModel />}
-						</>
+					{!state.musicRendered && (
+						<div class={styles.skeleton}>
+							<Skeleton class={styles.skeleton} row={8} />
+						</div>
 					)}
-					{/* 指法 */}
-					<Transition name={state.fingeringInfo.direction === "transverse" ? "v-slide-up" : "v-slide-right"}>
-						{state.setting.displayFingering && state.fingeringInfo?.name && (
-							<div style={{ ...fingerConfig.value.fingerBox }}>
-								<Fingering />
-							</div>
+					<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 style={{display: detailData.headerHide ? 'none' : ''}} class={styles.musicName}>{state.examSongName}</div> */}
+						{/* 曲谱渲染 */}
+						{!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
+						{/* 播放 */}
+						{!detailData.isLoading && <AudioList />}
+						{/* 评测 */}
+						{state.modeType === "evaluating" && (
+							<>
+								<Evaluating />
+								{evaluatingData.rendered && <EvaluatModel />}
+							</>
 						)}
-					</Transition>
-				</div>
+						{/* 指法 */}
+						<Transition name={state.fingeringInfo.direction === "transverse" ? "v-slide-up" : "v-slide-right"}>
+							{state.setting.displayFingering && state.fingeringInfo?.name && (
+								<div style={{ ...fingerConfig.value.fingerBox }}>
+									<Fingering />
+								</div>
+							)}
+						</Transition>
+					</div>
+
+					{/* 插件 */}
+					<div class="plugins-box">
+						{state.musicRendered && (
+							<>
+								{/* 设置选段小节速度 */}
+								{!query.questionId && !query.lessonTrainingId && <MeasureSpeed />}
+								{/* 统计训练时长 */}
+								{storeData.platformType === "STUDENT" && <RecordingTime />}
+								{/* 单元测验 和 课后训练 */}
+								{storeData.platformType === "STUDENT" && <UnitTest />}
+								{/* 学生端检测是否是会员 */}
+								{storeData.platformType === "STUDENT" && <CheckStudentVip />}
+								{/* 后台课后训练小节选择 */}
+								{storeData.platformType === "WEB" && <AfterClassTraining />}
+								{/* 引导 */}
+								{guideShow && <GuidePage />}
+							</>
+						)}
+					</div>
+					{/* 节拍器 */}
+					{state.needTick && <Tick />}
 
-				{/* 插件 */}
-				<div class="plugins-box">
-					{state.musicRendered && (
+					{/* 跟练模式 */}
+					{state.modeType === "follow" && (
 						<>
-							{/* 设置选段小节速度 */}
-							{!query.questionId && !query.lessonTrainingId && <MeasureSpeed />}
-							{/* 统计训练时长 */}
-							{storeData.platformType === "STUDENT" && <RecordingTime />}
-							{/* 单元测验 和 课后训练 */}
-							{storeData.platformType === "STUDENT" && <UnitTest />}
-							{/* 学生端检测是否是会员 */}
-							{storeData.platformType === "STUDENT" && <CheckStudentVip />}
-							{/* 后台课后训练小节选择 */}
-							{storeData.platformType === "WEB" && <AfterClassTraining />}
-							{/* 引导 */}
-							{guideShow && <GuidePage />}
+							<FollowPractice />
+							<FollowModel />
 						</>
 					)}
 				</div>
-				{/* 节拍器 */}
-				{state.needTick && <Tick />}
-
-				{/* 跟练模式 */}
-				{state.modeType === "follow" && (
-					<>
-						<FollowPractice />
-						<FollowModel />
-					</>
-				)}
 			</div>
 		);
 	},

src/page-orchestra/header-top/camera/index.module.less

@@ -0,0 +1,55 @@
+
+.cameraBox{
+    min-width: 260px;
+    :global{
+        .van-cell{
+            overflow: visible; 
+        }
+        .van-cell__value{
+            flex: 2;
+            overflow: visible;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+        }
+
+        .van-switch {
+            background-color: transparent !important;
+            background-image: url('../image/off.svg');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            background-position: center;
+            border-radius: 0;
+
+            &.van-switch--on {
+                background-image: url('../image/on.svg');
+            }
+
+            .van-switch__node {
+                display: none;
+            }
+        }
+    }
+}
+.sliderWrap {
+    :global {
+        .var-cell__extra {
+            flex: 2;
+        }
+    }
+}
+
+.slider {
+    width: 100%;
+    margin-right: 20px;
+
+    .sliderBtn {
+        width: 40px;
+        color: #fff;
+        font-size: 12px;
+        line-height: 20px;
+        text-align: center;
+        background-color: var(--van-primary-color);
+        border-radius: 20px;
+    }
+}

src/page-orchestra/header-top/camera/index.tsx

@@ -0,0 +1,42 @@
+import { defineComponent } from "vue";
+import styles from "./index.module.less";
+import { Cell, Slider, Switch } from "vant";
+import state from "/src/state";
+import { api_closeCamera, api_openCamera } from "/src/helpers/communication";
+
+export default defineComponent({
+	name: "camera",
+	setup() {
+		return () => (
+			<div class={styles.cameraBox}>
+				<Cell title="摄像头" center>
+					{{
+						value: () => (
+							<Switch
+								v-model={state.setting.camera}
+								onChange={(value) => {
+									if (value) {
+										api_openCamera();
+									} else {
+										api_closeCamera();
+									}
+								}}
+							></Switch>
+						),
+					}}
+				</Cell>
+				<Cell style={{ display: state.setting.camera ? "" : "none" }} title="透明度" class={styles.sliderWrap} center>
+					{{
+						value: () => (
+							<Slider class={styles.slider} min={0} max={100} v-model:modelValue={state.setting.cameraOpacity}>
+								{{
+									button: () => <div class={styles.sliderBtn}>{state.setting.cameraOpacity}</div>,
+								}}
+							</Slider>
+						),
+					}}
+				</Cell>
+			</div>
+		);
+	},
+});

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

@@ -5,7 +5,6 @@
     height: 100%;
     flex-shrink: 0;
     padding: 8px 10px;
-    background: var(--container-background);
     padding-bottom: 0;
 }
 
@@ -121,4 +120,4 @@
             pointer-events: auto;
         }
     }
-}
+}

src/page-orchestra/header-top/index.tsx

@@ -17,12 +17,16 @@ import { api_back, api_suspendPlay } from "/src/helpers/communication";
 import MusicType from "./music-type";
 import { handleNoEndExit } from "../custom-plugins/recording-time";
 import { handle_stopFollow } from "../follow-model";
+import Camera from "./camera";
+import iconCamera from './image/icon-camera-off.png'
+import iconCameraOn from './image/icon-camera-on.png'
 
 export const headData = reactive({
 	speedShow: false,
 	musicTypeShow: false,
 	modeMode: true, // 模式弹框
 	settingMode: false, // 设置弹框
+	cameraShow: false, // 摄像头
 });
 
 /** 关闭模式选择 */
@@ -103,6 +107,21 @@ export default defineComponent({
 			};
 		});
 
+		/** 摄像头按钮 */
+		const cameraBtn = computed(() => {
+			// 选择模式 不显示
+			if (headData.modeMode) return { display: false, disabled: false };
+			// 音频播放中 禁用
+			if (state.playState === "play") return { display: true, disabled: true };
+			// 评测模式 不显示,跟练模式 不显示
+			if (state.modeType !== 'evaluating') return { display: false, disabled: true };
+
+			return {
+				disabled: false,
+				display: true,
+			};
+		});
+
 		/** 选段按钮 */
 		const selectBtn = computed(() => {
 			// 选择模式 不显示
@@ -125,9 +144,9 @@ export default defineComponent({
 			// 跟练模式 不显示
 			if (state.modeType === "follow") return { display: false, disabled: true };
 			// 评测开始 禁用
-			if (state.modeType === "evaluating") return { display: true, disabled: true };
+			if (state.modeType === "evaluating") return { display: false, disabled: true };
 			// 原声, 伴奏 少一个,就不能切换
-			if (!state.music || !state.accompany) return { display: true, disabled: true}
+			if (!state.music || !state.accompany) return { display: true, disabled: true };
 
 			return {
 				disabled: false,
@@ -220,7 +239,10 @@ export default defineComponent({
 							headData.modeMode = true;
 						}}
 					>
-						<img class={styles.iconBtn} src={icons.modelType} />
+						<img
+							class={styles.iconBtn}
+							src={state.modeType === "practise" ? icons.modelType : state.modeType === "evaluating" ? icons.modelType2 : icons.modelType1}
+						/>
 						<span>模式</span>
 					</div>
 
@@ -282,6 +304,28 @@ export default defineComponent({
 						<span style={{ whiteSpace: "nowrap" }}>节拍器</span>
 					</div> */}
 
+					{/* 摄像头按钮 */}
+					<Popover trigger="manual" v-model:show={headData.cameraShow} placement="bottom" overlay={false}>
+						{{
+							reference: () => (
+								<div
+									id="tips-step-4"
+									style={{ display: cameraBtn.value.display ? "" : "none" }}
+									class={[styles.btn, cameraBtn.value.disabled && styles.disabled]}
+									onClick={(e: Event) => {
+										e.stopPropagation();
+										headData.cameraShow = !headData.cameraShow;
+									}}
+								>
+									<img style={{display: state.setting.camera ? 'none' : ''}} class={styles.iconBtn} src={iconCamera} />
+									<img style={{display: state.setting.camera ? '' : 'none'}} class={styles.iconBtn} src={iconCameraOn} />
+									<span>摄像头</span>
+								</div>
+							),
+							default: () => <Camera />,
+						}}
+					</Popover>
+
 					{/* 速度按钮 */}
 					<Popover trigger="manual" v-model:show={headData.speedShow} placement="bottom" overlay={false}>
 						{{
@@ -318,7 +362,7 @@ export default defineComponent({
 									}}
 								>
 									<img class={styles.iconBtn} src={icons["icon-zhuanpu"]} />
-									<span>{ state.musicRenderType === 'staff' ? '转简谱' : '转五线谱'}</span>
+									<span>{state.musicRenderType === "staff" ? "转简谱" : "转五线谱"}</span>
 								</div>
 							),
 							default: () => <MusicType />,

src/page-orchestra/header-top/settting/index.module.less

@@ -152,29 +152,6 @@
     }
 }
 
-.sliderWrap {
-    :global {
-        .var-cell__extra {
-            flex: 2;
-        }
-    }
-}
-
-.slider {
-    width: 60%;
-    margin-right: 20px;
-
-    .sliderBtn {
-        width: 40px;
-        color: #fff;
-        font-size: 12px;
-        line-height: 20px;
-        text-align: center;
-        background-color: var(--van-primary-color);
-        border-radius: 20px;
-    }
-}
-
 .btnsbar {
     position: absolute;
     bottom: 12px;

src/page-orchestra/header-top/settting/index.tsx

@@ -10,6 +10,7 @@ import iconTv from "../image/tv.png";
 import iconYijian from "../image/yijian.png";
 import ScreenModel from "../../custom-plugins/helper-model/screen-model";
 import Recommendation from "../../custom-plugins/helper-model/recommendation";
+import Camera from "../camera";
 
 export default defineComponent({
 	name: "header-settting",
@@ -74,33 +75,7 @@ export default defineComponent({
 									value: () => <Switch v-model={state.setting.soundEffect}></Switch>,
 								}}
 							</Cell>
-							<Cell title="摄像头" center>
-								{{
-									value: () => (
-										<Switch
-											v-model={state.setting.camera}
-											onChange={(value) => {
-												if (value) {
-													api_openCamera();
-												} else {
-													api_closeCamera();
-												}
-											}}
-										></Switch>
-									),
-								}}
-							</Cell>
-							<Cell style={{ display: state.setting.camera ? "" : "none" }} title="透明度" class={styles.sliderWrap} center>
-								{{
-									value: () => (
-										<Slider class={styles.slider} min={0} max={100} v-model:modelValue={state.setting.cameraOpacity}>
-											{{
-												button: () => <div class={styles.sliderBtn}>{state.setting.cameraOpacity}</div>,
-											}}
-										</Slider>
-									),
-								}}
-							</Cell>
+							<Camera />
 							<Cell title="保存到相册" center>
 								{{
 									value: () => <Switch v-model={state.setting.saveToAlbum}></Switch>,