feat: 模式切换页面修改

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

@@ -492,20 +492,36 @@
         position: relative;
         top: 50%;
         transform: translateY(-42%);
-
         &.twoModeBox {
             justify-content: center;
-
-            >.modeImg+.modeImg {
+            >.modeItem+.modeItem {
                 margin-left: 150px;
             }
         }
-        > .modeImg {
+        .modeItem {
+            position: relative;
             cursor: pointer;
             width: calc((100% - 2*32px)/3);
             max-width: 220px;
             height: intrinsic;
         }
+        .modeImg {
+            width: 100%;
+        }
+        .vipIcon {
+            position: absolute;
+            left: 30px;
+            top: 12px;
+            width: 55px;
+            height: 21px;
+        }
+        .svipIcon {
+            position: absolute;
+            left: 30px;
+            top: 12px;
+            width: 63px;
+            height: 21px;
+        }
     }
 }
 

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

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, watch, reactive, ref, nextTick } from "vue";
+import { defineComponent, onMounted, watch, reactive, ref, nextTick, computed } from "vue";
 import styles from "./index.module.less";
 import backImg from "./image/icon-back.png";
 import titmeImg from "./image/modeTitle.png";
@@ -6,9 +6,8 @@ import nameImg from "./image/zt.png";
 import lxMode from "./image/lxMode.json";
 import glMode from "./image/glMode.json";
 import pcMode from "./image/pcMode.json";
-// import lxImg from "./image/lxImg.png";
-// import glImg from "./image/glImg.png";
-// import pcImg from "./image/pcImg.png";
+import modeVip from "./image/mode_vip.png";
+import modesVip from "./image/mode_svip.png";
 import { headTopData } from "./index";
 import { getQuery } from "/src/utils/queryString";
 import { storeData } from "/src/store";
@@ -58,6 +57,14 @@ export default defineComponent({
     );      
     const browserInfo = browser();
     const isPad =  navigator?.userAgent?.includes("UAWEIVRD-W09") || browserInfo?.iPad || browserInfo.isTablet;
+
+    const showVip = computed(() => {
+			return evaluatingData.tipErjiShow && !state.isLoading && !state.hasDriverPop;
+		});
+    const showsVip = computed(() => {
+			return evaluatingData.tipErjiShow && !state.isLoading && !state.hasDriverPop;
+		});
+
     return () => (
       <div class={[styles.modeView, isPad && styles.isiPad, headTopData.modeType !== "init" && styles.hidden]}>
         <img
@@ -78,12 +85,16 @@ export default defineComponent({
         />
         <img src={titmeImg} class={styles.modeTitle} />
         <div class={[styles.modeBox, ((!state.isPercussion && !state.enableEvaluation) || (state.isPercussion && state.enableEvaluation) || (state.isPercussion && !state.enableEvaluation)) && styles.twoModeBox]}>
-          <Vue3Lottie ref={modeImgDom1} class={styles.modeImg} animationData={lxMode} autoPlay={false} loop={true} onClick={() => {
-            if(state.isSingleLine){
-              smoothAnimationState.isShow.value = state.melodyLine;
-            }
-            headTopData.handleChangeModeType("practise")
-            }}></Vue3Lottie>
+          <div class={styles.modeItem}>
+            <Vue3Lottie ref={modeImgDom1} class={styles.modeImg} animationData={lxMode} autoPlay={false} loop={true} onClick={() => {
+              if(state.isSingleLine){
+                smoothAnimationState.isShow.value = state.melodyLine;
+              }
+              headTopData.handleChangeModeType("practise")
+              }}></Vue3Lottie>
+              {/* <img class={styles.vipIcon} src={modeVip} /> */}
+          </div>
+
           {/* <img class={styles.modeImg} src={lxImg} 
             onClick={() => {
               if(state.isSingleLine){
@@ -92,16 +103,22 @@ export default defineComponent({
               headTopData.handleChangeModeType("practise")
             }} /> */}
           {!state.isPercussion && 
+            <div class={styles.modeItem}>
               <Vue3Lottie ref={modeImgDom2} class={styles.modeImg} animationData={glMode} autoPlay={false} loop={true} onClick={() => headTopData.handleChangeModeType("follow")}></Vue3Lottie>
+              {/* <img class={styles.svipIcon} src={modesVip} /> */}
+            </div>
               // <img class={styles.modeImg} src={glImg} 
               //   onClick={() => headTopData.handleChangeModeType("follow")} />
           }
           {state.enableEvaluation && 
-            <Vue3Lottie ref={modeImgDom3} class={styles.modeImg} animationData={pcMode} autoPlay={false} loop={true} onClick={() => {
-               // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态
-              evaluatingData.needCheckErjiStatus = true;
-              headTopData.handleChangeModeType("evaluating")
-            }}></Vue3Lottie>
+            <div class={styles.modeItem}>
+              <Vue3Lottie ref={modeImgDom3} class={styles.modeImg} animationData={pcMode} autoPlay={false} loop={true} onClick={() => {
+                // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态
+                evaluatingData.needCheckErjiStatus = true;
+                headTopData.handleChangeModeType("evaluating")
+              }}></Vue3Lottie>
+              {/* <img class={styles.svipIcon} src={modesVip} /> */}
+            </div>
             // <img class={styles.modeImg} src={pcImg} 
             //   onClick={() => {
             //       // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态

src/state.ts

@@ -750,6 +750,7 @@ const handlePlaying = () => {
           return;
         }
         // #8698 bug修复
+        
         if (state.modeType === "practise" && state.sectionStatus) {
           // 练习作业，练习完一次需要增加练习次数
           if (query.workRecord) {