dengyinhuan
2 years ago
3 changed files with 298 additions and 3 deletions
@ -1,8 +1,54 @@ |
|||
import React from 'react' |
|||
|
|||
import { Carousel } from 'antd' |
|||
import AutoRollComponent from '../build/AutoRollComponent' |
|||
import Module from '../../public/module' |
|||
import './style.less' |
|||
const Guanli = () => { |
|||
const datas = new Array(35) |
|||
const renderContent = () => { |
|||
datas.fill({ |
|||
chepaihao:'苏LD1112121', |
|||
caoxian:'30%', |
|||
chufa:'200元', |
|||
riqi:'2022年5月4日' |
|||
},1,35) |
|||
console.log(datas,'数组') |
|||
return <div style={{height:"100%"}}> |
|||
{datas?.map(({ chepaihao, caoxian, chufa,riqi }, index) => { |
|||
return <div key={index} className='guanli-right-item'> |
|||
<span>{chepaihao}</span> |
|||
<span>{caoxian}</span> |
|||
<span>{chufa}</span> |
|||
<span>{riqi}</span> |
|||
</div> |
|||
})} |
|||
</div> |
|||
} |
|||
renderContent() |
|||
return ( |
|||
<>管理</> |
|||
<div className='guanli'> |
|||
<div className='guanli-left'> |
|||
</div> |
|||
<div className='guanli-right'> |
|||
<Module style={{height:"100%"}} title="治超详情"> |
|||
<div className = "guanli-right-top"> |
|||
<img src="/assets/images/quanju/zhicaolog.png"></img> |
|||
<span>已处理</span> |
|||
<span>187</span> |
|||
<span>件</span> |
|||
</div> |
|||
<div className='guanli-right-title'> |
|||
<span>车牌号</span> |
|||
<span>超限</span> |
|||
<span>处罚</span> |
|||
<span>日期</span> |
|||
</div> |
|||
<AutoRollComponent content={renderContent()} |
|||
containerStyle={{ position: "relative", height: "90%", }} |
|||
divHeight={"100%"} divId={"chart-overview-deviceList"} /> |
|||
</Module> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
export default Guanli |
@ -0,0 +1,249 @@ |
|||
.guanli{ |
|||
// box-sizing: border-box; |
|||
padding: 0 15px 0 15px; |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.guanli-left{ |
|||
width: 25%; |
|||
height: 100%; |
|||
background-color: pink; |
|||
.guanli-left-top{ |
|||
height: 100%; |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.guanli-left-top-center{ |
|||
width: 174px; |
|||
height: 146px; |
|||
margin: 0 10px; |
|||
} |
|||
.guanli-left-top-item{ |
|||
width: 25%; |
|||
height: 50%; |
|||
background-image: url('/assets/images/quanju/zhuangtaigognlubiankuang.png'); |
|||
background-size: 95%; |
|||
background-repeat: no-repeat; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
// text-align: center; |
|||
div{ |
|||
&:nth-child(1){ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
span{ |
|||
&:nth-child(1){ |
|||
width: 8px; |
|||
height: 8px; |
|||
margin-right: 5px; |
|||
background: #07B9FE; |
|||
clip-path: polygon(0 0, 100% 0, 0 100%, 0 0); |
|||
transform: rotate(134deg); |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #E9F7FF; |
|||
line-height: 22px; |
|||
} |
|||
|
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
// width: 80%; |
|||
// height: 100%; |
|||
// margin: 1% auto 0; |
|||
font-size: 38px; |
|||
font-family: YouSheBiaoTiHei; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
// line-height: 49px; |
|||
text-shadow: 0px 2px 4px #1C60FE; |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
.guanli-left-center{ |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.guanli-left-center-top{ |
|||
width: 100%; |
|||
height: 30%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
div{ |
|||
width: 50%; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
img{ |
|||
height: 50px; |
|||
width: 78px; |
|||
|
|||
} |
|||
div{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: start; |
|||
justify-content: center; |
|||
margin-left: 10px; |
|||
span{ |
|||
&:nth-child(1){ |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #C2EEFF; |
|||
letter-spacing: 1px; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 28px; |
|||
font-family: YouSheBiaoTiHei; |
|||
color: #FFFFFF; |
|||
line-height: 36px; |
|||
text-shadow: 0px 0px 4px #07B9FE; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
// background-color: pink; |
|||
} |
|||
.guanli-left-center-titile{ |
|||
display: flex; |
|||
margin-bottom: 10px; |
|||
span{ |
|||
flex:1; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
line-height: 16px; |
|||
} |
|||
} |
|||
.guanli-left-center-content{ |
|||
width: 100%; |
|||
height: 100px!important; |
|||
.guanli-left-center-item{ |
|||
display: flex !important; |
|||
width: 100%!important; |
|||
height: 28px!important; |
|||
span{ |
|||
flex:1; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
line-height: 16px; |
|||
} |
|||
} |
|||
.slick-list{ |
|||
height: 128px !important; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
.guanli-left-bottom{ |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
} |
|||
} |
|||
.guanli-right{ |
|||
width: 25%; |
|||
height: 100%; |
|||
.guanli-right-top{ |
|||
width: 100%; |
|||
// height: 5%; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
padding-right: 10px; |
|||
img{ |
|||
width: 4%; |
|||
// height: 40%; |
|||
} |
|||
span{ |
|||
&:nth-child(2){ |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(216,240,255,0.8000); |
|||
margin:0 10px 0 2px |
|||
} |
|||
&:nth-child(3){ |
|||
font-size: 18px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
margin-right: 10px; |
|||
} |
|||
&:nth-child(4){ |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(216,240,255,0.8000); |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
.guanli-right-title{ |
|||
width: 90%; |
|||
height: 5%; |
|||
margin: auto; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
background: rgba(21,77,160,0.2000); |
|||
span{ |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
flex:1; |
|||
text-align: center; |
|||
// &:nth-child(1){ |
|||
|
|||
// } |
|||
} |
|||
} |
|||
.guanli-right-item{ |
|||
width: 90%; |
|||
height: 3.333%; |
|||
margin: auto; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
// background: rgba(21,77,160,0.2000); |
|||
span{ |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(216,240,255,0.8000); |
|||
line-height: 20px; |
|||
flex:1; |
|||
text-align: center; |
|||
// &:nth-child(1){ |
|||
|
|||
// } |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
Loading…
Reference in new issue