fix

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

@@ -340,6 +340,40 @@ export default defineComponent({
 			const fingeringContainer = document.getElementById("fingeringContainer");
 			fingeringContainer?.removeEventListener("wheel", handleWheel);
 		});
+
+		const containerBox = computed(() => {
+			if (data.subject === "hulusi-flute") {
+				return {
+					paddingTop: "3.1rem",
+					paddingBottom: ".8rem",
+				}
+			} else if (data.subject === "piccolo") {
+				return {
+					paddingTop: "4rem",
+					paddingBottom: ".8rem",
+				}
+			} else if (data.subject === 'pan-flute'){
+				return {
+					paddingTop: "0",
+					paddingBottom: "0",
+				}
+			} else if (data.subject === "ocarina") {
+				return {
+					paddingTop: "1.2rem",
+					paddingBottom: "0",
+				}
+			} else if (data.subject === 'melodica') {
+				return {
+					paddingTop: "2.8rem",
+					paddingBottom: "1.8rem",
+				}
+			} else {
+				return {
+					paddingTop: "",
+					paddingBottom: "",
+				}
+			}
+		})
 		return () => {
 			const relationship = fingerData.subject?.relationship?.[data.realKey] || [];
 			const rs: number[] = Array.isArray(relationship[1])
@@ -411,8 +445,8 @@ export default defineComponent({
 								id="fingeringContainer"
 								class={styles.boxFinger}
 								style={{
-									paddingTop: ["piccolo", "hulusi-flute"].includes(data.subject) ? "3.1rem" : "0",
-									paddingBottom: ["piccolo", "hulusi-flute"].includes(data.subject) ? ".8rem" : "0",
+									paddingTop: containerBox.value.paddingTop,
+									paddingBottom: containerBox.value.paddingBottom,
 								}}
 							>
 								<div