优化

src/page-instrument/component/mode-type-mode/index.tsx

@@ -92,7 +92,7 @@ export default defineComponent({
 					{data.showPC && headTopData.modeType === "init" ? <TeacherBootom></TeacherBootom> : null}
 					{data.showStudent && headTopData.modeType === "init" ? <StudentBottom></StudentBottom> : null}
 					{data.showVip && headTopData.modeType === "init" && <TheVip />}
-					{headTopData.modeType === 'show' && state.modeType !== 'evaluating' && state.fingeringInfo?.name && <GuideIndex list={['detail']} />}
+					{headTopData.modeType === 'show' && state.modeType !== 'evaluating' && state.fingeringInfo?.name && state.setting.displayFingering && <GuideIndex list={['detail']} />}
 				</div>
 			</>
 		);

src/page-instrument/view-figner/index.module.less

@@ -13,12 +13,61 @@
     height: 100vh;
     background: linear-gradient(180deg, #6BC6E1 0%, #E1FBEB 35%, #9DE7E2 100%);
     user-select: none;
+
+    &.fingerRight {
+        background: url('./image/icon_bg_t.png') no-repeat;
+        background-size: cover;
+
+        .fingerContent {
+            flex-direction: row;
+
+        }
+
+
+        .tips {
+            width: 43%;
+            border-radius: 18px 0px 0px 18px;
+
+            &.tipHidden {
+                margin-right: -43%;
+            }
+        }
+    }
+
+    &.fingerBottom {
+        background: url('./image/icon_bg_v.png') no-repeat;
+        background-size: cover;
+        background-position-y: -3Px;
+
+        .fingerContent {
+            flex-direction: column;
+
+        }
+
+
+        .tips {
+            height: 238px;
+            border-radius: 18px 18px 0 0;
+
+            &.tipHidden {
+                margin-bottom: -238px;
+            }
+        }
+    }
 }
 
 .head {
-    position: relative;
-    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
     z-index: 10;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    pointer-events: none;
+    padding-right: 10px;
+    padding-top: env(safe-area-inset-top);
 
     .backBtn {
         width: 22px;
@@ -35,37 +84,16 @@
             height: 100%;
         }
 
-        &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            width: 100%;
-            height: 140%;
-            z-index: 10;
-        }
-
         &.backRight {
-            &::after {
-                right: 85px;
-                width: auto;
-            }
+            margin-right: 30px;
         }
     }
 
     .left {
-        position: absolute;
-        top: 0;
-        left: 0;
-        padding-left: 33px;
-        padding-top: 30px;
+        padding: 25px 33px;
         display: flex;
         align-items: center;
-
-        button {
-            margin-right: 30px;
-        }
+        pointer-events: auto;
     }
 
     .baseBtn {
@@ -87,9 +115,6 @@
     }
 
     .rightBtn {
-        position: absolute;
-        right: 23px;
-        top: 25px;
         display: flex;
         align-items: center;
         justify-content: space-evenly;
@@ -100,6 +125,7 @@
         border-radius: 11px;
         font-weight: 600;
         color: #A14927;
+        pointer-events: auto;
 
         .item {
             flex: 1;
@@ -139,36 +165,7 @@
         overflow: hidden;
     }
 
-    &.fingerRight {
-        flex-direction: row;
-        background: url('./image/icon_bg_t.png') no-repeat;
-        background-size: cover;
-
-        .tips {
-            width: 43%;
-            border-radius: 18px 0px 0px 18px;
 
-            &.tipHidden {
-                margin-right: -43%;
-            }
-        }
-    }
-
-    &.fingerBottom {
-        flex-direction: column;
-        background: url('./image/icon_bg_v.png') no-repeat;
-        background-size: cover;
-        background-position-y: -3px;
-
-        .tips {
-            height: 238px;
-            border-radius: 18px 18px 0 0;
-
-            &.tipHidden {
-                margin-bottom: -238px;
-            }
-        }
-    }
 }
 
 .tips {
@@ -277,27 +274,28 @@
         border: 1px solid rgba(255, 255, 255, 0.81);
         overflow: hidden;
 
-        &::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            height: 100%;
-            width: 20px;
-            background-color: red;
-            background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(28, 172, 241, 0.45) 100%);
-        }
+        &.noteContentWrap {
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 0;
+                height: 100%;
+                width: 20px;
+                background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(28, 172, 241, 0.45) 100%);
+            }
 
-        &::after {
-            content: '';
-            position: absolute;
-            right: 0;
-            top: 0;
-            height: 100%;
-            width: 20px;
-            background-color: red;
-            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(28, 172, 241, 0.45) 100%);
+            &::after {
+                content: '';
+                position: absolute;
+                right: 0;
+                top: 0;
+                height: 100%;
+                width: 20px;
+                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(28, 172, 241, 0.45) 100%);
+            }
         }
+
     }
 
     .noteBox {
@@ -487,14 +485,16 @@
 .toggleBtnhulusi {
     height: auto;
     padding: 10px 0 10px 10px;
-    .hulusiNoteKey{
+
+    .hulusiNoteKey {
         color: #A14927;
         text-shadow: none;
-        .dot{
+
+        .dot {
             background: #A14927;
         }
     }
-    
+
 }
 
 .tones {
@@ -609,15 +609,18 @@
                 }
             }
         }
-        :global(.van-button--primary){
-            .dot{
+
+        :global(.van-button--primary) {
+            .dot {
                 background: var(--van-primary-color) !important;
             }
         }
-        .hulusiNoteKey{
+
+        .hulusiNoteKey {
             color: inherit;
             text-shadow: none;
-            .dot{
+
+            .dot {
                 background: #323233;
             }
         }

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

@@ -15,6 +15,7 @@ import Hammer from "hammerjs";
 import { Button, Icon, Popup, Space } from "vant";
 import GuideIndex from "./guide/guide-index";
 import { getQuery } from "/src/utils/queryString";
+import { browser } from "/src/utils";
 
 export default defineComponent({
 	name: "viewFigner",
@@ -31,6 +32,7 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const query = getQuery();
+		const browsInfo = browser();
 		const subject = props.isComponent ? props.subject || "pan-flute" : query.code || "pan-flute";
 		const data = reactive({
 			loading: true,
@@ -198,7 +200,14 @@ export default defineComponent({
 				: relationship;
 			const canTizhi = Array.isArray(relationship[1]);
 			return (
-				<div class={styles.fingerBox}>
+				<div
+					class={[
+						styles.fingerBox,
+						!query.modelType && fingerData.fingeringInfo.orientation === 1
+							? styles.fingerBottom
+							: styles.fingerRight,
+					]}
+				>
 					<div class={styles.head}>
 						<div class={styles.left}>
 							<button
@@ -239,12 +248,7 @@ export default defineComponent({
 							</div>
 						</div>
 					</div>
-					<div
-						class={[
-							styles.fingerContent,
-							!query.modelType && fingerData.fingeringInfo.orientation === 1 ? styles.fingerBottom : styles.fingerRight,
-						]}
-					>
+					<div class={styles.fingerContent}>
 						<div class={styles.wrapFinger}>
 							<div id="fingeringContainer" class={styles.boxFinger}>
 								<div
@@ -278,7 +282,7 @@ export default defineComponent({
 								<Button class={styles.noteBtn}>
 									<Icon name="arrow-left" />
 								</Button>
-								<div class={styles.noteContent}>
+								<div class={[styles.noteContent, browsInfo.ios ? '' : styles.noteContentWrap]}>
 									<div class={styles.noteBox}>
 										{data.notes.map((note: IFIGNER_INSTRUMENT_Note, index: number) => {
 											const steps = new Array(Math.abs(note.step)).fill(1);
@@ -377,7 +381,9 @@ export default defineComponent({
 					<Popup
 						class="tonePopup"
 						v-model:show={data.tnoteShow}
-						position={!query.modelType && fingerData.fingeringInfo.orientation === 1 ? "bottom" : "right"}
+						position={
+							!query.modelType && fingerData.fingeringInfo.orientation === 1 ? "bottom" : "right"
+						}
 					>
 						<div class={styles.tones}>
 							<div class={styles.toneTitle}>