+
+ );
+};
+
+export default Footer;
diff --git a/src/layouts/Header.less b/src/layouts/Header.less
index e1cda1a..430af5d 100644
--- a/src/layouts/Header.less
+++ b/src/layouts/Header.less
@@ -2,6 +2,13 @@
.header-container {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ background-color: #fff;
+ z-index: 100;
.header {
position: relative;
z-index: 1;
@@ -20,6 +27,8 @@
align-items: center;
justify-content: flex-end;
.ant-menu-horizontal {
+ flex: 1;
+ justify-content: flex-end;
line-height: 58px;
border: none;
}
@@ -29,3 +38,50 @@
}
}
}
+.footer {
+ background-color: rgb(0,51,94);
+ color: #fff;
+ padding: 10px 0;
+ .footer-content {
+ width: @width;
+ margin: 0 auto;
+ .link {
+ display: flex;
+ margin-top: 10px;
+ align-items: center;
+ .flex {
+ margin-left: 10px;
+ display: flex;
+ flex: 1;
+ a {
+ margin: 0 10px;
+ }
+ }
+ }
+ .copyright{
+ margin: 40px 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .footerLogo{
+ width: 80px;
+ }
+ .copyright-text{
+ text-align: right;
+ .copyright-text-item{
+ margin-bottom: 10px;
+ span{
+ &:not(:first-child):before{
+ content: '';
+ display: inline-block;
+ width: 1px;
+ height: 10px;
+ background-color: #fff;
+ margin: 0 10px;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/layouts/HeaderMenu.tsx b/src/layouts/HeaderMenu.tsx
index 1dfc94d..670c336 100644
--- a/src/layouts/HeaderMenu.tsx
+++ b/src/layouts/HeaderMenu.tsx
@@ -74,7 +74,7 @@ const HeaderMenu: React.FC = (props) => {
))}
+
+
+
+
+ 友情链接
+
+ {links.map((link) => (
+ <>
+ {link.links.length > 0 && (
+
+
+
+
+ })
+
+
+
+
+
+ 网站首页
+ 消息通知
+ 公示公告
+
+ Copyright ©中国远洋海运集团有限公司
+
-
+ {children}
- {children}
+
);
};
diff --git a/src/pages/announce/Search.tsx b/src/pages/announce/Search.tsx
new file mode 100644
index 0000000..5678165
--- /dev/null
+++ b/src/pages/announce/Search.tsx
@@ -0,0 +1,250 @@
+import React, { useState } from 'react';
+import { Input, Button, Select, Radio, DatePicker } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import styles from './announce.less';
+import moment from 'moment';
+
+const { Option } = Select;
+const { RangePicker } = DatePicker;
+
+// 定义搜索表单数据类型
+export interface SearchFormData {
+ searchKeyword: string;
+ announceType: string;
+ projectUnit: string;
+ projectLocation: string;
+ publishTime: string;
+ projectType: string;
+ currentProvince: string;
+ dateRange?: [moment.Moment, moment.Moment] | null;
+}
+
+interface SearchProps {
+ initialValues?: SearchFormData;
+ onChange?: (formData: SearchFormData) => void;
+ onSearch?: (formData: SearchFormData) => void;
+ isShowAnnounceType?: boolean;
+ isShowSearch?: boolean;
+ isShowProjectUnit?: boolean;
+}
+
+// 公告类型选项
+const announceTypeOptions = [
+ { label: '全部', value: '全部' },
+ { label: '采购需求公示', value: '采购需求公示' },
+ { label: '招标采购公告', value: '招标采购公告' },
+ { label: '非招标采购公告', value: '非招标采购公告' },
+ { label: '资格预审公告', value: '资格预审公告' },
+ { label: '招募公告', value: '招募公告' },
+ { label: '变更公告', value: '变更公告' },
+ { label: '中标(中选)候选人公示', value: '中标(中选)候选人公示' },
+ { label: '中标(中选)结果公示', value: '中标(中选)结果公示' },
+ { label: '采购失败(流标)公告', value: '采购失败(流标)公告' },
+];
+
+// 第一行省份
+const firstRowProvinces = [
+ '全部',
+ '北京',
+ '天津',
+ '河北',
+ '山西',
+ '内蒙古',
+ '辽宁',
+ '吉林',
+ '黑龙江',
+ '上海',
+ '江苏',
+ '浙江',
+ '安徽',
+ '福建',
+ '江西',
+];
+
+// 发布时间选项
+const publishTimeOptions = [
+ { label: '不限', value: '不限' },
+ { label: '今天', value: '今天' },
+ { label: '最近三天', value: '最近三天' },
+ { label: '最近一周', value: '最近一周' },
+ { label: '最近一月', value: '最近一月' },
+ { label: '自定义', value: '自定义' },
+];
+
+// 项目类型选项
+const projectTypeOptions = [
+ { label: '全部', value: '全部' },
+ { label: '货物', value: '货物' },
+ { label: '工程', value: '工程' },
+ { label: '服务', value: '服务' },
+ { label: '其他', value: '其他' },
+];
+
+const Search: React.FC
+ {/* 公告搜索 */}
+ {isShowSearch && (
+
+ );
+};
+
+export default Search;
diff --git a/src/pages/announce/announce.less b/src/pages/announce/announce.less
index a7f4e15..d7e4d36 100644
--- a/src/pages/announce/announce.less
+++ b/src/pages/announce/announce.less
@@ -1,3 +1,5 @@
+@import '../../baseStyle.less';
+
.announcePage {
// padding: 20px;
// background-color: #f5f5f5;
@@ -23,6 +25,7 @@
color: #333;
margin-right: 20px;
min-width: 70px;
+ text-align: right;
}
.filterRow {
@@ -38,6 +41,7 @@
margin-right: 20px;
min-width: 70px;
padding-top: 5px;
+ text-align: right;
}
.filterOptions {
@@ -59,27 +63,43 @@
flex-wrap: wrap;
}
}
-
+.announceContainer{
+ background-color: #fff;
+ .banner{
+ width: 100%;
+ height: 300px;
+ margin-bottom: 20px;
+ }
+ .search{
+ border: 1px solid rgba(@main-text-color-2, 0.1);
+ padding: 20px;
+ }
+}
/* 覆盖antd样式 - 仅在announceContainer内生效 */
-.announceContainer {
+.announceSearch {
:global(.ant-radio-button-wrapper) {
- margin-right: 5px;
+ margin-right: 10px;
margin-bottom: 8px;
- border-radius: 0;
+ border-radius: 5px;
height: 32px;
line-height: 30px;
min-width: 60px;
text-align: center;
padding: 0 10px;
+ border-left-width:1px;
+ background: rgb(244, 244, 245);
+ &:before{
+ display: none;
+ }
}
- :global(.ant-radio-button-wrapper:first-child) {
- border-radius: 0;
- }
+ // :global(.ant-radio-button-wrapper:first-child) {
+ // border-radius: 0;
+ // }
- :global(.ant-radio-button-wrapper:last-child) {
- border-radius: 0;
- }
+ // :global(.ant-radio-button-wrapper:last-child) {
+ // border-radius: 0;
+ // }
:global(.ant-radio-button-wrapper-checked) {
background-color: rgb(0, 79, 142);
@@ -153,30 +173,63 @@
}
.listItem {
- padding: 16px 10px;
- border-bottom: 1px solid #f0f0f0;
-
- &:hover {
- background-color: #f9f9f9;
- }
+ // border-bottom: 1px solid #f0f0f0;
+}
+.ant-list-item{
+ border-bottom: none !important;
}
-
.itemContent {
width: 100%;
+ border: 1px solid rgba(@main-text-color-2, 0.1);
+ padding: 10px;
}
.itemHeader {
display: flex;
align-items: center;
margin-bottom: 10px;
+ justify-content: space-between;
+ gap: 10px;
+}
+.itemInfo{
+ flex: 1;
+}
+.itemCompany{
+ color: @main-text-color-1;
+ font-size: 14px;
+}
+.itemDate{
+ color: @main-text-color-2;
+ font-size: 12px;
+ margin-top: 10px;
}
-
.typeTag {
margin-right: 10px;
min-width: 90px;
text-align: center;
}
-
+.itemLastTime{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ .itemLastTimeNum{
+ color: @main-text-color-1;
+ background-color: @main-danger-color;
+ color: #fff;
+ font-weight: 500;
+ padding: 5px 10px;
+ font-size: 14px;
+ width: 100%;
+ }
+ .itemLastTimeBtn{
+ background: rgba(@main-danger-color, 0.1);
+ border: 1px solid rgba(@main-danger-color, 0.5);
+ color: @main-danger-color;
+ padding: 5px 10px;
+ }
+}
.itemTitle {
font-size: 16px;
font-weight: 500;
@@ -194,10 +247,24 @@
justify-content: space-between;
color: #666;
font-size: 14px;
+ border-top: 1px solid rgba(@main-text-color-2, 0.1);
+ padding-top: 10px;
+ .itemFooterLeft{
+ flex: 1;
+ display: flex;
+ gap: 10px;
+ }
+ .itemFooterRight{
+ min-width: 180px;
+ text-align: right;
+ .itemFooterRightBtn{
+ color: @main-color;
+ cursor: pointer;
+ }
+ }
}
.company {
- flex: 1;
}
.date {
diff --git a/src/pages/announce/announce.tsx b/src/pages/announce/announce.tsx
index 4bf484a..7579365 100644
--- a/src/pages/announce/announce.tsx
+++ b/src/pages/announce/announce.tsx
@@ -1,11 +1,8 @@
import React, { useState } from 'react';
-import { Input, Button, Select, Radio, DatePicker, List, Tag } from 'antd';
-import { SearchOutlined } from '@ant-design/icons';
+import { List, Tag } from 'antd';
import { history } from 'umi';
import styles from './announce.less';
-
-const { Option } = Select;
-const { RangePicker } = DatePicker;
+import Search, { SearchFormData } from './Search';
// 模拟公告数据
const mockAnnounceData = [
@@ -47,112 +44,33 @@ const mockAnnounceData = [
];
const AnnouncePage: React.FC = () => {
- // 状态管理
- const [searchKeyword, setSearchKeyword] = useState
+
+
+ } onClick={handleSearch}>
+ 搜 索
+
+
+
+ )}
+
+ {/* 公告类型 */}
+ {isShowAnnounceType && (
+ 公告搜索
+
+
+ )}
+
+ {/* 项目所属单位 */}
+ {isShowProjectUnit && (
+ 公告类型
+
+ updateFormData('announceType', e.target.value)}
+ buttonStyle="solid"
+ >
+ {announceTypeOptions.map((option) => (
+
+ {option.label}
+
+ ))}
+
+
+
+
+ )}
+
+ {/* 项目所在地 */}
+ 所属单位
+
+
+
+
+ {/* 发布时间 */}
+ 项目所在地
+
+
+
+
+
+ updateFormData('currentProvince', e.target.value)}
+ buttonStyle="solid"
+ >
+
+
+
+ {firstRowProvinces.map((province) => (
+
+ {province}
+
+ ))}
+
+
+
+
+ {/* 项目类型 */}
+ 发布时间
+
+ updateFormData('publishTime', e.target.value)}
+ buttonStyle="solid"
+ >
+ {publishTimeOptions.map((option) => (
+
+ {option.label}
+
+ ))}
+
+ {formData.publishTime === '自定义' && (
+ updateFormData('dateRange', dates)}
+ />
+ )}
+
+
+
+ 项目类型
+
+ updateFormData('projectType', e.target.value)}
+ buttonStyle="solid"
+ >
+ {projectTypeOptions.map((option) => (
+
+ {option.label}
+
+ ))}
+
+
+
-
- {/* 公告搜索 */}
-
- })
+
公告搜索
- 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) => (
-
-
);
diff --git a/src/pages/index/index.less b/src/pages/index/index.less
index 16ee2b4..3a1a9fc 100644
--- a/src/pages/index/index.less
+++ b/src/pages/index/index.less
@@ -10,21 +10,7 @@
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;
@@ -39,16 +25,196 @@
text-indent: 26px;
}
}
-.link {
+.banner {
+ width: 100%;
+ height: 600px;
+}
+.noticeList {
+ padding: 10px 0;
display: flex;
- margin-top: 10px;
+ gap: 20px;
align-items: center;
- .flex {
- margin-left: 10px;
- display: flex;
+ .noticeName {
+ font-size: 18px;
+ font-weight: 600;
+ color: @main-danger-color;
+ width: 50px;
+ line-height: 20px;
+ text-align: center;
+ }
+ .noticeItem {
+ margin-right: 20px;
flex: 1;
- a{
- margin: 0 10px;
+ width: 0;
+ .cardTitle {
+ display: flex;
+ justify-content: space-between;
+ .cardTitleText {
+ font-size: 18px;
+ font-weight: 600;
+ color: @main-color;
+ cursor: pointer;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ .cardTitleTime {
+ color: @main-text-color-2;
+ }
+ }
+ .cardContent {
+ color: @main-text-color-2;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ margin-bottom: 0;
}
}
}
+// 登录入口
+.loginType {
+ background-color: #fff;
+ padding: 40px 0 30px 0;
+ .loginTypeItem {
+ background-color: rgb(249, 250, 250);
+ border-radius: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 25px 0;
+ .loginTypeItemTitle {
+ font-size: 18px;
+ font-weight: 600;
+ color: @main-text-color;
+ margin: 10px 0;
+ }
+ .loginTypeItemContent {
+ font-size: 15px;
+ color: @main-text-color-1;
+ margin-bottom: 20px;
+ }
+ .btns {
+ display: flex;
+ gap: 20px;
+ .ant-btn {
+ width: 100px;
+ border-radius: 5px;
+ }
+ }
+ }
+}
+
+// 采购类型
+.announce {
+ margin-top: 40px !important;
+ .bg {
+ background-color: #fff;
+ padding: 20px;
+ }
+ .types {
+ height: 100%;
+ .announceTitle {
+ font-size: 18px;
+ font-weight: 600;
+ color: @main-color;
+ margin-bottom: 10px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid rgba(@main-text-color-2, 0.5);
+ }
+ .typeItem {
+ font-size: 16px;
+ cursor: pointer;
+ border-radius: 5px;
+ padding: 10px 15px;
+ &.active {
+ background-color: @main-color;
+ color: #fff;
+ }
+ &:hover {
+ background-color: @main-color;
+ color: #fff;
+ }
+ }
+ }
+ .search{
+ height: 100%;
+ }
+}
+// 关于我们
+.about {
+ background-color: #fff;
+ padding: 40px 0 30px 0;
+ margin-top: 50px;
+ .blockTitle {
+ font-weight: 600;
+ font-size: 20px;
+ margin-bottom: 20px;
+ }
+ .mt20 {
+ margin-top: 20px;
+ }
+ .caBox {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ .caRow {
+ border: 1px solid rgba(@main-text-color-2, 0.3);
+ padding: 20px 30px;
+ }
+ .caItem {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ img {
+ width: 60px;
+ margin-bottom: 10px;
+ }
+ }
+ .contactBox {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ .contact {
+ flex: 1;
+ border: 1px solid rgba(@main-text-color-2, 0.3);
+ padding: 20px 30px;
+ }
+ }
+ }
+
+ .borderBox {
+ border: 1px solid rgba(@main-text-color-2, 0.3);
+ padding: 20px 30px;
+ padding-bottom: 50px;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ .questionItem {
+ line-height: 50px;
+ border-bottom: 1px solid rgba(@main-text-color-2, 0.5);
+ .icon {
+ margin-right: 10px;
+ font-size: 18px;
+ }
+ }
+ }
+}
+// 友情链接
+.firendLink {
+ background-color: #fff;
+ padding: 40px 0 30px 0;
+ .linkTitle {
+ font-weight: 600;
+ font-size: 20px;
+ margin-bottom: 20px;
+ }
+ :global(.ant-card) {
+ background-color: red;
+ }
+ img {
+ width: 100%;
+ height: 100%;
+ }
+}
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 7c59f1c..d142292 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,38 +1,30 @@
import React, { useState, useEffect } from 'react';
-import { Card, Row, Col, Tabs, Table } from 'antd';
-import { useIntl, Link } from 'umi';
+import { Card, Row, Col, Tabs, Table, Button, Space } from 'antd';
+import { useIntl, Link, history } from 'umi';
import './index.less';
import IconFont from '@/components/IconFont/IconFont';
import LinkComponent from './Link';
-import { getCoscoPortalsLinksClassification } from '@/servers/api';
+import Search from '../announce/Search';
+import type { SearchFormData } from '../announce/Search';
const IndexPage: React.FC = () => {
const intl = useIntl();
const [noticeLoading, setNoticeLoading] = useState(false);
- const [links, setLinks] = useState
-
- {item.type}
-
-
handleAnnounceClick(item.id)}
- >
- {item.title}
+ {/* 公告列表部分 */}
+
+
-
- )}
- />
+
+ )}
+ />
+ - `共 ${totalItems} 条记录`,
+ showSizeChanger: true,
+ showQuickJumper: true,
+ }}
+ renderItem={(item) => (
+
+
-
+
+ {item.type}
+
+
+
+
+ handleAnnounceClick(item.id)}
+ >
+ {item.title}
+
+ 招标人：{item.company}
+ 发布日期：{item.publishDate}
+
+ 剩余2天4小时
+ 距文件购买截止时间
+
+
+
+
+ 招标编号：{item.company}
+ 项目类型：{item.publishDate}
+
+
我要参与 →
+
-
- 招标人：{item.company}
- 发布日期：{item.publishDate}
-
+
{/* 通知列表 */}
-
+
+
{/* 通知列表 */}
-
+
+
+ ))}
+ 通知公告
{noticeList.map((item) => (
-
+ {
+ history.push({
+ pathname: '/announce/announceInfo',
search: '?id=' + item.id,
+ });
+ }}
+ >
+ {item.title}
+
+ {item.time}
+
+ {item.content}
+
+
+
+
+
+
+
+ })
+
+
+
+ 供应商入口
+
+ 供应商注册、投标、合同管理、结算等全流程服务
+
+
+
+
+
+
+ })
+
+
+
+ 采购专家入口
+
+ 采购需求发布、评审、合同签订、供应商管理等服务
+
+
+
+
+
+
+ })
+
+
+
+ 招标代理入口
+
+ 招标文件编制、公告发布、开标评标等专业服务
+
+
+
+
+
+
+
+ 
,
+ nextIcon: 
,
+ },
+};
+
+export default tableProps;
采购类型
+ {typeList.map((item) => (
+ {
+ tabChange(item);
}}
>
- {intl.formatMessage({ id: '查看' })}
-
- }
- >
-
-
-
-
+ {item.content}
- - - ))} - -
-
- {tabList.map((item) => (
-
-
-
-
-
- ![]()
-
-
-
- {intl.formatMessage({ id: '加载更多' })}
-
-
-
- 紧急问题咨询
-
-
-
-
-
-
+ ))}
CA服务
- 联系方式
- 客服1: 400-300-9989
-客服1: 400-300-9989
-客服1: 400-300-9989
-客服1: 400-300-9989
+
+
+
+
);
diff --git a/src/utils/tableProps.tsx b/src/utils/tableProps.tsx
new file mode 100644
index 0000000..16a6660
--- /dev/null
+++ b/src/utils/tableProps.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import type { TablePaginationConfig } from 'antd';
+import LeftIcon from '@/assets/arrow-left.svg';
+import RightIcon from '@/assets/arrow-right.svg';
+
+type TableProps = {
+ pagination: TablePaginationConfig;
+};
+
+const tableProps: TableProps = {
+ pagination: {
+ position: ['bottomLeft'],
+ defaultPageSize: 10,
+ showQuickJumper: true,
+ showSizeChanger: true,
+ showTotal: (total) => `共 ${total} 条`,
+ size: 'default',
+ locale: {
+ jump_to: '前往',
+ },
+ className: 'pagination-container',
+ prevIcon:
+
+
+
+ 问题咨询
+
+ })
+
+
+
+
+
+
+
+
+
+
+
+ })
+ CA办理
+
+ })
+ CA客服
+
+
+
- CA服务
+
+ CA办理
+
+
+ CA客服
+
+
-
+
+
+
+
+ 联系方式
+
+
+ 客服1: 400-300-9989
+客服1: 400-300-9989
+客服1: 400-300-9989
+客服1: 400-300-9989
+
+
+
+ {Array.from({ length: 12 }).map((item, index) => (
+
+
+
+ ))}
+
+
友情链接
+
+