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

治超详情

dev
yangsen 2 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
Split 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. 44
      web/client/src/sections/quanju/containers/footer/guanli/index.js
  4. 191
      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 (
<>
<div className='bgbuild-left'>
<Module title={"各乡镇在建公路工程"} style={{
<Module title={"在建公路工程"} style={{
width: "100%",
height: " 33%"
}} customize={true}>
@ -160,11 +160,11 @@ const Build = (props) => {
</div> */}
<img src='/assets/images/quanju/yuanhuan.webp' className='build-left-top-center' />
<div className='build-left-top-item'>
<div>{buildingnumber?.buildedRoad || 0}</div>
<div>{sunonlineproject || 0}</div>
<div>
{/* <i>&#9658;</i> */}
{/* <span /> */}
<span>在建公路/公里</span>
<span>在建数量</span>
</div>
</div>
</div> : <NoData />}

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

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

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

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Carousel,Popover } from 'antd'
import { Carousel,Tooltip } from 'antd'
import AutoRollComponent from '../build/AutoRollComponent'
import Module from '../../public/module'
import LeftItem from './LeftItem'
@ -55,30 +55,42 @@ const Guanli = (props) => {
},[])
// let datalist = newArry(30)
// datalist.fill({licensePlate:"赣A44454",overrunRate:"30%",fine:"200元",processingTime:"2020年4月1日"})
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 content = (
// );
const renderContent = () => {
return <div style={{height:"100%"}}>
{rightitemlist && rightitemlist.length!==0?rightitemlist?.map(({ id, licensePlate, overrunRate,fine,processingTime,deductPoints }, index) => {
if(index<120){
return <div key={index} className='guanli-right-item'>
<div className='popover' style={{background:'pink'}}>
{/* <Popover content={content}> */}
<div className='popover'>
<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>{overrunRate}%</span>
<span>{deductPoints?`-${deductPoints}分`:""}和-{fine}{fine?"元":""}</span>
<span>{processingTime}</span>
{/* </Popover> */}
</Tooltip>
</div>
</div>
}

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

@ -3,6 +3,7 @@
font-size: 12px;
}
}
// .guanli{
// // box-sizing: border-box;
// padding: 0 15px 0 15px;
@ -16,6 +17,7 @@
height: 100%;
position: absolute;
left: 0;
.guanli-left-item {
box-sizing: border-box;
width: 85%;
@ -28,18 +30,21 @@
padding: 0 10%;
justify-content: space-between;
border: 2px solid rgba(28, 96, 254, 0.5000);
.guanli-left-item-left {
width: 45%;
height: 60%;
display: flex;
flex-direction: column;
align-items: center;
span {
font-size: 1.25rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(216, 240, 255, 0.8000);
}
div {
display: flex;
justify-content: center;
@ -52,6 +57,7 @@
background: url('/assets/images/quanju/guanlijiance_1.png') no-repeat;
background-size: 100% 80%;
background-position: center bottom;
span {
font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC;
@ -62,12 +68,15 @@
color: rgba(216, 240, 255, 0.8000);
}
}
// background-color: pink;
}
.guanli-left-item-right {
width: 40%;
height: 50%;
position: relative;
span {
position: absolute;
width: 8px;
@ -82,14 +91,17 @@
// background-color: pink;
}
// background-color: pink;
}
}
.guanli-right {
width: 25%;
height: 100%;
position: absolute;
right: 0;
.guanli-right-top {
width: 100%;
// height: 5%;
@ -97,10 +109,12 @@
justify-content: flex-end;
align-items: center;
padding-right: 10px;
img {
width: 4%;
// height: 40%;
}
span {
&:nth-child(2) {
font-size: 16px;
@ -109,6 +123,7 @@
color: rgba(216, 240, 255, 0.8000);
margin: 0 10px 0 2px
}
&:nth-child(3) {
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
@ -116,6 +131,7 @@
color: #FFFFFF;
margin-right: 10px;
}
&:nth-child(4) {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
@ -126,6 +142,7 @@
}
.guanli-right-title {
width: 90%;
height: 5%;
@ -134,6 +151,7 @@
align-items: center;
justify-content: space-around;
background: rgba(21, 77, 160, 0.2000);
span {
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
@ -146,6 +164,7 @@
// }
}
}
.guanli-right-item {
width: 90%;
// height: 4%;
@ -154,9 +173,11 @@
display: flex;
align-items: center;
justify-content: space-around;
&: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);
span {
font-size: 0.875rem;
@ -174,79 +195,107 @@
}
.popover-content {
background-color: red;
.address{
width: 80%;
height: 80%;
top: -1%;
position: absolute;
background-color: aqua;
span{
&:nth-child(1){
width: 42px;
height: 20px;
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: left;
}
&:nth-child(2){
width: 28px;
height: 20px;
display: inline-block;
overflow-wrap: break-word;
color: rgba(238, 244, 255, 1);
font-size: 14px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 20px;
text-align: left;
}
&:nth-child(3){
width: 28px;
height: 20px;
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(4){
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;
}
}
}
// background-color: red;
// .ant-popover-inner-content{
// padding: 0!important;
// }
// .address {
// width: 80%;
// height: 80%;
// top: 10%;
// position: absolute;
// // background-color: pink;
// .address1 {
// width: 194px;
// height: 20px;
// margin: 16px 0 24px 26px;
// span {
// &:nth-child(1) {
// margin-right: 20px;
// width: 42px;
// height: 20px;
// 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: left;
// }
// &:nth-child(2) {
// width: 28px;
// height: 20px;
// display: inline-block;
// overflow-wrap: break-word;
// color: rgba(238, 244, 255, 1);
// font-size: 14px;
// font-family: PingFangSC-Medium;
// white-space: nowrap;
// line-height: 20px;
// text-align: left;
// }
// }
// }
// .address2 {
// width: 194px;
// height: 20px;
// margin: 16px 0 24px 26px;
// span {
// &:nth-child(1) {
// margin-right: 35px;
// width: 28px;
// height: 20px;
// 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 {
background-color: aqua;
.ant-popover-arrow{
.ant-popover-arrow-content{
display:none;
}
span{
display:none;
}
}
.ant-popover-inner{
.ant-popover-inner-content{
padding: 0;
}
.ant-tooltip-inner{
min-width: 0 !important;
min-height: 0 !important;
background-color: rgba(0, 0, 0, 0) !important;
}
// .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