权限管理样式

web/client/src/sections/organization/containers/authority.js

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
-import { Spin, Row, Col, Card, Button, Tree, Empty } from 'antd';
+import { Spin, Row, Col, Card, Button, Tree, Empty, Divider } from 'antd';
 import { getDepMessage, getDepUser } from '../actions/user';
 import { getResource, getUserResource, postUserRes } from '../actions/authority';
 import Resource from '../components/resource';
+import './authority.less';
 
 const Authority = (props) => {
    const { dispatch, loading, depMessage, depUser, resource, userResource, clientHeight } = props
@@ -46,10 +47,15 @@ const Authority = (props) => {
       })
    }
    return (
+      <div className='main'>
          <Spin spinning={loading}>
-         <Row gutter={16}>
-            <Col span={4} style={{ height: '100%' }}>
-               <Card title="部门" bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}>
+            <div>
+               <div className='title'>
+                  <span className='line'></span>
+                  <span className='cn'>权限功能</span>
+                  <span className='en'>&nbsp;PERMISSION FUNCTION</span>
+               </div>
+               <div className='tree-box'>
                   {
                      depMessage.length ?
                         <Tree
@@ -73,10 +79,10 @@ const Authority = (props) => {
                            }}
                         /> : ''
                   }
-               </Card>
-            </Col>
-            <Col span={4} style={{ height: '100%', }}>
-               <Card title={(depSelected ? `[${depSelected}]` : "") + '用户列表'} bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}>
+                  <div className='user-list'>
+                     <div className='list-title'>
+                        {(depSelected ? `【${depSelected}】` : "") + '用户列表'}
+                     </div>
                      {
                         depUser.length ?
                            <Tree
@@ -101,11 +107,15 @@ const Authority = (props) => {
                               }}
                            /> : <Empty />
                      }
-               </Card>
-            </Col>
-            <Col span={16} style={{ height: '100%', }}>
+                  </div>
+               </div>
+            </div>
+            <Divider />
+            <div className='list-title'>
+               {`【${useName ? useName : '管理员'}】 功能范围`}
+            </div>
             {depUser.length ?
-                  <Card title={`[${useName ? useName : '管理员'}] 功能范围`} bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}>
+               <Card bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}>
                   <Resource
                      userSelected={userSelected}
                      roleData={resource}
@@ -126,9 +136,8 @@ const Authority = (props) => {
                   <Empty />
                </Card>
             }
-            </Col>
-         </Row>
          </Spin>
+      </div>
    )
 }
 

web/client/src/sections/organization/containers/authority.less

@@ -0,0 +1,49 @@
+.main {
+    width: 100%;
+    background: #fff;
+    padding: 10px 16px;
+
+    .title {
+        display: inline-block;
+
+        .line {
+            display: inline-block;
+            width: 3px;
+            height: 20px;
+            background: #006BE3;
+        }
+
+        .cn {
+            font-family: YouSheBiaoTiHei;
+            font-size: 24px;
+            color: #101531;
+            margin-left: 11px;
+        }
+
+        .en {
+            font-family: D-DINExp-Italic;
+            font-weight: Italic;
+            font-size: 12px;
+            color: #969799;
+        }
+    }
+
+    .tree-box {
+        display: flex;
+        width: 100%;
+
+        .user-list {
+            display: flex;
+            flex-direction: column;
+            margin-left: 100px;
+        }
+    }
+
+    .list-title {
+        font-family: PingFangSC-Medium;
+        font-weight: 600;
+        font-size: 16px;
+        color: #000000d9;
+        margin-left: 15px;
+    }
+}

web/client/src/sections/organization/containers/user.less

@@ -1,13 +1,13 @@
 .dep-box {
     height: 213px;
     background: #fff;
-    padding: 16px;
+    padding: 10px 16px;
     margin-bottom: 20px;
 }
 
 .user-box {
     background: #fff;
-    padding: 16px;
+    padding: 10px 16px;
 }
 
 .top {