瀏覽代碼

fix: #8610 bug修复

TIANYONG 1 年之前
父節點
當前提交
a8dd338d57
共有 2 個文件被更改,包括 32 次插入29 次删除
  1. 27 26
      src/page-instrument/header-top/index.module.less
  2. 5 3
      src/page-instrument/header-top/index.tsx

+ 27 - 26
src/page-instrument/header-top/index.module.less

@@ -94,32 +94,33 @@
         width: 85%;
         height: 85%;
     }
-
-    .botton-tips {
-        position: absolute;
-        left: -20PX;
-        bottom: -28PX;
-        background: rgba(33, 33, 33, 0.56);
-        font-size: 14PX;
-        font-weight: 500;
-        color: #FFFFFF;
-        padding: 3PX 10PX;
-        word-break: keep-all;
-        z-index: 1;
-        border-radius: 20PX;
-        &::before {
-          content: "";
-          position: absolute;
-          left: 48PX;
-          top: -8PX;
-          width: 0;
-          height: 0;
-          border-bottom: 8PX solid rgba(33, 33, 33, 0.56);
-          border-right: 8PX solid transparent;
-          border-left: 8PX solid transparent;      
-        }
-    }      
-
+    .iconContent {
+        position: relative;
+        .botton-tips {
+            position: absolute;
+            left: -30PX;
+            bottom: -36PX;
+            background: rgba(33, 33, 33, 0.56);
+            font-size: 14PX;
+            font-weight: 500;
+            color: #FFFFFF;
+            padding: 3PX 10PX;
+            word-break: keep-all;
+            z-index: 1;
+            border-radius: 20PX;
+            &::before {
+              content: "";
+              position: absolute;
+              left: 56PX;
+              top: -8PX;
+              width: 0;
+              height: 0;
+              border-bottom: 8PX solid rgba(33, 33, 33, 0.56);
+              border-right: 8PX solid transparent;
+              border-left: 8PX solid transparent;      
+            }
+        } 
+    }     
 }
 
 .disabled {

+ 5 - 3
src/page-instrument/header-top/index.tsx

@@ -314,14 +314,16 @@ export default defineComponent({
             }}
           >
 
-            <div class={[styles.btn, settingBtn.value.disabled && styles.disabled]} onClick={() => {
+            <div class={[styles.btn]} onClick={() => {
               // 切换光标模式
               const mode = metronomeData.cursorMode === 3 ? 1 : metronomeData.cursorMode + 1
               metronomeData.cursorMode = mode
             }}>
               <img class={styles.iconBtn} src={headImg(metronomeData.cursorMode === 1 ? 'cursor-icon-1.svg' : metronomeData.cursorMode === 2 ? 'cursor-icon-2.svg' : metronomeData.cursorMode === 3 ? 'cursor-icon-3.svg' : '')} />
-              <span>{metronomeData.cursorMode === 1 ? '音符指针' : metronomeData.cursorMode === 2 ? '节拍指针' : metronomeData.cursorMode === 3 ? '关闭指针' : ''}</span>
-              {metronomeData.cursorTips && <div class={styles['botton-tips']}>{metronomeData.cursorTips}</div>}
+              <span class={styles.iconContent}>
+                {metronomeData.cursorMode === 1 ? '音符指针' : metronomeData.cursorMode === 2 ? '节拍指针' : metronomeData.cursorMode === 3 ? '关闭指针' : ''}
+                {metronomeData.cursorTips && <div class={styles['botton-tips']}>{metronomeData.cursorTips}</div>}
+              </span>
             </div>
                         
             <div