free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

大屏管理右边的UI

release_0.0.1
dengyinhuan 2 years ago
parent
6bbffa1134
commit
6a4bc00527
3 changed files with 298 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      web/client/src/sections/quanju/containers/footer/build/AutoRollComponent.js
  2. 50
      web/client/src/sections/quanju/containers/footer/guanli/index.js
  3. 249
      web/client/src/sections/quanju/containers/footer/guanli/style.less

2
web/client/src/sections/quanju/containers/footer/build/AutoRollComponent.js
View File

@ -111,7 +111,7 @@ export default class AutoRollComponent extends Component {
}
<div id={divId} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
<div>
<div style={{height:"100%"}}>
{content ? content : ''}
{this.state.enabledScroll && content ? content : ''}
{

50
web/client/src/sections/quanju/containers/footer/guanli/index.js
View File

@ -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

249
web/client/src/sections/quanju/containers/footer/guanli/style.less
View File

@ -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){
// }
}
}
}
}
Write Preview
Loading…
Cancel
Save