新ui 按钮 背景

src/page-instrument/header-top/image/icon-back.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="15px" height="24px" viewBox="0 0 15 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g transform="translate(-40.000000, -22.000000)" fill="#494949" fill-rule="nonzero" id="形状" stroke="#494949">
-            <path d="M42.2681508,32.7499394 C42.5890877,32.7499394 42.9114702,32.8699082 43.168798,33.0950183 L53.620931,42.6520856 C53.8607785,42.8704624 53.997204,43.1690827 53.9999596,43.4816468 C54.0026326,43.7942108 53.8714111,44.0948519 53.6353876,44.3168215 C53.138464,44.7783404 52.3366638,44.7837362 51.8326476,44.3289532 L41.379069,34.7718859 C41.1392215,34.5535091 41.002796,34.2548888 41.0000404,33.9423247 C40.9973673,33.6297606 41.1285889,33.3291196 41.3646123,33.1071499 C41.5948722,32.8710256 41.9246144,32.7409471 42.2667051,32.7512873 L42.2681508,32.7499394 Z M52.7106158,23 C53.0356188,23 53.3591643,23.117702 53.6185837,23.3424057 C53.8599334,23.5590403 53.9971822,23.8550613 53.9999596,24.1648752 C54.0026536,24.474689 53.8706502,24.7727125 53.6331578,24.9929083 L43.1980856,34.5695682 C42.6976948,35.027014 41.8904764,35.0329595 41.3821498,34.5829434 C41.1403528,34.3662582 41.0028184,34.0699512 41.0000404,33.7598084 C40.9973456,33.4496656 41.1296337,33.1513535 41.3675757,32.9311033 L51.8026479,23.3544434 C52.0474932,23.117702 52.3856129,23 52.7106158,23 Z"></path>
-        </g>
-    </g>
-</svg>

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

@@ -4,161 +4,80 @@
     width: 100%;
     height: 100%;
     flex-shrink: 0;
-    padding: 0 20px 0 8px;
-    background: var(--container-background);
-    padding-bottom: 0;
-    transform: translateY(-100%);
-    animation: headerDown .3s .5s ease-in-out forwards;
-
-    &.headRightTop {
-        transform: translateY(100%);
-        transition: margin-top .2s ease;
-        margin-top: 0;
-    }
-
-    &.headRightTopHide {
-        transition: margin-top .2s ease;
-        margin-top: 12px;
-    }
-    &::before {
-        content: "";
-        position: absolute;
-        left: -30px;
-        height: 100%;
-        width: 50px;
-        background: var(--container-background);
-        z-index: 0;
-    }
+    padding: 0 30px;
+    background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
 }
-
-@keyframes headerDown {
-    100% {
-        transform: translateY(0%);
+.headTopLeftBox{
+    position: fixed;
+    top: 20px;
+    left: 30px;
+    display: flex;
+    align-items: center;
+    .img{
+        width: 32px;
+        height: 32px;
+    }
+    .title{
+        margin-left: 10px;
+        font-weight: 600;
+        font-size: 18px;
+        color: #FFFFFF;
+    }
+    .hidenBack {
+        opacity: 0;
+        pointer-events: none;
     }
 }
-
-.back {
+.modeChangeBox{
+    position: fixed;
+    top: 20px;
+    right: 30px;
+    width: 100px;
+    height: 32px;
+    background: rgba(0, 0, 0, .4);
+    border-radius: 16px;
     display: flex;
     align-items: center;
-    height: 100%;
-    cursor: pointer;
-
-    img {
-        display: block;
-        width: 24px;
-        height: 24px;
-        z-index: 9;
+    padding: 0 10px;
+    .img{
+        width: 18px;
+        height: 18px;
+    }
+    .title{
+        margin-left: 6px;
+        font-weight: 500;
+        font-size: 14px;
+        color: #FFFFFF;
     }
 }
-
-.hidenBack {
-    opacity: 0;
-    pointer-events: none;
-}
-
 .headRight {
     display: flex;
     align-items: center;
-    margin-left: auto;
     height: 100%;
-}
-.pcHeadRight {
-    width: 100%;
-    justify-content: center;
-}
-
-.btn {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    font-size: 10px;
-    line-height: 14px;
-    font-weight: 400;
-    // padding: 4px 6px;
-    border-radius: 4px;
-    color: #999;
-    cursor: pointer;
-    margin-right: 16px;
-    margin-top: -12px;
-    .iconBtn {
-        display: block;
-        width: 25px;
-        height: 25px;
-    }
-
-    span {
-        white-space: nowrap;
-        position: absolute;
-        left: 50%;
-        top: 27px;
-        transform: translateX(-50%);
-    }
-
-    .btnWrap {
+    .btn {
         position: relative;
-        width: 25px;
-        height: 25px;
-    }
-
-    .progress {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 85%;
-        height: 85%;
-    }
-    .iconContent {
-        // position: relative;
-        .arrowIcon {
-            position: absolute;
-            left: 50%;
-            top: 14PX;
-            transform: translateX(-8PX);
-            width: 0;
-            height: 0;
-            border-bottom: 8PX solid rgba(33, 33, 33, 0.56);
-            border-right: 8PX solid transparent;
-            border-left: 8PX solid transparent;  
-            z-index: 2;      
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        cursor: pointer;
+        margin-right: 40px;
+        &:last-child{
+            margin-right: 0;
         }
-        .botton-tips {
-            position: absolute;
-            left: -80PX;
-            top: 22PX;
-            background: rgba(33, 33, 33, 0.56);
-            font-size: 14PX;
+        .iconBtn {
+            width: 24px;
+            height: 24px;
+        }
+        span {
+            margin-top: 3px;
             font-weight: 500;
+            font-size: 12px;
             color: #FFFFFF;
-            padding: 3PX 10PX;
-            word-break: keep-all;
-            z-index: 1;
-            border-radius: 20PX;
-            z-index: 9;
-            &.tipSpec {
-                left: -50PX;
-            }
-        }          
-    }     
-    &.pcBtn {
-        .arrowIcon {
-            top: initial;
-            bottom: 68PX;
-            transform: translateX(-8PX) rotate(180deg);
-        }
-        .botton-tips {
-            top: initial;
-            bottom: 76PX;
+            line-height: 17px;
         }
     }
 }
 
-.setBtn {
-    margin-right: 0;
-}
-
 .disabled {
     pointer-events: none;
     opacity: .5;
@@ -179,13 +98,12 @@
 
 .playBtn {
     position: fixed;
-    right: 32px;
-    bottom: 32px;
+    right: 30px;
+    bottom: 12px;
     transition: bottom .2s ease;
-
     .btnWrap {
-        width: 36px;
-        height: 36px;
+        width: 50px;
+        height: 50px;
 
         .iconBtn {
             display: block;
@@ -193,7 +111,6 @@
             height: 100%;
         }
     }
-
     &.playLeftButton {
         left: 46px !important;
         right: auto !important;
@@ -205,24 +122,27 @@
         left: auto !important;
         bottom: 12px !important;
     }
-
-    &.playButtonHide {
-        transition: bottom .2s ease;
-        bottom: 60px !important;
+    
+    .progress {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 85%;
+        height: 85%;
     }
-
 }
 
 .resetBtn {
     position: fixed;
-    right: 88px;
-    bottom: 32px;
+    right: 100px;
+    bottom: 12px;
     transition: bottom .2s ease;
 
     .iconBtn {
         display: block;
-        width: 36px;
-        height: 36px;
+        width: 50px;
+        height: 50px;
     }
 
     &.pauseLeftButton {
@@ -236,11 +156,6 @@
         left: auto !important;
         bottom: 12px !important;
     }
-
-    &.playButtonHide {
-        transition: bottom .2s ease;
-        bottom: 60px !important;
-    }
 }
 
 :global {

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

@@ -1,7 +1,8 @@
 import { Transition, computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch, toRef } from "vue";
 import styles from "./index.module.less";
 
-import iconBack from "./image/icon-back.svg";
+import iconBack from "./image/icon-back.png";
+import iconMode from "./image/mode.png";
 import Title from "./title";
 import { headImg } from "./image";
 import { Badge, Circle, Popover, Popup, showConfirmDialog, showToast } from "vant";
@@ -311,12 +312,6 @@ export default defineComponent({
       if (res?.data?.api === "setPlayState") {
         togglePlay("paused", "courseware");
       }
-
-      // 菜单状态
-      if ((state.platform === IPlatform.PC && res?.data?.api) === "attendClassBarStatus") {
-        // state.attendHideMenu = res?.data?.hideMenu;
-      }
-
       // 上课页面，按钮方向
       if (res?.data?.api === "imagePos") {
         if (res?.data.data) {
@@ -390,7 +385,7 @@ export default defineComponent({
     return () => (
       <>
         <div
-          class={[styles.headerTop, state.platform === IPlatform.PC && styles.headRightTop, state.platform === IPlatform.PC && !state.attendHideMenu && styles.headRightTopHide]}
+          class={[styles.headerTop]}
           onClick={(e: Event) => {
             e.stopPropagation();
             if (state.platform === IPlatform.PC) {
@@ -404,32 +399,33 @@ export default defineComponent({
             }
           }}
         >
-          <div class={[styles.back, "headTopBackBtn", !headTopData.showBack && styles.hidenBack]} onClick={handleBack}>
-            <img src={iconBack} />
+          {/* 返回和标题 */}
+          <div class={styles.headTopLeftBox}>
+            <img src={iconBack} class={['headTopBackBtn', styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
+            <div class={styles.title}>{state.examSongName}</div>
           </div>
-          {query.iscurseplay === "play" || state.platform === IPlatform.PC ? null : <Title class="pcTitle" text={state.examSongName} rightView={false} />}
-
+          {/* 模式切换 */}
+          <div 
+            id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
+            style={{ display: toggleBtn.value.display ? "" : "none" }}
+            class={[styles.modeChangeBox, toggleBtn.value.disabled && styles.disabled]} 
+            onClick={() => {
+                handleRessetState();
+                headTopData.modeType = "init";
+            }}
+          >
+            <img class={styles.img} src={iconMode} />
+            <div class={styles.title}>{state.modeType==="practise" ? '练习模式' : state.modeType==="follow" ? "跟练模式" : state.modeType==="evaluating" ? "评测模式" : ""}</div>
+          </div>
+          {/* 功能按钮 */}
           <div
-            class={[styles.headRight, state.platform === IPlatform.PC && styles.pcHeadRight]}
+            class={[styles.headRight]}
             onClick={(e: Event) => {
               e.stopPropagation();
             }}
           >
-            <div
-              id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
-              style={{ display: toggleBtn.value.display ? "" : "none" }}
-              class={[styles.btn, toggleBtn.value.disabled && styles.disabled]}
-              onClick={() => {
-                handleRessetState();
-                headTopData.modeType = "init";
-              }}
-            >
-              <img class={styles.iconBtn} src={headImg(`modeType.svg`)} />
-              <span>模式</span>
-            </div>
-
             {/* 一行谱模式，暂不支持节拍指针 */}
-            {!state.isSingleLine ? (
+            {/* {!state.isSingleLine ? (
               <div
                 class={[styles.btn, state.platform === IPlatform.PC ? styles.pcBtn : ""]}
                 onClick={() => {
@@ -454,19 +450,17 @@ export default defineComponent({
                   )}
                 </span>
               </div>
-            ) : null}
-
-            {state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert && (
-              <div
-                class={[styles.btn, state.playState === "play" && fingeringBtn.value.disabled && styles.disabled]}
-                onClick={() => {
-                  toggleMusicSheet.toggle(true);
-                }}
-              >
-                <img class={styles.iconBtn} src={headImg(`shenggui.svg`)} />
-                <span>声轨</span>
-              </div>
-            )}
+            ) : null} */}
+            <div
+              class={[styles.btn]}
+              onClick={() => {
+                state.playType = state.playType === "perform" ? "sing" : "perform";
+              }}
+            >
+              <img style={{ display: state.playType === "perform" ? "" : "none" }} class={styles.iconBtn} src={headImg(`perform.png`)} />
+              <img style={{ display: state.playType === "perform" ? "none" : "" }} class={styles.iconBtn} src={headImg(`sing.png`)} />
+              <span>{state.playType === "perform" ? "演奏" : "演唱"}</span>
+            </div>
             <div
               id={state.platform === IPlatform.PC ? "teacherTop-1" : "studnetT-1"}
               style={{ display: originBtn.value.display ? "" : "none" }}
@@ -475,10 +469,16 @@ export default defineComponent({
                 state.playSource = state.playSource === "music" ? "background" : "music";
               }}
             >
-              <img style={{ display: state.playSource === "music" ? "" : "none" }} class={styles.iconBtn} src={headImg(`music.svg`)} />
-              <img style={{ display: state.playSource === "music" ? "none" : "" }} class={styles.iconBtn} src={headImg(`background.svg`)} />
+              <img style={{ display: state.playSource === "music" ? "" : "none" }} class={styles.iconBtn} src={headImg(`music.png`)} />
+              <img style={{ display: state.playSource === "music" ? "none" : "" }} class={styles.iconBtn} src={headImg(`background.png`)} />
               <span>{state.playSource === "music" ? "原声" : "伴奏"}</span>
             </div>
+            <div id={state.platform === IPlatform.PC ? "teacherTop-2" : "studnetT-2"} style={{ display: selectBtn.value.display ? "" : "none" }} class={[styles.btn, selectBtn.value.disabled && styles.disabled]} onClick={() => handleChangeSection()}>
+              <img style={{ display: state.section.length === 0 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section0.png`)} />
+              <img style={{ display: state.section.length === 1 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section1.png`)} />
+              <img style={{ display: state.section.length === 2 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section2.png`)} />
+              <span>选段</span>
+            </div>
             {state.modeType !== "evaluating" && (
               <div
                 class={[styles.btn]}
@@ -487,18 +487,12 @@ export default defineComponent({
                   metronomeData.metro?.initPlayer();
                 }}
               >
-                <img style={{ display: metronomeData.disable ? "block" : "none" }} class={styles.iconBtn} src={headImg("tickoff.svg")} />
-                <img style={{ display: !metronomeData.disable ? "block" : "none" }} class={styles.iconBtn} src={headImg("tickon.svg")} />
+                <img style={{ display: metronomeData.disable ? "block" : "none" }} class={styles.iconBtn} src={headImg("tickon.png")} />
+                <img style={{ display: !metronomeData.disable ? "block" : "none" }} class={styles.iconBtn} src={headImg("tickoff.png")} />
                 <span style={{ whiteSpace: "nowrap" }}>节拍器</span>
               </div>
             )}
-            <div id={state.platform === IPlatform.PC ? "teacherTop-2" : "studnetT-2"} style={{ display: selectBtn.value.display ? "" : "none" }} class={[styles.btn, selectBtn.value.disabled && styles.disabled]} onClick={() => handleChangeSection()}>
-              <img style={{ display: state.section.length === 0 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section0.svg`)} />
-              <img style={{ display: state.section.length === 1 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section1.svg`)} />
-              <img style={{ display: state.section.length === 2 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section2.svg`)} />
-              <span>选段</span>
-            </div>
-            <div
+            {/* <div
               id={state.platform === IPlatform.PC ? "teacherTop-3" : "studnetT-3"}
               style={{ display: fingeringBtn.value.display ? "" : "none" }}
               class={[styles.btn, fingeringBtn.value.disabled && styles.disabled]}
@@ -509,9 +503,9 @@ export default defineComponent({
               <img style={{ display: state.setting.displayFingering ? "" : "none" }} class={styles.iconBtn} src={headImg(`icon_evaluatingOn.svg`)} />
               <img style={{ display: state.setting.displayFingering ? "none" : "" }} class={styles.iconBtn} src={headImg(`icon_evaluatingOff.svg`)} />
               <span>指法</span>
-            </div>
+            </div> */}
 
-            <Popover trigger="manual" v-model:show={headData.speedShow} placement={state.platform === IPlatform.PC ? "top" : "bottom"} overlay={false} offset={state.platform === IPlatform.PC ? [8, 40] : [0, 8]}>
+            {/* <Popover trigger="manual" v-model:show={headData.speedShow} placement={state.platform === IPlatform.PC ? "top" : "bottom"} overlay={false} offset={state.platform === IPlatform.PC ? [8, 40] : [0, 8]}>
               {{
                 reference: () => (
                   <div
@@ -531,8 +525,8 @@ export default defineComponent({
                 ),
                 default: () => <Speed />,
               }}
-            </Popover>
-            {state.enableNotation ? (
+            </Popover> */}
+            {/* {state.enableNotation ? (
               <Popover trigger="manual" v-model:show={headData.musicTypeShow} class={state.platform === IPlatform.PC && styles.pcTransPop} placement={state.platform === IPlatform.PC ? "top-end" : "bottom-end"} overlay={false} offset={state.platform === IPlatform.PC ? [0, 40] : [0, 8]}>
                 {{
                   reference: () => (
@@ -552,9 +546,20 @@ export default defineComponent({
                   default: () => <MusicType />,
                 }}
               </Popover>
-            ) : null}
-            <div id={state.platform === IPlatform.PC ? "teacherTop-6" : "studnetT-6"} style={{ display: settingBtn.value.display ? "" : "none" }} class={[styles.btn, styles.setBtn, settingBtn.value.disabled && styles.disabled]} onClick={() => (headTopData.settingMode = true)}>
-              <img class={styles.iconBtn} src={headImg("icon_menu.svg")} />
+            ) : null} */}
+            {state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert && (
+              <div
+                class={[styles.btn, state.playState === "play" && fingeringBtn.value.disabled && styles.disabled]}
+                onClick={() => {
+                  toggleMusicSheet.toggle(true);
+                }}
+              >
+                <img class={styles.iconBtn} src={headImg(`shenggui.png`)} />
+                <span>声轨</span>
+              </div>
+            )}
+            <div id={state.platform === IPlatform.PC ? "teacherTop-6" : "studnetT-6"} style={{ display: settingBtn.value.display ? "" : "none" }} class={[styles.btn, settingBtn.value.disabled && styles.disabled]} onClick={() => (headTopData.settingMode = true)}>
+              <img class={styles.iconBtn} src={headImg("icon_menu.png")} />
               <span>设置</span>
             </div>
           </div>
@@ -565,18 +570,16 @@ export default defineComponent({
           id="studnetT-7"
           style={{ display: playBtn.value.display ? "" : "none" }}
           class={[
-            styles.btn,
             styles.playBtn,
             playBtn.value.disabled && styles.disabled,
             state.platform === IPlatform.PC && state.musicScoreBtnDirection === "left" ? styles.playLeftButton : state.platform === IPlatform.PC && state.musicScoreBtnDirection === "right" ? styles.playRightButton : "",
-            state.platform === IPlatform.PC && !state.attendHideMenu && styles.playButtonHide,
           ]}
           onClick={() => togglePlay()}
         >
           <div class={styles.btnWrap}>
-            <img style={{ display: state.playState === "play" ? "none" : "" }} class={styles.iconBtn} src={headImg(state.platform === IPlatform.PC ? "pc_icon_playbtn.png" : "icon_play.svg")} />
-            <img style={{ display: state.playState === "play" ? "" : "none" }} class={styles.iconBtn} src={headImg(state.platform === IPlatform.PC ? "pc_icon_pausebtn.png" : "icon_pause.svg")} />
-            <Circle style={{ opacity: state.playState === "play" ? 1 : 0 }} class={styles.progress} stroke-width={80} currentRate={state.playProgress} rate={100} color="#FFC830" />
+            <img style={{ display: state.playState === "play" ? "none" : "" }} class={styles.iconBtn} src={headImg("icon_play.png")} />
+            <img style={{ display: state.playState === "play" ? "" : "none" }} class={styles.iconBtn} src={headImg("icon_pause.png")} />
+            <Circle style={{ opacity: state.playState === "play" ? 1 : 0 }} class={styles.progress} stroke-width={80} currentRate={state.playProgress} rate={100} color="#FFED78" layer-color="rgba(0,0,0,0)" />
           </div>
         </div>
 
@@ -585,15 +588,13 @@ export default defineComponent({
           id="tips-step-9"
           style={{ display: resetBtn.value.display ? "" : "none" }}
           class={[
-            styles.btn,
             styles.resetBtn,
             resetBtn.value.disabled && styles.disabled,
             state.platform === IPlatform.PC && state.musicScoreBtnDirection === "left" ? styles.pauseLeftButton : state.platform === IPlatform.PC && state.musicScoreBtnDirection === "right" ? styles.pauseRightButton : "",
-            state.platform === IPlatform.PC && !state.attendHideMenu && styles.playButtonHide,
           ]}
           onClick={() => handleResetPlay()}
         >
-          <img class={styles.iconBtn} src={headImg(state.platform === IPlatform.PC ? "pc_icon_resetbtn.png" : "icon_resetbtn.svg")} />
+          <img class={styles.iconBtn} src={headImg("icon_reset.png")} />
         </div>
 
         <Popup v-model:show={headTopData.settingMode} class="popup-custom van-scale center-closeBtn settingBoxClass_drag" transition="van-scale" teleport="body" closeable style={positionInfo.styleDrag.value}>
@@ -604,14 +605,6 @@ export default defineComponent({
         {/* 模式切换 */}
         <ModeTypeMode />
 
-        {/* // 从课堂乐器学生端课件预览默认不显示会员
-        if (storeData.user.vipMember || state.paymentType === "FREE" || query.showCourseMember === "true") {
-          // 学生端
-          data.showStudent = true;
-        } else {
-          // vip
-          data.showVip = true;
-        } */}
         {/* isAllBtns */}
         {isAllBtns.value && !query.isCbs && showGuideIndex.value && <TeacherTop></TeacherTop>}
         {isAllBtnsStudent.value && !query.isCbs && showGuideIndex.value && <StudentTop></StudentTop>}

src/page-instrument/modeEntry/index.module.less

@@ -1,40 +0,0 @@
-.modeEntry {
-   width: 100vw;
-   height: 100vh;
-}
-
-.modeView {
-   position: fixed;
-   z-index: 99;
-   top: 0;
-   left: 0;
-   width: 100vw;
-   height: 100vh;
-   background: url(./images/bg.png) no-repeat;
-   background-size: 100% 100%;
-   .back {
-      position: absolute;
-      width: 38px;
-      height: 38px;
-      left: 27px;
-      top: 17px;
-   }
-   .name {
-      position: absolute;
-      left: 50%;
-      top: 23px;
-      transform: translateX(-50%);
-      width: 87px;
-      height: 21px;
-   }
-   .modeBox {
-      width: 100%;
-      margin-top: 90px;
-      display: flex;
-      justify-content: space-between;
-      padding: 0 36px;
-      > img {
-         width: calc((100% - 2*40px)/3);
-      }
-   }
-}

src/page-instrument/modeEntry/index.tsx

@@ -1,17 +0,0 @@
-import { defineComponent } from "vue"
-import styles from "./index.module.less"
-import ViewDetail from "../view-detail"
-import ModeView from "./modeView"
-import { headTopData } from "../header-top"
-
-export default defineComponent({
-   name: "modeEntry",
-   setup() {
-      return () => (
-         <div class={styles.modeEntry}>
-            <ViewDetail></ViewDetail>
-            {headTopData.modeType === "init" && <ModeView></ModeView>}
-         </div>
-      )
-   }
-})

src/page-instrument/router.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
-import Home from "./modeEntry";
+import Home from "./view-detail";
 import Notfind from "../view/notfind";
 
 const routes: RouteRecordRaw[] = [

src/page-instrument/view-detail/index.module.less

@@ -11,48 +11,27 @@
 }
 
 .detail {
+    position: relative;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
-    --header-height: 62px;
-    --pc-header-height: 54px;
-    background: var(--container-background);
+    --header-height: 80px;
+    --pc-header-height: 72px;
+    &.practise{
+        background: url("./images/bg1.png") no-repeat;
+        background-size: 100% 100%;
+    }
 
     .headHeight {
-        position: relative;
+        position: absolute;
+        bottom: 0;
         width: 100%;
         height: var(--header-height);
         transition: all .3s;
-        // bottom: 0;
         z-index: 10;
 
         &.headHide {
-            margin-top: calc(0Px - var(--header-height));
-        }
-
-        &.pcHeadHideBottom {
-            margin-bottom: calc(-var(--header-height));
-        }
-    }
-
-    .pcHead {
-        height: var(--pc-header-height);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transform: translateY(-100%);
-        animation: headerDown .3s .5s ease-in-out forwards;
-        transition: all .3s;
-        &.pcHeadHide {
-            margin-top: calc(0Px - var(--pc-header-height));
-        }
-        &.pcHeadHideBottom {
-            bottom: calc(var(--header-height));
-        }
-        :global {
-            .van-notice-bar__wrap {
-                justify-content: center;
-            }
+            margin-bottom: calc(0Px - var(--header-height));
         }
     }
 
@@ -244,4 +223,40 @@
     100% {
         transform: translateY(0%);
     }
+}
+
+.modeView {
+    position: fixed;
+    z-index: 99;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: url(./images/bg.png) no-repeat;
+    background-size: 100% 100%;
+    .back {
+        position: absolute;
+        width: 38px;
+        height: 38px;
+        left: 27px;
+        top: 17px;
+    }
+    .name {
+        position: absolute;
+        left: 50%;
+        top: 23px;
+        transform: translateX(-50%);
+        width: 87px;
+        height: 21px;
+    }
+    .modeBox {
+        width: 100%;
+        margin-top: 90px;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 36px;
+        > img {
+            width: calc((100% - 2*40px)/3);
+        }
+    }
 }

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

@@ -9,7 +9,7 @@ import MusicScore, { resetMusicScore } from "../../view/music-score";
 import TestCheck from "/src/view/music-score/testCheck";
 import { sysMusicScoreAccompanimentQueryPage } from "../api";
 import EvaluatModel from "../evaluat-model";
-import HeaderTop from "../header-top";
+import HeaderTop, { headTopData } from "../header-top";
 import styles from "./index.module.less";
 import { api_cloudAccompanyMessage, api_cloudLoading, api_keepScreenLongLight, api_openCamera, api_openWebView, api_setEventTracking, api_setRequestedOrientation, api_setStatusBarVisibility, isSpecialShapedScreen } from "/src/helpers/communication";
 import { getQuery } from "/src/utils/queryString";
@@ -34,6 +34,7 @@ import { initMidi } from "/src/helpers/midiPlay"
 import TheAudio from "/src/components/the-audio"
 import tickWav from "/src/assets/tick.wav";
 import Title from "../header-top/title";
+import ModeView from "./modeView"
 
 const DelayCheck = defineAsyncComponent(() =>
   import('/src/page-instrument/evaluat-model/delay-check')
@@ -221,7 +222,7 @@ export default defineComponent({
         if (state.fingeringInfo.direction === "transverse") {
           return {
             container: {
-              paddingBottom: state.platform === IPlatform.PC ? `calc(${state.fingeringInfo.height} + ${state.attendHideMenu ? "0px" : "1.8rem"})` : state.fingeringInfo.height,
+              paddingBottom: state.fingeringInfo.height
             },
             fingerBox: {
               height: state.fingeringInfo.height,
@@ -378,14 +379,28 @@ export default defineComponent({
       detailData.fingerPreView = false;
       detailData.fingerPreViewGuide = false;
     };
+    // 模式样式
+    const modeClass = computed(() => {
+      const modeType = state.modeType
+      if(modeType === "practise"){
+        return styles.practise
+      }
+      if(modeType === "evaluating"){
+        return styles.evaluating
+      }
+      if(modeType === "follow"){
+        return styles.follow
+      }
+    }) 
     return () => (
       <div
-        class={[styles.detail, state.setting.eyeProtection && "eyeProtection", (state.platform === IPlatform.PC && state.zoom > 0.8) && styles.PC, state.isPreView && styles.preViewDetail, state.isSingleLine && styles.singleLineDetail]}
+        class={[styles.detail, modeClass.value, state.setting.eyeProtection && "eyeProtection", (state.platform === IPlatform.PC && state.zoom > 0.8) && styles.PC, state.isPreView && styles.preViewDetail, state.isSingleLine && styles.singleLineDetail]}
         style={{
           paddingLeft: detailData.paddingLeft,
           background: state.setting.camera ? `rgba(${state.setting.eyeProtection ? "253,244,229" : "255,255,255"} ,${state.setting.cameraOpacity / 100}) !important` : "",
         }}
       >
+        {/* 骨架屏 */}
         <Transition name="van-fade">
           {detailData.skeletonLoading && (
             <div class={styles.skeleton}>
@@ -393,18 +408,11 @@ export default defineComponent({
             </div>
           )}
         </Transition>
-        {/** 学生端头部标题&功能按钮 */}
+        {/** 功能按钮 */}
         {
-          (!state.isPreView && state.platform !== IPlatform.PC) && 
+          !state.isPreView && 
           <div class={[styles.headHeight, detailData.headerHide && styles.headHide]}>{state.musicRendered && <HeaderTop />}</div>
         }
-        {/** 老师端标题 */}
-        {
-          state.platform === IPlatform.PC && 
-          <div class={[styles.pcHead, detailData.headerHide && styles.pcHeadHide]}>
-            <Title text={state.examSongName} rightView={false} />
-          </div>
-        }
         <div
           id="scrollContainer"
           style={{ ...fingerConfig.value.container, height: detailData.headerHide ? "100vh" : "" }}
@@ -429,7 +437,7 @@ export default defineComponent({
 
           {/* {
             state.musicRendered && 
-             <TestCheck />
+              <TestCheck />
           } */}
 
           {/* 指法 */}
@@ -444,11 +452,6 @@ export default defineComponent({
             </div>
           )}
         </div>
-        {/** 老师端底部功能按钮 */}
-        {
-          (!state.isPreView && state.platform === IPlatform.PC) && 
-          <div class={[styles.headHeight, detailData.headerHide && styles.pcHeadHideBottom]}>{state.musicRendered && <HeaderTop />}</div>
-        }
         {/* 节拍器，跟练需要播放系统节拍器，所以不需要判断needTick状态 */}
         {/* {state.needTick && <Tick />} */}
         <Tick />
@@ -494,7 +497,8 @@ export default defineComponent({
             {state.playState == "play" || followData.start || evaluatingData.startBegin || query.workRecord || query.modelType || state.platform === IPlatform.PC || query.isCbs ? null : <TheMusicList />}
           </>
         )}
-
+        {/* 模式切换 */}
+        { headTopData.modeType === "init" && <ModeView></ModeView>}
         <Popup
           zIndex={5050}
           teleport="body"

src/state.ts

@@ -321,6 +321,8 @@ const state = reactive({
   playState: "paused" as IAudioState,
   /** 播放结束状态 */
   playEnd: false,
+  /** 播放类型 演奏 演唱 */
+  playType: "perform" as "perform" | "sing",
   /** 播放那个: 原音,伴奏 */
   playSource: "music" as IPlayState,
   /** 播放进度 */
@@ -464,7 +466,6 @@ const state = reactive({
   /** 是否是evxml */
   isEvxml: false,
   noTimes: [] as any,
-  attendHideMenu: true,
   /** 老师端：功能按钮布局方向 */
   playBtnDirection: "left" as "left" | "right",
   /** 云练习按钮方向，如果有指法并且是竖向的指法，为了防止播放按钮把指法挡住，此时云练习播放按钮方向应该取反 */