修改显示问题

src/hooks/useDrag/dragbom.tsx

@@ -13,7 +13,7 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const data = reactive({
-      guidePos: 'bottom' as 'bottom' | 'left' | 'right'
+      guidePos: 'bottom' as 'bottom' | 'left' | 'right' | 'middle'
     });
 
     const initGuidePos = () => {
@@ -29,13 +29,24 @@ export default defineComponent({
         ?.getBoundingClientRect();
       const dragTop = dragBBox?.top || 0;
       const dragLeft = dragBBox?.left || 0;
+      const dragRight = dragBBox?.right || 0;
+      // console.log(dragTop, dragBBox, pageHeight, guideHeight);
       // 引导页出现在下边
       if (pageHeight - dragTop > guideHeight) {
         data.guidePos = 'bottom';
       } else {
         // 引导页出现在左边or右边
-        data.guidePos = dragLeft > guideWidth ? 'left' : 'right';
+        if (dragLeft > guideWidth) {
+          data.guidePos = 'left';
+        } else if (pageWidth - dragRight > guideWidth) {
+          data.guidePos = 'right';
+        } else {
+          data.guidePos = 'middle';
+        }
+        // data.guidePos = dragLeft > guideWidth ? 'left' : 'right';
       }
+      data.guidePos = 'middle';
+      // console.log(data.guidePos, '121212');
     };
     onMounted(() => {
       setTimeout(() => {
@@ -54,6 +65,7 @@ export default defineComponent({
               styles.guide,
               data.guidePos === 'left' && styles.guideLeft,
               data.guidePos === 'right' && styles.guideRight,
+              data.guidePos === 'middle' && styles.guidemiddle,
               'bom_guide'
             ]}
             onClick={() => emit('guideDone')}>

src/hooks/useDrag/index.module.less

@@ -92,4 +92,21 @@
       background-size: 100% 100%;
     }
   }
+
+  &.guidemiddle {
+    top: initial;
+    left: initial;
+    right: 12px;
+    bottom: 16px;
+
+    &::before {
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 11;
+    }
+
+    .guideBg {
+      background: url('./img/modalDragBgMiddle.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
 }

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

@@ -323,6 +323,10 @@
       pointer-events: none;
     }
 
+    .bom_drag_point {
+      opacity: 0.3;
+    }
+
     .bom_drag_point,
     .bom_drag_point_right {
       pointer-events: all;
@@ -340,6 +344,8 @@
   border-radius: 12px;
   background-color: #fff;
   box-shadow: 0 0.05333rem 0.32rem rgba(50, 50, 51, .12);
+  border-radius: var(--van-popover-radius);
+  overflow: hidden;
 
 
   :global {
@@ -388,7 +394,6 @@
       .beat {
         width: 80px;
         height: 100px;
-
         margin: 0 8px;
 
         img {
@@ -460,12 +465,12 @@
 
 .containerRight {
   width: 281px;
-  transition: all .2s ease;
+  transition: all .1s ease;
 
   &.rightHide {
     transform: translateX(100%);
     width: 0;
-    transition: all .2s ease;
+    transition: all .1s ease;
   }
 }
 
@@ -557,11 +562,22 @@
 
   .containerRight {
     width: 245px;
-    transition: all .2s ease;
+    transition: all 0.03s ease;
   }
 
   .settingModalShow {
     height: 100% !important;
     width: 245px !important;
   }
+
+  .containerRight {
+    width: 281px;
+    transition: all 0.03s ease;
+
+    &.rightHide {
+      transform: translateX(100%);
+      width: 0;
+      transition: all 0.03s ease;
+    }
+  }
 }

src/views/tempo-practice/index.tsx

@@ -430,8 +430,11 @@ export default defineComponent({
                         // 编辑时可以操作
                         if (state.settingStatus) {
                           handleStop();
-                          initSelectScorePartModal();
-                          child.selected = true;
+                          if (setting_modal.scorePart[i][jIndex].selected) {
+                            initSelectScorePartModal();
+                          } else {
+                            initSelectScorePartModal(i, jIndex);
+                          }
                         }
                       }}>
                       {/* 编辑时不可上下切换 */}

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

@@ -47,7 +47,7 @@
     left: 0;
     width: 100%;
     height: 0;
-    z-index: 11;
+    z-index: 8;
 
     .iconClose {
       position: absolute;
@@ -103,7 +103,7 @@
   overflow-y: auto;
   height: 100%;
   position: relative;
-  z-index: 10;
+  z-index: 7;
 
   &::-webkit-scrollbar {
     width: 4px;

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

@@ -12,6 +12,7 @@ import {
   barLineList,
   beatList,
   elementList,
+  initSelectScorePartModal,
   renderScore,
   renderScoreModal,
   setting,
@@ -50,7 +51,7 @@ export default defineComponent({
     const state = reactive({
       win: route.query.win,
       platform: route.query.platform,
-      activeNames: ['base'] as any, // 折叠面板
+      activeNames: ['base', 'beat'] as any, // 折叠面板
       element:
         tempDeepClone(setting_modal.element) ||
         ('jianpu' as 'jianpu' | 'staff'), // 元素
@@ -95,15 +96,40 @@ export default defineComponent({
       return prefix + value + '.png';
     };
     const onChangeTempo = (item: any) => {
-      setting_modal.scorePart.forEach((part: Array<any>) => {
-        part.forEach((child: any) => {
+      let si = 0,
+        ji = 0;
+      let status = false;
+      setting_modal.scorePart.forEach((part: Array<any>, i: number) => {
+        part.forEach((child: any, j: number) => {
           if (child.selected) {
             child.url = getBeatUrl(item);
             child.index = item;
             child.selected = false;
+            si = i;
+            ji = j;
+
+            status = true;
           }
         });
       });
+
+      if (status) {
+        const indexs = toNext(si, ji);
+        if (indexs && indexs.length > 0) {
+          initSelectScorePartModal(indexs[0], indexs[1]);
+        }
+      }
+    };
+
+    const toNext = (i: number, j: number) => {
+      const scorePart = setting_modal.scorePart;
+      let tempJ = j + 1;
+      for (let si = i; si < scorePart.length; si++) {
+        for (let ji = tempJ; ji < scorePart[si].length; ji++) {
+          return [si, ji];
+        }
+        tempJ = 0;
+      }
     };
 
     const handleStop = () => {

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

@@ -6,7 +6,7 @@
   overflow: hidden;
 
   .settingModalShow {
-    z-index: 10;
+    // z-index: 10;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     height: 100% !important;
@@ -95,7 +95,7 @@
     background-size: contain;
   }
 
-  z-index: 10;
+  // z-index: 10;
   // &::before {
   //   content: '';
 
@@ -109,7 +109,7 @@
     width: 162px;
     height: 51px;
     cursor: pointer;
-    z-index: 99;
+    z-index: 8;
   }
 }
 

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

@@ -75,8 +75,11 @@ export default defineComponent({
                     }}
                     onClick={(e: any) => {
                       e.stopPropagation();
-                      initSelectScorePartModal();
-                      child.selected = true;
+                      if (setting_modal.scorePart[i][jIndex].selected) {
+                        initSelectScorePartModal();
+                      } else {
+                        initSelectScorePartModal(i, jIndex);
+                      }
                     }}>
                     <div class={styles.imgSection}>
                       <img src={getImage(child.url)} />