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

治超详情

dev
yangsen 3 years ago
parent
afcb867908
commit
8fef35340c
4 changed files with 302 additions and 233 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      web/client/src/sections/quanju/containers/footer/build/index.js
  2. 16
      web/client/src/sections/quanju/containers/footer/build/style.less
  3. 46
      web/client/src/sections/quanju/containers/footer/guanli/index.js
  4. 271
      web/client/src/sections/quanju/containers/footer/guanli/style.less

6
web/client/src/sections/quanju/containers/footer/build/index.js
View File

@ -143,7 +143,7 @@ const Build = (props) => {
return ( return (
<> <>
<div className='bgbuild-left'> <div className='bgbuild-left'>
<Module title={"各乡镇在建公路工程"} style={{ <Module title={"在建公路工程"} style={{
width: "100%", width: "100%",
height: " 33%" height: " 33%"
}} customize={true}> }} customize={true}>
@ -160,11 +160,11 @@ const Build = (props) => {
</div> */} </div> */}
<img src='/assets/images/quanju/yuanhuan.webp' className='build-left-top-center' /> <img src='/assets/images/quanju/yuanhuan.webp' className='build-left-top-center' />
<div className='build-left-top-item'> <div className='build-left-top-item'>
<div>{buildingnumber?.buildedRoad || 0}</div> <div>{sunonlineproject || 0}</div>
<div> <div>
{/* <i>&#9658;</i> */} {/* <i>&#9658;</i> */}
{/* <span /> */} {/* <span /> */}
<span>在建公路/公里</span> <span>在建数量</span>
</div> </div>
</div> </div>
</div> : <NoData />} </div> : <NoData />}

16
web/client/src/sections/quanju/containers/footer/build/style.less
View File

@ -288,12 +288,20 @@
color: #E9F7FF; color: #E9F7FF;
} }
} }
img{ .img1{
width: 19%; width: 35%;
position: absolute; position: absolute;
left: 16%; left: 30%;
top:29% top:5%;
} }
.img2{
width: 40%;
position: absolute;
left: 40%;
top:5%;
z-index: 10;
}
} }
} }

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

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Carousel,Popover } from 'antd' import { Carousel,Tooltip } from 'antd'
import AutoRollComponent from '../build/AutoRollComponent' import AutoRollComponent from '../build/AutoRollComponent'
import Module from '../../public/module' import Module from '../../public/module'
import LeftItem from './LeftItem' import LeftItem from './LeftItem'
@ -55,30 +55,42 @@ const Guanli = (props) => {
},[]) },[])
// let datalist = newArry(30) // let datalist = newArry(30)
// datalist.fill({licensePlate:"赣A44454",overrunRate:"30%",fine:"200元",processingTime:"2020年4月1日"}) // datalist.fill({licensePlate:"赣A44454",overrunRate:"30%",fine:"200元",processingTime:"2020年4月1日"})
const content = ( // const content = (
<div className='popover-content'>
<img src='/assets/images/quanju/zhichao.png'/> // );
<div className='address'>
<span>检测点</span>
<span>远不</span>
<span>地址</span>
<span>呼呼呼呼呼呼呼呼呼</span>
</div>
</div>
);
const renderContent = () => { const renderContent = () => {
return <div style={{height:"100%"}} > return <div style={{height:"100%"}}>
{rightitemlist && rightitemlist.length!==0?rightitemlist?.map(({ id, licensePlate, overrunRate,fine,processingTime,deductPoints }, index) => { {rightitemlist && rightitemlist.length!==0?rightitemlist?.map(({ id, licensePlate, overrunRate,fine,processingTime,deductPoints }, index) => {
if(index<120){ if(index<120){
return <div key={index} className='guanli-right-item'> return <div key={index} className='guanli-right-item'>
<div className='popover' style={{background:'pink'}}> <div className='popover'>
{/* <Popover content={content}> */} <Tooltip title={ <div className='popover-content'>
<div style={{ width: "100%", height: "100%", marginTop: "0"}}>
{/* <img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} /> */}
<div style={{ position: "absolute", top: "0", width: "50%", padding: "20px" }}>
<img src='/assets/images/leadership/yuanxing.png' style={{ width: "100%", height: "100%" }} />
<p style={{ color: "#09BAFF", position: "absolute", top: "42%", left: "27%", fontSize: "29px", fontFamily: "YouSheBiaoTiHei" }}>{overrunRate?overrunRate:0}{/* {item.overrunRate ? item.overrunRate + "%" : "--"} */}</p>
<p style={{ color: "rgba(216,240,255,0.8)", position: "absolute", top: "60%", left: "43%", fontSize: "14px" }}>超限</p>
</div>
<div style={{ position: "absolute", top: "0", width: "50%", left: "50%", top:'5px'}}>
<p style={{ color: "rgba(216,240,255,0.8)", marginTop: "30px", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>车牌号<span style={{ color: "#EEF4FF", marginLeft: "33px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{licensePlate}{/* {item.licensePlate} */}</span></p>
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>检测点<span style={{ color: "#EEF4FF", marginLeft: "30px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>123456</span></p>
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>处罚<span style={{ color: "#FF0001", marginLeft: "50px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{deductPoints?`-${deductPoints}分`:""}和-{fine}{fine?"元":""}{/* {item.deductPoints ? "-" + item.deductPoints + "分" : ""}{item.deductPoints && item.fine ? "和" : ""}{item.fine ? "-" + item.fine + "元" : ""}{item.deductPoints || item.fine ? "" : "--"} */}</span></p>
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>日期<span style={{ color: "#EEF4FF", marginLeft: "50px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{processingTime}{/* {item.processingTime ? item.processingTime : "--"} */}</span></p>
</div>
</div>
</div>}
placement="leftTop"
overlayStyle={{ minWidth:400, minHeight: 212,padding:0,margin:0,backgroundImage:`url(../../../../../assets/images/leadership/beijinglan.png)`}}
overlayClassName='popover'
>
<span>{licensePlate}</span> <span>{licensePlate}</span>
<span>{overrunRate}%</span> <span>{overrunRate}%</span>
<span>{deductPoints?`-${deductPoints}分`:""}和-{fine}{fine?"元":""}</span> <span>{deductPoints?`-${deductPoints}分`:""}和-{fine}{fine?"元":""}</span>
<span>{processingTime}</span> <span>{processingTime}</span>
{/* </Popover> */} </Tooltip>
</div> </div>
</div> </div>
} }

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

@ -1,22 +1,24 @@
@media screen and (max-width:1366px){ @media screen and (max-width:1366px) {
html{ html {
font-size: 12px; font-size: 12px;
} }
} }
// .guanli{ // .guanli{
// // box-sizing: border-box; // // box-sizing: border-box;
// padding: 0 15px 0 15px; // padding: 0 15px 0 15px;
// width: 100%; // width: 100%;
// height: 100%; // height: 100%;
// position: relative; // position: relative;
// display: flex; // display: flex;
// justify-content: space-between; // justify-content: space-between;
.guanli-left{ .guanli-left {
width: 25%; width: 25%;
height: 100%; height: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
.guanli-left-item{
.guanli-left-item {
box-sizing: border-box; box-sizing: border-box;
width: 85%; width: 85%;
position: relative; position: relative;
@ -27,20 +29,23 @@
align-items: center; align-items: center;
padding: 0 10%; padding: 0 10%;
justify-content: space-between; justify-content: space-between;
border: 2px solid rgba(28,96,254,0.5000); border: 2px solid rgba(28, 96, 254, 0.5000);
.guanli-left-item-left{
.guanli-left-item-left {
width: 45%; width: 45%;
height: 60%; height: 60%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
span{
span {
font-size: 1.25rem; font-size: 1.25rem;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: rgba(216,240,255,0.8000); color: rgba(216, 240, 255, 0.8000);
} }
div{
div {
display: flex; display: flex;
justify-content: center; justify-content: center;
// align-items: ; // align-items: ;
@ -52,28 +57,32 @@
background: url('/assets/images/quanju/guanlijiance_1.png') no-repeat; background: url('/assets/images/quanju/guanlijiance_1.png') no-repeat;
background-size: 100% 80%; background-size: 100% 80%;
background-position: center bottom; background-position: center bottom;
span{
span {
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
padding-top: 10%; padding-top: 10%;
margin-left: 5px; margin-left: 5px;
// height: 0; // height: 0;
color: rgba(216,240,255,0.8000); color: rgba(216, 240, 255, 0.8000);
} }
} }
// background-color: pink; // background-color: pink;
} }
.guanli-left-item-right{
.guanli-left-item-right {
width: 40%; width: 40%;
height: 50%; height: 50%;
position: relative; position: relative;
span{
span {
position: absolute; position: absolute;
width: 8px; width: 8px;
height: 8px; height: 8px;
background-color: #fff; background-color: #fff;
top:1.5%; top: 1.5%;
left: 50%; left: 50%;
z-index: 10; z-index: 10;
border-radius: 4px; border-radius: 4px;
@ -82,71 +91,81 @@
// background-color: pink; // background-color: pink;
} }
// background-color: pink; // background-color: pink;
} }
} }
.guanli-right{
.guanli-right {
width: 25%; width: 25%;
height: 100%; height: 100%;
position: absolute; position: absolute;
right: 0; right: 0;
.guanli-right-top{
.guanli-right-top {
width: 100%; width: 100%;
// height: 5%; // height: 5%;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
padding-right: 10px; padding-right: 10px;
img{
img {
width: 4%; width: 4%;
// height: 40%; // height: 40%;
} }
span{
&:nth-child(2){ span {
&:nth-child(2) {
font-size: 16px; font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: rgba(216,240,255,0.8000); color: rgba(216, 240, 255, 0.8000);
margin:0 10px 0 2px margin: 0 10px 0 2px
} }
&:nth-child(3){
&:nth-child(3) {
font-size: 18px; font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #FFFFFF;
margin-right: 10px; margin-right: 10px;
} }
&:nth-child(4){
&:nth-child(4) {
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: rgba(216,240,255,0.8000); color: rgba(216, 240, 255, 0.8000);
} }
} }
} }
.guanli-right-title{
.guanli-right-title {
width: 90%; width: 90%;
height: 5%; height: 5%;
margin: auto; margin: auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
background: rgba(21,77,160,0.2000); background: rgba(21, 77, 160, 0.2000);
span{
span {
font-size: 12px; font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #FFFFFF;
flex:1; flex: 1;
text-align: center; text-align: center;
// &:nth-child(1){ // &:nth-child(1){
// } // }
} }
} }
.guanli-right-item{
.guanli-right-item {
width: 90%; width: 90%;
// height: 4%; // height: 4%;
height: 3vh; height: 3vh;
@ -154,99 +173,129 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
&:hover{
background:linear-gradient(270deg, rgba(0,124,230,0) 0%, rgba(0,70,200,0.8700) 100%); &:hover {
background: linear-gradient(270deg, rgba(0, 124, 230, 0) 0%, rgba(0, 70, 200, 0.8700) 100%);
} }
// background: rgba(21,77,160,0.2000); // background: rgba(21,77,160,0.2000);
span{ span {
font-size: 0.875rem; font-size: 0.875rem;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: rgba(216,240,255,0.8000); color: rgba(216, 240, 255, 0.8000);
line-height: 20px; line-height: 20px;
flex:1; flex: 1;
text-align: center; text-align: center;
// &:nth-child(1){ // &:nth-child(1){
// } // }
} }
} }
} }
.popover-content{ .popover-content {
background-color: red; // background-color: red;
.address{ // .ant-popover-inner-content{
width: 80%; // padding: 0!important;
height: 80%; // }
top: -1%; // .address {
position: absolute; // width: 80%;
background-color: aqua; // height: 80%;
span{ // top: 10%;
&:nth-child(1){ // position: absolute;
width: 42px; // // background-color: pink;
height: 20px;
display: inline-block; // .address1 {
overflow-wrap: break-word; // width: 194px;
color: rgba(216, 240, 255, 0.8); // height: 20px;
font-size: 14px; // margin: 16px 0 24px 26px;
font-family: PingFangSC-Regular; // span {
white-space: nowrap; // &:nth-child(1) {
line-height: 20px; // margin-right: 20px;
text-align: left; // width: 42px;
} // height: 20px;
&:nth-child(2){ // display: inline-block;
width: 28px; // overflow-wrap: break-word;
height: 20px; // color: rgba(216, 240, 255, 0.8);
display: inline-block; // font-size: 14px;
overflow-wrap: break-word; // font-family: PingFangSC-Regular;
color: rgba(238, 244, 255, 1); // white-space: nowrap;
font-size: 14px; // line-height: 20px;
font-family: PingFangSC-Medium; // text-align: left;
white-space: nowrap; // }
line-height: 20px; // &:nth-child(2) {
text-align: left; // width: 28px;
} // height: 20px;
&:nth-child(3){ // display: inline-block;
width: 28px; // overflow-wrap: break-word;
height: 20px; // color: rgba(238, 244, 255, 1);
display: inline-block; // font-size: 14px;
overflow-wrap: break-word; // font-family: PingFangSC-Medium;
color: rgba(216, 240, 255, 0.8); // white-space: nowrap;
font-size: 14px; // line-height: 20px;
font-family: PingFangSC-Regular; // text-align: left;
white-space: nowrap; // }
line-height: 20px; // }
text-align: right; // }
}
&:nth-child(4){ // .address2 {
width: 126px; // width: 194px;
height: 20px; // height: 20px;
display: inline-block; // margin: 16px 0 24px 26px;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1); // span {
font-size: 14px; // &:nth-child(1) {
font-family: PingFangSC-Medium; // margin-right: 35px;
white-space: nowrap; // width: 28px;
line-height: 20px; // height: 20px;
text-align: right; // display: inline-block;
} // overflow-wrap: break-word;
} // color: rgba(216, 240, 255, 0.8);
} // font-size: 14px;
// font-family: PingFangSC-Regular;
// white-space: nowrap;
// line-height: 20px;
// text-align: right;
// }
// &:nth-child(2) {
// width: 126px;
// height: 20px;
// display: inline-block;
// overflow-wrap: break-word;
// color: rgba(255, 255, 255, 1);
// font-size: 14px;
// font-family: PingFangSC-Medium;
// white-space: nowrap;
// line-height: 20px;
// text-align: right;
// }
// }
// }
// }
} }
.popover{ .popover {
background-color: aqua; .ant-tooltip-inner{
.ant-popover-arrow{ min-width: 0 !important;
.ant-popover-arrow-content{ min-height: 0 !important;
display:none; background-color: rgba(0, 0, 0, 0) !important;
}
span{
display:none;
}
}
.ant-popover-inner{
.ant-popover-inner-content{
padding: 0;
}
} }
// .ant-popover-arrow {
// .ant-popover-arrow-content {
// display: none;
// }
// span {
// display: none;
// }
// }
// .ant-popover-inner {
// .ant-popover-inner-content {
// padding: 0;
// }
// }
// .ant-popover-inner{padding:0 !important;}
} }
Write Preview
Loading…
Cancel
Save