6.23 党员专题首页
@ -3,11 +3,14 @@ import transfer from './router_transfer';
|
|||||||
import home from './HomePage/router_home';
|
import home from './HomePage/router_home';
|
||||||
import juryRoom from './JuryRoom/router_menuJury.config';
|
import juryRoom from './JuryRoom/router_menuJury.config';
|
||||||
import approvalForm from './router_approval_form';
|
import approvalForm from './router_approval_form';
|
||||||
|
import partyMemberTopic from './router_partyMemberTopic';
|
||||||
export default [
|
export default [
|
||||||
//========================================================================登陆
|
//========================================================================登陆
|
||||||
...transfer,//跳转、登陆
|
...transfer,//跳转、登陆
|
||||||
//审批单
|
//审批单
|
||||||
...approvalForm,
|
...approvalForm,
|
||||||
|
//党员专题
|
||||||
|
...partyMemberTopic,
|
||||||
{
|
{
|
||||||
path: '/userformal',
|
path: '/userformal',
|
||||||
// component: '../layouts/UserLayout',
|
// component: '../layouts/UserLayout',
|
||||||
|
14
config/router_partyMemberTopic.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
export default [
|
||||||
|
{
|
||||||
|
// name: 'workbench',
|
||||||
|
// icon: 'DesktopOutlined',
|
||||||
|
// path:'/workbench',
|
||||||
|
// routes: [
|
||||||
|
// { name: 'commonFiles', path: '/workbench/files',},
|
||||||
|
// { name: 'commonFilesManage', path: '/workbench/filesManage',},
|
||||||
|
// ]
|
||||||
|
name: 'partyMemberTopic',
|
||||||
|
path: '/partyMemberTopic/home',
|
||||||
|
component: './PartyMemberTopic/Home',
|
||||||
|
},
|
||||||
|
];
|
BIN
src/assets/topic/topic_activity_gradient.jpg
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/topic/topic_activity_logo.png
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/topic/topic_banner1.jpg
Normal file
After Width: | Height: | Size: 183 KiB |
BIN
src/assets/topic/topic_bottom_button.png
Normal file
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/topic/topic_bottom_card_picture.png
Normal file
After Width: | Height: | Size: 35 KiB |
BIN
src/assets/topic/topic_commodity.png
Normal file
After Width: | Height: | Size: 6.6 KiB |
BIN
src/assets/topic/topic_example1.jpg
Normal file
After Width: | Height: | Size: 39 KiB |
BIN
src/assets/topic/topic_example2.jpg
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/topic/topic_example3.jpg
Normal file
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/topic/topic_example4.jpg
Normal file
After Width: | Height: | Size: 46 KiB |
BIN
src/assets/topic/topic_example5.jpg
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/topic/topic_example6.jpg
Normal file
After Width: | Height: | Size: 33 KiB |
BIN
src/assets/topic/topic_graceful_textbg.png
Normal file
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/topic/topic_header.jpg
Normal file
After Width: | Height: | Size: 63 KiB |
BIN
src/assets/topic/topic_other.png
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/topic/topic_partybranch.png
Normal file
After Width: | Height: | Size: 6.7 KiB |
BIN
src/assets/topic/topic_partymember.png
Normal file
After Width: | Height: | Size: 3.6 KiB |
BIN
src/assets/topic/topic_project_picture.jpg
Normal file
After Width: | Height: | Size: 35 KiB |
BIN
src/assets/topic/topic_protocol.png
Normal file
After Width: | Height: | Size: 5.1 KiB |
BIN
src/assets/topic/topic_red_flag.png
Normal file
After Width: | Height: | Size: 3.3 KiB |
BIN
src/assets/topic/topic_right_material.png
Normal file
After Width: | Height: | Size: 38 KiB |
BIN
src/assets/topic/topic_totalamount.png
Normal file
After Width: | Height: | Size: 6.1 KiB |
BIN
src/assets/topic/topic_totalnumber.png
Normal file
After Width: | Height: | Size: 4.8 KiB |
364
src/pages/PartyMemberTopic/Home/index.less
Normal file
@ -0,0 +1,364 @@
|
|||||||
|
@import '~antd/es/style/themes/default.less';
|
||||||
|
|
||||||
|
.topic-global {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
.topic-background {
|
||||||
|
width: 1460px;
|
||||||
|
background-color: #e9e9e9;
|
||||||
|
|
||||||
|
.top-picture {
|
||||||
|
height: 132px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-global {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.left-global {
|
||||||
|
width: 1139px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
.left-carousel {
|
||||||
|
margin-bottom: -8px;
|
||||||
|
|
||||||
|
.carousel-content {
|
||||||
|
height: 584px;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 584px;
|
||||||
|
text-align: center;
|
||||||
|
background: #364d79;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-activity {
|
||||||
|
height: 103px;
|
||||||
|
background-image: url("~@/assets/topic/topic_activity_gradient.jpg")
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-card {
|
||||||
|
margin: 20px 0px 20px 12px;
|
||||||
|
|
||||||
|
.left-card-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.left-card-title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: '黑体';
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-card-flag {
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
position: relative;
|
||||||
|
top: 3px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-card-other {
|
||||||
|
font-family: '黑体';
|
||||||
|
font-size: 18px;
|
||||||
|
color: #a2a2a2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-card-otherimg {
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-card-divider {
|
||||||
|
color: #c9c9c9;
|
||||||
|
margin: 8px 0px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-graceful {
|
||||||
|
background: #fff;
|
||||||
|
padding: 24px 24px 50px;
|
||||||
|
|
||||||
|
.left-graceful-bg {
|
||||||
|
height: 198px;
|
||||||
|
width: 338px;
|
||||||
|
background-size: 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
.left-graceful-textbg {
|
||||||
|
height: 36px;
|
||||||
|
width: 304px;
|
||||||
|
background-image: url("~@/assets/topic/topic_graceful_textbg.png");
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.left-graceful-text {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16.64px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-project {
|
||||||
|
margin-top: 20px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 24px 24px 40px;
|
||||||
|
|
||||||
|
.left-project-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
|
||||||
|
.left-project-content-list {
|
||||||
|
margin-left: 70px;
|
||||||
|
|
||||||
|
.left-project-content-item {
|
||||||
|
font-size: 21px;
|
||||||
|
font-family: '黑体';
|
||||||
|
line-height: 36px;
|
||||||
|
|
||||||
|
.left-project-content-item-title {
|
||||||
|
color: #535353
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-project-content-item-time {
|
||||||
|
color: #a2a2a2;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-project-content .ant-list-sm .ant-list-item {
|
||||||
|
padding: 0px 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-global {
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0px 12px 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 14px;
|
||||||
|
|
||||||
|
.right-material {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-display {
|
||||||
|
width: 100%;
|
||||||
|
padding: 18px 16px;
|
||||||
|
|
||||||
|
.right-display-title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #474747;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-display-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
margin-top: 30px;
|
||||||
|
|
||||||
|
.right-display-content-img {
|
||||||
|
height: 56px;
|
||||||
|
width: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-display-content-right {
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
.right-display-content-title {
|
||||||
|
color: #9e9e9e;
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
|
||||||
|
.right-display-content-percentage {
|
||||||
|
margin-left: 24px;
|
||||||
|
|
||||||
|
.right-display-content-percentage-increase {
|
||||||
|
color: #28e099;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-display-content-percentage-reduce {
|
||||||
|
color: #eb5527;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-display-content-content {
|
||||||
|
margin-top: 4px;
|
||||||
|
|
||||||
|
.right-display-content-number {
|
||||||
|
font-size: 32.15px;
|
||||||
|
font-family: 'Consolas';
|
||||||
|
line-height: 32.15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number-blue {
|
||||||
|
color: #21b8ce;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number-orange {
|
||||||
|
color: #eb5527;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-display-content-unit {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-divider {
|
||||||
|
margin: 12px 0px 0px;
|
||||||
|
color: #c9c9c9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-graph {
|
||||||
|
padding-top: 26px;
|
||||||
|
|
||||||
|
.right-graph-title {
|
||||||
|
font-size: 17px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-graph-subtitle {
|
||||||
|
color: #9e9e9e;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-graph-content {
|
||||||
|
height: 250px;
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-global {
|
||||||
|
margin: 0px 12px 84px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 24px 24px 28px;
|
||||||
|
|
||||||
|
.left-card-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.left-card-title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: '黑体';
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-card-flag {
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
position: relative;
|
||||||
|
top: 3px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-card-other {
|
||||||
|
font-family: '黑体';
|
||||||
|
font-size: 18px;
|
||||||
|
color: #a2a2a2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-card-otherimg {
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-card-divider {
|
||||||
|
color: #c9c9c9;
|
||||||
|
margin: 8px 0px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-content {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
|
||||||
|
.bottom-card {
|
||||||
|
background-image: url("~@/assets/topic/topic_bottom_card_picture.png");
|
||||||
|
height: 157px;
|
||||||
|
width: 331px;
|
||||||
|
padding: 16px;
|
||||||
|
margin-top: 18px;
|
||||||
|
|
||||||
|
.bottom-card-flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.bottom-card-title {
|
||||||
|
font-size: 21px;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
.bottom-card-title-type {
|
||||||
|
color: #df3b37;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-card-content {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #6f6f6f;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24px;
|
||||||
|
font-family: '黑体';
|
||||||
|
color: #b8b8b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-other {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.bottom-other-text {
|
||||||
|
font-family: '黑体';
|
||||||
|
font-size: 18px;
|
||||||
|
color: #a2a2a2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-other-icon {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
427
src/pages/PartyMemberTopic/Home/index.tsx
Normal file
@ -0,0 +1,427 @@
|
|||||||
|
import React, { useEffect } from 'react';
|
||||||
|
import './index.less';
|
||||||
|
import { Carousel, Col, Divider, List, Row } from 'antd';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import topic_header from '@/assets/topic/topic_header.jpg'
|
||||||
|
import topic_activity_logo from '@/assets/topic/topic_activity_logo.png'
|
||||||
|
import topic_red_flag from '@/assets/topic/topic_red_flag.png'
|
||||||
|
import topic_other from '@/assets/topic/topic_other.png'
|
||||||
|
import topic_example1 from '@/assets/topic/topic_example1.jpg'
|
||||||
|
import topic_example2 from '@/assets/topic/topic_example2.jpg'
|
||||||
|
import topic_example3 from '@/assets/topic/topic_example3.jpg'
|
||||||
|
import topic_example4 from '@/assets/topic/topic_example4.jpg'
|
||||||
|
import topic_example5 from '@/assets/topic/topic_example5.jpg'
|
||||||
|
import topic_example6 from '@/assets/topic/topic_example6.jpg'
|
||||||
|
import topic_project_picture from '@/assets/topic/topic_project_picture.jpg'
|
||||||
|
import topic_bottom_button from '@/assets/topic/topic_bottom_button.png'
|
||||||
|
import topic_right_material from '@/assets/topic/topic_right_material.png'
|
||||||
|
import topic_partymember from '@/assets/topic/topic_partymember.png'
|
||||||
|
import topic_partybranch from '@/assets/topic/topic_partybranch.png'
|
||||||
|
import topic_totalamount from '@/assets/topic/topic_totalamount.png'
|
||||||
|
import topic_totalnumber from '@/assets/topic/topic_totalnumber.png'
|
||||||
|
import topic_commodity from '@/assets/topic/topic_commodity.png'
|
||||||
|
import topic_protocol from '@/assets/topic/topic_protocol.png'
|
||||||
|
import topic_banner1 from '@/assets/topic/topic_banner1.jpg'
|
||||||
|
|
||||||
|
const LeftCardTop = (props: any) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='left-card-top'>
|
||||||
|
<div>
|
||||||
|
<span className='left-card-title'>{props.title}</span>
|
||||||
|
<img src={topic_red_flag} className='left-card-flag' />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className='left-card-other'>更多</span>
|
||||||
|
<img src={topic_other} className='left-card-otherimg' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Divider className='left-card-divider' />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const RightDisplayTitle = (props: any) => {
|
||||||
|
return (
|
||||||
|
<div className='right-display-title'>
|
||||||
|
{props.title}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const RightDisplayContent = (props: any) => {
|
||||||
|
return (
|
||||||
|
<div className='right-display-content'>
|
||||||
|
<img src={right_data[props.type].img} className='right-display-content-img' />
|
||||||
|
<div className='right-display-content-right'>
|
||||||
|
<div className='right-display-content-title'>
|
||||||
|
<span>{right_data[props.type].name}</span>
|
||||||
|
{right_data[props.type].type != null && <span className='right-display-content-percentage'>
|
||||||
|
<span>同比</span>
|
||||||
|
{right_data[props.type].type == 1 ? (
|
||||||
|
<span className='right-display-content-percentage-increase'>{right_data[props.type].percentage}% ↑</span>
|
||||||
|
) : (
|
||||||
|
<span className='right-display-content-percentage-reduce'>{right_data[props.type].percentage}% ↓</span>
|
||||||
|
)}
|
||||||
|
</span>}
|
||||||
|
</div>
|
||||||
|
<div className='right-display-content-content'>
|
||||||
|
<span className={`right-display-content-number ${props.color}`}>{right_data[props.type].number}</span>
|
||||||
|
<span className='right-display-content-unit'>{right_data[props.type].unit}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const RightGraphContent = (props: any) => {
|
||||||
|
const random = Math.random().toString();
|
||||||
|
useEffect(() => {
|
||||||
|
type EChartsOption = echarts.EChartsOption;
|
||||||
|
const chartDom = document.getElementById(random)!;
|
||||||
|
const myChart = echarts.init(chartDom);
|
||||||
|
const option: EChartsOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: props.name,
|
||||||
|
type: 'pie',
|
||||||
|
radius: '90%',
|
||||||
|
color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4'],
|
||||||
|
data: props.data,
|
||||||
|
label: {
|
||||||
|
formatter: props.type == 1 ? '{b}\n\n{c}件 {d}%' : '{b}',
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#fff',
|
||||||
|
position: 'inner',
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
}, [])
|
||||||
|
return (
|
||||||
|
<div id={random} style={{ width: '100%', height: '100%' }}></div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const example_list = [
|
||||||
|
{
|
||||||
|
img: topic_example1,
|
||||||
|
text: '支队领导带领党员民警参观5G创新中心'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: topic_example2,
|
||||||
|
text: '支队领导带领党员民警参观5G创新中心'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: topic_example3,
|
||||||
|
text: '支队领导带领党员民警参观5G创新中心'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: topic_example4,
|
||||||
|
text: '支队领导带领党员民警参观5G创新中心'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: topic_example5,
|
||||||
|
text: '支队领导带领党员民警参观5G创新中心'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: topic_example6,
|
||||||
|
text: '支队领导带领党员民警参观5G创新中心'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const listData = [
|
||||||
|
{
|
||||||
|
title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
|
||||||
|
time: '05-25 16:19',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '喜报|联通智慧党建产品,荣获国家级创新大赛一等奖',
|
||||||
|
time: '05-25 16:19',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
|
||||||
|
time: '05-25 16:19',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '喜报|联通智慧党建产品,荣获国家级创新大赛一等奖',
|
||||||
|
time: '05-25 16:19',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
|
||||||
|
time: '05-25 16:19',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '喜报|联通智慧党建产品,荣获国家级创新大赛一等奖',
|
||||||
|
time: '05-25 16:19',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
|
||||||
|
time: '05-25 16:19',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '喜报|联通智慧党建产品,荣获国家级创新大赛一等奖',
|
||||||
|
time: '05-25 16:19',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
|
||||||
|
time: '05-25 16:19',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '喜报|联通智慧党建产品,荣获国家级创新大赛一等奖',
|
||||||
|
time: '05-25 16:19',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
|
||||||
|
time: '05-25 16:19',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '喜报|联通智慧党建产品,荣获国家级创新大赛一等奖',
|
||||||
|
time: '05-25 16:19',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const length = ['集团', '北京分公司', '山东分公司'];
|
||||||
|
const card_length = [1, 2, 3, 4];
|
||||||
|
|
||||||
|
const right_data = {
|
||||||
|
partymember: {
|
||||||
|
name: '党员数量',
|
||||||
|
img: topic_partymember,
|
||||||
|
number: 1275,
|
||||||
|
unit: '个',
|
||||||
|
type: null,
|
||||||
|
percentage: null,
|
||||||
|
},
|
||||||
|
partybranch: {
|
||||||
|
name: '党支部数量',
|
||||||
|
img: topic_partybranch,
|
||||||
|
number: 75,
|
||||||
|
unit: '个',
|
||||||
|
type: null,
|
||||||
|
percentage: null,
|
||||||
|
},
|
||||||
|
totalamount: {
|
||||||
|
name: '订单交易总额',
|
||||||
|
img: topic_totalamount,
|
||||||
|
number: 274.5,
|
||||||
|
unit: '亿元',
|
||||||
|
type: 1,
|
||||||
|
percentage: 0.9,
|
||||||
|
},
|
||||||
|
totalnumber: {
|
||||||
|
name: '订单总数量',
|
||||||
|
img: topic_totalnumber,
|
||||||
|
number: 1297,
|
||||||
|
unit: '个',
|
||||||
|
type: 1,
|
||||||
|
percentage: 0.9,
|
||||||
|
},
|
||||||
|
commodity: {
|
||||||
|
name: '商品数量',
|
||||||
|
img: topic_commodity,
|
||||||
|
number: 76321,
|
||||||
|
unit: '件',
|
||||||
|
type: 1,
|
||||||
|
percentage: 1.9,
|
||||||
|
},
|
||||||
|
protocol: {
|
||||||
|
name: '协议数量',
|
||||||
|
img: topic_protocol,
|
||||||
|
number: 257,
|
||||||
|
unit: '个',
|
||||||
|
type: 0,
|
||||||
|
percentage: 0.7,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
const right_graph_data = [
|
||||||
|
{
|
||||||
|
name: '物资采购计划',
|
||||||
|
sub: '总采购数量',
|
||||||
|
type: 1,
|
||||||
|
number: 22324,
|
||||||
|
unit: '件',
|
||||||
|
data: [
|
||||||
|
{ value: 1421, name: '已完成数量' },
|
||||||
|
{ value: 2369, name: '进行中数量' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '攻坚克难项目',
|
||||||
|
sub: '总课题数量',
|
||||||
|
type: 1,
|
||||||
|
number: 223,
|
||||||
|
unit: '个',
|
||||||
|
data: [
|
||||||
|
{ value: 165, name: '已完成数量' },
|
||||||
|
{ value: 265, name: '进行中数量' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '建议类型',
|
||||||
|
sub: null,
|
||||||
|
type: 0,
|
||||||
|
number: null,
|
||||||
|
unit: null,
|
||||||
|
data: [
|
||||||
|
{ value: 40, name: '系统优化' },
|
||||||
|
{ value: 30, name: '组织优化' },
|
||||||
|
{ value: 20, name: '制度优化' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const Home: React.FC<{}> = () => {
|
||||||
|
return (
|
||||||
|
<div className="topic-global">
|
||||||
|
<div className="topic-background">
|
||||||
|
<div className="top-picture">
|
||||||
|
<img src={topic_header} />
|
||||||
|
</div>
|
||||||
|
<div className="top-global">
|
||||||
|
<div className='left-global'>
|
||||||
|
<Carousel className='left-carousel'>
|
||||||
|
<div>
|
||||||
|
<img src={topic_banner1} className='carousel-content' />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className='carousel-content'>2</h3>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className='carousel-content'>3</h3>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className='carousel-content'>4</h3>
|
||||||
|
</div>
|
||||||
|
</Carousel>
|
||||||
|
<div className='left-activity'>
|
||||||
|
<img src={topic_activity_logo} />
|
||||||
|
</div>
|
||||||
|
<div className='left-card'>
|
||||||
|
<div className='left-graceful'>
|
||||||
|
<LeftCardTop title="活动风采" />
|
||||||
|
<div>
|
||||||
|
<Row gutter={[20, 31]}>
|
||||||
|
{example_list.map((item, index) => (
|
||||||
|
<Col span={8} key={index}>
|
||||||
|
<div className='left-graceful-bg' style={{ backgroundImage: `url(${item.img})` }}>
|
||||||
|
<div className='left-graceful-textbg'>
|
||||||
|
<span className='left-graceful-text'>{item.text}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
))}
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='left-project'>
|
||||||
|
<LeftCardTop title="攻坚克难项目" />
|
||||||
|
<div className='left-project-content'>
|
||||||
|
<img src={topic_project_picture} />
|
||||||
|
<div className='left-project-content-list'>
|
||||||
|
<List
|
||||||
|
size='small'
|
||||||
|
split={false}
|
||||||
|
dataSource={listData}
|
||||||
|
renderItem={item => (
|
||||||
|
<List.Item>
|
||||||
|
<div className='left-project-content-item'>
|
||||||
|
<span className='left-project-content-item-title'>{item.title}</span>
|
||||||
|
<span className='left-project-content-item-time'>{item.time}</span>
|
||||||
|
</div>
|
||||||
|
</List.Item>
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
</List>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='right-global'>
|
||||||
|
<div>
|
||||||
|
<img src={topic_right_material} className='right-material' />
|
||||||
|
</div>
|
||||||
|
<div className='right-display'>
|
||||||
|
<RightDisplayTitle title="党员及支部数量情况" />
|
||||||
|
<RightDisplayContent type="partymember" color="number-blue" />
|
||||||
|
<RightDisplayContent type="partybranch" color="number-blue" />
|
||||||
|
</div>
|
||||||
|
<Divider className='right-divider' />
|
||||||
|
<div className='right-display'>
|
||||||
|
<RightDisplayTitle title="2022年订单交易情况" />
|
||||||
|
<RightDisplayContent type="totalamount" color="number-orange" />
|
||||||
|
<RightDisplayContent type="totalnumber" color="number-orange" />
|
||||||
|
<RightDisplayContent type="commodity" color="number-orange" />
|
||||||
|
<RightDisplayContent type="protocol" color="number-orange" />
|
||||||
|
</div>
|
||||||
|
<Divider className='right-divider' />
|
||||||
|
{right_graph_data.map(item => (
|
||||||
|
<div className='right-graph' key={item.name}>
|
||||||
|
<div className='right-graph-title'>
|
||||||
|
{item.name}
|
||||||
|
</div>
|
||||||
|
<div className='right-graph-subtitle'>
|
||||||
|
{item.type == 1 && `${item.sub}:${item.number}${item.unit}`}
|
||||||
|
</div>
|
||||||
|
<div className='right-graph-content'>
|
||||||
|
<RightGraphContent name={item.name} type={item.type} data={item.data} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='bottom-global'>
|
||||||
|
<LeftCardTop title="活动联系人" />
|
||||||
|
{length.map(item => (
|
||||||
|
<div key={item}>
|
||||||
|
<div className='bottom-title'>{item}</div>
|
||||||
|
<div className='bottom-content'>
|
||||||
|
<Row gutter={[20, 20]}>
|
||||||
|
{card_length.map(item => (
|
||||||
|
<Col span={6} key={item}>
|
||||||
|
<div className='bottom-card'>
|
||||||
|
<div className='bottom-card-flex'>
|
||||||
|
<div className='bottom-card-title'>
|
||||||
|
<span>张三</span>
|
||||||
|
<span className='bottom-card-title-type'>(IP物资类)</span>
|
||||||
|
</div>
|
||||||
|
<img src={topic_bottom_button} />
|
||||||
|
</div>
|
||||||
|
<div className='bottom-card-content'>
|
||||||
|
<div>邮箱:1214567@chinaunicom.cn</div>
|
||||||
|
<div>电话:12111112222</div>
|
||||||
|
<div>部门:xxxx部</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
))}
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className='bottom-other'>
|
||||||
|
<div>
|
||||||
|
<span className='bottom-other-text'>更多</span>
|
||||||
|
<img src={topic_other} className='bottom-other-icon' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Home;
|