组织快速调整页面优化

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,12 +390,14 @@ const DragTree = () => {
   };
 
   return (
-    <>
-      <Layout className="drag-layout">
-        <Header className="drag-header">组织快速调整</Header>
+    <div className="drag-wrapper">
       <Spin tip={tip} spinning={loading}>
-          <Layout>
-            <Sider theme="light" width="60%">
+        <div className="drag-layout">
+          <div className="drag-header">
+            <img src={inset} />
+            <div>组织快速调整</div>
+          </div>
+          <div className="drag-content">
             <ApartmentOutlined
               className="drag-showcanceled"
               style={{ color: showCanceled == 0 ? '#000' : '#1890ff' }}
@@ -418,32 +421,34 @@ const DragTree = () => {
               treeData={gData}
               titleRender={onTitleRender}
             />
-            </Sider>
-            <Content className="drag-content">
+          </div>
           <Drawer
             width="60%"
             placement="right"
+            closable={false}
             onClose={() => setDrawerOpen(false)}
             open={drawerOpen}
           >
             <iframe src={iframe} width="100%" height="100%" />
           </Drawer>
-            </Content>
-          </Layout>
-        </Spin>
 
-        <Footer className="drag-footer">
-          <p>小提示</p>
+          <div className="drag-footer">
+            <p>
+              <QuestionCircleOutlined />
+              小提示
+            </p>
             <div className="tips">
               <div>1.鼠标拖拽Tree节点到任一分部部门下可快速完成组织转移;</div>
               <div>2.点击【查看】侧滑打开组织详细信息,可快速编辑;</div>
               <div>
                 3.鼠标悬停树节点 一键开启【删除】【封存】【合并】【复制】等功能;
               </div>
-            <div>4.右上角小图标点击可显示已封存的组织架构</div>
+              <div>4.顶部小图标点击可显示已封存的组织架构。</div>
             </div>
-        </Footer>
-      </Layout>
+          </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;
-    font-weight: 800;
-  }
-  .drag-footer {
-    background: #ffffff;
-    p {
-      background-color: #22c8fb;
-    }
-    .tips {
+
     div {
-        font-size: 14px;
-        letter-spacing: 0.5px;
-        height: 25px;
-        line-height: 25px;
-        font-weight: 600;
+      display: inline-block;
+      font-size: 25px;
+      font-weight: 400;
     }
   }
-  }
-}
 
-.drag-showcanceled {
+  .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;
-  margin-left: 32px;
+      line-height: 30px;
+      margin-left: 5px;
+      margin-top: 5px;
+    }
+  }
+
+  .drag-footer {
+    margin-top: 15px;
+    background: #f8fafc;
+    border: 1px solid rgba(218, 237, 255, 1);
+    border-radius: 8px;
+    padding: 22px;
+
+    p {
+      span {
+        color: #178eff;
+        margin-right: 5px;
+      }
+      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-content {
-  background: #ffffff;
+.ant-tree {
+  background: transparent;
 }
 
 .ant-drawer-body {