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 './style.less' |
|||
import AutoRollComponent from './AutoRollComponent' |
|||
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 ( |
|||
<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 Left from './left' |
|||
import Right from './right' |
|||
|
|||
const Conserve = () => { |
|||
return ( |
|||
<>养护</> |
|||
<div style={{ display: 'flex', width: '100%',height: '100%',justifyContent: 'space-between' }}> |
|||
<Left /> |
|||
<Right /> |
|||
</div> |
|||
) |
|||
} |
|||
export default Conserve |
|||
@ -1,14 +1,175 @@ |
|||
import React from 'react' |
|||
import React, { useEffect, useRef } from 'react'; |
|||
import Module from '../../../public/module' |
|||
import * as echarts from 'echarts'; |
|||
|
|||
|
|||
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%" } |
|||
return ( |
|||
<> |
|||
<Module style={style} title={"道路养护周期统计"}> |
|||
|
|||
</Module> |
|||
</> |
|||
<> |
|||
<Module style={style} title={"道路养护周期统计"}> |
|||
<div style={{ width: '100%', display: 'flex' }}> |
|||
<div ref={seasonChartRef} style={{ height: "23vh", width: "45%" }}></div> |
|||
<div ref={frequentlyChartRef} style={{ height: "23vh", width: "45%" }}></div> |
|||
</div> |
|||
|
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default LeftTop |
|||
@ -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