四个页面搭建

src/pages/PartyMemberTopic/PartyBranch/index.tsx

@@ -0,0 +1,120 @@
+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;