调整

src/views/admin/system/user/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="layout-padding">
 		<Splitpanes @resize="depTreeWidth = $event[0].size">
-			<pane :size="depTreeWidth" class="relative">
+			<pane :size="depTreeWidth">
 				<dep-tree
 					class="p-2"
 					ref="depTreeRef"
@@ -30,25 +30,22 @@
 						<span v-if="!data.isLock">{{ node.label }}</span>
 					</template>
 				</dep-tree>
-
-				<div
-					v-if="depTreeWidth > 0.5"
-					class="pt-7 text-center w-2 h-20 absolute right-0 top-[44vh] translate-y-[-50%] overflow-hidden bg-blue-500 transition-all cursor-pointer"
-					style="clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%)"
-					@click="handleClickDepTreeDrawer(isOpen)"
-				>
-					<span class="text-white font-bold text-xs">&lt;</span>
-				</div>
-				<div
-					v-else
-					class="pt-7 text-center w-2 h-20 absolute right-0 top-[44vh] translate-y-[-50%] overflow-hidden bg-blue-500 transition-all cursor-pointer"
-					style="clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%)"
-					@click="handleClickDepTreeDrawer(isOpen)"
-				>
-					<span class="text-white font-bold text-xs">&gt;</span>
-				</div>
 			</pane>
-			<pane :size="100 - depTreeWidth" class="ml8">
+
+			<pane :size="100 - depTreeWidth" class="pl8 relative">
+				<div
+					class="w-[12px] h-[56px] absolute left-0 top-[44vh] translate-y-[-50%] transition-all cursor-pointer"
+					@click="handleClickDepTreeDrawer(isOpen)"
+					style="background-color: #e3e9ed; border-top-right-radius: 20px; border-bottom-right-radius: 20px"
+				>
+					<i class="drawer-icon">
+						<el-icon>
+							<ArrowLeftBold v-if="depTreeWidth > 0.5" />
+							<ArrowRightBold v-else />
+						</el-icon>
+					</i>
+				</div>
+
 				<div class="layout-padding-auto layout-padding-view">
 					<el-row v-show="showSearch">
 						<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
@@ -266,7 +263,7 @@ const queryRef = ref()
 const showSearch = ref(true)
 const inputPassword = ref()
 const depTreeRef = ref() // 树组件ref引用
-const depTreeWidth = ref<number>(20)
+const depTreeWidth = ref<number>(20) // 部门树组件宽度
 
 // 多选rows
 const selectObjs = ref([]) as any
@@ -393,7 +390,8 @@ const handleClickDepTreeDrawer = (isDrawerOpen: boolean) => {
 
 <style>
 .splitpanes--vertical > .splitpanes__splitter {
-	min-width: 4px;
+	background: #cccccc;
+	min-width: 2px;
 	transition: all 0.3s ease;
 }
 .splitpanes--vertical > .splitpanes__splitter:active {
@@ -402,4 +400,21 @@ const handleClickDepTreeDrawer = (isDrawerOpen: boolean) => {
 .splitpanes--vertical > .splitpanes__splitter:hover {
 	background: #1890ff;
 }
+.drawer-icon {
+	color: #b7bdc8;
+	font-size: 1rem;
+	display: inline-block;
+	text-align: center;
+	line-height: 64px;
+}
+.drawer-icon:hover {
+	opacity: 0.5;
+}
+/* .drawer-icon::before {
+	content: "<";
+	background: none;
+	box-sizing: inherit;
+	color: #b7bdc8;
+	font-size: 1em;
+} */
 </style>