指法

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

@@ -23,6 +23,10 @@
 
         }
 
+        .backBtn{
+            padding: 26px 17px 26px 29px;
+        }
+
 
         .tips {
             width: 43%;
@@ -587,7 +591,7 @@
 .tizhi {
     position: absolute;
     top: 20%;
-    left: 64%;
+    left: 10%;
     width: 30px;
     height: 30px;
     text-align: center;

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

@@ -72,6 +72,7 @@ export default defineComponent({
 			activeToneName: "",
 			soundFonts: {} as any,
 			viewIndex: 0,
+			viewTotal: 1,
 			noteAudio: null as unknown as Howl,
 			transform: {
 				scale: 1,
@@ -185,6 +186,13 @@ export default defineComponent({
 			if (["pan-flute", "ocarina"].includes(data.subject)) {
 				data.viewIndex = 1;
 			}
+			const o: any = {
+				"pan-flute": 2,
+				ocarina: 2,
+				piccolo: 2,
+				"hulusi-flute": 2,
+			};
+			data.viewTotal = o[data.subject] || 1;
 			getFingeringData();
 			getSounFonts();
 		});
@@ -364,8 +372,12 @@ export default defineComponent({
 									class={styles.baseBtn}
 									onClick={() => {
 										data.viewIndex++;
-										if (data.viewIndex > 4) {
-											data.viewIndex = 1;
+										if (data.viewIndex > data.viewTotal) {
+											if (["pan-flute", "ocarina"].includes(data.subject)) {
+												data.viewIndex = 1;
+											} else {
+												data.viewIndex = 0;
+											}
 										}
 										getFingeringData();
 									}}

src/view/fingering/fingering-config.ts

@@ -38,7 +38,11 @@ export type IVocals =
 	| "small-drum"
 	| "tuba"
 	| "piccolo"
+	| "piccolo1"
+	| "piccolo2"
 	| "hulusi-flute"
+	| "hulusi-flute1"
+	| "hulusi-flute2"
 	| "pan-flute"
 	| "pan-flute1"
 	| "pan-flute2"
@@ -46,6 +50,7 @@ export type IVocals =
 	| "pan-flute4"
 	| "ocarina"
 	| "ocarina1"
+	| "ocarina2"
 	| "melodica";
 
 /** 映射声部ID */
@@ -296,6 +301,18 @@ export const getFingeringConfig = async (type: IVocals | undefined): Promise<ITy
 				json: piccolo.default,
 				relationship: relationships.piccolo,
 			};
+		case "piccolo1":
+			const piccolo1 = await import(`./fingering-img/piccolo1/index.json`);
+			return {
+				json: piccolo1.default,
+				relationship: relationships.piccolo,
+			};
+		case "piccolo2":
+			const piccolo2 = await import(`./fingering-img/piccolo2/index.json`);
+			return {
+				json: piccolo2.default,
+				relationship: relationships.piccolo,
+			};
 		case "up-bass-horn":
 			const upBassHorn = await import(`./fingering-img/up-bass-horn/index.json`);
 			return {
@@ -336,6 +353,28 @@ export const getFingeringConfig = async (type: IVocals | undefined): Promise<ITy
 					marginRight: ".7rem",
 				},
 			};
+		case "hulusi-flute1":
+			const hulusi1 = await import(`./fingering-img/hulusi-flute1/index.json`);
+			return {
+				json: hulusi1.default,
+				relationship: relationships.hulusi,
+				// width: '180px',
+				styles: {
+					marginLeft: ".6rem",
+					marginRight: ".7rem",
+				},
+			};
+		case "hulusi-flute2":
+			const hulusi2 = await import(`./fingering-img/hulusi-flute2/index.json`);
+			return {
+				json: hulusi2.default,
+				relationship: relationships.hulusi,
+				// width: '180px',
+				styles: {
+					marginLeft: ".6rem",
+					marginRight: ".7rem",
+				},
+			};
 		case "pan-flute":
 			const pan = await import(`./fingering-img/pan-flute/index.json`);
 			return {
@@ -354,18 +393,6 @@ export const getFingeringConfig = async (type: IVocals | undefined): Promise<ITy
 				json: pan2.default,
 				relationship: relationships.pan,
 			};
-		case "pan-flute3":
-			const pan3 = await import(`./fingering-img/pan-flute3/index.json`);
-			return {
-				json: pan3.default,
-				relationship: relationships.pan,
-			};
-		case "pan-flute4":
-			const pan4 = await import(`./fingering-img/pan-flute4/index.json`);
-			return {
-				json: pan4.default,
-				relationship: relationships.pan,
-			};
 		case "ocarina":
 			const ocarina = await import(`./fingering-img/ocarina/index.json`);
 			return {
@@ -386,6 +413,16 @@ export const getFingeringConfig = async (type: IVocals | undefined): Promise<ITy
 					marginTop: "auto",
 				},
 			};
+		case "ocarina2":
+			const ocarina2 = await import(`./fingering-img/ocarina2/index.json`);
+			return {
+				json: ocarina2.default,
+				relationship: relationships.ocarina,
+				width: "180px",
+				styles: {
+					marginTop: "auto",
+				},
+			};
 		case "melodica":
 			const melodica = await import(`./fingering-img/melodica/index.json`);
 			return {