liuc/fe_portal_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加框架内容

Browse Source
This commit is contained in:
linxd
2025-06-16 16:22:26 +08:00
parent 1eabd737a6
commit c7b9ffac10
37 changed files with 2328 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/index/Link.tsx Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
const LinkComponent: React.FC = () => {
return (
<div className="link">
<div>友情链接</div>
<div className="flex">
<a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu.com">百度</a>
</div>
</div>
);
};
export default LinkComponent;

53
src/pages/index/index.less Normal file
View File

@ -0,0 +1,53 @@
@import '../../baseStyle.less';
.lastDate {
color: @main-danger-color;
}
.tableAddress {
color: @main-color;
font-weight: 600;
}
.tableLoadMore {
margin-top: 15px;
text-align: center;
}
.blockTitle {
font-weight: 600;
font-size: 16px;
line-height: 30px;
}
.questionItem {
line-height: 40px;
.icon {
margin-right: 10px;
font-size: 18px;
}
}
.cardContent {
color: @main-text-color-2;
}
.card {
.ant-card-head {
min-height: 40px;
padding: 0 15px;
.ant-card-head-title,
.ant-card-extra {
padding: 10px 0;
}
}
.ant-card-body {
min-height: 150px;
text-indent: 26px;
}
}
.link {
display: flex;
margin-top: 10px;
.flex {
margin-left: 10px;
display: flex;
flex: 1;
a{
margin: 0 10px;
}
}
}

249
src/pages/index/index.tsx
View File

@ -1,10 +1,247 @@
import React, { useState } from 'react';
import { Card, Row, Col, Tabs, Table } from 'antd';
import { useIntl, Link } from 'umi';
import SpaceBlock from '@/components/SpaceBlock/SpaceBlock';
import './index.less';
import IconFont from '@/components/IconFont/IconFont';
import LinkComponent from './Link';
const IndexPage: React.FC = () => {
const intl = useIntl();
const [noticeLoading, setNoticeLoading] = useState(false);
const [noticeList, setNoticeList] = useState([
{
title: 'CA使用通知',
id: '1',
content: '系统将于2022年5月27日期开始对全流程使用CA服务，届时全部投标供应商需办理CA。',
},
{
title: '5月27日系统优化升级通知',
id: '2',
content:
'系统将于2022年5月27日（周五）22:00--2022年5月28日（周六）6:00进行系统优化升级，届时系统将暂停服务。',
},
{
title: '测试标题123123',
id: '3',
content: '测试内容124145',
},
{
title: '测试标题45435',
id: '4',
content: '测试内容6666',
},
]);
const tabList = [
{
key: '1',
label: intl.formatMessage({ id: '采购需求公示' }),
},
{
key: '2',
label: intl.formatMessage({ id: '招标采购公告' }),
},
{
key: '3',
label: intl.formatMessage({ id: '非招标采购公告' }),
},
{
key: '4',
label: intl.formatMessage({ id: '资格预审公告' }),
},
{
key: '5',
label: intl.formatMessage({ id: '招募公告' }),
},
{
key: '6',
label: intl.formatMessage({ id: '变更公告' }),
},
{
key: '7',
label: intl.formatMessage({ id: '中标(中选)候选人公示' }),
},
{
key: '8',
label: intl.formatMessage({ id: '中标(中选)结果公示' }),
},
{
key: '9',
label: intl.formatMessage({ id: '采购失败(流标)公告' }),
},
];
//tab 切换事件
const tabChange = (key: string) => {
console.log(key);
};
const [tableLoading, setTableLoading] = useState(false);
const dataSource = [
{
key: '1',
title: '中远海运空运北方物流基地标识制作及安装服务',
address: '西湖区湖底公园1号',
date: '2025年01月23日',
lastDate: '剩余3天4小时',
},
{
key: '2',
title: '中远海运空运北方物流基地标识制作及安装服务',
address: '西湖区湖底公园1号',
date: '2025年01月23日',
lastDate: '剩余3天4小时',
},
{
key: '2',
title: '中远海运空运北方物流基地标识制作及安装服务',
address: '西湖区湖底公园1号',
date: '2025年01月23日',
lastDate: '剩余3天4小时',
},
{
key: '2',
title: '中远海运空运北方物流基地标识制作及安装服务',
address: '西湖区湖底公园1号',
date: '2025年01月23日',
lastDate: '剩余3天4小时',
},
{
key: '2',
title: '中远海运空运北方物流基地标识制作及安装服务',
address: '西湖区湖底公园1号',
date: '2025年01月23日',
lastDate: '剩余3天4小时',
},
{
key: '2',
title: '中远海运空运北方物流基地标识制作及安装服务',
address: '西湖区湖底公园1号',
date: '2025年01月23日',
lastDate: '剩余3天4小时',
},
];
const columns = [
{
title: '项目所在地',
dataIndex: 'address',
key: 'address',
},
{
title: '公告标题',
dataIndex: 'title',
key: 'title',
render: (text: string, record) => (
<Link
to={{
pathname: '/announce/announceInfo',
search: '?id=' + record.id,
}}
>
{text}
</Link>
),
},
{
title: '发布时间',
dataIndex: 'date',
key: 'date',
},
{
title: '文件购买截止时间',
dataIndex: 'lastDate',
key: 'lastDate',
render: (text: string) => <span className="lastDate">{text}</span>,
},
];
import React from 'react';
const IndexPage:React.FC = () => {
return (
<div>IndexPage</div>
)
}
<div>
{/* 通知列表 */}
<Row gutter={20}>
{noticeList.map((item) => (
<Col span={6} key={item.id}>
<Card
title={item.title}
loading={noticeLoading}
hoverable
className="card"
bodyStyle={{ padding: 10 }}
extra={
<Link
to={{
pathname: '/notice/noticeInfo',
search: '?id=' + item.id,
}}
>
{intl.formatMessage({ id: '查看' })}
</Link>
}
>
<p className="cardContent">{item.content}</p>
</Card>
</Col>
))}
</Row>
<SpaceBlock />
<Tabs onChange={tabChange}>
{tabList.map((item) => (
<Tabs.TabPane tab={item.label} key={item.key} />
))}
</Tabs>
<Table loading={tableLoading} dataSource={dataSource} columns={columns} pagination={false} />
export default IndexPage;
<div className="tableLoadMore">
<Link
to={{
pathname: '/announce',
}}
>
{intl.formatMessage({ id: '加载更多' })}
</Link>
</div>
<Row style={{ marginTop: '20px' }}>
<Col span={12}>
<div className="blockTitle">紧急问题咨询</div>
<img src="" alt="" />
<div className="questionItem">
<IconFont type="icon-dizhi" className="icon" />
北京市前门大街173号
</div>
<div className="questionItem">
<IconFont type="icon-dianhua" className="icon" />
17676373746
</div>
<div className="questionItem">
<IconFont type="icon-youxiang" className="icon" />
i723648723@383.com
</div>
</Col>
<Col span={12}>
<div className="blockTitle">CA服务</div>
<Row>
<Col span={6} offset={6}>
<span>CA办理</span>
</Col>
<Col span={6}>
<span>CA客服</span>
</Col>
</Row>
<div className="blockTitle">联系方式</div>
<p style={{ marginTop: 20 }}>客服1: 400-300-9989</p>
<p>客服1: 400-300-9989</p>
<p>客服1: 400-300-9989</p>
<p>客服1: 400-300-9989</p>
</Col>
</Row>
<SpaceBlock />
<div>
<LinkComponent />
</div>
</div>
);
};
export default IndexPage;