修改样式

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<SearchProps> = ({
+  initialValues,
+  onChange,
+  onSearch,
+  isShowAnnounceType = true,
+  isShowSearch = true,
+  isShowProjectUnit = true,
+}) => {
+  // 内部状态管理
+  const [formData, setFormData] = useState<SearchFormData>(
+    initialValues || {
+      searchKeyword: '',
+      announceType: '全部',
+      projectUnit: '全选',
+      projectLocation: '中国',
+      publishTime: '不限',
+      projectType: '全部',
+      currentProvince: '全部',
+      dateRange: null,
+    },
+  );
+
+  // 更新表单数据并通知父组件
+  const updateFormData = (key: keyof SearchFormData, value: any) => {
+    const newFormData = { ...formData, [key]: value };
+    setFormData(newFormData);
+    if (onChange) {
+      onChange(newFormData);
+    }
+  };
+
+  // 处理搜索按钮点击
+  const handleSearch = () => {
+    if (onSearch) {
+      onSearch(formData);
+    }
+  };
+
+  return (
+    <div className={styles.announceSearch}>
+      {/* 公告搜索 */}
+      {isShowSearch && (
+        <div className={styles.searchRow}>
+          <div className={styles.searchLabel}>公告搜索</div>
+          <Input.Group compact>
+            <Input style={{ width: 'calc(100% - 200px)' }} />
+            <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
+              搜 索
+            </Button>
+          </Input.Group>
+        </div>
+      )}
+
+      {/* 公告类型 */}
+      {isShowAnnounceType && (
+        <div className={styles.filterRow}>
+          <div className={styles.filterLabel}>公告类型</div>
+          <div className={styles.filterOptions}>
+            <Radio.Group
+              value={formData.announceType}
+              onChange={(e) => updateFormData('announceType', e.target.value)}
+              buttonStyle="solid"
+            >
+              {announceTypeOptions.map((option) => (
+                <Radio.Button key={option.value} value={option.value}>
+                  {option.label}
+                </Radio.Button>
+              ))}
+            </Radio.Group>
+          </div>
+        </div>
+      )}
+
+      {/* 项目所属单位 */}
+      {isShowProjectUnit && (
+        <div className={styles.filterRow}>
+          <div className={styles.filterLabel}>所属单位</div>
+          <Select
+            style={{ width: 300 }}
+            value={formData.projectUnit}
+            onChange={(value) => updateFormData('projectUnit', value)}
+          >
+            <Option value="全选">全选</Option>
+            <Option value="中远海运集团">中远海运集团</Option>
+            <Option value="中远海运物流">中远海运物流</Option>
+            <Option value="中远海运集装箱">中远海运集装箱</Option>
+          </Select>
+        </div>
+      )}
+
+      {/* 项目所在地 */}
+      <div className={styles.filterRow}>
+        <div className={styles.filterLabel}>项目所在地</div>
+        <div className={styles.locationSelector}>
+          <Select
+            style={{ width: 150, marginRight: 10 }}
+            value={formData.projectLocation}
+            onChange={(value) => updateFormData('projectLocation', value)}
+          >
+            <Option value="中国">中国</Option>
+            <Option value="国外">国外</Option>
+          </Select>
+
+          <div className={styles.provinceSelector}>
+            <Radio.Group
+              value={formData.currentProvince}
+              onChange={(e) => updateFormData('currentProvince', e.target.value)}
+              buttonStyle="solid"
+            >
+              <div className={styles.provinceRow}>
+                {firstRowProvinces.map((province) => (
+                  <Radio.Button key={province} value={province}>
+                    {province}
+                  </Radio.Button>
+                ))}
+              </div>
+            </Radio.Group>
+          </div>
+        </div>
+      </div>
+
+      {/* 发布时间 */}
+      <div className={styles.filterRow}>
+        <div className={styles.filterLabel}>发布时间</div>
+        <div className={styles.filterOptions}>
+          <Radio.Group
+            value={formData.publishTime}
+            onChange={(e) => updateFormData('publishTime', e.target.value)}
+            buttonStyle="solid"
+          >
+            {publishTimeOptions.map((option) => (
+              <Radio.Button key={option.value} value={option.value}>
+                {option.label}
+              </Radio.Button>
+            ))}
+          </Radio.Group>
+          {formData.publishTime === '自定义' && (
+            <RangePicker
+              style={{ marginLeft: 10 }}
+              value={formData.dateRange as any}
+              onChange={(dates) => updateFormData('dateRange', dates)}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* 项目类型 */}
+      <div className={styles.filterRow}>
+        <div className={styles.filterLabel}>项目类型</div>
+        <div className={styles.filterOptions}>
+          <Radio.Group
+            value={formData.projectType}
+            onChange={(e) => updateFormData('projectType', e.target.value)}
+            buttonStyle="solid"
+          >
+            {projectTypeOptions.map((option) => (
+              <Radio.Button key={option.value} value={option.value}>
+                {option.label}
+              </Radio.Button>
+            ))}
+          </Radio.Group>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Search;

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 {

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<string>('');
-  const [announceType, setAnnounceType] = useState<string>('全部');
-  const [projectUnit, setProjectUnit] = useState<string>('全选');
-  const [projectLocation, setProjectLocation] = useState<string>('中国');
-  const [publishTime, setPublishTime] = useState<string>('不限');
-  const [projectType, setProjectType] = useState<string>('全部');
-  const [currentProvince, setCurrentProvince] = useState<string>('全部');
-
   // 分页状态
   const [current, setCurrent] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [total, setTotal] = useState(100);
 
-  // 公告类型选项
-  const announceTypeOptions = [
-    { label: '全部', value: '全部' },
-    { label: '采购需求公示', value: '采购需求公示' },
-    { label: '招标采购公告', value: '招标采购公告' },
-    { label: '非招标采购公告', value: '非招标采购公告' },
-    { label: '资格预审公告', value: '资格预审公告' },
-    { label: '招募公告', value: '招募公告' },
-    { label: '变更公告', value: '变更公告' },
-    { label: '中标(中选)候选人公示', value: '中标(中选)候选人公示' },
-    { label: '中标(中选)结果公示', value: '中标(中选)结果公示' },
-    { label: '采购失败(流标)公告', value: '采购失败(流标)公告' },
-  ];
-
-  // 省份选项 - 按照图片中的顺序排列
-  const provinceOptions = [
-    { label: '全部', value: '全部' },
-    { label: '北京', value: '北京' },
-    { label: '天津', value: '天津' },
-    { label: '河北', value: '河北' },
-    { label: '山西', value: '山西' },
-    { label: '内蒙古', value: '内蒙古' },
-    { label: '辽宁', value: '辽宁' },
-    { label: '吉林', value: '吉林' },
-    { label: '黑龙江', value: '黑龙江' },
-    { label: '上海', value: '上海' },
-    { label: '江苏', value: '江苏' },
-    { label: '浙江', value: '浙江' },
-    { label: '安徽', value: '安徽' },
-    { label: '福建', value: '福建' },
-    { label: '江西', value: '江西' },
-    { label: '山东', value: '山东' },
-    { label: '河南', value: '河南' },
-    { label: '湖北', value: '湖北' },
-    { label: '湖南', value: '湖南' },
-    { label: '广东', value: '广东' },
-    { label: '广西', value: '广西' },
-    { label: '海南', value: '海南' },
-    { label: '重庆', value: '重庆' },
-    { label: '四川', value: '四川' },
-    { label: '贵州', value: '贵州' },
-    { label: '云南', value: '云南' },
-    { label: '西藏', value: '西藏' },
-    { label: '陕西', value: '陕西' },
-    { label: '甘肃', value: '甘肃' },
-    { label: '青海', value: '青海' },
-    { label: '宁夏', value: '宁夏' },
-    { label: '新疆', value: '新疆' },
-    { label: '香港', value: '香港' },
-    { label: '澳门', value: '澳门' },
-    { label: '台湾', value: '台湾' },
-  ];
-
-  // 第一行省份
-  const firstRowProvinces = ['全部', '北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西'];
-  // 第二行省份
-  const secondRowProvinces = ['山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西'];
-  // 第三行省份
-  const thirdRowProvinces = ['甘肃', '青海', '宁夏', '新疆', '香港', '澳门', '台湾'];
-
-  // 发布时间选项
-  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 [searchFormData, setSearchFormData] = useState<SearchFormData>({
+    searchKeyword: '',
+    announceType: '全部',
+    projectUnit: '全选',
+    projectLocation: '中国',
+    publishTime: '不限',
+    projectType: '全部',
+    currentProvince: '全部',
+  });
 
   // 处理搜索
-  const handleSearch = () => {
-    console.log('搜索条件：', {
-      searchKeyword,
-      announceType,
-      projectUnit,
-      projectLocation,
-      publishTime,
-      projectType,
-    });
+  const handleSearch = (formData: SearchFormData) => {
+    console.log('搜索条件：', formData);
     // 这里添加搜索逻辑
   };
 
+  // 处理表单变化
+  const handleFormChange = (formData: SearchFormData) => {
+    setSearchFormData(formData);
+  };
+
   // 处理分页变化
   const handlePageChange = (page: number, pageSizeValue?: number) => {
     setCurrent(page);
@@ -188,179 +106,65 @@ const AnnouncePage: React.FC = () => {
 
   return (
     <div className={styles.announceContainer}>
-      <div className={styles.searchSection}>
-        {/* 公告搜索 */}
-        <div className={styles.searchRow}>
-          <div className={styles.searchLabel}>公告搜索</div>
-          <Input
-            placeholder="请输入公告关键词"
-            value={searchKeyword}
-            onChange={(e) => setSearchKeyword(e.target.value)}
-            style={{ width: '80%', maxWidth: 1000 }}
-            suffix={
-              <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
-                搜 索
-              </Button>
-            }
+      <img className={styles.banner} src={require('@/assets/img/banner.jpg')} alt="" />
+      <div className="layout-content-main">
+        <div className={styles.search}>
+          <Search
+            initialValues={searchFormData}
+            onChange={handleFormChange}
+            onSearch={handleSearch}
           />
         </div>
-
-        {/* 公告类型 */}
-        <div className={styles.filterRow}>
-          <div className={styles.filterLabel}>公告类型</div>
-          <div className={styles.filterOptions}>
-            <Radio.Group
-              value={announceType}
-              onChange={(e) => setAnnounceType(e.target.value)}
-              buttonStyle="solid"
-            >
-              {announceTypeOptions.map((option) => (
-                <Radio.Button key={option.value} value={option.value}>
-                  {option.label}
-                </Radio.Button>
-              ))}
-            </Radio.Group>
-          </div>
-        </div>
-
-        {/* 项目所属单位 */}
-        <div className={styles.filterRow}>
-          <div className={styles.filterLabel}>项目所属单位</div>
-          <Select
-            style={{ width: 300 }}
-            value={projectUnit}
-            onChange={(value) => setProjectUnit(value)}
-          >
-            <Option value="全选">全选</Option>
-            <Option value="中远海运集团">中远海运集团</Option>
-            <Option value="中远海运物流">中远海运物流</Option>
-            <Option value="中远海运集装箱">中远海运集装箱</Option>
-          </Select>
-        </div>
-
-        {/* 项目所在地 */}
-        <div className={styles.filterRow}>
-          <div className={styles.filterLabel}>项目所在地</div>
-          <div className={styles.locationSelector}>
-            <Select
-              style={{ width: 150, marginRight: 10 }}
-              value={projectLocation}
-              onChange={(value) => setProjectLocation(value)}
-            >
-              <Option value="中国">中国</Option>
-              <Option value="国外">国外</Option>
-            </Select>
-
-            <div className={styles.provinceSelector}>
-              <Radio.Group
-                value={currentProvince}
-                onChange={(e) => setCurrentProvince(e.target.value)}
-                buttonStyle="solid"
-              >
-                <div className={styles.provinceRow}>
-                  {firstRowProvinces.map((province) => (
-                    <Radio.Button key={province} value={province}>
-                      {province}
-                    </Radio.Button>
-                  ))}
-                </div>
-                <div className={styles.provinceRow}>
-                  {secondRowProvinces.map((province) => (
-                    <Radio.Button key={province} value={province}>
-                      {province}
-                    </Radio.Button>
-                  ))}
-                </div>
-                <div className={styles.provinceRow}>
-                  {thirdRowProvinces.map((province) => (
-                    <Radio.Button key={province} value={province}>
-                      {province}
-                    </Radio.Button>
-                  ))}
-                </div>
-              </Radio.Group>
-            </div>
-          </div>
-        </div>
-
-        {/* 发布时间 */}
-        <div className={styles.filterRow}>
-          <div className={styles.filterLabel}>发布时间</div>
-          <div className={styles.filterOptions}>
-            <Radio.Group
-              value={publishTime}
-              onChange={(e) => setPublishTime(e.target.value)}
-              buttonStyle="solid"
-            >
-              {publishTimeOptions.map((option) => (
-                <Radio.Button key={option.value} value={option.value}>
-                  {option.label}
-                </Radio.Button>
-              ))}
-            </Radio.Group>
-            {publishTime === '自定义' && (
-              <RangePicker style={{ marginLeft: 10 }} />
-            )}
-          </div>
-        </div>
-
-        {/* 项目类型 */}
-        <div className={styles.filterRow}>
-          <div className={styles.filterLabel}>项目类型</div>
-          <div className={styles.filterOptions}>
-            <Radio.Group
-              value={projectType}
-              onChange={(e) => setProjectType(e.target.value)}
-              buttonStyle="solid"
-            >
-              {projectTypeOptions.map((option) => (
-                <Radio.Button key={option.value} value={option.value}>
-                  {option.label}
-                </Radio.Button>
-              ))}
-            </Radio.Group>
-          </div>
-        </div>
-      </div>
-      {/* 公告列表部分 */}
-      <div className={styles.announceList}>
-        <List
-          itemLayout="horizontal"
-          dataSource={mockAnnounceData}
-          pagination={{
-            onChange: handlePageChange,
-            current,
-            pageSize,
-            total,
-            showTotal: (totalItems) => `共 ${totalItems} 条记录`,
-            showSizeChanger: true,
-            showQuickJumper: true,
-          }}
-          renderItem={(item) => (
-            <List.Item
-              key={item.id}
-              className={styles.listItem}
-            >
-              <div className={styles.itemContent}>
-                <div className={styles.itemHeader}>
-                  <Tag color={getTypeColor(item.type)} className={styles.typeTag}>
-                    {item.type}
-                  </Tag>
-                  <div
-                    className={styles.itemTitle}
-                    onClick={() => handleAnnounceClick(item.id)}
-                  >
-                    {item.title}
+        {/* 公告列表部分 */}
+        <div className={styles.announceList}>
+          <List
+            itemLayout="horizontal"
+            dataSource={mockAnnounceData}
+            pagination={{
+              onChange: handlePageChange,
+              current,
+              pageSize,
+              total,
+              showTotal: (totalItems) => `共 ${totalItems} 条记录`,
+              showSizeChanger: true,
+              showQuickJumper: true,
+            }}
+            renderItem={(item) => (
+              <List.Item key={item.id} className={styles.listItem} style={{borderBottom: 'none'}}>
+                <div className={styles.itemContent}>
+                  <div className={styles.itemHeader}>
+                    <Tag color={getTypeColor(item.type)} className={styles.typeTag}>
+                      {item.type}
+                    </Tag>
+                    <div className={styles.itemInfo}>
+                      <div
+                        className={styles.itemTitle}
+                        onClick={() => handleAnnounceClick(item.id)}
+                      >
+                        {item.title}
+                      </div>
+                      <div className={styles.itemCompany}>招标人：{item.company}</div>
+                      <div className={styles.itemDate}>发布日期：{item.publishDate}</div>
+                    </div>
+                    <div className={styles.itemLastTime}>
+                      <span className={styles.itemLastTimeNum}>剩余2天4小时</span>
+                      <span className={styles.itemLastTimeBtn}>距文件购买截止时间</span>
+                    </div>
+                  </div>
+                  <div className={styles.itemFooter}>
+                    <div className={styles.itemFooterLeft}>
+                      <div className={styles.company}>招标编号：{item.company}</div>
+                      <div className={styles.date}>项目类型：{item.publishDate}</div>
+                    </div>
+                    <div className={styles.itemFooterRight}>
+                      <div className={styles.itemFooterRightBtn}>我要参与 →</div>
+                    </div>
                   </div>
                 </div>
-                <div className={styles.itemFooter}>
-                  <div className={styles.company}>招标人：{item.company}</div>
-                  <div className={styles.date}>发布日期：{item.publishDate}</div>
-                </div>
-              </div>
-            </List.Item>
-          )}
-        />
+              </List.Item>
+            )}
+          />
+        </div>
       </div>
     </div>
   );

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%;
+  }
+}

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<API.CoscoPortalsLinksClassification>([]);
   const [noticeList, setNoticeList] = useState([
     {
       title: 'CA使用通知',
       id: '1',
       content: '系统将于2022年5月27日期开始对全流程使用CA服务，届时全部投标供应商需办理CA。',
+      time: '2022-05-27',
     },
     {
       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',
+      time: '2022-05-27',
     },
   ]);
-  const tabList = [
+  const typeList = [
     {
       key: '1',
       label: intl.formatMessage({ id: '采购需求公示' }),
@@ -71,8 +63,8 @@ const IndexPage: React.FC = () => {
     },
   ];
   //tab 切换事件
-  const tabChange = (key: string) => {
-    console.log(key);
+  const tabChange = (item: any) => {
+    console.log(item);
   };
   const [tableLoading, setTableLoading] = useState(false);
   const dataSource = [
@@ -91,28 +83,14 @@ const IndexPage: React.FC = () => {
       lastDate: '剩余3天4小时',
     },
     {
-      key: '2',
+      key: '3',
       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',
+      key: '4',
       title: '中远海运空运北方物流基地标识制作及安装服务',
       address: '西湖区湖底公园1号',
       date: '2025年01月23日',
@@ -154,104 +132,224 @@ const IndexPage: React.FC = () => {
     },
   ];
 
-  useEffect(() => {
-    getCoscoPortalsLinksClassification().then((res) => {
-      setLinks(res.data);
-      console.log(res.data);
+  const toSystem = (type: string) => {
+    console.log(type);
+    history.push({
+      pathname: '/login',
+      query: {
+        type: type,
+      },
     });
-  }, []);
+  };
+
+  const toRegister = (type: string) => {
+    history.push({
+      pathname: '/register/supplier',
+      query: {
+        type: type,
+      },
+    });
+    console.log(type);
+  };
+
+  const [searchFormData, setSearchFormData] = useState<SearchFormData>({
+    searchKeyword: '',
+    announceType: '全部',
+    projectUnit: '',
+    projectLocation: '中国',
+    publishTime: '不限',
+    projectType: '全部',
+    currentProvince: '全部',
+  });
+  const handleFormChange = (formData: SearchFormData) => {
+    setSearchFormData(formData);
+  };
+  const handleSearch = (formData: SearchFormData) => {
+    console.log(formData);
+  };
 
   return (
     <div>
+      <img className="banner" src={require('@/assets/img/banner.jpg')} alt="" />
       {/* 通知列表 */}
-      <Row gutter={20}>
+      <div className="noticeList layout-content-main">
+        <div className="noticeName">通知公告</div>
         {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',
+          <div className="noticeItem" key={item.id}>
+            <div className="cardTitle">
+              <span
+                className="cardTitleText"
+                onClick={() => {
+                  history.push({
+                    pathname: '/announce/announceInfo',
                     search: '?id=' + item.id,
+                  });
+                }}
+              >
+                {item.title}
+              </span>
+              <span className="cardTitleTime">{item.time}</span>
+            </div>
+            <p className="cardContent">{item.content}</p>
+          </div>
+        ))}
+      </div>
+      <div className="loginType">
+        <div className="layout-content-main">
+          <Row gutter={20}>
+            <Col span={8}>
+              <div className="loginTypeItem">
+                <img src={require('@/assets/img/loginType1.png')} alt="" />
+                <div className="loginTypeItemTitle">供应商入口</div>
+                <div className="loginTypeItemContent">
+                  供应商注册、投标、合同管理、结算等全流程服务
+                </div>
+                <div className="btns">
+                  <Button type="primary" onClick={() => toSystem('supplier')}>
+                    立即进入
+                  </Button>
+                  <Button type="primary" ghost onClick={() => toRegister('supplier')}>
+                    立即注册
+                  </Button>
+                </div>
+              </div>
+            </Col>
+            <Col span={8}>
+              <div className="loginTypeItem">
+                <img src={require('@/assets/img/loginType2.png')} alt="" />
+                <div className="loginTypeItemTitle">采购专家入口</div>
+                <div className="loginTypeItemContent">
+                  采购需求发布、评审、合同签订、供应商管理等服务
+                </div>
+                <div className="btns">
+                  <Button type="primary" ghost onClick={() => toSystem('expert')}>
+                    立即进入
+                  </Button>
+                  <Button type="primary" ghost onClick={() => toRegister('expert')}>
+                    立即注册
+                  </Button>
+                </div>
+              </div>
+            </Col>
+            <Col span={8}>
+              <div className="loginTypeItem">
+                <img src={require('@/assets/img/loginType3.png')} alt="" />
+                <div className="loginTypeItemTitle">招标代理入口</div>
+                <div className="loginTypeItemContent">
+                  招标文件编制、公告发布、开标评标等专业服务
+                </div>
+                <div className="btns">
+                  <Button type="primary" ghost onClick={() => toSystem('agent')}>
+                    立即进入
+                  </Button>
+                </div>
+              </div>
+            </Col>
+          </Row>
+        </div>
+      </div>
+      <div className="layout-content-main announce">
+        <Row gutter={40}>
+          <Col span={5}>
+            <div className="types bg">
+              <div className="announceTitle">采购类型</div>
+              {typeList.map((item) => (
+                <div
+                  className={`typeItem ${item.key === '1' ? 'active' : ''}`}
+                  key={item.key}
+                  onClick={() => {
+                    tabChange(item);
                   }}
                 >
-                  {intl.formatMessage({ id: '查看' })}
-                </Link>
-              }
-            >
-              <p className="cardContent">{item.content}</p>
-            </Card>
-          </Col>
-        ))}
-      </Row>
-      <div style={{ backgroundColor: '#fff', marginTop: '20px', padding: '20px' }}>
-        <Tabs onChange={tabChange}>
-          {tabList.map((item) => (
-            <Tabs.TabPane tab={item.label} key={item.key} />
-          ))}
-        </Tabs>
-
-        <Table
-          loading={tableLoading}
-          dataSource={dataSource}
-          columns={columns}
-          pagination={false}
-        />
-
-        <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
+                  {item.label}
+                </div>
+              ))}
             </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 span={19}>
+            <div className="search bg">
+              <Search
+                isShowAnnounceType={false}
+                isShowSearch={false}
+                isShowProjectUnit={false}
+                initialValues={searchFormData}
+                onChange={handleFormChange}
+                onSearch={handleSearch}
+              />
+              <Table
+                loading={tableLoading}
+                dataSource={dataSource}
+                columns={columns}
+                pagination={{
+                  pageSize: 10,
+                  total: 100,
+                }}
+              />
+            </div>
           </Col>
         </Row>
       </div>
+      <div className="about">
+        <div className="layout-content-main">
+          <Row gutter={40}>
+            <Col span={16}>
+              <div className="blockTitle">问题咨询</div>
+              <div className="borderBox">
+                <img src={require('@/assets/img/location.png')} 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>
+              </div>
+            </Col>
+            <Col span={8} className="caBox">
+              <div>
+                <div className="blockTitle">CA服务</div>
+                <Row className="caRow">
+                  <Col span={6} offset={6} className="caItem">
+                    <img src={require('@/assets/img/ca1.png')} alt="" />
+                    <span>CA办理</span>
+                  </Col>
+                  <Col span={6} className="caItem">
+                    <img src={require('@/assets/img/ca2.png')} alt="" />
+                    <span>CA客服</span>
+                  </Col>
+                </Row>
+              </div>
 
-      <div>
-        <LinkComponent links={links} />
+              <div className="contactBox">
+                <div className="blockTitle mt20">联系方式</div>
+                <div className="contact">
+                  <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>
+                </div>
+              </div>
+            </Col>
+          </Row>
+        </div>
+      </div>
+
+      <div className="firendLink">
+        <div className="layout-content-main">
+          <div className="linkTitle">友情链接</div>
+          <Card>
+            {Array.from({ length: 12 }).map((item, index) => (
+              <Card.Grid key={index} style={{ width: '16.6667%', height: '130px' }}>
+                <img src={require('@/assets/img/banner.jpg')} alt="" />
+              </Card.Grid>
+            ))}
+          </Card>
+        </div>
       </div>
     </div>
   );