组织快速调整页面优化

src/pages/dragTree.jsx

@@ -4,13 +4,14 @@ import * as d3 from 'd3';
 import qs from 'qs';
 import MergeDialog from '../components/dialog/mergeDialog';
 import CopyDialog from '../components/dialog/copyDialog';
+import inset from '../../public/img/back/inset.png';
 
 import {
   HomeOutlined,
   FolderOutlined,
   ClusterOutlined,
   ApartmentOutlined,
-  ExclamationCircleOutlined,
+  QuestionCircleOutlined,
 } from '@ant-design/icons';
 const { Header, Footer, Sider, Content } = Layout;
 import './index.less';
@@ -389,61 +390,65 @@ const DragTree = () => {
   };
 
   return (
-    <>
+    <div className="drag-wrapper">
-      <Layout className="drag-layout">
+      <Spin tip={tip} spinning={loading}>
-        <Header className="drag-header">组织快速调整</Header>
+        <div className="drag-layout">
-        <Spin tip={tip} spinning={loading}>
+          <div className="drag-header">
-          <Layout>
+            <img src={inset} />
-            <Sider theme="light" width="60%">
+            <div>组织快速调整</div>
-              <ApartmentOutlined
-                className="drag-showcanceled"
-                style={{ color: showCanceled == 0 ? '#000' : '#1890ff' }}
-                onClick={() => {
-                  const value = showCanceled == 0 ? 1 : 0;
-                  setTip('正在加载,请稍候...');
-                  setShowCanceled(value);
-                  getMoveTree(value);
-                }}
-              />
-              <Tree
-                className="draggable-tree"
-                //defaultExpandedKeys={expandedKeys}
-                expandedKeys={expandedKeys}
-                onExpand={onExpand}
-                draggable
-                icon={false}
-                blockNode
-                onDragEnter={onDragEnter}
-                onDrop={onDrop}
-                treeData={gData}
-                titleRender={onTitleRender}
-              />
-            </Sider>
-            <Content className="drag-content">
-              <Drawer
-                width="60%"
-                placement="right"
-                onClose={() => setDrawerOpen(false)}
-                open={drawerOpen}
-              >
-                <iframe src={iframe} width="100%" height="100%" />
-              </Drawer>
-            </Content>
-          </Layout>
-        </Spin>
-
-        <Footer className="drag-footer">
-          <p>小提示</p>
-          <div className="tips">
-            <div>1.鼠标拖拽Tree节点到任一分部部门下可快速完成组织转移;</div>
-            <div>2.点击【查看】侧滑打开组织详细信息,可快速编辑;</div>
-            <div>
-              3.鼠标悬停树节点 一键开启【删除】【封存】【合并】【复制】等功能;
-            </div>
-            <div>4.右上角小图标点击可显示已封存的组织架构</div>
           </div>
-        </Footer>
+          <div className="drag-content">
-      </Layout>
+            <ApartmentOutlined
+              className="drag-showcanceled"
+              style={{ color: showCanceled == 0 ? '#000' : '#1890ff' }}
+              onClick={() => {
+                const value = showCanceled == 0 ? 1 : 0;
+                setTip('正在加载,请稍候...');
+                setShowCanceled(value);
+                getMoveTree(value);
+              }}
+            />
+            <Tree
+              className="draggable-tree"
+              //defaultExpandedKeys={expandedKeys}
+              expandedKeys={expandedKeys}
+              onExpand={onExpand}
+              draggable
+              icon={false}
+              blockNode
+              onDragEnter={onDragEnter}
+              onDrop={onDrop}
+              treeData={gData}
+              titleRender={onTitleRender}
+            />
+          </div>
+          <Drawer
+            width="60%"
+            placement="right"
+            closable={false}
+            onClose={() => setDrawerOpen(false)}
+            open={drawerOpen}
+          >
+            <iframe src={iframe} width="100%" height="100%" />
+          </Drawer>
+
+          <div className="drag-footer">
+            <p>
+              <QuestionCircleOutlined />
+              小提示
+            </p>
+            <div className="tips">
+              <div>1.鼠标拖拽Tree节点到任一分部部门下可快速完成组织转移;</div>
+              <div>2.点击【查看】侧滑打开组织详细信息,可快速编辑;</div>
+              <div>
+                3.鼠标悬停树节点 一键开启【删除】【封存】【合并】【复制】等功能;
+              </div>
+              <div>4.顶部小图标点击可显示已封存的组织架构。</div>
+            </div>
+          </div>
+        </div>
+      </Spin>
+
       <MergeDialog
         ref={childRef}
         open={open}
@@ -460,7 +465,7 @@ const DragTree = () => {
           setCopyOpen(false);
         }}
       />
-    </>
+    </div>
   );
 };
 export default DragTree;

src/pages/index.less

@@ -1,3 +1,7 @@
+#root {
+  min-height: 100vh;
+}
+
 .title {
   background: rgb(121, 242, 157);
 }
@@ -28,6 +32,7 @@
   font-size: 12px;
   line-height: 16px;
   margin-left: 100px;
+
   .drag-button {
     display: inline-block;
     padding: 0 10px;
@@ -40,38 +45,72 @@
   }
 }
 
+.drag-wrapper {
+  min-height: inherit;
+  background-image: url('../../public/img/back/background.png') !important;
+}
+
 .drag-layout {
+  min-height: inherit;
+  padding: 25px;
+
   .drag-header {
-    background: #ffffff;
     text-align: center;
-    font-family: 'Times New Roman', Times, serif;
+
-    font-size: 20px;
+    div {
-    font-weight: 800;
+      display: inline-block;
+      font-size: 25px;
+      font-weight: 400;
+    }
   }
+
+  .drag-content {
+    width: auto;
+    background: #f8fafc;
+    border: 1px solid rgba(218, 237, 255, 1);
+    border-radius: 8px;
+    margin-top: 20px;
+
+    .drag-showcanceled {
+      font-size: 18px;
+      line-height: 30px;
+      margin-left: 5px;
+      margin-top: 5px;
+    }
+  }
+
   .drag-footer {
-    background: #ffffff;
+    margin-top: 15px;
+    background: #f8fafc;
+    border: 1px solid rgba(218, 237, 255, 1);
+    border-radius: 8px;
+    padding: 22px;
+
     p {
-      background-color: #22c8fb;
+      span {
-    }
+        color: #178eff;
-    .tips {
+        margin-right: 5px;
-      div {
-        font-size: 14px;
-        letter-spacing: 0.5px;
-        height: 25px;
-        line-height: 25px;
-        font-weight: 600;
       }
+      font-family: PingFangSC-Medium;
+      font-size: 14px;
+      color: #596378;
+      line-height: 24px;
+      font-weight: 500;
+    }
+
+    .tips {
+      font-family: PingFangSC-Regular;
+      font-size: 14px;
+      color: #596378;
+      line-height: 21px;
+      font-weight: 400;
+      letter-spacing: 0.5px;
     }
   }
 }
 
-.drag-showcanceled {
+.ant-tree {
-  font-size: 18px;
+  background: transparent;
-  margin-left: 32px;
-}
-
-.drag-content {
-  background: #ffffff;
 }
 
 .ant-drawer-body {