设置显示影藏

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

@@ -74,6 +74,7 @@ export const headTopData = reactive({
       if (!state.isSingleLine) {
         state.isSingleLine = true
         refreshMusicSvg()
+        smoothAnimationState.isShow.value = false; // 隐藏旋律线
       }
       state.playIngSpeed = state.originSpeed;
       handleStartEvaluat();

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

@@ -73,6 +73,9 @@
                 justify-content: space-between;
                 align-items: center;
                 border-bottom: 1px solid #D5E0ED;
+                &.isCamera{
+                    border-bottom: none;
+                }
                 :global{
                     .van-switch{
                         width: 42px;
@@ -96,6 +99,56 @@
                     color: #000000;
                     line-height: 21px;
                 }
+                .spendCon{
+                    flex-grow: 1;
+                    display: flex;
+                    align-items: center;
+                    padding: 3px 0;
+                    .sliderCon{
+                        padding-left: 28px;
+                        flex-grow: 1;
+                        :global{
+                            .van-slider{
+                                height: 10px;
+                                background: #94ACC4;
+                                box-shadow: inset 0px 2px 3px 0px #647F98;
+                                .van-slider__bar{
+                                    background: linear-gradient( 270deg, #7ADEFF 0%, #29A9FF 100%);
+                                    box-shadow: inset 1px 0px 5px 0px rgba(150,254,255,0.79);
+                                    border: 1px solid #4A91D4;
+                                    .van-slider__button-wrapper{
+                                        bottom: 0;
+                                        top: initial;
+                                        transform: translate3d(50%,12px,0);
+                                    }
+                                }
+                            }
+                        }
+                        .customButton{
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            .speedVal{
+                                width: 34px;
+                                height: 31px;
+                                background: url("../image/qipao.png") no-repeat;
+                                background-size: 100% 100%;
+                                font-weight: 600;
+                                font-size: 14px;
+                                color: #FFFFFF;
+                                line-height: 20px;
+                                text-align: center;
+                                padding-top: 3px;
+                            }
+                            .speedBtn{
+                                width: 16px;
+                                height: 30px;
+                                background: url("../image/speedBtn.png") no-repeat;
+                                background-size: 100% 100%;
+                            }
+                        }
+                    }
+                }
                 .radioBox{
                     display: flex;
                     > div{
@@ -184,19 +237,4 @@
             }
         }
     }
-}
-
-.slider {
-    width: 60%;
-    margin-right: 20px;
-
-    .sliderBtn {
-        width: 40px;
-        color: #fff;
-        font-size: 12px;
-        line-height: 20px;
-        text-align: center;
-        background-color: var(--van-primary-color);
-        border-radius: 20px;
-    }
 }

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

@@ -9,10 +9,12 @@ import { smoothAnimationState} from "/src/page-instrument/view-detail/smoothAnim
 import Recommendation from "../../custom-plugins/helper-model/recommendation";
 import { resetRenderMusicScore } from "/src/view/music-score";
 import ScreenModel from "../../custom-plugins/helper-model/screen-model";
+import { getQuery } from "/src/utils/queryString";
 
 export default defineComponent({
 	name: "settting",
 	setup() {
+        const query = getQuery();
         const helperData = reactive({
 			screenModelShow: false, // 投屏帮助
 			recommendationShow: false, // 建议
@@ -39,74 +41,103 @@ export default defineComponent({
 				</div>
                 <div class={styles.content}>
                     <div class={styles.conBox}>
-                        <div class={styles.cellBox}>
-                            <div class={styles.tit}>指法</div>
-                            <Switch v-model={state.setting.displayFingering}></Switch>
-                        </div>
-                        <div class={styles.cellBox}>
-                            <div class={styles.tit}>循环播放</div>
-                            <Switch v-model={state.setting.repeatAutoPlay}></Switch>
-                        </div>
                         {
-                            state.isSingleLine &&
+                            state.isShowFingering && state.fingeringInfo.name && ["practise", "follow"].includes(state.modeType) &&
+                                <div class={styles.cellBox}>
+                                <div class={styles.tit}>指法</div>
+                                    <Switch v-model={state.setting.displayFingering}></Switch>
+                                </div>
+                        }
+                        {
+                            ["practise", "follow"].includes(state.modeType) &&                         
+                                <div class={styles.cellBox}>
+                                    <div class={styles.tit}>循环播放</div>
+                                    <Switch v-model={state.setting.repeatAutoPlay}></Switch>
+                                </div>
+                        }
+                        {
+                            state.isSingleLine && state.modeType === "practise" &&
                                 <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>
-                        </div>   
-                        <div class={styles.cellBox}>
-                            <div class={styles.tit}>摄像头</div>
-                            <Switch 
-                                v-model={state.setting.camera}
-                                onChange={ async (value) => {
-                                    if (value) {
-                                        const res = await api_openCamera();
-                                        // 没有授权
-                                        if (res?.content?.reson) {
-                                            state.setting.camera = false
-                                        }
-                                    } else {
-                                        api_closeCamera();
-                                    }
-                                }}                                
-                            ></Switch>
-                        </div>   
-                        <div class={styles.cellBox} style={{ display: state.setting.camera ? "" : "none" }}>
-                            <div class={styles.tit}>透明度</div>
-                            <Slider
-                                class={styles.slider}
-                                min={0}
-                                max={100}
-                                v-model:modelValue={state.setting.cameraOpacity}
-                            >
-                                {{
-                                    button: () => <div class={styles.sliderBtn}>{state.setting.cameraOpacity}</div>,
-                                }}
-                            </Slider>
-                        </div>                                                                     
-                        <div class={styles.cellBox}>
-                            <div class={styles.tit}>标准音高</div>
-                            <div class={styles.frequency}>
-                                <img src={headImg("cutImg.png")} class={[styles.btn]} onClick={() => operateHz(1)} />
-                                <div class={styles.frequencyNum}>{state.setting.frequency}HZ</div>
-                                <img src={headImg("addImg.png")} class={[styles.btn]} onClick={() => operateHz(2)} />
-                            </div>
-                        </div>                        
-                        <div class={styles.cellBox}>
-                            <div class={styles.tit}>反应时间</div>
-                            <div class={styles.reactionTimeBox}>
-                                <Field class={styles.reactionTime} type="digit" 
-                                    placeholder="最大可输入3000毫秒"
-                                    formatter={formatterTimeMs}
-                                    input-align={'center'}
-                                    v-model:modelValue={state.setting.reactionTimeMs} />
-                                <div class={styles.timeName}>毫秒</div>    
-                            </div>
-                        </div>
+                        }                           
+                        {
+                            state.modeType === "evaluating" && 
+                            <>                       
+                                {
+                                    !query.workRecord &&                                 
+                                    <div class={styles.cellBox}>
+                                        <div class={styles.tit}>评测难度</div>
+                                        <div class={styles.radioBox}>
+                                            {
+                                                [{name:'入门',value:"BEGINNER"},{name:'进阶',value:"ADVANCED"},{name:'大师',value:"PERFORMER"}].map(item=>{
+                                                    return <div class={ state.setting.evaluationDifficulty===item.value && styles.active } onClick={ ()=>{
+                                                        state.setting.evaluationDifficulty = item.value as any
+                                                    } }>{item.name}</div>
+                                                })
+                                            }
+                                        </div>
+                                    </div>   
+                                }                     
+                                <div class={styles.cellBox}>
+                                    <div class={styles.tit}>延迟检测</div>
+                                    <Switch v-model={state.setting.soundEffect}></Switch>
+                                </div> 
+                                <div class={[styles.cellBox, state.setting.camera && styles.isCamera]}>
+                                    <div class={styles.tit}>摄像头</div>
+                                    <Switch 
+                                        v-model={state.setting.camera}
+                                        onChange={ async (value) => {
+                                            if (value) {
+                                                const res = await api_openCamera();
+                                                // 没有授权
+                                                if (res?.content?.reson) {
+                                                    state.setting.camera = false
+                                                }
+                                            } else {
+                                                api_closeCamera();
+                                            }
+                                        }}                                
+                                    ></Switch>
+                                </div>   
+                                <div class={styles.cellBox} style={{ display: state.setting.camera ? "" : "none", paddingTop: 0 }}>
+                                    <div class={styles.tit}>不透明度</div>
+                                    <div class={styles.spendCon}>
+                                        <div class={styles.sliderCon}>
+                                            <Slider class={styles.slider} max={100} min={0} v-model={state.setting.cameraOpacity}>
+                                                {{
+                                                    button: () => 
+                                                    <div class={styles.customButton}>
+                                                        <div class={styles.speedVal}>{ state.setting.cameraOpacity }</div>
+                                                        <div class={styles.speedBtn}></div>
+                                                    </div>
+                                                }}
+                                            </Slider>
+                                        </div>
+                                    </div>
+                                </div>                                                                     
+                                <div class={styles.cellBox}>
+                                    <div class={styles.tit}>标准音高</div>
+                                    <div class={styles.frequency}>
+                                        <img src={headImg("cutImg.png")} class={[styles.btn]} onClick={() => operateHz(1)} />
+                                        <div class={styles.frequencyNum}>{state.setting.frequency}HZ</div>
+                                        <img src={headImg("addImg.png")} class={[styles.btn]} onClick={() => operateHz(2)} />
+                                    </div>
+                                </div>                        
+                                <div class={styles.cellBox}>
+                                    <div class={styles.tit}>反应时间</div>
+                                    <div class={styles.reactionTimeBox}>
+                                        <Field class={styles.reactionTime} type="digit" 
+                                            placeholder="最大可输入3000毫秒"
+                                            formatter={formatterTimeMs}
+                                            input-align={'center'}
+                                            v-model:modelValue={state.setting.reactionTimeMs} />
+                                        <div class={styles.timeName}>毫秒</div>    
+                                    </div>
+                                </div>
+                            </>
+                        }
                         {/** 练习模式才有单行/多行谱切换功能，跟练、评测只有单行谱模式 */}
                         {
                             state.modeType === 'practise' ?