Merge branch 'feature-tianyong'

src/page-instrument/header-top/index.module.less

@@ -96,10 +96,22 @@
     }
     .iconContent {
         position: relative;
+        .arrowIcon {
+            position: absolute;
+            left: 50%;
+            top: 14PX;
+            transform: translateX(-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;  
+            z-index: 2;      
+        }
         .botton-tips {
             position: absolute;
             left: -30PX;
-            bottom: -36PX;
+            top: 22PX;
             background: rgba(33, 33, 33, 0.56);
             font-size: 14PX;
             font-weight: 500;
@@ -108,18 +120,8 @@
             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;      
-            }
-        } 
+            z-index: 9;
+        }          
     }     
 }
 

src/page-instrument/header-top/index.tsx

@@ -322,7 +322,10 @@ export default defineComponent({
               <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 class={styles.iconContent}>
                 {metronomeData.cursorMode === 1 ? '音符指针' : metronomeData.cursorMode === 2 ? '节拍指针' : metronomeData.cursorMode === 3 ? '关闭指针' : ''}
-                {metronomeData.cursorTips && <div class={styles['botton-tips']}>{metronomeData.cursorTips}</div>}
+                {metronomeData.cursorTips && <>
+                    <i class={styles.arrowIcon}></i>
+                    <div class={styles['botton-tips']}>{metronomeData.cursorTips}</div>
+                </>}
               </span>
             </div>