wgCYE#95yVg=fUdrwn8gatr)&Q6o{>-`V+c_6?h+*>L^zt8m;pp5O#y1Tk=~^b
zp#`NJ9pwm?Lr3KznVn(C*AGe%OHD)rQr_B>&>U1VSzedFT%9-A#=0bBq|%yq#XnJH
O;(0GFA6xd{0002I6HXBT
literal 0
HcmV?d00001
diff --git a/src/components/ReSplitPane/index.tsx b/src/components/ReSplitPane/index.tsx
index 7cf4418ad..9d52820c1 100644
--- a/src/components/ReSplitPane/index.tsx
+++ b/src/components/ReSplitPane/index.tsx
@@ -35,16 +35,12 @@ export default defineComponent({
props.splitSet?.split
]);
- const userSelect = computed(() => {
- return active.value ? "none" : "";
- });
-
const cursor = computed(() => {
return active.value
? props.splitSet?.split === "vertical"
- ? "col-resize"
- : "row-resize"
- : "";
+ ? { cursor: "col-resize" }
+ : { cursor: "row-resize" }
+ : { cursor: "default" };
});
const onClick = (): void => {
@@ -109,7 +105,7 @@ export default defineComponent({
<>
onMouseUp()}
onMousemove={() => onMouseMove(event)}
>
diff --git a/src/components/ReSplitPane/resizer.css b/src/components/ReSplitPane/resizer.css
index 7a22f7fc6..34b1fc224 100644
--- a/src/components/ReSplitPane/resizer.css
+++ b/src/components/ReSplitPane/resizer.css
@@ -1,3 +1,5 @@
+@import "./iconfont/iconfont.css";
+
.splitter-pane-resizer {
box-sizing: border-box;
background: #000;
@@ -9,19 +11,37 @@
}
.splitter-pane-resizer.horizontal {
- height: 11px;
- margin: -5px 0;
- border-top: 5px solid rgb(255 255 255 / 0%);
- border-bottom: 5px solid rgb(255 255 255 / 0%);
- cursor: row-resize;
+ height: 6px;
width: 100%;
+ background: #e5e6eb;
+ cursor: row-resize;
+}
+
+.splitter-pane-resizer.horizontal:before {
+ content: "\eda3";
+ font-family: "iconfont";
+ font-size: 13px;
+ color: #000;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
.splitter-pane-resizer.vertical {
- width: 11px;
+ width: 6px;
height: 100%;
- margin-left: -5px;
- border-left: 5px solid rgb(255 255 255 / 0%);
- border-right: 5px solid rgb(255 255 255 / 0%);
+ background: #e5e6eb;
cursor: col-resize;
}
+
+.splitter-pane-resizer.vertical:before {
+ content: "\e647";
+ font-family: "iconfont";
+ font-size: 13px;
+ color: #000;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
diff --git a/src/views/components/split-pane/index.vue b/src/views/components/split-pane/index.vue
index 8b4dab69f..16721c843 100644
--- a/src/views/components/split-pane/index.vue
+++ b/src/views/components/split-pane/index.vue
@@ -56,13 +56,14 @@ $H: 70vh;
text-align: center;
font-size: 50px;
color: #fff;
+ border: 1px solid #e5e6eb;
.dv-a,
.dv-b,
.dv-c {
width: $W;
height: $W;
- background: rgba($color: dodgerblue, $alpha: 0.8);
+ color: rgba($color: dodgerblue, $alpha: 0.8);
line-height: $H;
}
@@ -72,11 +73,11 @@ $H: 70vh;
}
.dv-b {
- background: rgba($color: #000, $alpha: 0.8);
+ color: rgba($color: #000, $alpha: 0.8);
}
.dv-c {
- background: rgba($color: #ce272d, $alpha: 0.8);
+ color: rgba($color: #ce272d, $alpha: 0.8);
}
}