样式修改

.umirc.ts

@@ -39,20 +39,20 @@ export default defineConfig({
       name: '首页',
       path: '/home',
       component: './Home/index',
-      layout: false,
+      menuRender: false
     },
     {
       name: '审批流管理',
       path: '/flow',
       hideChildrenInMenu: true,
       routes: [
-        {
-          path: '/flow',
-          redirect: '/flow/list',
-        },
+        // {
+        //   path: '/flow',
+        //   redirect: '/flow/list',
+        // },
         {
           name: '审批流管理',
-          path: '/flow/list',
+          path: '/flow',
           component: './Flow/index',
         },
         {
@@ -68,13 +68,9 @@ export default defineConfig({
       path: '/oa',
       hideChildrenInMenu: true,
       routes: [
-        {
-          path: '/oa',
-          redirect: '/oa/list',
-        },
         {
           name: 'OA审批',
-          path: '/oa/list',
+          path: '/oa',
           component: './Flow/Oa',
         },
         {

src/app.tsx

@@ -15,43 +15,29 @@ export async function getInitialState(): Promise<{ name: string }> {
 export const layout: RunTimeLayoutConfig = (initialState) => {
   return {
     navTheme: 'light',
-    layout: 'side',
-    contentWidth: 'Fluid',
+    layout: 'mix',
     title: '金科环境数字化管理平台',
     token: {
-      sider: {
-        colorMenuBackground: '#292f33',
-        // colorMenuItemDivider: '#dfdfdf',
-        // colorBgMenuItemHover: '#f6f6f6',
-        // colorTextMenu: '#dfdfdf',
-        // colorTextMenuSelected: '#fff',
-        // colorTextMenuActive: 'rgba(255,255,255,0.85)',
-        // colorBgMenuItemCollapsedHover: '#fff',
-        // colorTextMenuItemHover: '#dfdfdf',
-
-        colorBgCollapsedButton: '#fff',
-        colorTextCollapsedButtonHover: 'rgba(0,0,0,0.65)',
-        colorTextCollapsedButton: 'rgba(0,0,0,0.45)',
-        colorBgMenuItemCollapsedHover: 'rgba(0,0,0,0.06)',
-        colorBgMenuItemCollapsedSelected: 'rgba(0,0,0,0.15)',
-        colorBgMenuItemCollapsedElevated: 'rgba(0,0,0,0.85)',
-        colorMenuItemDivider: 'rgba(255,255,255,0.15)',
-        colorBgMenuItemHover: 'rgba(0,0,0,0.06)',
-        colorBgMenuItemSelected: 'rgba(0,0,0,0.15)',
+      header: {
+        colorBgHeader: '#292f33',
+        colorHeaderTitle: '#fff',
+        colorTextMenu: '#dfdfdf',
+        colorTextMenuSecondary: '#dfdfdf',
         colorTextMenuSelected: '#fff',
-        colorTextMenuItemHover: 'rgba(255,255,255,0.75)',
-        colorTextMenu: 'rgba(255,255,255,0.75)',
-        colorTextMenuSecondary: 'rgba(255,255,255,0.65)',
-        colorTextMenuTitle: 'rgba(255,255,255,0.95)',
-        colorTextMenuActive: 'rgba(255,255,255,0.95)',
-        colorTextSubMenuSelected: '#fff',
+        colorBgMenuItemSelected: '#22272b',
+        colorTextRightActionsItem: '#dfdfdf',
+      },
+      sider: {
+        colorMenuBackground: '#fff',
+        colorMenuItemDivider: '#dfdfdf',
+        colorTextMenu: '#595959',
+        colorTextMenuSelected: 'rgba(42,122,251,1)',
+        colorBgMenuItemSelected: 'rgba(230,243,254,1)',
       },
     },
     // fixedHeader: true,
     // fixSiderbar: true,
-    rightRender(initialState, setInitialState, runtimeConfig) {
-      return <UserDropdown />;
-    },
+    rightRender: () => <UserDropdown />,
     logo: logo,
   };
 };

src/components/PageContent/index.js

@@ -0,0 +1,29 @@
+import {
+  DefaultFooter,
+  PageContainer,
+  ProCard,
+} from '@ant-design/pro-components';
+
+export default (props) => {
+  return (
+    <div>
+      <PageContainer header={{ title: null }} {...props}>
+        <ProCard
+          style={{ minHeight: 'calc(100vh - 150px)', overflowY: 'auto' }}
+        >
+          {props.children}
+        </ProCard>
+      </PageContainer>
+      <div
+        style={{
+          fontSize: 14,
+          color: 'rgba(0, 0, 0, 0.88)',
+          textAlign: 'center',
+          margin: '20px 0',
+        }}
+      >
+        Copyright © 金科环境股份有限公司
+      </div>
+    </div>
+  );
+};

src/components/UserDropdown/index.tsx

@@ -9,11 +9,6 @@ import { useModel } from '@umijs/max';
 const items: MenuProps['items'] = [
   {
     key: '1',
-    label: <Link to="/profile">个人中心</Link>,
-    icon: <UserOutlined />,
-  },
-  {
-    key: '2',
     label: <a href="/login">退出登录</a>,
     icon: <LogoutOutlined />,
   },

src/loading.js

@@ -0,0 +1,5 @@
+import { Spin } from 'antd';
+
+export default () => (
+  <Spin spinning={true} size="large" style={{ marginTop: 40 }}></Spin>
+);

src/pages/ContractManager/component/EllipsisText.js

@@ -0,0 +1,21 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Tooltip } from 'antd';
+
+const EllipsisText = ({ text, width }) => {
+  return (
+    <Tooltip title={text}>
+      <div
+        style={{
+          width,
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        }}
+      >
+        {text}
+      </div>
+    </Tooltip>
+  );
+};
+
+export default EllipsisText;

src/pages/ContractManager/index.jsx

@@ -17,6 +17,8 @@ import dayjs from 'dayjs';
 import useModal from 'antd/es/modal/useModal';
 import FileViewerModal from '@/components/FileViewerNew';
 import { getToken } from '@/utils/utils';
+import PageContent from '@/components/PageContent';
+import EllipsisText from './component/EllipsisText';
 
 const ConteactManager = (props) => {
   const { dispatch } = props;
@@ -58,13 +60,14 @@ const ConteactManager = (props) => {
       dataIndex: 'code',
       key: 'code',
       align: 'center',
-      width: '12%',
+      width: 160,
     },
     {
       title: '合同生效时间',
       dataIndex: 'effect_on',
       key: 'effect_on',
       align: 'center',
+      width: 120,
     },
     {
       title: '合同名称',
@@ -77,42 +80,55 @@ const ConteactManager = (props) => {
       dataIndex: 'party_a',
       key: 'party_a',
       align: 'center',
+      render: (text) => <EllipsisText text={text} width={120} />,
     },
     {
       title: '丙方',
       dataIndex: 'party_c',
       key: 'party_c',
       align: 'center',
+      render: (text) => {
+        let str = text;
+        try {
+          str = JSON.parse(text).join('、');
+        } catch (error) {}
+        return <EllipsisText text={str} width={120} />;
+      },
     },
     {
       title: '所属部门/子公司',
       dataIndex: 'dep_name',
       key: 'dep_name',
       align: 'center',
+      width: 160,
     },
     {
       title: '项目名称',
       dataIndex: 'project_name',
       key: 'project_name',
       align: 'center',
+      width: 120,
     },
     {
       title: '合同总价（万元）',
       dataIndex: 'amount',
       key: 'amount',
       align: 'center',
+      width: 160,
     },
     {
       title: '经办人',
       dataIndex: 'deal_by',
       key: 'deal_by',
       align: 'center',
+      width: 80,
     },
     {
       title: '状态',
       dataIndex: 'status',
       key: 'status',
       align: 'center',
+      width: 100,
       render: (status) => {
         let str = '';
         switch (status) {
@@ -298,7 +314,7 @@ const ConteactManager = (props) => {
     run({ ...searchData, current: page });
   };
   return (
-    <PageContainer>
+    <PageContent>
       <div className={styles.searchContent}>
         <div className={styles.itemFlex}>
           <div>合同生效日期：</div>
@@ -417,7 +433,7 @@ const ConteactManager = (props) => {
           setFileViewerVisible(false);
         }}
       />
-    </PageContainer>
+    </PageContent>
   );
 };
 export default connect(({ user, loading }) => ({

src/pages/FileManagement/index.js

@@ -16,7 +16,6 @@ import {
   Spin,
 } from 'antd';
 import dayjs from 'dayjs';
-import { PageContainer, ProCard } from '@ant-design/pro-components';
 import { useRequest, useModel } from '@umijs/max';
 import {
   queryDirCreate,
@@ -42,6 +41,7 @@ import { stringify } from 'qs';
 import FileViewerModal from '@/components/FileViewerNew';
 import AddModal from './components/AddModal';
 import { useMemo } from 'react';
+import PageContent from '@/components/PageContent';
 
 const tempData = [
   { name: '文件1', upload_user: '管理员', upload_time: '2023-04-08 11:00:00' },
@@ -618,10 +618,13 @@ function FileManagement(props) {
   };
 
   return (
-    <PageContainer>
+    <PageContent>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-        <ProCard style={{ height: '100%', width: '30%' }}>
-          <Search onChange={(e) => onSearchDirectory(e.target.value)} />
+        <div style={{ height: '100%', width: '30%' }}>
+          <Search
+            style={{ marginBottom: 20 }}
+            onChange={(e) => onSearchDirectory(e.target.value)}
+          />
           <Spin spinning={treeLoading}>
             <DirectoryTree
               expandedKeys={expandedKeys}
@@ -650,10 +653,11 @@ function FileManagement(props) {
                   <span>{item.dir_name}</span>
                 );
               }}
+              style={{ maxHeight: '78vh', overflowY: 'auto' }}
             />
           </Spin>
-        </ProCard>
-        <ProCard style={{ height: '100%', width: 'calc(70% - 20px)' }}>
+        </div>
+        <div style={{ height: '100%', width: 'calc(70% - 20px)' }}>
           <Form layout="inline" form={form}>
             <Form.Item name="date">
               <RangePicker />
@@ -709,7 +713,7 @@ function FileManagement(props) {
               </Form.Item>
             )}
           </Form>
-          <div>
+          <div style={{ marginTop: 20 }}>
             <Table
               columns={columns}
               dataSource={tableData}
@@ -752,7 +756,7 @@ function FileManagement(props) {
               </>
             )}
           </div>
-        </ProCard>
+        </div>
         <Input
           id="files"
           type="file"
@@ -797,7 +801,7 @@ function FileManagement(props) {
           setFileViewerVisible(false);
         }}
       />
-    </PageContainer>
+    </PageContent>
   );
 }
 

src/pages/Flow/Audit.js

@@ -2,9 +2,9 @@ import React, { useEffect, useRef, useMemo, useState } from 'react';
 import { Button, Tabs } from 'antd';
 import { connect } from 'umi';
 import Flow from '@/components/Flow';
-import { PageContainer, ProCard } from '@ant-design/pro-components';
 import AuditForm from '@/components/AuditForm';
 import { useModel } from '@umijs/max';
+import PageContent from '@/components/PageContent';
 
 function Audit(props) {
   const {
@@ -85,7 +85,7 @@ function Audit(props) {
     });
   };
   return (
-    <PageContainer
+    <PageContent
       extra={[
         <Button
           key={1}
@@ -112,19 +112,17 @@ function Audit(props) {
         },
       ]}
     >
-      <ProCard>
-        {tabActiveKey == 1 && (
-          <AuditForm value={formData} onChange={(values) => onChange(values)} />
-        )}
-        {tabActiveKey == 2 && (
-          <Flow
-            meta={{ type: 'edit', editMode, flowId: curItem.id }}
-            flowDetail={flowDetail}
-            ref={ref}
-          />
-        )}
-      </ProCard>
-    </PageContainer>
+      {tabActiveKey == 1 && (
+        <AuditForm value={formData} onChange={(values) => onChange(values)} />
+      )}
+      {tabActiveKey == 2 && (
+        <Flow
+          meta={{ type: 'edit', editMode, flowId: curItem.id }}
+          flowDetail={flowDetail}
+          ref={ref}
+        />
+      )}
+    </PageContent>
   );
 }
 export default connect(({ flow, loading, user, xflow }) => ({

src/pages/Flow/Oa.js

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import { Collapse, List } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
-import { PageContainer } from '@ant-design/pro-components';
 import { Link, useRequest } from '@umijs/max';
 import { queryAuditList, queryClassify } from '@/services/boom';
+import PageContent from '@/components/PageContent';
 
 const { Panel } = Collapse;
 
@@ -47,7 +47,7 @@ const Approval = () => {
   }, [classify, auditList]);
 
   return (
-    <PageContainer loading={loading} breadcrumb={null}>
+    <PageContent loading={loading}>
       {categories.length > 0 && (
         <Collapse defaultActiveKey={categories.map((category) => category.id)}>
           {categories.map((category, index) => (
@@ -98,7 +98,7 @@ const Approval = () => {
           ))}
         </Collapse>
       )}
-    </PageContainer>
+    </PageContent>
   );
 };
 

src/pages/Flow/OaAuditDetail.js

@@ -5,8 +5,8 @@ import { useParams, useRequest, useNavigate } from 'umi';
 import { useModel } from 'umi';
 import AuditModal from './components/AuditModal';
 import FormAndFilesNode from './components/FormAndFilesNode';
-import { PageContainer, ProCard } from '@ant-design/pro-components';
 import { queryAuditDetail, audit } from '@/services/boom';
+import PageContent from '@/components/PageContent';
 
 function OaAuditDetail(props) {
   const [auditVisible, setAuditVisible] = useState(false);
@@ -70,19 +70,17 @@ function OaAuditDetail(props) {
   }, [user, data]);
 
   return (
-    <PageContainer extra={btns} loading={loading}>
-      <ProCard>
-        <Steps
-          style={{ marginBottom: 20 }}
-          current={current_seq - 1}
-          status={audit_status == 2 ? 'error' : 'process'}
-          items={OaAuditList?.map((item) => ({
-            title: item.seq_name,
-            description: getDescription(item),
-          }))}
-        ></Steps>
-        <FormAndFilesNode formData={form} fileList={Files} />
-      </ProCard>
+    <PageContent extra={btns} loading={loading}>
+      <Steps
+        style={{ marginBottom: 20 }}
+        current={current_seq - 1}
+        status={audit_status == 2 ? 'error' : 'process'}
+        items={OaAuditList?.map((item) => ({
+          title: item.seq_name,
+          description: getDescription(item),
+        }))}
+      ></Steps>
+      <FormAndFilesNode formData={form} fileList={Files} />
 
       <AuditModal
         id={id}
@@ -90,7 +88,7 @@ function OaAuditDetail(props) {
         onClose={() => setAuditVisible(false)}
         onOk={refresh}
       />
-    </PageContainer>
+    </PageContent>
   );
 }
 

src/pages/Flow/OaDetail.js

@@ -1,8 +1,8 @@
 import React, { useRef, useState } from 'react';
-import { PageContainer, ProCard } from '@ant-design/pro-components';
 import { Button, Col, Empty, Row, message } from 'antd';
 import ApprovalProcess from './components/ApprovalProcess';
 import AuditDetailed from './components/AuditDetailed';
+import PageContent from '@/components/PageContent';
 // import AliyunOSSUpload from '@/components/OssUpload/AliyunOssUploader';
 import {
   queryProcessFlows,
@@ -110,7 +110,7 @@ const OaDetail = () => {
   // };
 
   return (
-    <PageContainer
+    <PageContent
       loading={loading}
       footer={[
         <Button onClick={submit} type="primary" loading={createLoadin}>
@@ -118,8 +118,7 @@ const OaDetail = () => {
         </Button>,
       ]}
     >
-      <ProCard style={{ minHeight: '80vh' }}>
-        <Row gutter={24}>
+      <Row gutter={24}>
           <Col span={12}>
             {/* {OSSData && (
               <AliyunOSSUpload
@@ -146,8 +145,7 @@ const OaDetail = () => {
             )}
           </Col>
         </Row>
-      </ProCard>
-    </PageContainer>
+    </PageContent>
   );
 };
 

src/pages/Flow/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Button, Table } from 'antd';
 import { connect, useNavigate } from 'umi';
 import AuditModal from './AuditModal';
-import { PageContainer, ProCard } from '@ant-design/pro-components';
+import PageContent from '@/components/PageContent';
 
 function Audit(props) {
   const { list = [], classify = [], dispatch, loading } = props;
@@ -81,27 +81,21 @@ function Audit(props) {
   }, []);
 
   return (
-    <PageContainer
-      title={null}
-      breadcrumb={null}
-      extra={[
-        <Button
-          key={1}
-          onClick={() => changeVisible('audit', true)}
-          type="primary"
-        >
-          新建流程
-        </Button>,
-      ]}
-    >
-      <ProCard>
-        <Table
-          loading={loading['flow/queryAuditList']}
-          rowKey="id"
-          dataSource={list}
-          columns={columns}
-        />
-      </ProCard>
+    <PageContent>
+      <Button
+        key={1}
+        onClick={() => changeVisible('audit', true)}
+        type="primary"
+      >
+        新建流程
+      </Button>
+      <Table
+        style={{ marginTop: 20 }}
+        loading={loading['flow/queryAuditList']}
+        rowKey="id"
+        dataSource={list}
+        columns={columns}
+      />
 
       <AuditModal
         loading={loading['flow/addAudit']}
@@ -110,7 +104,7 @@ function Audit(props) {
         onCancel={() => changeVisible('audit', false)}
         classify={classify}
       />
-    </PageContainer>
+    </PageContent>
   );
 }
 export default connect(({ flow, loading }) => ({

src/pages/Home/index.js

@@ -19,53 +19,53 @@ function HomePage(props) {
       Icon: require('@/assets/UnityMenu/project.png'),
     },
     {
-      id: 2,
-      name: '合同管理',
+      id: 5,
+      name: '工时管理',
       active: true,
       click: () => {
-        navigate('/contract-manager');
+        window.open(
+          `http://120.55.44.4:8899/#/purchase/home/work-hours?JWT-TOKEN=${getToken()}`,
+        );
       },
-      Icon: require('@/assets/UnityMenu/agreement.png'),
+      Icon: require('@/assets/UnityMenu/time.png'),
     },
     {
-      id: 3,
-      name: 'OA审批',
+      id: 6,
+      name: '供应商管理',
       active: true,
       click: () => {
-        navigate('/oa');
+        navigate('/manufacturer');
       },
-      Icon: require('@/assets/UnityMenu/OA.png'),
+      Icon: require('@/assets/UnityMenu/Manufacturer.png'),
     },
     {
-      id: 4,
-      name: 'BOM清单',
+      id: 2,
+      name: '合同管理',
       active: true,
       click: () => {
-        window.open(
-          `http://120.55.44.4:8896/#/bom/home?JWT-TOKEN=${getToken()}`,
-        );
+        navigate('/contract-manager');
       },
-      Icon: require('@/assets/UnityMenu/Bom.png'),
+      Icon: require('@/assets/UnityMenu/agreement.png'),
     },
     {
-      id: 5,
-      name: '工时管理',
+      id: 4,
+      name: 'BOM清单',
       active: true,
       click: () => {
         window.open(
-          `http://120.55.44.4:8899/#/purchase/home/work-hours?JWT-TOKEN=${getToken()}`,
+          `http://120.55.44.4:8896/#/bom/home?JWT-TOKEN=${getToken()}`,
         );
       },
-      Icon: require('@/assets/UnityMenu/time.png'),
+      Icon: require('@/assets/UnityMenu/Bom.png'),
     },
     {
-      id: 6,
-      name: '供应商管理',
+      id: 3,
+      name: 'OA审批',
       active: true,
       click: () => {
-        navigate('/manufacturer');
+        navigate('/oa');
       },
-      Icon: require('@/assets/UnityMenu/Manufacturer.png'),
+      Icon: require('@/assets/UnityMenu/OA.png'),
     },
     {
       id: 7,
@@ -76,51 +76,76 @@ function HomePage(props) {
       },
       Icon: require('@/assets/UnityMenu/transfer.png'),
     },
+    // {
+    //   id: 8,
+    //   name: '系统管理',
+    //   active: true,
+    //   click: () => {},
+    //   Icon: require('@/assets/UnityMenu/system.png'),
+    // },
     {
-      id: 8,
-      name: '系统管理',
+      id: 9,
+      name: '个人中心',
       active: true,
-      click: () => {},
-      Icon: require('@/assets/UnityMenu/system.png'),
+      click: () => {
+        navigate('/profile/apply');
+      },
+      Icon: require('@/assets/UnityMenu/userCenter.png'),
     },
   ];
   return (
     <div className={menuStyle.background}>
       <div className={menuStyle.menuContent}>
-        <div className={menuStyle.wrap}>
-          {curMenu.map((item) => (
-            <div key={item.id} className={menuStyle.item}>
-              <div
-                onClick={() => item.click?.(item)}
-                className={menuStyle.menu}
-                style={item.active ? {} : { cursor: 'not-allowed' }}
-              >
-                <img
-                  className={menuStyle.pic}
-                  src={
-                    item.active
-                      ? item.Icon
-                      : require('@/assets/UnityMenu/newModel.png')
-                  }
-                  style={item.active ? {} : { cursor: 'not-allowed' }}
-                />
-              </div>
-              <div style={{ marginTop: 22, width: 152, textAlign: 'center' }}>
-                <span
-                  onClick={() => item.click?.(item)}
-                  className={menuStyle.menuFriName}
-                  style={
-                    item.active
-                      ? {}
-                      : { color: '#6081B2', cursor: 'not-allowed' }
-                  }
-                >
-                  {item.name}
-                </span>
-              </div>
-            </div>
-          ))}
-        </div>
+        <MenuContent list={curMenu}></MenuContent>
+      </div>
+    </div>
+  );
+}
+
+function MenuContent({ list }) {
+  const row = useMemo(() => {
+    const result = [];
+    for (let i = 0; i < list.length; i += 4) {
+      result.push(list.slice(i, i + 4));
+    }
+    return result;
+  }, [list]);
+  return row.map((rowList) => (
+    <div className={menuStyle.wrap}>
+      {rowList.map((item) => (
+        <MenuItem key={item.id} item={item} />
+      ))}
+      <div className={menuStyle.empty}></div>
+      <div className={menuStyle.empty}></div>
+      <div className={menuStyle.empty}></div>
+    </div>
+  ));
+}
+
+function MenuItem({ item }) {
+  return (
+    <div className={menuStyle.item}>
+      <div
+        onClick={() => item.click?.(item)}
+        className={menuStyle.menu}
+        style={item.active ? {} : { cursor: 'not-allowed' }}
+      >
+        <img
+          className={menuStyle.pic}
+          src={
+            item.active ? item.Icon : require('@/assets/UnityMenu/newModel.png')
+          }
+          style={item.active ? {} : { cursor: 'not-allowed' }}
+        />
+      </div>
+      <div style={{ marginTop: 22, width: 152, textAlign: 'center' }}>
+        <span
+          onClick={() => item.click?.(item)}
+          className={menuStyle.menuFriName}
+          style={item.active ? {} : { color: '#6081B2', cursor: 'not-allowed' }}
+        >
+          {item.name}
+        </span>
       </div>
     </div>
   );

src/pages/Home/index.less

@@ -1,13 +1,20 @@
-
 .background {
   background-image: url(@/assets/UnityMenu/newBackground.jpg);
   width: 100%;
-  height: 100vh;
+  height: calc(100vh - 56px);
+  overflow-y: auto;
+  padding: 60px 0;
+  position: absolute;
+  top: 0;
+  left: 0;
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
   justify-content: center;
+  align-items: center;
   background-color: #122c63;
+
+
   // align-items: flex-start;
   :global {
     .ant-popover-inner {
@@ -15,6 +22,7 @@
     }
   }
 }
+
 .menu {
   width: 152px;
   height: 152px;
@@ -26,16 +34,19 @@
   align-items: center;
   cursor: pointer;
 }
+
 .menuContent {
   height: 100%;
-  padding-top: 160px;
   width: 1480px;
   max-height: 100vh;
   overflow-y: hidden;
+  padding-top: 40px;
 }
+
 .menuFriName {
   font-size: 24px;
-  font-family: 'Microsoft YaHei UI'; /* Microsoft YaHei UI;*/
+  font-family: 'Microsoft YaHei UI';
+  /* Microsoft YaHei UI;*/
   // font-weight: 400;
   color: #bae3ff;
   // line-height: 0.45rem;
@@ -46,24 +57,37 @@
   text-align: center;
   word-break: keep-all;
 }
+
 .wrap {
   display: flex;
   flex-wrap: wrap;
-  justify-content: start;
+  justify-content: center;
   align-items: center;
+  background: url("@/assets/floor.png") no-repeat bottom center;
+  background-size: contain;
+  margin-bottom: 100px;
+  padding: 0 170px;
+
+  .empty {
+    width: 25%;
+    height: 0;
+    visibility: hidden;
+  }
 }
+
 .item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 292px;
+  width: 25%;
   height: 220px;
-  margin-bottom: 64px;
+  margin-bottom: 10px;
   user-select: none;
 }
+
 .pic {
   width: 152px;
   height: 152px;
   background-size: cover;
   background-repeat: no-repeat;
-}
+}

src/pages/ManufacturerMng/Firm.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import ManufacturerList from './ManufacturerList';
-import { PageContainer, ProCard } from '@ant-design/pro-components';
+import PageContent from '@/components/PageContent';
 function Firm(props) {
   // const {
   //   match: {
   //     params: { projectId },
   //   },
   // } = props;
-  return <PageContainer
+  return <PageContent
     title='供应商管理'>
     <ManufacturerList></ManufacturerList>
-  </PageContainer>
+  </PageContent>
 }
 export default Firm;

src/pages/Profile/apply.js

@@ -24,6 +24,7 @@ import ContractModal, {
   StatusText,
   Type,
 } from '../ContractManager/component/Modal';
+import PageContent from '@/components/PageContent';
 const TYPE = {
   Contract: 1,
   OA: 2,
@@ -345,10 +346,7 @@ function Apply(props) {
       );
   };
   return (
-    <PageContainer
-      header={{
-        title: '我的申请',
-      }}
+    <PageContent
       tabList={[
         {
           tab: `OA审批(${OAApplyData?.pagination?.total || 0})`,
@@ -372,7 +370,7 @@ function Apply(props) {
         }
         handleCancel={() => setConVisible(false)}
       />
-    </PageContainer>
+    </PageContent>
   );
 }
 export default Apply;

src/pages/Profile/approve.js

@@ -28,6 +28,7 @@ import ContractModal, {
   StatusText,
   Type,
 } from '../ContractManager/component/Modal';
+import PageContent from '@/components/PageContent';
 const TYPE = {
   Contract: 1,
   OA: 2,
@@ -365,10 +366,7 @@ function Approve(props) {
       );
   };
   return (
-    <PageContainer
-      header={{
-        title: '我的审批',
-      }}
+    <PageContent
       tabList={[
         {
           tab: `OA审批(${OAAuditData?.pagination?.total || 0})`,
@@ -396,7 +394,7 @@ function Approve(props) {
         }
         handleCancel={() => setConVisible(false)}
       />
-    </PageContainer>
+    </PageContent>
   );
 }
 export default Approve;

src/pages/Profile/approved.js

@@ -19,6 +19,7 @@ import { useRequest, useModel } from '@umijs/max';
 import { queryProfileList, queryApplyList } from '@/services/boom';
 import dayjs from 'dayjs';
 import { queryApprovedList } from '@/services/contract';
+import PageContent from '@/components/PageContent';
 const TYPE = {
   Contract: 1,
   OA: 2,
@@ -236,24 +237,9 @@ function Approved(props) {
     //   );
   };
   return (
-    <PageContainer
-      header={{
-        title: `已审批(${conAuditedData?.pagination?.total || 0})`,
-      }}
-      // tabList={[
-      //   {
-      //     tab: 'OA审批',
-      //     key: '1',
-      //   },
-      //   {
-      //     tab: '合同管理',
-      //     key: '2',
-      //   },
-      // ]}
-      // onTabChange={onTabChange}
-    >
+    <PageContent>
       <div>{renderPage()}</div>
-    </PageContainer>
+    </PageContent>
   );
 }
 export default Approved;

src/pages/Profile/index.js

@@ -24,6 +24,8 @@ import ContractModal, {
   StatusText,
   Type,
 } from '../ContractManager/component/Modal';
+import PageContent from '@/components/PageContent';
+
 function profile(props) {
   const { submitting, params, dispatch } = props;
   const { user } = useModel('userInfo');
@@ -438,10 +440,8 @@ function profile(props) {
       );
   };
   return (
-    <PageContainer
-      header={{
-        title: '个人中心',
-      }}
+    <PageContent
+    
       tabList={[
         {
           tab: '我的申请',
@@ -465,7 +465,7 @@ function profile(props) {
         }
         handleCancel={() => setConVisible(false)}
       />
-    </PageContainer>
+    </PageContent>
   );
 }
 export default profile;