适配PC

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

@@ -508,15 +508,19 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        padding: 0 7px;
 
         :global {
+            .van-space-item {
+                width: calc(100% / 2);
+                padding: 0 7px;
+            }
+
             .van-button {
                 font-size: 15px;
-                width: 40%;
-                height: 0;
-                margin: 0 7px;
                 padding: 0;
-                padding-bottom: 10.8%;
+                width: 100%;
+                padding-bottom: 27%;
 
                 &::before {
                     display: none;
@@ -537,19 +541,24 @@
     }
 
     .toneContent {
-        padding: 0 14px;
-        display: flex;;
+        padding: 0 7px;
+        display: flex;
+        ;
         flex-wrap: wrap;
 
         :global {
+            .van-space-item {
+                width: calc(100% / 4);
+                padding: 3px;
+            }
+
             .van-button {
+                position: relative;
                 font-size: 13px;
-                width: calc(100% / 4.5);
+                width: 100%;
                 height: 0;
                 padding: 0;
-                margin: 0 1%;
-                margin-bottom: 4%;
-                padding-bottom: 8%;
+                padding-bottom: 40.5%;
                 flex-shrink: 0;
                 background-color: transparent;
 
@@ -577,10 +586,6 @@
     height: 100%;
     border-radius: 18px 0px 0px 18px;
     background: #EEFDFF;
-    .toneContent{
-        padding-bottom: 30px;
-        padding-top: 20px;
-    }
 }
 
 :global(.van-popup--bottom.tonePopup) {
@@ -589,10 +594,26 @@
     min-height: 238px;
     border-radius: 18px 18px 0 0;
     background: #EEFDFF;
-    .tones{
+
+    .tones {
         flex: 1;
     }
-    .toneContent{
+
+    .toneContent {
         margin-top: auto;
+
+        :global {
+            .van-space-item {
+                max-width: 100px;
+            }
+        }
+    }
+
+    .toneAction {
+        :global {
+            .van-space-item {
+                max-width: 200px;
+            }
+        }
     }
 }

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

@@ -346,7 +346,7 @@ export default defineComponent({
 								</Button>
 							</div>
 							<div style={{ flex: 1, overflow: "hidden" }}>
-								<div class={styles.toneContent}>
+								<Space size={0} class={styles.toneContent}>
 									{data.tones.map((tone: IFIGNER_INSTRUMENT_Note) => {
 										const steps = new Array(Math.abs(tone.step)).fill(1);
 										return (
@@ -369,16 +369,16 @@ export default defineComponent({
 											</Button>
 										);
 									})}
-								</div>
+								</Space>
 							</div>
-							<div class={styles.toneAction}>
+							<Space size={0} class={styles.toneAction}>
 								<Button type="primary" round plain onClick={() => (data.tnoteShow = false)}>
 									取消
 								</Button>
 								<Button type="primary" round onClick={() => (data.tnoteShow = false)}>
 									确定
 								</Button>
-							</div>
+							</Space>
 						</div>
 					</Popup>
 				</div>