Browse Source

style: 光标粗细根据谱面大小变化

TIANYONG 5 months ago
parent
commit
39d7e029ea
2 changed files with 60 additions and 7 deletions
  1. 58 6
      src/view/selection/index.module.less
  2. 2 1
      src/view/selection/index.tsx

+ 58 - 6
src/view/selection/index.module.less

@@ -353,33 +353,85 @@
 
 .middleZoom {
     .line {
-        height: 70PX;
+        height: 75PX;
     }
     :global {
         .node-dot::before{
-            height: 70PX;
+            height: 75PX;
         }
     }
 }
 
 .bigZoom {
     .line {
-        height: 80PX;
+        height: 90PX;
     }
     :global {
         .node-dot::before{
-            height: 80PX;
+            height: 90PX;
         }
     }
 }
 
 .largeZoom {
     .line {
-        height: 90PX;
+        height: 105PX;
     }
     :global {
         .node-dot::before{
-            height: 90PX;
+            height: 105PX;
+        }
+    }
+}
+
+.largeZoom2 {
+    .line {
+        height: 120PX;
+        width: 3PX;
+    }
+    :global {
+        .node-dot::before{
+            height: 120PX;
+            width: 3PX;
+        }
+    }
+}
+
+.largeZoom3 {
+    .line {
+        height: 140PX;
+        width: 3PX;
+    }
+    :global {
+        .node-dot::before{
+            height: 140PX;
+            width: 3PX;
+        }
+    }
+}
+
+.smallZoom {
+    .line {
+        height: 45PX;
+        width: 1PX;
+    }
+    :global {
+        .node-dot::before{
+            height: 45PX;
+            width: 1PX;
+        }
+    }
+}
+
+.litteZoom {
+    .line {
+        height: 35PX;
+        width: 1PX;
+    }
+    :global {
+        .node-dot::before{
+            height: 35PX;
+            width: 1PX;
         }
     }
 }

+ 2 - 1
src/view/selection/index.tsx

@@ -275,7 +275,8 @@ export default defineComponent({
 					class={[
 						styles.selectionContainer,
 						isPad && styles.isPad,
-						state.zoom == 1.25 ? styles.middleZoom : state.zoom == 1.5 ? styles.bigZoom : state.zoom == 1.75 ? styles.largeZoom : ''
+						state.zoom == 1.25 ? styles.middleZoom : state.zoom == 1.5 ? styles.bigZoom : state.zoom == 1.75 ? styles.largeZoom : state.zoom == 2 ? styles.largeZoom2 : state.zoom == 2.25 ? styles.largeZoom3 : 
+						state.zoom == 0.65 ? styles.smallZoom : state.zoom == 0.5 ? styles.litteZoom : ''
 					]}
 					onClick={(e: Event) => e.stopPropagation()}
 				>