perf: style

package.json

@@ -118,7 +118,8 @@
     "sanitize.css": "8.0.0",
     "sha1": "^1.1.1",
     "styled-components": "4.2.0",
-    "use-merge-value": "^1.0.2"
+    "use-merge-value": "^1.0.2",
+    "voca": "^1.4.0"
   },
   "devDependencies": {
     "@ant-design/icons": "^4.0.0",

src/app.js

@@ -12,6 +12,8 @@ import { ConnectedRouter } from 'connected-react-router/immutable';
 import Immutable from 'immutable';
 import { Provider } from 'react-redux';
 
+import { ConfigProvider } from 'antd';
+import zhCN from 'antd/es/locale/zh_CN';
 import configureStore from './configureStore';
 import App from './containers/App';
 import history from './utils/history';
@@ -24,7 +26,9 @@ const render = () => {
   ReactDOM.render(
     <Provider store={store}>
       <ConnectedRouter history={history}>
-        <App />
+        <ConfigProvider locale={zhCN}>
+          <App />
+        </ConfigProvider>
       </ConnectedRouter>
     </Provider>,
     MOUNT_NODE,

src/pages/userCenter/UserManage.less

 
+@media screen and (min-width:1300px){
+    .hide{
+        display:none; 
+    }
+}
 .redText{
     color: red;
     cursor: pointer;
 }
+.ant-layout{
+    overflow: auto;
+    .ant-layout-content{
+        margin:12px !important;
+    }
+}
 .userManageContainer{
     .ant-tree-treenode{
         width: 100% !important;
@@ -26,10 +37,9 @@
         }
     }
     .contentContainer{
-        min-height: calc(100vh - 78px);
         display: flex;
         .orgContainer{
-            min-height: calc(100vh - 78px);
+            height: calc(100vh - 74px);
             float: left;
             padding: 10px;
             min-width: 240px;
@@ -44,17 +54,22 @@
         }
         .hide{
             display: none;
-            // width:0;
             transition: 1s;
         }
         .userContainer{
-            margin-left: 10px;
+            height: calc(100vh - 168px) !important;
             flex: 1;
-            height: calc(100vh - 78px);
-            min-width: 880px;
+            min-width: 840px;
             background: white;
-            .ant-table-pagination-right{
+            .ant-table-pagination{
                 padding-right: 12px;
+                background: white;
+                margin: 1px 0;
+                padding:8px;
+                padding-right: 20px;
+                .ant-pagination-prev,.ant-pagination-next{
+                    line-height: 8px !important;
+                }
             }
             .ant-btn-primary{
                 margin-left: 20px;
@@ -73,6 +88,32 @@
                 text-overflow:ellipsis;
                 white-space: nowrap;
             }
+            .ant-table-content{
+                height:calc(100vh - 168px);
+                border-right: white;
+                overflow: auto !important;
+                //滚动条整体部分
+                &::-webkit-scrollbar {
+                    height: 10px;//x轴滚动条粗细
+                    width:10px;//y轴滚动条粗细
+                    border-bottom: 2px solid white;
+                }
+                
+                //滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条）
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 10px;
+                    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);       
+                    background: rgba(74, 74, 75, 0.1);
+                    margin-bottom: 10px;
+                }
+                //滚动条的轨道（里面装有thumb）滚动槽
+                &::-webkit-scrollbar-track {
+                    box-shadow: 0;
+                    border-radius: 0;
+                    background: white;//滚动槽背景色
+                    border-radius: 10px;//滚动条边框半径设置
+                }
+            }
         }
     }
 }