fix

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

@@ -57,7 +57,7 @@
 
             .tipContent {
                 border-radius: 16px;
-                padding: 4px 8px;
+                padding: 14px 8px 4px 8px;
             }
         }
     }
@@ -101,7 +101,7 @@
             .tipContent {
                 border-radius: 16px 16px 0 0;
                 border-bottom: transparent;
-                padding: 4px;
+                padding: 14px 4px 4px 4px;
             }
         }
     }
@@ -215,11 +215,12 @@
 
     .tipTitle {
         position: relative;
-        height: 48px;
+        height: 56px;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-shrink: 0;
+        padding-bottom: 8px;
     }
 
     .tipTitleName {
@@ -281,7 +282,7 @@
 
     .iconBook {
         position: absolute;
-        top: 48px;
+        top: 56px;
         left: 37px;
         right: 37px;
         pointer-events: none;
@@ -309,6 +310,7 @@
             background-size: 100%;
             opacity: .4;
             pointer-events: none;
+            z-index: 1;
         }
     }
 
@@ -745,6 +747,10 @@
             pointer-events: none;
         }
     }
+    .tipWrap{
+        flex: 1;
+        overflow: hidden;
+    }
 
     .tipContent {
         flex: 1;
@@ -753,7 +759,7 @@
         border: 1.5px solid rgba(180, 165, 154, 1);
         color: rgba(68, 59, 59, 1);
         font-size: 12px;
-        overflow: hidden;
+        
     }
 
     .toneAction {
@@ -763,8 +769,9 @@
         align-items: center;
         padding: 16px 0;
         img {
-            width: 128px;
-            margin: 0 8px;
+            width: 45%;
+            max-width: 128px;
+            margin: 0 6px;
             &:active{
                 opacity: .85;
             }
@@ -772,17 +779,16 @@
     }
 
     .toneContent {
-        padding: 0 7px;
+        margin: 0 -2px;
         display: flex;
         flex-wrap: wrap;
-        flex: 1;
         --van-button-primary-background: rgba(174, 137, 103, 1);
         --van-button-primary-border-color: rgba(174, 137, 103, 1);
 
         :global {
             .van-space-item {
                 width: calc(100% / 4);
-                padding: 3px;
+                padding: 6px 2px;
             }
 
             .van-button {
@@ -837,6 +843,18 @@
         padding: 8px;
         background-image: url('./image/icon_shuo_h.png');
 
+        &::before {
+            content: '';
+            position: absolute;
+            left: 8px;
+            top: 8px;
+            right: 8px;
+            bottom: 8px;
+            border-radius: 15px;
+            border: 1px solid rgba(240, 234, 230, 1);
+            pointer-events: none;
+        }
+
         .tipContentbox {
             padding: 6px 8px 8px 8px;
             border-radius: 16px;
@@ -863,6 +881,18 @@
         padding: 8px 8px 0 8px;
         background-image: url('./image/icon_shuo_v.png');
 
+        &::before {
+            content: '';
+            position: absolute;
+            left: 8px;
+            top: 8px;
+            right: 8px;
+            bottom: 0;
+            border-radius: 15px;
+            border: 1px solid rgba(240, 234, 230, 1);
+            pointer-events: none;
+        }
+
         .tipContentbox {
             padding: 6px 8px 0 8px;
             border-radius: 16px 16px 0 0;

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

@@ -37,7 +37,7 @@ import { usePageVisibility } from "@vant/use";
 import { watch } from "vue";
 import icon_loading_img from "./image/icon_loading_img.png";
 import icon_popup_top from "./image/icon_popup_top.png";
-import state from "/src/state";
+import state, { IPlatform } from "/src/state";
 
 export default defineComponent({
 	name: "viewFigner",
@@ -422,7 +422,7 @@ export default defineComponent({
 											return <img data-index={nk} src={fingerData.subject?.json?.[nk]} />;
 										})}
 										<div
-											style={{left: data.viewIndex == 2 ? '0': '64%'}}
+											style={{ left: data.viewIndex == 2 ? "0" : "64%" }}
 											class={[styles.tizhi, canTizhi && styles.canDisplay]}
 											onClick={() =>
 												(fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)
@@ -432,13 +432,12 @@ export default defineComponent({
 										</div>
 										<div
 											id="finger-note-2"
-											style={{left: '50%', transform: 'translateX(-50%)'}}
+											style={{ left: "50%", transform: "translateX(-50%)" }}
 											class={styles.tizhi}
 											onClick={() =>
 												(fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)
 											}
-										>
-										</div>
+										></div>
 									</div>
 								</div>
 							</div>
@@ -581,42 +580,46 @@ export default defineComponent({
 							</div>
 							<div class={styles.tipContentbox}>
 								<div class={styles.tipContent}>
-									<Space size={0} class={styles.toneContent}>
-										{data.tones.map((tone: IFIGNER_INSTRUMENT_Note) => {
-											const steps = new Array(Math.abs(tone.step)).fill(1);
-											return (
-												<Button
-													class={[fingerData.fingeringInfo.name == "hulusi-flute" && styles.hulusiBtn]}
-													round
-													plain
-													type={data.popupActiveTone.realName === tone.realName ? "primary" : "default"}
-													onClick={() => {
-														data.popupActiveTone = tone;
-														setNotes();
-													}}
-												>
-													{fingerData.fingeringInfo.name == "hulusi-flute" ? (
-														<div style={{ display: "flex", alignItems: "center" }}>
-															全按作
-															<div class={[styles.noteKey, styles.hulusiNoteKey]}>
-																{tone.step > 0 ? <span class={styles.dot}></span> : null}
-																<div class={styles.noteName} style={{ fontSize: "0.25rem" }}>
-																	<sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
-																	{tone.key}
+									<div class={styles.tipWrap}>
+										<Space size={0} class={styles.toneContent}>
+											{data.tones.map((tone: IFIGNER_INSTRUMENT_Note) => {
+												const steps = new Array(Math.abs(tone.step)).fill(1);
+												return (
+													<Button
+														class={[fingerData.fingeringInfo.name == "hulusi-flute" && styles.hulusiBtn]}
+														round
+														plain
+														type={
+															data.popupActiveTone.realName === tone.realName ? "primary" : "default"
+														}
+														onClick={() => {
+															data.popupActiveTone = tone;
+															setNotes();
+														}}
+													>
+														{fingerData.fingeringInfo.name == "hulusi-flute" ? (
+															<div style={{ display: "flex", alignItems: "center" }}>
+																全按作
+																<div class={[styles.noteKey, styles.hulusiNoteKey]}>
+																	{tone.step > 0 ? <span class={styles.dot}></span> : null}
+																	<div class={styles.noteName} style={{ fontSize: "0.25rem" }}>
+																		<sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
+																		{tone.key}
+																	</div>
+																	{tone.step < 0 ? <span class={styles.dot}></span> : null}
 																</div>
-																{tone.step < 0 ? <span class={styles.dot}></span> : null}
 															</div>
-														</div>
-													) : (
-														<div class={styles.noteName}>
-															<sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
-															{tone.name}
-														</div>
-													)}
-												</Button>
-											);
-										})}
-									</Space>
+														) : (
+															<div class={styles.noteName}>
+																<sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
+																{tone.name}
+															</div>
+														)}
+													</Button>
+												);
+											})}
+										</Space>
+									</div>
 									<div class={styles.toneAction}>
 										<img onClick={() => (data.tnoteShow = false)} src={icons.icon_action_cancel} />
 										<img