修改样式

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>
   );