perf: style

src/pages/userCenter/UserManage.js

@@ -9,8 +9,7 @@ import {
   Input,
   notification,
   Tooltip,
-  Row,
-  Col,
+  Card,
   Tabs,
   Button,
   Spin,
@@ -1110,21 +1109,21 @@ const UserManage = () => {
       <div className={styles.contentContainer}>
         {/* 左侧机构树 */}
         <Spin spinning={treeLoading} tip="loading...">
-          <div
+          <Card
             className={classnames({
               [styles.orgContainer]: true,
               [styles.orgContainerHide]: !treeVisible,
             })}
           >
             <div>
-              <span style={{ margin: '10px' }}>机构列表</span>
+              <span style={{ margin: '0 106px 0 10px' }}>机构列表</span>
               <Tooltip title="添加顶级机构">
                 <UsergroupAddOutlined
                   onClick={() => addOrg()}
                   style={{
-                    float: 'right',
                     color: '#1890FF',
                     fontSize: '18px',
+                    verticalAlign: '0.04em',
                   }}
                 />
               </Tooltip>
@@ -1132,8 +1131,8 @@ const UserManage = () => {
                 <Tree
                   showIcon="true"
                   showLine={{ showLeafIcon: false }}
-                  // blockNode="true"
-                  autoExpandParent="true"
+                  blockNode
+                  autoExpandParent
                   expandedKeys={[currentSelectOrg]}
                   selectedKeys={[currentSelectOrg]}
                   onSelect={onSelect}
@@ -1153,7 +1152,7 @@ const UserManage = () => {
                 </Tooltip>
               )}
             </div>
-          </div>
+          </Card>
         </Spin>
 
         {/* 右侧用户表 */}

src/pages/userCenter/UserManage.less

@@ -44,6 +44,9 @@
             background: #aed8fa !important;
         }
     }
+    .ant-modal-close-x {
+        line-height: 40px;
+    }
 }
 .redText{
     color: red;
@@ -87,18 +90,19 @@
     }
     .contentContainer{
         display: flex;
+        width: 100%;
+        position: relative;
         .orgContainer{
             height: calc(100vh - 74px);
-            float: left;
-            padding: 10px;
-            padding-right: 22px;
             width: 240px;
-            background: white;
-            overflow: auto;
-            margin-right:10px;
-            margin-left:0px;
-            transform: translateX(1px);
-            transition: transform 0.5s;
+            left: 0;
+            top: 0;
+            overflow-x: hidden;
+            margin-right: 10px;
+            position: relative;
+            transition-property:width,left;
+            transition-duration: 0.5s;
+            white-space: nowrap;
             .ant-tree{
                 padding-top: 6px;
                 .ant-tree-switcher{
@@ -110,27 +114,31 @@
                 }
             }
             .switcher{
-                color: #1890FF; 
-                font-size: 18px;
+                display: block;
                 position: absolute;
-                left: 220px;
-                top: 46%;
+                font-size: 18px;
+                color: #1890FF!important;
+                top: 45%;
+                right: 2px;
+                transform: translate(0%,-50%);
+                z-index: 1;
             }
         }
         
         .orgContainerHide{
-            transform: translateX(-230px);
-        }
-        .userContainerHide{
-            transform: translateX(-230px);
-            margin-right: -230px;
+            // transform: translateX(-230px);
+            left: 0px;
+            top: 0;
+            width: 20px;
         }
         .userContainer{
             height: calc(100vh - 74px) !important;
-            flex: 1;
+            z-index: 999;
             min-width: 800px;
             background: white;
-            transition: transform 0.5s;
+            width: 100%;
+            position: relative;
+            transition: width 0.5s;
             .ant-table-pagination{
                 padding-right: 12px;
                 background: white;
@@ -150,7 +158,6 @@
             .ant-table-thead tr th{
                 font-weight: 600;
                 color:rgba(0,0,0,0.85);
-                // background-color: #c9e1f5;
             }
             .ant-table-cell{
                 text-align:center;