member-management-system-excel-bZt_e-eS/src/components/Home.jsx

import React from 'react';
import { Typography, Card, Row, Col, Statistic } from 'antd';
import { UserOutlined, CalendarOutlined } from '@ant-design/icons';

const { Title } = Typography;

function Home() {
  return (
    <div>
      <Title level={2}>欢迎使用会友信息管理系统</Title>
      <p>当前时间: 2024-10-29 11:57:05</p>
      <Row gutter={16} style={{ marginTop: 20 }}>
        <Col span={8}>
          <Card>
            <Statistic
              title="总会友数"
              value={1128}
              prefix={<UserOutlined />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="今日签到"
              value={93}
              prefix={<CalendarOutlined />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="本月新增会友"
              value={28}
              prefix={<UserOutlined />}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
}

export default Home;