曲目切换和模式选择 在播放过程中的显示隐藏

src/page-instrument/component/the-music-list/index.tsx

@@ -9,7 +9,7 @@ import { getQuery } from "/src/utils/queryString";
 
 const query: any = getQuery();
 export const isMusicList = computed(()=>{
-	return !(state.playState == "play" || followData.start || evaluatingData.startBegin || query.workRecord || query.modelType || state.platform === IPlatform.PC || query.isCbs)
+	return !(query.workRecord || query.modelType || state.platform === IPlatform.PC || query.isCbs)
 })
 export const musicListShow = ref(false)
 export default defineComponent({

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

@@ -1,9 +1,10 @@
 .headerTop {
     display: flex;
     align-items: center;
-    width: 100%;
+    width: 100vw;
     height: 100%;
     flex-shrink: 0;
+    margin-left: calc(-1 * var(--detailDataPaddingLeft));
     padding: 0 30px;
     background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
 }

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

@@ -398,8 +398,8 @@ export default defineComponent({
     const toggleBtn = computed(() => {
       // 选择模式, url设置模式 不显示
       if (headTopData.modeType !== "show" || !headTopData.showBack) return { display: false, disabled: false };
-      // 跟练开始, 评测开始 禁用
-      if (followData.start || evaluatingData.startBegin) return { display: true, disabled: true };
+      // 跟练开始, 评测开始 播放开始 隐藏
+      if (state.playState == "play" || followData.start || evaluatingData.startBegin) return { display: false, disabled: false };
 
       return {
         display: true,
@@ -602,24 +602,27 @@ export default defineComponent({
           }}
         >
           {/* 返回和标题 */}
-          <div class={styles.headTopLeftBox}>
-            <img src={iconBack} class={['headTopBackBtn', styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
-            {
-              state.modeType === "practise" && smoothAnimationState.isShow.value ?
-                <div class={[styles.title,isMusicList.value && styles.isMusicList]} onClick={()=>{
-                  isMusicList.value && (musicListShow.value = true)
-                }}>
-                  <NoticeBar
-                    text={state.examSongName}
-                    background="none"
-                  />
-              </div> :
-                isMusicList.value &&
-                <img src={listImg} class={[styles.img]} onClick={()=>{
-                  musicListShow.value = true
-                }} />
-            }
-          </div>
+          {
+            !(state.playState == "play" || followData.start || evaluatingData.startBegin) &&
+              <div class={styles.headTopLeftBox}>
+                <img src={iconBack} class={['headTopBackBtn', styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
+                {
+                  smoothAnimationState.isShow.value ?
+                    <div class={[styles.title,isMusicList.value && styles.isMusicList]} onClick={()=>{
+                        isMusicList.value && (musicListShow.value = true)
+                      }}>
+                        <NoticeBar
+                          text={state.examSongName}
+                          background="none"
+                        />
+                    </div> :
+                    isMusicList.value &&
+                    <img src={listImg} class={[styles.img]} onClick={()=>{
+                      musicListShow.value = true
+                    }} />
+                }
+              </div>
+          }
           {/* 模式切换 */}
             { 
             state.playType === "play" &&

src/page-instrument/view-detail/index.tsx

@@ -90,7 +90,7 @@ export default defineComponent({
     const detailData = reactive({
       isLoading: true,
       skeletonLoading: true,
-      paddingLeft: "",
+      paddingLeft: "0px",
       headerHide: false,
       fingerPreView: false,
       fingerPreViewAnimation: false,
@@ -456,6 +456,7 @@ export default defineComponent({
       <div
         class={[styles.detail, styles[state.modeType], state.setting.eyeProtection && "eyeProtection", (state.platform === IPlatform.PC && state.zoom > 0.8) && styles.PC, state.isPreView && styles.preViewDetail]}
         style={{
+          '--detailDataPaddingLeft': detailData.paddingLeft,
           paddingLeft: detailData.paddingLeft,
           background: state.setting.camera ? `rgba(${state.setting.eyeProtection ? "253,244,229" : "255,255,255"} ,${state.setting.cameraOpacity / 100}) !important` : "",
         }}