fe_service_ebtp_frontend/src/pages/PartyMemberTopic/PartyBranch/index.tsx

import React, { useEffect } from 'react';
import '../Style/ld_style.less';
import { Input, List } from 'antd';

const { Search } = Input;

const data = [
  {
    title: '集团党支部',
    num: 987,
  },
  {
    title: '北京分公司党支部',
    num: 127,
  },
  {
    title: '山东分公司党支部',
    num: 110,
  },
  {
    title: '吉林分公司党支部',
    num: 121,
  },
  {
    title: '辽宁分公司党支部',
    num: 130,
  },
  {
    title: '陕西分公司党支部',
    num: 105,
  },
  {
    title: '山西分公司党支部',
    num: 104,
  },
  {
    title: '湖北分公司党支部',
    num: 113,
  },
  {
    title: '湖南分公司党支部',
    num: 111,
  },
  {
    title: '江苏分公司党支部',
    num: 987,
  },
  {
    title: '河南分公司党支部',
    num: 121,
  },
  {
    title: '河北分公司党支部',
    num: 100,
  },
  {
    title: '天津分公司党支部',
    num: 86,
  },
  {
    title: '上海分公司党支部',
    num: 98,
  },
  {
    title: '安徽分公司党支部',
    num: 105,
  },
  {
    title: '江西分公司党支部',
    num: 121,
  },
];

const PartyBranch: React.FC<{}> = () => {
  return (
    <div className="page-container">
      <div className="top-banner">
        <div className="back-home">
          <span>返回首页</span>
        </div>
      </div>
      <div className="search">
        <span className="text"><span>党员名录</span>(当前共270条)</span>
        <div className="search-box">
          <Search
            placeholder="输入姓名/邮箱/电话"
            allowClear
            enterButton="搜索"
            style={{ width: 322 }}
          />
        </div>
      </div>
      <div className="static-box">
        <div className="person-num">党员数量<span>3451</span>人</div>
        <div className="party-num">党支部数量<span>51</span>个</div>
      </div>
      <div className="mess-box">
        <List
          grid={{ gutter: 16, column: 4 }}
          dataSource={data}
          renderItem={item => (
            <List.Item>
              <div className="wrapper">
                <div className="pic-bg">{item.title}</div>
                <div className="mess">
                  <div className="mess-left">党员数量</div>
                  <div className="mess-right">
                    <span>{item.num}</span>人
                  </div>
                </div>
              </div>
            </List.Item>
          )}
        />
      </div>
    </div>
  )
}

export default PartyBranch;