+
+ );
};
+
export default AnnouncePage;
diff --git a/src/pages/announce/announceInfo.less b/src/pages/announce/announceInfo.less
new file mode 100644
index 0000000..25393a2
--- /dev/null
+++ b/src/pages/announce/announceInfo.less
@@ -0,0 +1,144 @@
+.announceInfoContainer {
+ padding: 20px;
+ background-color: #fff;
+}
+
+.loadingContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.announceInfoHeader {
+ margin-bottom: 20px;
+}
+
+.backButton {
+ padding-left: 0;
+ font-size: 16px;
+ color: rgb(0, 79, 142);
+
+ &:hover, &:focus {
+ color: rgba(0, 79, 142, 0.8);
+ }
+}
+
+.announceInfoContent {
+ padding: 30px;
+}
+
+.titleContainer {
+ text-align: center;
+ margin-bottom: 30px;
+}
+
+.title {
+ font-weight: bold !important;
+ color: #333;
+}
+
+.metaInfo {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ margin-bottom: 20px;
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+
+ > div {
+ margin-bottom: 10px;
+ }
+ }
+}
+
+.metaLeft {
+ flex: 1;
+}
+
+.metaCenter {
+ flex: 1;
+ text-align: center;
+
+ @media (max-width: 768px) {
+ text-align: left;
+ }
+}
+
+.metaRight {
+ flex: 1;
+ text-align: right;
+
+ @media (max-width: 768px) {
+ text-align: left;
+ }
+}
+
+.divider {
+ margin: 20px 0 !important;
+ border-top-color: #e8e8e8;
+}
+
+.contentBody {
+ font-size: 16px;
+ line-height: 1.8;
+ color: #333;
+
+ p {
+ margin-bottom: 16px;
+ }
+}
+
+.attachmentsSection {
+ margin-top: 40px;
+}
+
+.attachmentsTitle {
+ font-size: 18px;
+ font-weight: bold;
+ margin-bottom: 20px;
+}
+
+.attachmentsList {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.attachmentButton {
+ margin-right: 15px;
+ margin-bottom: 15px;
+}
+
+:global {
+ .ant-btn-primary {
+ background-color: rgb(0, 79, 142);
+ border-color: rgb(0, 79, 142);
+ border-radius: 0;
+
+ &:hover, &:focus {
+ background-color: rgba(0, 79, 142, 0.8);
+ border-color: rgba(0, 79, 142, 0.8);
+ }
+ }
+
+ .ant-btn-primary[disabled] {
+ background-color: rgba(0, 0, 0, 0.04);
+ border-color: #d9d9d9;
+ color: rgba(0, 0, 0, 0.25);
+ }
+
+ .ant-btn-background-ghost.ant-btn-primary {
+ color: rgb(0, 79, 142);
+ border-color: rgb(0, 79, 142);
+ border-radius: 0;
+
+ &:hover, &:focus {
+ color: rgba(0, 79, 142, 0.8);
+ border-color: rgba(0, 79, 142, 0.8);
+ }
+ }
+
+ .ant-divider {
+ border-top-color: #e8e8e8;
+ }
+}
diff --git a/src/pages/announce/announceInfo.tsx b/src/pages/announce/announceInfo.tsx
index 9e09575..b4927f7 100644
--- a/src/pages/announce/announceInfo.tsx
+++ b/src/pages/announce/announceInfo.tsx
@@ -1,8 +1,186 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
import { useLocation } from 'umi';
+import { Typography, Button, Space, Divider, Row, Col, Spin, message } from 'antd';
+import { DownloadOutlined, ArrowLeftOutlined, FilePdfOutlined, FileWordOutlined, FileExcelOutlined } from '@ant-design/icons';
+import styles from './announceInfo.less';
+
+const { Title, Text } = Typography;
+
+// 模拟公告详情数据
+const mockAnnounceDetail = {
+ id: '1',
+ title: '中远海运集团2023年度办公设备采购项目招标公告',
+ type: '招标采购公告',
+ publishDate: '2023-06-15',
+ publisher: '中远海运集团采购中心',
+ content: `
+
+ {/* 公告搜索 */}
+
+ {/* 公告列表部分 */}
+
+
+
+ {/* 公告类型 */}
+ 公告搜索
+ setSearchKeyword(e.target.value)}
+ style={{ width: '80%', maxWidth: 1000 }}
+ suffix={
+ } onClick={handleSearch}>
+ 搜 索
+
+ }
+ />
+
+
+
+ {/* 项目所属单位 */}
+ 公告类型
+
+ setAnnounceType(e.target.value)}
+ buttonStyle="solid"
+ >
+ {announceTypeOptions.map((option) => (
+
+ {option.label}
+
+ ))}
+
+
+
+
+
+ {/* 项目所在地 */}
+ 项目所属单位
+
+
+
+
+ {/* 发布时间 */}
+ 项目所在地
+
+
+
+
+
+ setCurrentProvince(e.target.value)}
+ buttonStyle="solid"
+ >
+
+
+
+ {firstRowProvinces.map((province) => (
+
+ {province}
+
+ ))}
+
+
+ {secondRowProvinces.map((province) => (
+
+ {province}
+
+ ))}
+
+
+ {thirdRowProvinces.map((province) => (
+
+ {province}
+
+ ))}
+
+
+
+
+ {/* 项目类型 */}
+ 发布时间
+
+ setPublishTime(e.target.value)}
+ buttonStyle="solid"
+ >
+ {publishTimeOptions.map((option) => (
+
+ {option.label}
+
+ ))}
+
+ {publishTime === '自定义' && (
+
+
+
+ 项目类型
+
+ setProjectType(e.target.value)}
+ buttonStyle="solid"
+ >
+ {projectTypeOptions.map((option) => (
+
+ {option.label}
+
+ ))}
+
+
+
+
+ - `共 ${totalItems} 条记录`,
+ showSizeChanger: true,
+ showQuickJumper: true,
+ }}
+ renderItem={(item) => (
+
+
+
+
+ {item.type}
+
+
+ handleAnnounceClick(item.id)}
+ >
+ {item.title}
+
+
+
+ 招标人：{item.company}
+ 发布日期：{item.publishDate}
+ 一、项目基本情况
+1. 项目名称：中远海运集团2023年度办公设备采购项目
+2. 采购需求：台式电脑300台、笔记本电脑150台、打印机50台、投影仪10台等办公设备
+3. 项目预算：人民币800万元
+4. 最高限价：人民币800万元
+5. 采购方式：公开招标
+6. 交付地点：中远海运集团总部及各分支机构
+7. 交付期限：合同签订后45个工作日内
+8. 本项目是否接受联合体投标：否
+ +二、申请人的资格要求
+1. 满足《中华人民共和国政府采购法》第二十二条规定；
+2. 落实政府采购政策需满足的资格要求：本项目支持小微企业，监狱企业，残疾人福利性单位发展等政府采购政策。
+3. 本项目的特定资格要求：
+（1）投标人须具有电子产品销售相关资质；
+（2）投标人须提供所投产品的厂家授权；
+（3）投标人须具有近三年同类项目业绩不少于3个。
+ +三、获取招标文件
+1. 时间：2023年6月15日至2023年6月22日，每天9:00至17:00（北京时间，法定节假日除外）
+2. 地点：中远海运集团采购中心官网
+3. 方式：网上下载
+4. 售价：免费
+ +四、提交投标文件截止时间、开标时间和地点
+1. 提交投标文件截止时间：2023年7月6日14:30（北京时间）
+2. 开标时间：2023年7月6日15:00（北京时间）
+3. 地点：中远海运集团总部1号会议室
+ +五、公告期限
+自本公告发布之日起5个工作日。
+ +六、其他补充事宜
+1. 本项目需要落实的政府采购政策：节能环保、中小微企业扶持、促进残疾人就业等。
+2. 投标保证金：人民币10万元。
+ +七、对本次招标提出询问，请按以下方式联系
+1. 采购人信息
+名称：中远海运集团有限公司
+地址：上海市东大名路xxx号
+联系方式：021-xxxxxxxx
+2. 采购代理机构信息
+名称：上海xxx招标代理有限公司
+地址：上海市浦东新区xxx路xx号
+联系方式：021-xxxxxxxx
+3. 项目联系方式
+项目联系人：张先生
+电话：021-xxxxxxxx
+ `, + attachments: [ + { name: '招标文件.pdf', url: '/files/招标文件.pdf', type: 'pdf' }, + { name: '投标须知.docx', url: '/files/投标须知.docx', type: 'word' }, + { name: '技术需求说明.xlsx', url: '/files/技术需求说明.xlsx', type: 'excel' } + ] +}; + const AnnounceInfo: React.FC = () => { const location = useLocation(); - const id = new URLSearchParams(location.search).get("id") - return <>AnnounceInfo -------- {id}; + const id = new URLSearchParams(location.search).get("id"); + const [announceDetail, setAnnounceDetail] = useState
+
+ );
+ }
+
+ return (
+
+
+ );
};
+
export default AnnounceInfo;
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 5829cd6..5ba3efb 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,7 +1,6 @@
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';
@@ -181,7 +180,6 @@ const IndexPage: React.FC = () => {
))}
-
+ }
+ onClick={handleBack}
+ className={styles.backButton}
+ >
+ 返回列表
+
+
+
+
+
+
+
+ {announceDetail.title}
+
+
+
+
+
+
+
+ 发布时间: {announceDetail.publishDate}
+
+
+ 发布人: {announceDetail.publisher}
+
+
+ 公告类型: {announceDetail.type}
+
+
+
+
+
+ {announceDetail.attachments.length > 0 && (
+
+
+ )}
+ 附件下载
+
+ {announceDetail.attachments.map((attachment: any, index: number) => (
+
+ ))}
+
+ 紧急问题咨询
客服1: 400-300-9989