按钮点击变颜色

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

@@ -135,6 +135,93 @@
             color: #FFFFFF;
             line-height: 17px;
         }
+        &:active{
+            >span{
+                color: #34D6FF
+            };
+        }
+        &.playType:active{
+            >img:nth-child(1){
+                content: url("./image/performAct.png");
+            }            
+            >img:nth-child(2){
+                content: url("./image/singAct.png");
+            }
+        }
+        &.playSource:active{
+            >img:nth-child(1){
+                content: url("./image/musicAct.png");
+            }            
+            >img:nth-child(2){
+                content: url("./image/backgroundAct.png");
+            }            
+        }      
+        &.songSource:active{
+            >img:nth-child(1){
+                content: url("./image/music1Act.png");
+            }            
+            >img:nth-child(2){
+                content: url("./image/background1Act.png");
+            }            
+            >img:nth-child(3){
+                content: url("./image/mingsongAct.png");
+            }
+        }
+        &.section:active{
+            >img{
+                content: url("./image/section2.png");
+            }
+        }
+        &.isSection{
+            >span{
+                color: #34D6FF
+            };
+        }
+        &.speed:active{
+            >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: #34D6FF
+            }; 
+        }      
+        &.settingMode:active{
+            >img{
+                content: url("./image/icon_menuAct.png");
+            }            
+        }  
+        &.isSettingMode{
+            >img{
+                content: url("./image/icon_menuAct.png");
+            }            
+            >span{
+                color: #34D6FF
+            }; 
+        }  
+        &.musicSheet:active{
+            >img{
+                content: url("./image/shengguiAct.png");
+            }            
+        }       
+        &.isMusicSheet{
+            >img{
+                content: url("./image/shengguiAct.png");
+            }            
+            >span{
+                color: #34D6FF
+            }; 
+        }
     }
     .metronomeBtn{
         position: relative;

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

@@ -686,7 +686,7 @@ export default defineComponent({
             ) : null} */}
             <div
               style={{ display: playTypeBtn.value.display ? "" : "none" }}
-              class={["driver-2", styles.btn, playTypeBtn.value.disabled && styles.disabled]}
+              class={["driver-2", styles.btn, playTypeBtn.value.disabled && styles.disabled,styles.playType]}
               onClick={() => {
                 const oldPlayType = state.playType;
                 const oldPlaySource = state.playSource;
@@ -732,7 +732,7 @@ export default defineComponent({
             <div
               id={state.platform === IPlatform.PC ? "teacherTop-1" : "studnetT-1"}
               style={{ display: originBtn.value.display ? "" : "none" }}
-              class={["driver-3", styles.btn, originBtn.value.disabled && styles.disabled]}
+              class={["driver-3", styles.btn, originBtn.value.disabled && styles.disabled,state.playType === "play"?styles.playSource:styles.songSource]}
               onClick={() => {
                 const oldPlayType = state.playType;
                 const oldPlaySource = state.playSource;
@@ -760,7 +760,7 @@ export default defineComponent({
               <img style={{ display: state.playSource === "mingSong" ? "" : "none" }} class={styles.iconBtn} src={headImg(`mingsong.png`)} />
               <span>{state.playSource === "music" ? (state.playType === "play" ? "原声" : "范唱") : state.playSource === "background" ? (state.playType === "play" ? "伴奏" : "伴唱") : "唱名"}</span>
             </div>
-            <div id={state.platform === IPlatform.PC ? "teacherTop-2" : "studnetT-2"} style={{ display: selectBtn.value.display ? "" : "none" }} class={["driver-4", styles.btn, selectBtn.value.disabled && styles.disabled]} onClick={() => handleChangeSection()}>
+            <div id={state.platform === IPlatform.PC ? "teacherTop-2" : "studnetT-2"} style={{ display: selectBtn.value.display ? "" : "none" }} class={["driver-4", styles.btn, selectBtn.value.disabled && styles.disabled, styles.section, state.sectionStatus && styles.isSection]} 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`)} />
@@ -770,7 +770,7 @@ export default defineComponent({
               <>
                 <div
                   style={{ display: metronomeBtn.value.display ? "" : "none" }}
-                  class={["driver-5", styles.btn, styles.metronomeBtn, metronomeBtn.value.disabled && styles.disabled]}
+                  class={["driver-5", styles.btn, styles.metronomeBtn, metronomeBtn.value.disabled && styles.disabled,headData.speedShow && styles.isSpeed,styles.speed]}
                   onClick={async () => {
                     headData.speedShow = !headData.speedShow;
                   }}
@@ -814,7 +814,7 @@ export default defineComponent({
             ) : null} */}
             {state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert && (
               <div
-                class={[styles.btn, state.playState === "play" && fingeringBtn.value.disabled && styles.disabled]}
+                class={[styles.btn, state.playState === "play" && fingeringBtn.value.disabled && styles.disabled,toggleMusicSheet.show&&styles.isMusicSheet,styles.musicSheet]}
                 onClick={() => {
                   toggleMusicSheet.toggle(true);
                 }}
@@ -823,7 +823,7 @@ export default defineComponent({
                 <span>声部</span>
               </div>
             )}
-            <div id={state.platform === IPlatform.PC ? "teacherTop-6" : "studnetT-6"} style={{ display: settingBtn.value.display ? "" : "none" }} class={["driver-6", styles.btn, settingBtn.value.disabled && styles.disabled]} onClick={() => (headTopData.settingMode = true)}>
+            <div id={state.platform === IPlatform.PC ? "teacherTop-6" : "studnetT-6"} style={{ display: settingBtn.value.display ? "" : "none" }} class={["driver-6", styles.btn, settingBtn.value.disabled && styles.disabled,headTopData.settingMode&&styles.isSettingMode,styles.settingMode]} onClick={() => (headTopData.settingMode = true)}>
               <img class={styles.iconBtn} src={headImg("icon_menu.png")} />
               <span>设置</span>
             </div>