style: 优化用户管理样式

src/pages/userCenter/UserManage.js

@@ -44,8 +44,9 @@ const UserManage = () => {
     const haveChildren = Array.isArray(org.children) && org.children.length > 0;
     return {
       title: (
+        <>
+          <span>{org.text}</span>
           <div className={styles.iconWraper1}>
-          {org.text}
             <Tooltip title="添加用户">
               <FileAddTwoTone onClick={e => addUser(e, org.text, org.id)} />
             </Tooltip>
@@ -59,6 +60,7 @@ const UserManage = () => {
               <DeleteTwoTone onClick={e => deleteOrg(e, org.text, org.id)} />
             </Tooltip>
           </div>
+        </>
       ),
       key: org.id,
       // icon: <CaretDownOutlined />,
@@ -96,6 +98,7 @@ const UserManage = () => {
     {
       title: '操作',
       key: 'action',
+      align: 'center',
       render: (text, record) => (
         <Space size="middle">
           <a>关联角色 {record.name}</a>
@@ -340,18 +343,10 @@ const UserManage = () => {
   };
 
   return (
-    <PageContainer>
-      <div
-        style={{
-          width: '20%',
-          height: 'calc(100vh - 194px)',
-          background: 'white',
-          float: 'left',
-          padding: '10px',
-          minWidth: '330px',
-        }}
-      >
-        <span style={{ padding: '8px' }}>
+    <PageContainer className={styles.userManageContainer}>
+      <div className={styles.contentContainer}>
+        <div className={styles.orgContainer}>
+          <span style={{ padding: '8px', fontSize: '16px' }}>
             机构列表
             <Tooltip title="添加下级机构">
               <FolderAddTwoTone
@@ -369,15 +364,7 @@ const UserManage = () => {
             treeData={treeData}
           />
         </div>
-      <div
-        style={{
-          width: '79%',
-          height: 'calc(100vh - 194px)',
-          background: 'white',
-          float: 'right',
-          padding: '20px',
-        }}
-      >
+        <div className={styles.userContainer}>
           <Table
             columns={columns}
             dataSource={tableData}
@@ -507,6 +494,7 @@ const UserManage = () => {
         >
           <p>即将关联删除 主站点 用户关系，是否确认删除？</p>
         </Modal>
+      </div>
     </PageContainer>
   );
 };

src/pages/userCenter/UserManage.less

-.iconWraper1{
+.userManageContainer{
+    .ant-tree-treenode{
+        width: 100%;
+        .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-normal{
+            display: inline-block;
+            width: 100%;
+        }
+        .iconWraper1{
+            float: right;
             span{
                 display: none;   
             }
-}
-.iconWraper1:hover{
-    span{
+        }
+    }
+
+    .ant-tree-treenode:hover{
+        .iconWraper1>span{
             margin-left: 12px;
             font-size: 16px;
             display: inline-block;   
         }
-    // display: block;
+    }
+    .contentContainer{
+        min-height: calc(100vh - 194px);
+        display: flex;
+        .orgContainer{
+            width: 20%;
+            height: calc(100vh - 194px);
+            float: left;
+            padding: 10px;
+            min-width: 330px;
+            background: white;
+            .ant-tree{
+                padding-top: 6px;
+            }
+        }
+        .userContainer{
+            margin-left: 12px;
+            flex: 1;
+            height: calc(100vh - 194px);
+            background: white;
+            .ant-table-pagination-right{
+                padding-right: 12px;
+            }
+        }
+    }
 }