主页

src/pages/Home/index.js

@@ -0,0 +1,115 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Card, Table, Empty, Button, Modal, message } from 'antd';
+import menuStyle from './index.less';
+import { connect, useNavigate } from 'umi';
+import { getToken } from '@/utils/utils';
+const noIcon = require('@/assets/UnityMenu/noIcon.png');
+function HomePage(props) {
+  let navigate = useNavigate();
+  const curMenu = [
+    {
+      id: 1,
+      name: '项目立项',
+      active: true,
+      click: () => {
+        window.open(` http://120.55.44.4:8899/#/purchase/home/approval/list?JWT-TOKEN=${getToken()}`)
+      },
+      Icon: require('@/assets/UnityMenu/project.png')
+    },
+    {
+      id: 2,
+      name: '合同管理',
+      active: true,
+      click: () => {
+
+      },
+      Icon: require('@/assets/UnityMenu/agreement.png')
+    },
+    {
+      id: 3,
+      name: 'OA审批',
+      active: true,
+      click: () => {
+
+      },
+      Icon: require('@/assets/UnityMenu/OA.png')
+    },
+    {
+      id: 4,
+      name: 'BOM清单',
+      active: true,
+      click: () => {
+        window.open(`http://120.55.44.4:8896/#/bom/home?JWT-TOKEN=${getToken()}`)
+      },
+      Icon: require('@/assets/UnityMenu/Bom.png')
+    },
+    {
+      id: 5,
+      name: '工时管理',
+      active: true,
+      click: () => {
+        window.open(`http://120.55.44.4:8899/#/purchase/home/work-hours?JWT-TOKEN=${getToken()}`)
+
+      },
+      Icon: require('@/assets/UnityMenu/time.png')
+    },
+    {
+      id: 6,
+      name: '供应商管理',
+      active: true,
+      click: () => {
+
+      },
+      Icon: require('@/assets/UnityMenu/Manufacturer.png')
+    },
+    {
+      id: 7,
+      name: '文档管理',
+      active: true,
+      click: () => {
+
+      },
+      Icon: require('@/assets/UnityMenu/transfer.png')
+    },
+    {
+      id: 8,
+      name: '系统管理',
+      active: true,
+      click: () => {
+
+      },
+      Icon: require('@/assets/UnityMenu/system.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>
+      </div>
+    </div>
+  )
+}
+
+export default HomePage;

src/pages/Home/index.less

@@ -1,3 +1,68 @@
-.container {
-  padding-top: 80px;
+
+.background {
+  background-image: url(@/assets/UnityMenu/newBackground.jpg);
+  width: 100%;
+  height: 100vh;
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  background-color: #122c63;
+  // align-items: flex-start;
+  :global {
+    .ant-popover-inner {
+      background: #0d1a2b;
+    }
+  }
+}
+.menu {
+  width: 152px;
+  height: 152px;
+  // background: linear-gradient(0deg, #285098, #1d3969);
+  // box-shadow: 0px 3px 0.16rem 2px rgba(0, 0, 0, 0.3), 0px 5px 0.39rem 0.1rem rgba(0, 0, 0, 0.1);
+  // border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.menuContent {
+  height: 100%;
+  padding-top: 160px;
+  width: 1480px;
+  max-height: 100vh;
+  overflow-y: hidden;
+}
+.menuFriName {
+  font-size: 24px;
+  font-family: 'Microsoft YaHei UI'; /* Microsoft YaHei UI;*/
+  // font-weight: 400;
+  color: #bae3ff;
+  // line-height: 0.45rem;
+  // text-shadow: 0px 5px 14px rgba(0, 0, 0, 0.35), 0px 3px 12px rgba(0, 0, 0, 0.19);
+  cursor: pointer;
+  user-select: none;
+  letter-spacing: 2px;
+  text-align: center;
+  word-break: keep-all;
+}
+.wrap {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: start;
+  align-items: center;
+}
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 292px;
+  height: 220px;
+  margin-bottom: 64px;
+}
+.pic {
+  width: 152px;
+  height: 152px;
+  background-size: cover;
+  background-repeat: no-repeat;
 }

src/pages/Home/index.tsx

@@ -1,18 +0,0 @@
-import Guide from '@/components/Guide';
-import { trim } from '@/utils/format';
-import { PageContainer } from '@ant-design/pro-components';
-import { useModel } from '@umijs/max';
-import styles from './index.less';
-
-const HomePage: React.FC = () => {
-  const { name } = useModel('global');
-  return (
-    <PageContainer ghost>
-      <div className={styles.container}>
-        <Guide name={trim(name)} />
-      </div>
-    </PageContainer>
-  );
-};
-
-export default HomePage;