修改样式

package-lock.json

@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@amap/amap-jsapi-loader": "^1.0.1",
+        "@vant/touch-emulator": "^1.4.0",
         "@vant/use": "^1.5.1",
         "@vueuse/core": "^10.1.2",
         "clean-deep": "^3.4.0",
@@ -2824,6 +2825,11 @@
       "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
       "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
     },
+    "node_modules/@vant/touch-emulator": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vant/touch-emulator/-/touch-emulator-1.4.0.tgz",
+      "integrity": "sha512-Zt+zISV0+wpOew2S1siOJ3G22y+hapHAKmXM+FhpvWzsRc4qahaYXatCAITuuXt0EcDp7WvEeTO4F7p9AtX/pw=="
+    },
     "node_modules/@vant/use": {
       "version": "1.5.2",
       "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.5.2.tgz",
@@ -11288,6 +11294,11 @@
       "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
       "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
     },
+    "@vant/touch-emulator": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vant/touch-emulator/-/touch-emulator-1.4.0.tgz",
+      "integrity": "sha512-Zt+zISV0+wpOew2S1siOJ3G22y+hapHAKmXM+FhpvWzsRc4qahaYXatCAITuuXt0EcDp7WvEeTO4F7p9AtX/pw=="
+    },
     "@vant/use": {
       "version": "1.5.2",
       "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.5.2.tgz",

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@vant/touch-emulator": "^1.4.0",
     "@vant/use": "^1.5.1",
     "@vueuse/core": "^10.1.2",
     "clean-deep": "^3.4.0",

src/views/tempo-practice/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import { postMessage } from '@/helpers/native-message';
 import icon_title from './images/icon-title.png';
@@ -12,7 +12,7 @@ import randDom from './images/btn-1.png';
 import iconPlus from './images/icon-plus.png';
 import iconAdd from './images/icon-add.png';
 import { getImage } from './images/music';
-import j1 from './images/music/j-1.png';
+import '@vant/touch-emulator';
 // import j2 from './images/music/j-2.png';
 import { Popover, Popup, showToast } from 'vant';
 import SettingModal from './setting-modal';
@@ -121,7 +121,12 @@ export default defineComponent({
           <div class={styles.title}>
             <img src={icon_title} />
           </div>
-          <div class={styles.back} onClick={() => (state.settingStatus = true)}>
+          <div
+            class={styles.back}
+            onClick={() => {
+              handleStop();
+              state.settingStatus = true;
+            }}>
             <img src={icon_setting} />
           </div>
         </div>

src/views/tempo-practice/setting-modal/index.module.less

@@ -6,6 +6,11 @@
   border-radius: 26px;
   padding: 20px 0;
 
+  &.pcS {
+    width: 50vw;
+    height: 60vh;
+  }
+
   .title {
     position: absolute;
     left: 50%;

src/views/tempo-practice/setting-modal/index.tsx

@@ -14,12 +14,15 @@ import { getImage } from '../images/music';
 import { hendleEndTick } from '../tick';
 import { hendleEndBeat } from '../beat-tick';
 import deepClone from '@/helpers/deep-clone';
+import { useRoute } from 'vue-router';
 
 export default defineComponent({
   emits: ['close'],
   name: 'setting-modal',
   setup(props, { emit }) {
+    const route = useRoute();
     const state = reactive({
+      win: route.query.win,
       element: 'jianpu' as 'jianpu' | 'staff', // 元素
       beat: '4-4' as '4-2' | '4-3' | '4-4' | '8-3' | '8-6', // 拍号
       barLine: '1' as '1' | '2' | '4', // 小节数
@@ -82,7 +85,8 @@ export default defineComponent({
     };
 
     return () => (
-      <div class={styles.settingContainer}>
+      <div
+        class={[styles.settingContainer, state.win === 'pc' ? styles.pcS : '']}>
         <div class={styles.title}></div>
         <i
           class={styles.iconClose}