Browse Source

style: 光标提示显示位置优化

TIANYONG 1 year ago
parent
commit
399df9b20c

+ 4 - 1
src/subpages/colexiu/buttons/index.module.less

@@ -112,7 +112,7 @@
     }
     .botton-tips {
       position: absolute;
-      left: -30PX;
+      left: -70PX;
       top: 22PX;
       background: rgba(33, 33, 33, 0.56);
       font-size: 14PX;
@@ -123,6 +123,9 @@
       z-index: 1;
       border-radius: 20PX;
       z-index: 9;
+      &.tipSpec {
+        left: -40PX;
+      }
     }  
   }
 }

+ 5 - 1
src/subpages/colexiu/buttons/index.tsx

@@ -101,6 +101,10 @@ export type IModelType = 'practice' | 'evaluation' | 'follow' | 'init'
 export const modelType = ref<IModelType>('init')
 export const onChangeModelType = (type: IModelType) => {
   if (type === modelType.value) return
+  // 跟练模式,光标只有音符模式,无节拍模式
+  if (type === 'follow' && metronomeData.cursorMode === 2) {
+    metronomeData.cursorMode = 1
+  }
   if (type === 'evaluation') {
     RuntimeUtils.changeSpeed(detailState.activeDetail?.originalSpeed, false)
     // 评测模式
@@ -285,7 +289,7 @@ export default defineComponent({
                   {metronomeData.cursorMode === 1 ? '音符指针' : metronomeData.cursorMode === 2 ? '节拍指针' : metronomeData.cursorMode === 3 ? '关闭指针' : ''}
                   {metronomeData.cursorTips && <>
                     <i class={styles.arrowIcon}></i>
-                    <div class={classNames(styles['botton-tips'])}>{metronomeData.cursorTips}</div>
+                    <div class={classNames(styles['botton-tips'],metronomeData.cursorMode === 3 ? styles.tipSpec : '')}>{metronomeData.cursorTips}</div>
                   </>}
                 </span>
               </Button>