四个页面搭建

src/pages/PartyMemberTopic/ActivityStyle/index.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect } from 'react';
+import '../Style/ld_style.less';
+import { Input, List, Pagination } from 'antd';
+import list_pic from '@/assets/topic/listNewsPic01.jpg'
+import time_icon from '@/assets/topic/timeIcon.png'
+
+const { Search } = Input;
+
+const data = [
+  {
+    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></span>
+        <div className="search-box">
+          <Search
+            placeholder="输入姓名/邮箱/电话"
+            allowClear
+            enterButton="搜索"
+            style={{ width: 322 }}
+          />
+        </div>
+      </div>
+      <div className="list-content">
+        <List
+          itemLayout="horizontal"
+          dataSource={data}
+          renderItem={item => (
+            <List.Item>
+              <div className="list-pic">
+                <img src={list_pic} />
+                <p className="tit">海南：党员突击队助力公司互联网化运营转型——海口联通资源普查的故事</p>
+                <p className="detail">为了夯实基础管理，助力公司互联网化运营转型，海南联通海口市分公司开展号线资源地址普查专项行动。面对时间短、任务重、人手不足的情况，海口市分公司党员主动请缨，成立党员突击队，攻坚克难</p>
+                <span className="time"><img src={time_icon} />2022-05-01</span>
+              </div>
+            </List.Item>
+          )}
+        />
+      </div>
+      <Pagination size="small" total={50} showSizeChanger showQuickJumper />
+    </div>
+  )
+}
+
+export default PersonInfor;