tonghua-platfrom/src/pages/home/index.tsx

import {Card, Row, Col, Divider} from 'antd'
import {
  SafetyCertificateOutlined,
  FileTextOutlined,
  BookOutlined,
  SolutionOutlined,
  CalendarOutlined,
  NotificationOutlined,
  CompassOutlined,
  CustomerServiceOutlined,
  RightOutlined
} from '@ant-design/icons'
import React from 'react'
import {Link} from "react-router-dom";

export default function ServiceGuide() {
  const guideItems = [
    {
      icon: <SafetyCertificateOutlined className="text-5xl" />,
      label: '企业登记服务',
    },
    {
      icon: <FileTextOutlined className="text-5xl" />,
      label: '人才政策申报',
    },
    {
      icon: <FileTextOutlined className="text-5xl" />,
      label: '技术合同登记',
    },
    {
      icon: <BookOutlined className="text-5xl" />,
      label: '大学生入驻申请',
    },
    {
      icon: <SolutionOutlined className="text-5xl" />,
      label: '企业档案调取申请',
    },
  ]

  return (
    <div className="w-98vw h-97vh flex">
      <Row className="w-full m-4" gutter={16}>
        <Col xs={24} lg={12} className="h-97vh">
          <Card className="h-full bg-blue-500 hover:shadow-lg transition-shadow border-none rounded-none">
            <div className="text-white text-5xl font-bold mb-8 flex items-center justify-between">
              <div className="flex items-center text-5xl">
                <CompassOutlined className="mr-4 text-5xl" />
                办事指南
              </div>
              <div className="text-5xl font-normal">
                全部 <RightOutlined />
              </div>
            </div>
            <div className="space-y-6">
              {guideItems.map((item, index) => (
                <React.Fragment key={index}>
                  <Link
                    to={`/detail?value=${item.label}`}
                    className="flex items-center text-white cursor-pointer hover:bg-blue-400 rounded-lg p-4 transition-colors"
                  >
                    {item.icon}
                    <span className="ml-4 text-5xl">{item.label}</span>
                    <RightOutlined className="ml-auto text-4xl"/>
                  </Link>
                  {index < guideItems.length - 1 && (
                    <Divider className="bg-white opacity-20 my-2" />
                  )}
                </React.Fragment>
              ))}
            </div>
          </Card>
        </Col>
        <Col xs={24} lg={12} className="h-97vh">
          <Row className="h-full">
            <Col span={24} className="h-1/2 px-1vw py-1vh">
              <Card
                className="h-full bg-yellow-400 hover:shadow-lg transition-shadow border-none rounded-none flex items-center justify-center">
              <div className="flex flex-col items-center">
                  <CalendarOutlined className="text-4xl mb-2" />
                  <span className="text-2xl">会议预定</span>
                </div>
              </Card>
            </Col>
            <Col span={12} className="h-1/2 px-1vw py-1vh">
              <Card className="h-full bg-green-400 hover:shadow-lg transition-shadow border-none rounded-none flex items-center justify-center">
                <div className="flex flex-col items-center">
                  <NotificationOutlined className="text-4xl mb-2" />
                  <span className="text-2xl mb-4">信息公开</span>
                  <div className="space-y-2 text-center">
                    <div className="cursor-pointer text-xl">通知公告</div>
                    <div className="cursor-pointer text-xl">政策查询</div>
                  </div>
                </div>
              </Card>
            </Col>
            <Col span={12} className="h-1/4 px-1vw py-1vh">
              <Card className="h-full bg-blue-300 hover:shadow-lg transition-shadow border-none rounded-none flex items-center justify-center">
                <div className="flex flex-col items-center">
                  <CompassOutlined className="text-4xl mb-2" />
                  <span className="text-2xl">园区导览</span>
                </div>
              </Card>
              <Card className="mt-2vh h-full bg-yellow-400 hover:shadow-lg transition-shadow border-none rounded-none flex items-center justify-center">
                <div className="flex flex-col items-center">
                  <CustomerServiceOutlined className="text-4xl mb-2" />
                  <span className="text-2xl">信息咨询</span>
                </div>
              </Card>
            </Col>

          </Row>
        </Col>
      </Row>
    </div>
  )
}