节拍速度和设置 3种样式

src/page-instrument/custom-plugins/helper-model/recommendation/index.module.less

@@ -1,4 +1,30 @@
 .recommendation{
+    &.follow{
+        .head{
+            background: url("/src/page-instrument/header-top/image/headImg1.png") no-repeat;
+            background-size: 100% 100%; 
+        }
+        .content{
+            background: #ACDDEA;
+            box-shadow: 0px 4px 0px 0px #5EA2B9;
+            .conBox{
+                background: #E3F3F5;
+            }
+        }
+    }
+    &.evaluating{
+        .head{
+            background: url("/src/page-instrument/header-top/image/headImg2.png") no-repeat;
+            background-size: 100% 100%; 
+        }
+        .content{
+            background: #B0CDFF;
+            box-shadow: 0px 4px 0px 0px #759CE4;
+            .conBox{
+                background: #EAF1FB;
+            }
+        }
+    }
     .head{
         background: url("/src/page-instrument/header-top/image/headImg.png") no-repeat;
         background-size: 100% 100%;

src/page-instrument/custom-plugins/helper-model/recommendation/index.tsx

@@ -106,7 +106,7 @@ export default defineComponent({
 			getTypeList();
 		});
 		return () => (
-			<div class={[styles.recommendation]}>
+			<div class={[styles.recommendation,styles[state.modeType]]}>
 				<div class={styles.head}>
 					<img class={styles.headTit} src={headImg("recommendationName.png")} />
 					<img class={styles.closeImg} src={headImg("closeImg.png")} onClick={()=>{ emit("close") }} />

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

@@ -1,4 +1,30 @@
 .settting{
+    &.follow{
+        .head{
+            background: url("../image/headImg1.png") no-repeat;
+            background-size: 100% 100%; 
+        }
+        .content{
+            background: #ACDDEA;
+            box-shadow: 0px 4px 0px 0px #5EA2B9;
+            .conBox{
+                background: #E3F3F5;
+            }
+        }
+    }
+    &.evaluating{
+        .head{
+            background: url("../image/headImg2.png") no-repeat;
+            background-size: 100% 100%; 
+        }
+        .content{
+            background: #B0CDFF;
+            box-shadow: 0px 4px 0px 0px #759CE4;
+            .conBox{
+                background: #EAF1FB;
+            }
+        }
+    }
     .head{
         background: url("../image/headImg.png") no-repeat;
         background-size: 100% 100%;

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

@@ -8,6 +8,7 @@ import { api_closeCamera, api_openCamera, api_savePicture } from "/src/helpers/c
 import { smoothAnimationState} from "/src/page-instrument/view-detail/smoothAnimation"
 import Recommendation from "../../custom-plugins/helper-model/recommendation";
 import { resetRenderMusicScore } from "/src/view/music-score";
+import ScreenModel from "../../custom-plugins/helper-model/screen-model";
 
 export default defineComponent({
 	name: "settting",
@@ -31,7 +32,7 @@ export default defineComponent({
 		}
         const formatterTimeMs = (value: any) => value = String(Math.min(3000, value));
 		return () => (
-			<div class={styles.settting}>
+			<div class={[styles.settting, styles[state.modeType]]}>
                 <div class={styles.head}>
 					<img class={styles.headTit} src={headImg("settingName.png")} />
 					<img class={styles.closeImg} src={headImg("closeImg.png")} onClick={()=>{ headTopData.settingMode = false }} />
@@ -46,10 +47,13 @@ export default defineComponent({
                             <div class={styles.tit}>循环播放</div>
                             <Switch v-model={state.setting.repeatAutoPlay}></Switch>
                         </div>
-                        <div class={styles.cellBox}>
-                            <div class={styles.tit}>旋律线</div>
-                            <Switch v-model={smoothAnimationState.isShow.value}></Switch>
-                        </div>                            
+                        {
+                            state.isSingleLine &&
+                                <div class={styles.cellBox}>
+                                <div class={styles.tit}>旋律线</div>
+                                    <Switch v-model={smoothAnimationState.isShow.value}></Switch>
+                                </div>   
+                        }                         
                         <div class={styles.cellBox}>
                             <div class={styles.tit}>延迟检测</div>
                             <Switch v-model={state.setting.soundEffect}></Switch>
@@ -139,7 +143,7 @@ export default defineComponent({
                             </div>
                         </div>
                         <div class={styles.cellBtnBox}>
-                            <img  src={headImg("tpbz.png")} />
+                            <img  src={headImg("tpbz.png")} onClick={() => (helperData.screenModelShow = true)} />
                             <img  src={headImg("yjfk.png")} onClick={() => (helperData.recommendationShow = true)} />
                         </div>
                     </div>  
@@ -157,6 +161,21 @@ export default defineComponent({
                         }}
                     />
 				</Popup>
+                <Popup
+					class={["popup-custom"]}
+					v-model:show={helperData.screenModelShow}
+					onClose={() => {
+						helperData.screenModelShow = false;
+					}}
+					position="right"
+					teleport="body"
+				>
+					<ScreenModel
+						onClose={(open: Boolean) => {
+							helperData.screenModelShow = false;
+						}}
+					/>
+				</Popup>
 			</div>
 		);
 	},

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

@@ -1,4 +1,30 @@
 .speedContainer{
+    &.follow{
+        .head{
+            background: url("../image/headImg1.png") no-repeat;
+            background-size: 100% 100%; 
+        }
+        .content{
+            background: #ACDDEA;
+            box-shadow: 0px 4px 0px 0px #5EA2B9;
+            .conBox{
+                background: #E3F3F5;
+            }
+        }
+    }
+    &.evaluating{
+        .head{
+            background: url("../image/headImg2.png") no-repeat;
+            background-size: 100% 100%; 
+        }
+        .content{
+            background: #B0CDFF;
+            box-shadow: 0px 4px 0px 0px #759CE4;
+            .conBox{
+                background: #EAF1FB;
+            }
+        }
+    }
     .head{
         background: url("../image/headImg.png") no-repeat;
         background-size: 100% 100%;

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

@@ -33,7 +33,7 @@ export default defineComponent({
 			}
 		})
 		return () => (
-			<div class={styles.speedContainer}>
+			<div class={[styles.speedContainer, styles[state.modeType]]}>
 				<div class={styles.head}>
 					<img class={styles.headTit} src={headImg("headTit.png")} />
 					<img class={styles.closeImg} src={headImg("closeImg.png")} onClick={()=>{ headData.speedShow = false }} />