更新

src/hooks/useDrag/dragbom.tsx

@@ -13,17 +13,29 @@ export default defineComponent({
 	},
   setup(props, { emit }) {
     const data = reactive({
-      guidePos: "bottom" as "bottom" | "top",
+      guidePos: "bottom" as "bottom" | "left" | "right",
     });
 
     const initGuidePos = () => {
       const pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
-      const guideHeight = document.querySelector('.bom_guide')?.getBoundingClientRect().height || 0;
-      const dragTop = document.querySelector('.dragbomBox')?.getBoundingClientRect()?.top || 0;
-      data.guidePos = pageHeight - dragTop < guideHeight ? "top" : "bottom";
+      const pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
+      const guideHeight = document.querySelector('.bom_guide')?.clientHeight || 0;
+      const guideWidth = document.querySelector('.bom_guide')?.clientWidth || 0;
+      const dragBBox = document.querySelector('.bom_drag')?.getBoundingClientRect();
+      const dragTop = dragBBox?.top || 0;
+      const dragLeft = dragBBox?.left || 0;
+      // 引导页出现在下边
+      if (pageHeight - dragTop > guideHeight) {
+        data.guidePos = "bottom"
+      } else {
+        // 引导页出现在左边or右边
+        data.guidePos = dragLeft > guideWidth ? "left" : "right"
+      }
     }
     onMounted(() => {
-      initGuidePos();
+      setTimeout(() => {
+        initGuidePos();
+      }, 0);
     });
     return () => (
       <>
@@ -35,7 +47,7 @@ export default defineComponent({
       </div>
         {
           props.showGuide && 
-          <div class={[styles.guide, data.guidePos === "top" && styles.guideTop, 'bom_guide']} onClick={() => emit("guideDone")}>
+          <div class={[styles.guide, data.guidePos === "left" && styles.guideLeft, data.guidePos === "right" && styles.guideRight, 'bom_guide']} onClick={() => emit("guideDone")}>
             <div class={styles.guideBg}></div>
             <div class={styles.guideDone} onClick={(e) => {e.stopPropagation();emit("guideDone")}}></div>
           </div>          

src/hooks/useDrag/index.module.less

@@ -33,8 +33,8 @@
     content: "";
     display: block;
     position: fixed;
-    left: -100%;
-    top: -100%;
+    left: -100vw;
+    top: -100vh;
     z-index: 9;
     width: 200vw;
     height: 200vh;
@@ -67,4 +67,22 @@
       background-size: 100% 100%;
     }
   }
+  &.guideLeft {
+    top: initial;
+    left: -186px;
+    bottom: -4px;
+    .guideBg {
+      background: url('./img/modalDragBgLeft.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  &.guideRight {
+    top: initial;
+    left: calc(100% - 12px);
+    bottom: -4px;
+    .guideBg {
+      background: url('./img/modalDragBgRight.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
 }

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

@@ -1495,6 +1495,9 @@
         height: 307px !important;
         background: url('./image/subject-bg2.png') no-repeat center !important;
         background-size: contain !important;
+        .dragbomBox{
+            height: 37px;
+        }
         .changeSubjectContainer_pc{
             height: 168px !important;
         }
@@ -1510,7 +1513,7 @@
         background: url('./image/subject-bg3.png') no-repeat center !important;
         background-size: contain !important;
         .dragbomBox{
-            height: 38px;
+            height: 37px;
         }
         .toneTitle_pc{
             display: none;

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

@@ -551,7 +551,6 @@ export default defineComponent({
         resetMode(true, 0);
         handleStop();
         gaumntPause();
-        data.tnoteShow = false
         // 重置乐器
         if (res?.data?.data?.code) {
           data.subject = code;
@@ -560,6 +559,7 @@ export default defineComponent({
           data.loadingDom = true;
           fingerData.fingeringInfo = subjectFingering(data.subject);
           data.activeTone = {} as any;
+          data.popupActiveTone = {} as any;
           resetElement();
           // 设置屏幕方向
           setTimeout(() => {