feat: 练习模式UI

instrument.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport"
     content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
-  <title>管乐迷</title>
+  <title>酷乐秀</title>
   <link rel="icon" href="/favicon.ico?v=1" />
   <script src="/flexible.js" charset="UTF-8"></script>
   <style>

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

@@ -6,8 +6,8 @@
     flex-shrink: 0;
     margin-left: calc(-1 * var(--detailDataPaddingLeft));
     padding: 0 30px;
-    justify-content: flex-end;
-    background-color: #fff;
+    // background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+    background: transparent;
 
     &.headerTopRight {
         justify-content: flex-end;
@@ -153,6 +153,31 @@
     }
 }
 
+.modeChangeBox{
+    cursor: pointer;
+    position: fixed;
+    top: 20px;
+    right: 30px;
+    height: 32px;
+    background: #C2F0E8;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+
+    .img {
+        width: 18px;
+        height: 18px;
+    }
+
+    .title {
+        margin-left: 6px;
+        font-weight: 500;
+        font-size: 14px;
+        color: #131415;
+    }
+}
+
 .headRight {
     display: flex;
     align-items: center;
@@ -183,13 +208,13 @@
             margin-top: 3px;
             font-weight: 500;
             font-size: 12px;
-            color: #777777;
+            color: #333333;
             line-height: 17px;
         }
 
         &:active {
             >span {
-                color: #04C8BB
+                color: #14B698
             }
 
             ;
@@ -229,39 +254,66 @@
 
         &.isSection {
             >span {
-                color: #04C8BB
+                color: #14B698
             }
         }
 
         &.speed:active {
-            opacity: 0.8;
+            >img:nth-child(1) {
+                content: url("./image/tickonAct.png");
+            }
+
+            >img:nth-child(2) {
+                content: url("./image/tickoffAct.png");
+            }
         }
 
         &.isSpeed {
+            >img:nth-child(1) {
+                content: url("./image/tickonAct.png");
+            }
+
+            >img:nth-child(2) {
+                content: url("./image/tickoffAct.png");
+            }
+
             >span {
-                color: #04C8BB
+                color: #14B698
             }
 
             ;
         }
 
         &.settingMode:active {
-            opacity: 0.8;
+            >img {
+                content: url("./image/icon_menuAct.png");
+            }
         }
 
         &.isSettingMode {
+            >img {
+                content: url("./image/icon_menuAct.png");
+            }
+
             >span {
-                color: #04C8BB
+                color: #14B698
             }
         }
 
         &.musicSheet:active {
-            opacity: 0.8;
+            // opacity: 0.8;
+            >img {
+                content: url("./image/shengguiAct.png");
+            }
         }
 
         &.isMusicSheet {
+            >img {
+                content: url("./image/shengguiAct.png");
+            }
+
             >span {
-                color: #04C8BB
+                color: #14B698
             }
         }
     }

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

@@ -725,15 +725,15 @@ export default defineComponent({
               <div
                 id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
                 style={{ display: toggleBtn.value.display ? "" : "none"}}
-                class={["driver-9", styles.btn, toggleBtn.value.disabled && styles.disabled, styles.modeType]}
+                class={["driver-9", styles.modeChangeBox, toggleBtn.value.disabled && styles.disabled, styles.modeType]}
                 onClick={() => {
                   headTopData.oldModeType = state.modeType;
                   handleRessetState();
                   headTopData.modeType = "init";
                 }}
               >
-                <img class={styles.iconBtn} src={iconMode} />
-                <span>{state.modeType === "practise" ? "练习模式" : state.modeType === "follow" ? "跟练模式" : state.modeType === "evaluating" ? "评测模式" : ""}</span>
+                <img class={styles.img} src={iconMode} />
+                <div class={styles.title}>{state.modeType === "practise" ? "练习模式" : state.modeType === "follow" ? "跟练模式" : state.modeType === "evaluating" ? "评测模式" : ""}</div>
               </div>
             }
             {/* 一行谱模式，暂不支持节拍指针 */}

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

@@ -29,7 +29,7 @@
     width: 100vw;
     height: 100vh;
     overflow: hidden;
-    --header-height: 60px;
+    --header-height: 80px;
     --pc-header-height: 72px;
     background: #fff;
     // &.practise{
@@ -55,7 +55,7 @@
 
     .headHeight {
         position: absolute;
-        top: 0;
+        bottom: 0;
         width: 100%;
         height: var(--header-height);
         transition: all .3s;

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

@@ -645,7 +645,7 @@ export default defineComponent({
             {/* 统计训练时长 */}
             <RecordingTime />
             {/* 今日练习统计 */}
-            {state.systemType === "student" && <ExerciseStatistics />}
+            {/* {state.systemType === "student" && <ExerciseStatistics />} */}
             {/* 作业 */}
             {state.isHomeWork && <WorkIndex />}
             {/* 曲谱列表 */}

vite.config.ts

@@ -52,7 +52,8 @@ export default defineConfig({
     // https: true,
     proxy: {
       "^/instrument/.*": {
-        target: "https://dev.gym.lexiaoya.cn",
+        //target: "https://dev.gym.lexiaoya.cn",
+        target: "https://dev.colexiu.com",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/instrument/, ""),
       },