修改优化

src/hooks/useDrag/dragbom.tsx

@@ -45,8 +45,8 @@ export default defineComponent({
     return () => (
       <>
         <div class={[styles.dragBom, 'bom_drag']}>
-          <div class={styles.box}></div>
-          <div class={[styles.box, styles.right]}></div>
+          <div class={[styles.box, 'bom_drag_point']}></div>
+          <div class={[styles.box, 'bom_drag_point_right', styles.right]}></div>
         </div>
         {props.showGuide && (
           <div

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

@@ -317,6 +317,17 @@
 .settingPopup {
   background: transparent;
   overflow: visible;
+
+  :global {
+    .bom_drag {
+      pointer-events: none;
+    }
+
+    .bom_drag_point,
+    .bom_drag_point_right {
+      pointer-events: all;
+    }
+  }
 }
 
 .popupContainer {
@@ -370,7 +381,6 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  transition: all .2s ease;
 
 
   &.leftShow {
@@ -398,8 +408,8 @@
         }
 
         .beat {
-          width: 42px !important;
-          height: 56px !important;
+          width: 44px !important;
+          height: 58px !important;
           margin: 0 3px;
 
           img {
@@ -462,4 +472,96 @@
 .settingModalShow {
   height: 100% !important;
   width: 281px !important;
+}
+
+@media all and (max-width: 720px) {
+
+  .containerLeft {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    &.leftShow {
+      .beatSection {
+        .beat {
+          width: 70px;
+          height: 90px;
+          margin: 0 8px;
+
+          img {
+            width: 64px;
+          }
+        }
+
+        &.small {
+          &:nth-child(2n + 1) {
+            justify-content: flex-end;
+            padding-right: 4px;
+          }
+
+          &:nth-child(2n + 2) {
+            justify-content: flex-start;
+            padding-left: 4px;
+          }
+
+          .beat {
+            width: 35px !important;
+            height: 46px !important;
+            margin: 0 3px;
+
+            img {
+              width: 28px;
+            }
+          }
+        }
+      }
+
+      .footer {
+        &>div {
+          margin: 0 4px;
+        }
+
+        .play {
+          width: 35px;
+          height: 35px;
+        }
+
+        .playType {
+          width: 129px;
+          height: 29px;
+        }
+
+        .randomTempo {
+          width: 67px;
+          height: 29px;
+        }
+
+        .speedChange {
+          width: 81px;
+          height: 29px;
+
+          .speedNum {
+            font-size: 12px;
+          }
+
+          .speedPlus,
+          .speedAdd {
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+    }
+
+  }
+
+  .containerRight {
+    width: 245px;
+    transition: all .2s ease;
+  }
+
+  .settingModalShow {
+    height: 100% !important;
+    width: 245px !important;
+  }
 }

src/views/tempo-practice/index.tsx

@@ -320,7 +320,11 @@ export default defineComponent({
     if (state.platform === 'modal') {
       settingBoxClass = 'settingBoxClass_drag';
       settingBoxDragData = useDrag(
-        [`${settingBoxClass} .iconTitBoxMove`, `${settingBoxClass} .bom_drag`],
+        [
+          `${settingBoxClass} .iconTitBoxMove`,
+          `${settingBoxClass} .bom_drag_point`,
+          `${settingBoxClass} .bom_drag_point_right`
+        ],
         settingBoxClass,
         toRef(state, 'settingPcStatus'),
         stateData.user.data.id

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

@@ -120,8 +120,8 @@
   }
 
   .iArrow {
-    width: 17px;
-    height: 17px;
+    width: 14px;
+    height: 14px;
     margin-right: 3px;
   }
 
@@ -139,7 +139,8 @@
         background: #E5F0FB;
         border-radius: 6px;
         font-weight: 500;
-        font-size: 16px;
+        font-size: 15px;
+        line-height: 1;
         color: #000000;
         cursor: pointer;
       }
@@ -207,6 +208,8 @@
     &>div {
       background: #F5F6F7;
       margin: 4px;
+      border-radius: 3px;
+      overflow: hidden;
     }
   }
 

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

@@ -281,7 +281,7 @@ export default defineComponent({
                 ),
                 default: () => (
                   <>
-                    <div class={styles.parmaTitle}>节奏型筛选</div>
+                    {/* <div class={styles.parmaTitle}>节奏型筛选</div> */}
                     <div class={[styles.paramContent, styles.tempo]}>
                       {Object.keys(tempoList.value).map((item: any) => (
                         <div

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

@@ -10,7 +10,7 @@
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     height: 100% !important;
-    width: 354px !important;
+    width: 304px !important;
   }
 
 
@@ -19,7 +19,7 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 20px;
+    height: 15px;
     z-index: 11;
 
   }

vite.config.ts

@@ -16,7 +16,7 @@ function resolve(dir: string) {
 // const proxyUrl = 'https://test.lexiaoya.cn/';
 // const proxyUrl = 'https://kt.colexiu.com/';
 // const proxyUrl = 'http://192.168.3.143:7093/';
-const proxyUrl = 'https://test.kt.colexiu.com/';
+const proxyUrl = 'https://dev.kt.colexiu.com/';
 export default defineConfig({
   base: './',
   plugins: [