四个页面搭建

config/router_partyMemberTopic.ts

@@ -11,4 +11,24 @@ export default [
     path: '/partyMemberTopic/home',
     component: './PartyMemberTopic/Home',
   },
+  { // 党支部
+    name: 'partyMemberTopic',
+    path: '/partyMemberTopic/partyBranch',
+    component: './PartyMemberTopic/PartyBranch',
+  },
+  { // 党支部人员信息
+    name: 'partyMemberTopic',
+    path: '/partyMemberTopic/personInfor',
+    component: './PartyMemberTopic/PersonInfor',
+  },
+  { // 攻坚克难项目
+    name: 'partyMemberTopic',
+    path: '/partyMemberTopic/overDifficult',
+    component: './PartyMemberTopic/OverDifficult',
+  },
+  { // 活动风采
+    name: 'partyMemberTopic',
+    path: '/partyMemberTopic/activityStyle',
+    component: './PartyMemberTopic/ActivityStyle',
+  },
 ];

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;

src/pages/PartyMemberTopic/OverDifficult/index.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect } from 'react';
+import '../Style/ld_style.less';
+import { Input, List, Pagination } 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></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-box">
+                <p>党员先锋示范队“攻坚克难”活动项目计划书</p>
+                <span>2022-04-03</span>
+              </div>
+            </List.Item>
+          )}
+        />
+      </div>
+      <Pagination size="small" total={50} showSizeChanger showQuickJumper />
+    </div>
+  )
+}
+
+export default PersonInfor;

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;

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;

src/pages/PartyMemberTopic/Style/ld_style.less

@@ -0,0 +1,237 @@
+@import '~antd/es/style/themes/default.less';
+
+.page-container{
+  width: 1460px;
+  margin: 0 auto;
+  .top-banner{
+    position: relative;
+    width: 100%;
+    height: 318px;
+    background: url("../../../assets/topic/bannerListPic.jpg") no-repeat;
+    background-size: 100% 100%;
+    .back-home{
+      height: 50px;
+      background: #fd0100;
+      color: #fff;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      span{
+        line-height: 46px;
+        font-size: 24px;
+        font-weight: 600;
+        padding-left: 70px;
+        display: inline-block;
+        cursor: pointer;
+      }
+    }
+  }
+  .search{
+    height: 68px;
+    line-height: 64px;
+    overflow: hidden;
+    .text{
+      font-size: 20px;
+      color: #0e0e0e;   
+      span{
+        color: #ff3838;
+      }
+    }
+    .search-box{
+      float: right;
+      margin-top: 18px;
+      .ant-btn-primary{
+        background-color: #fd0100;
+        border-color: #fd0100;
+      }
+    }
+  }
+  .static-box{
+    position: relative;
+    height: 145px;
+    background: url("../../../assets/topic/static-bg.png") no-repeat;
+    background-size: 100% 100%;
+    div{
+      font-size: 24px;
+      color: #fff;
+      span{
+        font-size: 60px;
+        vertical-align: -13px;
+        margin: 0 8px;
+      }
+    }
+    .person-num{
+      position: absolute;
+      right: 360px;
+      top: 24px;
+    }
+    .party-num{
+      position: absolute;
+      right: 80px;
+      top: 24px;
+    }
+  }
+  .mess-box{
+    .ant-row{
+      margin-left: -20px !important;
+      margin-right: -20px !important;
+    }
+    .ant-col{
+      margin-top: 34px;
+      padding: 0 20px !important;
+    }
+    .wrapper{
+      // border: 1px solid #aaa;
+    }
+    .pic-bg{
+      height: 80px;
+      background: url("../../../assets/topic/card-bg.png") no-repeat;
+      background-size: cover;
+      color: #fff;
+      font-size: 24px;
+      font-weight: 600;
+      text-align: center;
+      line-height: 76px;
+    }
+    .mess{
+      border: 1px solid #aaaaaa;
+      border-top: 0;
+    }
+    .mess-left{
+      display: inline-block;
+      width: 50%;
+      background: url("../../../assets/topic/person.png") no-repeat 30px 10px;
+      font-size: 22px;
+      padding-top: 56px;
+      padding-left: 26px;
+      font-weight: 600;
+      color: #302f2f;
+    }
+    .mess-right{
+      display: inline-block;
+      width: 50%;
+      color: #959595;
+      font-size: 24px;
+      span{
+        color: #ffb119;
+        font-size: 70px;
+        font-weight: 600;
+      }
+    }
+  }
+  .mess-detail{
+    .ant-row{
+      width: 100%;
+      margin: 0 !important;
+    }
+    .ant-col{
+      margin-top: 0;
+      margin-bottom: 34px;
+    }
+    .top-bg{
+      background: url("../../../assets/topic/person-bg.jpg") no-repeat;
+      background-size: cover;
+      height: 88px;
+      .tit{
+        padding: 8px 0 0 15px;
+        font-size: 16px;
+        color: #fff;
+        font-weight: 600;
+      }
+      .text-r{
+        text-align: right;
+        padding-right: 10px;
+        color: #fff;
+        font-size: 18px;
+      }
+      .yellow{
+        color: #ffd03f;
+        font-size: 14px;
+      }
+    }
+    .mess{
+      color: #959595;
+      font-size: 14px;
+      padding: 30px 0 30px 15px;
+    }
+  }
+  .list-content{
+    margin-top: 10px;
+    .list-box{
+      position: relative;
+      width: 100%;
+      color: #333;
+      font-size: 16px;
+      span{
+        position: absolute;
+        right: 8px;
+        top: 0;
+      }
+      p{
+        margin-bottom: 0;
+        padding-left: 30px;
+      }
+      p::before{
+        content: "";
+        width: 8px;
+        height: 8px;
+        background: #fd0100;
+        display: inline-block;
+        position: absolute;
+        top: 8px;
+        left: 10px;
+      }
+    }
+    .ant-list-split .ant-list-item{
+      border-bottom: 0 !important;
+    }
+    .list-pic{
+      margin-top: 0;
+      width: 100%;
+      height: 110px;
+      position: relative;
+      img{
+        width: 182px;
+        height: 110px;
+        float: left;
+      }
+      p{
+        padding-left: 206px;
+      }
+      .tit{
+        font-size: 18px;
+        color: #333;
+        font-weight: 600;
+      }
+      .detail{
+        text-indent: 2em;
+        font-size: 16px;
+        color: #666;
+      }
+      .time{
+        position: absolute;
+        right: 4px;
+        bottom: 0;
+        color: #666;
+        font-size: 16px;
+        img{
+          position: absolute;
+          bottom: 3px;
+          right: 80px;
+          width: 20px;
+          height: 20px;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+  .ant-pagination{
+    text-align: center;
+    margin-top: 20px;
+    padding-bottom: 20px;
+  }
+  .ant-pagination-item-active{
+    background: #fd0100;
+  }
+}