样式

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

@@ -23,7 +23,7 @@
     }
 
     .close {
-        color: #fff;
+        color: rgba(255, 255, 255, .55);
         font-size: 14px;
         padding: 0 8px;
         padding-top: 6px;

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

@@ -312,7 +312,19 @@
 
     }
 
-
+    .noteBtn{
+        background: transparent;
+        color: rgba(69, 143, 177, .32);
+        pointer-events: none;
+        border: 0;
+        padding: 0;
+        font-size: 22px;
+        :global{
+            .van-icon{
+                font-weight: bold;
+            }
+        }
+    }
 }
 
 
@@ -520,7 +532,8 @@
                 font-size: 15px;
                 padding: 0;
                 width: 100%;
-                padding-bottom: 27%;
+                height: 0;
+                padding-bottom: 22%;
 
                 &::before {
                     display: none;

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

@@ -71,7 +71,7 @@ export default defineComponent({
 				setNotes();
 				setTimeout(() => {
 					data.loading = false;
-				}, 600)
+				}, 600);
 			}
 		};
 		const setNotes = () => {
@@ -273,15 +273,20 @@ export default defineComponent({
 								</div>
 							</div>
 							<div class={styles.notes}>
-								{/* <Button>
-							<Icon name="arrow-left" />
-						</Button> */}
+								<Button class={styles.noteBtn}>
+									<Icon name="arrow-left" />
+								</Button>
 								<div class={styles.noteContent}>
 									<div class={styles.noteBox}>
 										{data.notes.map((note: IFIGNER_INSTRUMENT_Note, index: number) => {
 											const steps = new Array(Math.abs(note.step)).fill(1);
 											return (
-												<div id={index == 0 ? 'finger-note-0' : ''} draggable={false} class={styles.note} onClick={() => noteClick(note)}>
+												<div
+													id={index == 0 ? "finger-note-0" : ""}
+													draggable={false}
+													class={styles.note}
+													onClick={() => noteClick(note)}
+												>
 													{data.realKey === note.realKey ? (
 														<img draggable={false} src={icons.icon_btn_ylow} />
 													) : (
@@ -304,9 +309,9 @@ export default defineComponent({
 										})}
 									</div>
 								</div>
-								{/* <Button size="small" >
-							<Icon name="arrow" />
-						</Button> */}
+								<Button class={styles.noteBtn}>
+									<Icon name="arrow" />
+								</Button>
 							</div>
 						</div>
 						<div class={[styles.tips, data.tipShow ? "" : styles.tipHidden]}>
@@ -330,14 +335,16 @@ export default defineComponent({
 							</div>
 						</div>
 					</div>
-					{data.tones.length && <div id="finger-note-1" class={styles.toggleBtn} onClick={() => (data.tnoteShow = true)}>
-						<div>
-							<sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
-							{data.activeTone.name}
+					{!!data.tones.length && (
+						<div id="finger-note-1" class={styles.toggleBtn} onClick={() => (data.tnoteShow = true)}>
+							<div>
+								<sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
+								{data.activeTone.name}
+							</div>
+							调
+							<img src={icons.icon_arrow} />
 						</div>
-						调
-						<img src={icons.icon_arrow} />
-					</div>}
+					)}
 
 					<Popup
 						class="tonePopup"
@@ -388,7 +395,7 @@ export default defineComponent({
 						</div>
 					</Popup>
 
-					{!data.loading && <GuideIndex list={['finger']} />}
+					{!data.loading && <GuideIndex list={["finger"]} />}
 				</div>
 			);
 		};

src/view/fingering/fingering-config.ts

@@ -19,7 +19,6 @@ export type IFingering = {
 	/** 横竖屏 0:横屏 1: 竖屏 */
 	orientation?: number;
 	code?: string;
-	transform?: string;
 	/** 是否有替指 */
 	hasTizhi?: boolean;
 };
@@ -198,7 +197,6 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
 				width: "3rem",
 				orientation: 1,
 				code: '竖笛',
-				transform: 'scale(1.5) translateY(-0.6rem)',
 				hasTizhi: true,
 			};
 		case "hulusi-flute": // 葫芦丝
@@ -208,7 +206,6 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
 				width: "3rem",
 				orientation: 1,
 				code: '葫芦丝',
-				transform: 'scale(1.6) translateY(-1rem)',
 				hasTizhi: false,
 			};
 		case "pan-flute": // 排箫

src/view/fingering/index.tsx

@@ -69,7 +69,7 @@ export default defineComponent({
 							onClick={() => doubeClick()}
 							class={[styles.fingeringContainer, styles.vertical, state.fingeringInfo.name]}
 						>
-							<div class={styles.imgs} style={{ transform: state.fingeringInfo.transform }}>
+							<div class={styles.imgs}>
 								<img src={fingerData.subject?.json?.full} />
 								{rs.map((key: number | string, index: number) => {
 									const nk: string = typeof key === "string" ? key.replace("active-", "") : String(key);