19 changed files with 789 additions and 83 deletions
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,139 @@ |
|||||
|
|
||||
|
import React, { Component } from 'react'; |
||||
|
import { Row, Col } from 'antd'; |
||||
|
|
||||
|
export default class AutoRollComponent extends Component { |
||||
|
|
||||
|
constructor(props) { |
||||
|
super(props); |
||||
|
this.scrollElem = null; |
||||
|
this.stopscroll = false; |
||||
|
this.preTop = 0; |
||||
|
this.cloneEle = null; |
||||
|
this.currentTop = 0; |
||||
|
this.marqueesHeight = 0; |
||||
|
this.interval = null; |
||||
|
this.state = { |
||||
|
enabledScroll: false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
get enabledScroll() { |
||||
|
let scrollElem = document.getElementById(this.props.divId); |
||||
|
let fatherElem = scrollElem?.parentNode || null; |
||||
|
if (scrollElem && fatherElem) { |
||||
|
return scrollElem.scrollHeight > fatherElem.scrollHeight |
||||
|
} |
||||
|
|
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
marque = (height) => { |
||||
|
try { |
||||
|
this.scrollElem = document.getElementById(this.props.divId); |
||||
|
this.marqueesHeight = height; |
||||
|
if (this.scrollElem) { |
||||
|
this.scrollElem.style.height = this.marqueesHeight; |
||||
|
this.scrollElem.style.overflow = 'hidden'; |
||||
|
} |
||||
|
this.repeat(); |
||||
|
} catch (e) { console.log(e) } |
||||
|
} |
||||
|
|
||||
|
|
||||
|
repeat = () => { |
||||
|
this.scrollElem.scrollTop = 0; |
||||
|
let offset = 1.5 |
||||
|
|
||||
|
this.interval = setInterval(() => { |
||||
|
if (this.stopscroll) return; |
||||
|
this.currentTop = this.currentTop + offset; |
||||
|
this.preTop = this.scrollElem.scrollTop; |
||||
|
this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset; |
||||
|
// console.log(`this.scrollElem.scrollTop:${this.scrollElem.scrollTop} === this.preTop:${this.preTop}`);
|
||||
|
if (this.preTop === this.scrollElem.scrollTop) { |
||||
|
this.scrollElem.scrollTop = this.marqueesHeight; |
||||
|
this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset; |
||||
|
} |
||||
|
}, 40); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
componentWillUnmount() { |
||||
|
clearInterval(this.interval); |
||||
|
} |
||||
|
|
||||
|
componentWillReceiveProps(nextProps) { |
||||
|
requestAnimationFrame(() => { |
||||
|
if (this.enabledScroll) { |
||||
|
if (!this.state.enabledScroll) { |
||||
|
this.setState({ enabledScroll: true }, () => { |
||||
|
this.marque(10) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
componentDidMount() { |
||||
|
if (this.enabledScroll) { |
||||
|
this.setState({ enabledScroll: true }, () => { |
||||
|
this.marque(10) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onMouseOver = () => { |
||||
|
this.stopscroll = true; |
||||
|
} |
||||
|
|
||||
|
onMouseOut = () => { |
||||
|
this.stopscroll = false; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
render() { |
||||
|
|
||||
|
const { changeStyleCol, heads, spans, data, divId, divHeight, content, containerStyle = {} } = this.props; |
||||
|
|
||||
|
return ( |
||||
|
<div style={{ ...containerStyle, textAlign: 'left' }}> |
||||
|
{ |
||||
|
heads ? |
||||
|
<Row style={{ lineHeight: '40px', height: 40 }}> |
||||
|
{heads.map((c, index) => { |
||||
|
return <Col span={spans[index]} key={index}>{c}</Col> |
||||
|
}) |
||||
|
} |
||||
|
</Row> : '' |
||||
|
} |
||||
|
|
||||
|
<div id={divId} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}> |
||||
|
<div style={{height:"100%"}}> |
||||
|
{content ? content : ''} |
||||
|
{this.state.enabledScroll && content ? content : ''} |
||||
|
{ |
||||
|
data ? |
||||
|
data.map((q, idx) => { |
||||
|
return ( |
||||
|
<div key={idx}> |
||||
|
<Row gutter={16} style={{ borderBottom: '0px solid grey' }}> |
||||
|
{heads.map((c, index) => { |
||||
|
return <Col span={spans[index]} key={index} style={{ paddingTop: 8, textAlign: 'left', wordBreak: 'break-word', color: `${c === changeStyleCol ? q.changeColor : ''}` }}> |
||||
|
{index == 1 ? q.data[index] == -1 ? "-" : q.data[index] : index == 2 ? q.data[1] == -1 ? '-' : q.data[index] : q.data[index]}</Col> |
||||
|
}) |
||||
|
} |
||||
|
</Row> |
||||
|
</div> |
||||
|
) |
||||
|
}) : '' |
||||
|
} |
||||
|
<div style={{ margin: 16 }}></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div > |
||||
|
) |
||||
|
} |
||||
|
} |
||||
@ -1,7 +1,91 @@ |
|||||
import React from 'react' |
import React from 'react' |
||||
import './style.less' |
import './style.less' |
||||
|
import AutoRollComponent from './AutoRollComponent' |
||||
export default function Rightcenter() { |
export default function Rightcenter() { |
||||
|
const data =[ {name: '莲塘镇', total: 12739}, |
||||
|
{name: '向塘镇', total: 2445}, |
||||
|
{name: '蒋巷镇', total: 2035}, |
||||
|
{name: '幽兰镇', total: 1999}, |
||||
|
{name: '塘南镇', total: 1915}, |
||||
|
{name: '武阳镇', total: 1842}, |
||||
|
{name: '冈上镇', total: 1446}, |
||||
|
{name: '广福镇', total: 1063}, |
||||
|
{name: '三江镇', total: 851}, |
||||
|
{name: '泾口乡', total: 657}, |
||||
|
{name: '南新镇', total: 640}, |
||||
|
{name: '八一乡', total: 569}, |
||||
|
{name: '黄马乡', total: 541}, |
||||
|
{name: '塔城乡', total: 534}, |
||||
|
{name: '富山乡', total: 515}, |
||||
|
{name: '东新乡', total: 513}, |
||||
|
{name: '银三角', total: 513}, |
||||
|
{name: '八月湖街道', total: 513},] |
||||
|
const province = undefined |
||||
|
const FIRST = "linear-gradient(360deg, rgba(43, 180, 211, 0.1) 0%, rgba(43, 180, 211, 0.4) 100%)" |
||||
|
const SECOND = "linear-gradient(360deg, rgba(255, 209, 86, 0.1) 0%, rgba(255, 209, 86, 0.4) 100%)" |
||||
|
const THIRD = "linear-gradient(360deg, rgba(148, 148, 255, 0.1) 0%, rgba(148, 148, 255, 0.4) 100%)" |
||||
|
const OTHER = "linear-gradient(360deg, rgba(28, 96, 253, 0) 0%, rgba(28, 96, 253, 0.2) 100%)" |
||||
|
let TOTALS = data?.map(({ name, total }, index) => { |
||||
|
let max = province ? data.length * 30 + 100 : data.length * 500 + 100 |
||||
|
return { |
||||
|
name, |
||||
|
value: total, |
||||
|
percent: (total * 100 / max).toFixed(2) + "%" |
||||
|
} |
||||
|
}) |
||||
|
let new_TOTALS = TOTALS && TOTALS.length > 10 ? TOTALS.slice(0, 10) : TOTALS |
||||
|
function Cell(props) { |
||||
|
const { name, rank, value, percent, style = {} } = props |
||||
|
let bg = RNAKS[rank] || OTHER |
||||
|
console.log(percent,'百分比') |
||||
|
return <div style={{ |
||||
|
width: "100%", height: 34, display: "flex", justifyContent: 'center', |
||||
|
alignItems: "center", marginTop: 7, marginBottom: 7, |
||||
|
padding: "0 2%", |
||||
|
...style |
||||
|
}}> |
||||
|
<div style={{ |
||||
|
height: 20, color: "white",whiteSpace:'nowrap', |
||||
|
fontSize: 10, fontWeight: "bold", display: 'flex', |
||||
|
alignItems: "center", justifyContent: "center" |
||||
|
}} > |
||||
|
{name} |
||||
|
</div> |
||||
|
<div style={{ width: "92%", marginLeft: 10 }}> |
||||
|
{/* <div style={{ width: "100%", height: 18, fontSize: 12, fontWeight: 400, color: "white" }}>{name}</div> */} |
||||
|
|
||||
|
<div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center", height: 13 }}> |
||||
|
<div style={{display:'flex', width:"85%"}}> |
||||
|
<div style={{ |
||||
|
width: percent, height: 5, |
||||
|
background: "linear-gradient(270deg, #1C60FE 0%, rgba(28, 96, 254, 0) 100%)" |
||||
|
}} /> |
||||
|
<div style={{width:`calc(100% - ${percent})`,background:'rgba(255,255,255,0.0800)'}}/> |
||||
|
</div> |
||||
|
<div style={{ marginLeft: 10, fontSize: 12,color:"#FFFFFF" }}>{value}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
} |
||||
|
const renderContent = () => { |
||||
|
return <div > |
||||
|
{new_TOTALS?.map(({ name, value, percent }, index) => { |
||||
|
return <Cell key={index} rank={index} name={name} value={value} percent={percent} /> |
||||
|
})} |
||||
|
</div> |
||||
|
} |
||||
|
const RNAKS = [FIRST, SECOND, THIRD] |
||||
|
|
||||
return ( |
return ( |
||||
<div className='build-right-center'>Rightcenter</div> |
<div className='build-right-center'> |
||||
|
<div className='build-right-center-top'> |
||||
|
<img src="/assets/images/quanju/gonglugongcheng.png"></img> |
||||
|
<div>在线公路工程数量</div> |
||||
|
<h2>1234,123</h2> |
||||
|
</div> |
||||
|
<AutoRollComponent content={renderContent()} |
||||
|
containerStyle={{ position: "relative", height: "65%", }} |
||||
|
divHeight={"100%"} divId={"chart-overview-deviceList"} /> |
||||
|
</div> |
||||
) |
) |
||||
} |
} |
||||
|
|||||
@ -1,8 +1,13 @@ |
|||||
import React from 'react' |
import React from 'react' |
||||
|
import Left from './left' |
||||
|
import Right from './right' |
||||
|
|
||||
const Conserve = () => { |
const Conserve = () => { |
||||
return ( |
return ( |
||||
<>养护</> |
<div style={{ display: 'flex', width: '100%',height: '100%',justifyContent: 'space-between' }}> |
||||
|
<Left /> |
||||
|
<Right /> |
||||
|
</div> |
||||
) |
) |
||||
} |
} |
||||
export default Conserve |
export default Conserve |
||||
@ -1,14 +1,175 @@ |
|||||
import React from 'react' |
import React, { useEffect, useRef } from 'react'; |
||||
import Module from '../../../public/module' |
import Module from '../../../public/module' |
||||
|
import * as echarts from 'echarts'; |
||||
|
|
||||
|
|
||||
const LeftTop = () => { |
const LeftTop = () => { |
||||
|
const seasonChartRef = useRef(null); |
||||
|
|
||||
|
const frequentlyChartRef = useRef(null); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
let chartInstance = echarts.init(seasonChartRef.current); |
||||
|
const seasonOption = { |
||||
|
title: [ |
||||
|
{ |
||||
|
text: "季节性", |
||||
|
x: "center", |
||||
|
top: "55%", |
||||
|
textStyle: { |
||||
|
color: "#E9F7FF", |
||||
|
fontSize: 14, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "2333", |
||||
|
x: "center", |
||||
|
y: "35%", |
||||
|
textStyle: { |
||||
|
fontSize: "30", |
||||
|
color: "#FFFFFF", |
||||
|
fontFamily: "YouSheBiaoTiHei", |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
polar: { |
||||
|
radius: ["65%", "73%"], |
||||
|
center: ["50%", "50%"], |
||||
|
}, |
||||
|
angleAxis: { |
||||
|
max: 100, |
||||
|
show: false, |
||||
|
}, |
||||
|
radiusAxis: { |
||||
|
type: "category", |
||||
|
show: true, |
||||
|
axisLabel: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "", |
||||
|
type: "bar", |
||||
|
roundCap: true, |
||||
|
barWidth: 30, |
||||
|
showBackground: true, |
||||
|
data: [40], |
||||
|
coordinateSystem: "polar", |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#AAC8FF", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#0041BB", |
||||
|
}, |
||||
|
]), |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
chartInstance.setOption(seasonOption); |
||||
|
|
||||
|
}, []) |
||||
|
useEffect(() => { |
||||
|
let chartInstance = echarts.init(frequentlyChartRef.current); |
||||
|
const frequentlyOption = { |
||||
|
title: [ |
||||
|
{ |
||||
|
text: "经常性", |
||||
|
x: "center", |
||||
|
top: "55%", |
||||
|
textStyle: { |
||||
|
color: "#E9F7FF", |
||||
|
fontSize: 14, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "2333", |
||||
|
x: "center", |
||||
|
y: "35%", |
||||
|
textStyle: { |
||||
|
fontSize: "30", |
||||
|
color: "#FFFFFF", |
||||
|
fontFamily: "YouSheBiaoTiHei", |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
polar: { |
||||
|
radius: ["65%", "73%"], |
||||
|
center: ["50%", "50%"], |
||||
|
}, |
||||
|
angleAxis: { |
||||
|
max: 100, |
||||
|
show: false, |
||||
|
}, |
||||
|
radiusAxis: { |
||||
|
type: "category", |
||||
|
show: true, |
||||
|
axisLabel: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "", |
||||
|
type: "bar", |
||||
|
roundCap: true, |
||||
|
barWidth: 30, |
||||
|
showBackground: true, |
||||
|
backgroundStyle: { |
||||
|
color: "rgba(66, 66, 66, .3)", |
||||
|
}, |
||||
|
data: [40], |
||||
|
coordinateSystem: "polar", |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#C5EFFF", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#07B9FE", |
||||
|
}, |
||||
|
]), |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
chartInstance.setOption(frequentlyOption); |
||||
|
|
||||
|
}, []) |
||||
const style = { height: "30%", marginTop: "5%" } |
const style = { height: "30%", marginTop: "5%" } |
||||
return ( |
return ( |
||||
<> |
<> |
||||
<Module style={style} title={"道路养护周期统计"}> |
<Module style={style} title={"道路养护周期统计"}> |
||||
|
<div style={{ width: '100%', display: 'flex' }}> |
||||
</Module> |
<div ref={seasonChartRef} style={{ height: "23vh", width: "45%" }}></div> |
||||
</> |
<div ref={frequentlyChartRef} style={{ height: "23vh", width: "45%" }}></div> |
||||
|
</div> |
||||
|
|
||||
|
</Module> |
||||
|
</> |
||||
) |
) |
||||
} |
} |
||||
export default LeftTop |
export default LeftTop |
||||
@ -1,8 +1,54 @@ |
|||||
import React from 'react' |
import React from 'react' |
||||
|
import { Carousel } from 'antd' |
||||
|
import AutoRollComponent from '../build/AutoRollComponent' |
||||
|
import Module from '../../public/module' |
||||
|
import './style.less' |
||||
const Guanli = () => { |
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 ( |
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 |
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