指法大小

src/view/fingering/fingering-config.ts

@@ -130,6 +130,7 @@ export const mappingVoicePart = (
 
 /** 声部的指法配置信息 */
 export const subjectFingering = (subjectId: number | string): IFingering => {
+	console.log(800 / window.screen.height)
 	switch (subjectId) {
 		case 2: // 长笛
 			return {
@@ -204,6 +205,7 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
 				orientation: 1,
 				code: "竖笛",
 				hasTizhi: true,
+				transform: `scale(1.3)`,
 			};
 		case "hulusi-flute": // 葫芦丝
 			return {
@@ -234,12 +236,13 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
 				orientation: 0,
 				code: "陶笛",
 				hasTizhi: false,
+				transform: "rotate(-35deg) scale(1.3) translateX(0.2rem)",
 			};
 		case "melodica": // 口风琴
 			return {
 				name: "melodica",
 				direction: "transverse",
-				height: "1.8rem",
+				height: "2rem",
 				orientation: 0,
 				code: "口风琴",
 				hasTizhi: false,

src/view/fingering/index.module.less

@@ -5,11 +5,12 @@
   justify-content: space-evenly;
   align-items: center;
   padding: 0 10px 6px 10px;
+  overflow: hidden;
 }
 
 .vertical {
   position: relative;
-  padding: 10px 6px 10px 0;
+  padding: 10px 0 10px 0;
   box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 10px;
 
   .imgs {

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}>
+							<div class={styles.imgs} style={{transform: state.fingeringInfo.transform}}>
 								<img src={fingerData.subject?.json?.full} />
 								{rs.map((key: number | string, index: number) => {
 									const nk: string = typeof key === "string" ? key.replace("active-", "") : String(key);