四个页面搭建

src/pages/PartyMemberTopic/PersonInfor/index.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect } from 'react';
+import '../Style/ld_style.less';
+import { Input, List } from 'antd';
+
+const { Search } = Input;
+
+const data = [
+  {
+    title: '集团党支部',
+    name: '张三',
+    position: '党委书记',
+  },
+  {
+    title: '集团党支部',
+    name: '李四',
+    position: '党委副书记',
+  },
+  {
+    title: '集团党支部',
+    name: '李四',
+    position: '党委副书记',
+  },
+  {
+    title: '集团党支部',
+    name: '李四',
+    position: '党委副书记',
+  },
+  {
+    title: '集团党支部',
+    name: '李四',
+    position: '党委副书记',
+  },
+  {
+    title: '集团党支部',
+    name: '李四',
+    position: '党委副书记',
+  },
+  {
+    title: '集团党支部',
+    name: '李四',
+    position: '党委副书记',
+  }
+];
+
+const PersonInfor: React.FC<{}> = () => {
+  return (
+    <div className="page-container">
+      <div className="top-banner">
+        <div className="back-home">
+          <span>返回首页</span>
+          <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="mess-box mess-detail">
+        <List
+          grid={{ gutter: 16, column: 4 }}
+          dataSource={data}
+          renderItem={item => (
+            <List.Item>
+              <div className="wrapper">
+                <div className="top-bg">
+                  <div className="tit">{item.title}</div>
+                  <div className="text-r">{item.name}</div>
+                  <div className="text-r yellow">{item.position}</div>
+                </div>
+                <div className="mess">
+                  <div>部门：某某部</div>
+                  <div>邮箱：12345@chinaunicom.cn</div>
+                  <div>电话：12345678</div>
+                </div>
+              </div>
+            </List.Item>
+          )}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default PersonInfor;