切换曲谱 ui大小调整，3种模式ui更改

src/page-instrument/component/the-music-list/index.module.less

@@ -3,7 +3,7 @@
 }
 .tabs {
     height: 100vh;
-    width: 320px;
+    width: 380px;
     padding: 10px 0;
     :global {
         .van-tabs{
@@ -31,8 +31,8 @@
                             }
                         }                   
                         &:nth-child(2){
-                            margin-left: 24px;
-                            margin-right: 34px;
+                            margin-left: 30px;
+                            margin-right: 60px;
                             width: 100px;
                             height: 30px;
                             background: url("./imgs/zjlx.png") no-repeat;
@@ -58,6 +58,22 @@
             }
         }
     }
+    &.follow{
+        :global{
+            .van-tabs .van-tabs__content{
+                background: url("./imgs/bg1.png") no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+    }
+    &.evaluating{
+        :global{
+            .van-tabs .van-tabs__content{
+                background: url("./imgs/bg2.png") no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+    }
 }
 
 .wrap {

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

@@ -18,7 +18,7 @@ export default defineComponent({
 		return () => (
 			<>
 				<Popup class={styles.popup} position="left" v-model:show={musicListShow.value} round overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}>
-					<div class={styles.tabs}>
+					<div class={[styles.tabs, styles[state.modeType]]}>
 						<Tabs>
 							<Tab title="其他曲谱">
 								<List />

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

@@ -452,22 +452,9 @@ 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, modeClass.value, state.setting.eyeProtection && "eyeProtection", (state.platform === IPlatform.PC && state.zoom > 0.8) && styles.PC, state.isPreView && styles.preViewDetail]}
+        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={{
           paddingLeft: detailData.paddingLeft,
           background: state.setting.camera ? `rgba(${state.setting.eyeProtection ? "253,244,229" : "255,255,255"} ,${state.setting.cameraOpacity / 100}) !important` : "",