样式

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

@@ -55,10 +55,28 @@
     }
 }
 
+.backBtn {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 30px 30px 25px 33px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    cursor: pointer;
+    z-index: 20;
+
+    img {
+        height: 22px;
+    }
+}
+
 .head {
     position: absolute;
     left: 0;
-    top: 10px;
+    top: 20px;
     right: 0;
     display: flex;
     justify-content: space-between;
@@ -66,28 +84,15 @@
     pointer-events: none;
     padding-right: 10px;
     padding-top: env(safe-area-inset-top);
-    z-index: 101;
+    z-index: 5;
 
-    .backBtn {
-        position: relative;
-        padding: 25px 30px 25px 33px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: none;
-        background: none;
-        cursor: pointer;
 
-        img {
-            width: 22px;
-            height: 22px;
-        }
-    }
 
     .left {
         display: flex;
         align-items: center;
         pointer-events: auto;
+        margin-left: 100px;
     }
 
     .baseBtn {
@@ -413,7 +418,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 100;
+    z-index: 10;
     background: rgba(0, 0, 0, .6);
 }
 

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

@@ -29,7 +29,7 @@ import { getQuery } from "/src/utils/queryString";
 import { browser } from "/src/utils";
 import { usePageVisibility } from "@vant/use";
 import { watch } from "vue";
-import icon_loading_img from './image/icon_loading_img.png'
+import icon_loading_img from "./image/icon_loading_img.png";
 
 export default defineComponent({
 	name: "viewFigner",
@@ -47,7 +47,7 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const query = getQuery();
 		const browsInfo = browser();
-		const code = mappingVoicePart(query.code, "INSTRUMENT")
+		const code = mappingVoicePart(query.code, "INSTRUMENT");
 		const subject = props.isComponent ? props.subject || "pan-flute" : code || "pan-flute";
 		const data = reactive({
 			loading: true,
@@ -77,7 +77,7 @@ export default defineComponent({
 			loadingSoundFonts: true,
 			loadingSoundProgress: 0,
 
-			huaweiPad: navigator?.userAgent?.includes('UAWEIVRD-W09') ? true : false
+			huaweiPad: navigator?.userAgent?.includes("UAWEIVRD-W09") ? true : false,
 		});
 		const fingerData = reactive({
 			relationshipIndex: 0,
@@ -85,12 +85,12 @@ export default defineComponent({
 			fingeringInfo: subjectFingering(data.subject),
 		});
 
-		if (!props.isComponent){
-			if (fingerData.fingeringInfo.orientation === 0){
-				fingerData.fingeringInfo.orientation = 1
+		if (!props.isComponent) {
+			if (fingerData.fingeringInfo.orientation === 0) {
+				fingerData.fingeringInfo.orientation = 1;
 			}
 		}
-		
+
 		const getNotes = () => {
 			const fignerData = FIGNER_INSTRUMENT_DATA[data.subject as keyof typeof FIGNER_INSTRUMENT_DATA];
 			if (fignerData) {
@@ -118,12 +118,12 @@ export default defineComponent({
 			fingerData.subject = await getFingeringConfig(subject);
 
 			setTimeout(() => {
-				if (!props.isComponent){
-					if (fingerData.fingeringInfo.orientation === 1){
+				if (!props.isComponent) {
+					if (fingerData.fingeringInfo.orientation === 1) {
 						api_setRequestedOrientation(fingerData.fingeringInfo.orientation);
 					}
 				}
-			}, 2000)
+			}, 2000);
 		};
 		const createAudio = (url: string) => {
 			return new Promise((resolve) => {
@@ -190,7 +190,7 @@ export default defineComponent({
 				emit("close");
 				return;
 			} else {
-				if (fingerData.fingeringInfo.orientation === 1){
+				if (fingerData.fingeringInfo.orientation === 1) {
 					api_setRequestedOrientation(0);
 				}
 			}
@@ -319,14 +319,11 @@ export default defineComponent({
 							: styles.fingerRight,
 					]}
 				>
+					<button class={[styles.backBtn]} onClick={() => handleBack()}>
+						<img src={icons.icon_back} />
+					</button>
 					<div class={styles.head}>
 						<div class={styles.left}>
-							<button
-								class={[styles.backBtn]}
-								onClick={() => handleBack()}
-							>
-								<img src={icons.icon_back} />
-							</button>
 							{data.subject === "pan-flute" && (
 								<div
 									class={styles.baseBtn}
@@ -392,7 +389,13 @@ export default defineComponent({
 								<Button class={styles.noteBtn} onClick={() => scrollNoteBox("left")}>
 									<Icon name="arrow-left" />
 								</Button>
-								<div class={[styles.noteContent, browsInfo.ios ? "" : styles.noteContentWrap, data.huaweiPad && styles.huaweiPad]}>
+								<div
+									class={[
+										styles.noteContent,
+										browsInfo.ios ? "" : styles.noteContentWrap,
+										data.huaweiPad && styles.huaweiPad,
+									]}
+								>
 									<div ref={noteBoxRef} class={styles.noteBox}>
 										{data.notes.map((note: IFIGNER_INSTRUMENT_Note, index: number) => {
 											const steps = new Array(Math.abs(note.step)).fill(1);