You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.5 KiB
49 lines
1.5 KiB
2 years ago
|
import React from 'react';
|
||
|
|
import { Progress } from 'antd';
|
||
|
|
import styles from './Rank.less';
|
||
|
|
|
||
|
|
|
||
|
|
class Rank extends React.PureComponent {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
arr: [
|
||
|
|
{ name: '阳光北大街', num: 6.2 },
|
||
|
|
{ name: '东风中路', num: 6.2 },
|
||
|
|
{ name: '七一中路', num: 6.2 },
|
||
|
|
{ name: '长城北大街', num: 6.2 },
|
||
|
|
{ name: '龙泉路', num: 6.2 }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div className={styles.rank}>
|
||
|
|
<div className={styles.tit}>拥堵路段排名</div>
|
||
|
|
{
|
||
|
|
this.state.arr.map((r,i) => {
|
||
|
|
return (<div className={styles.progress}>
|
||
|
|
<div className={styles.font}>
|
||
|
|
<div className={styles.left}>
|
||
|
|
<img src=''></img>
|
||
|
|
{r.name}
|
||
|
|
</div>
|
||
|
|
<div className={styles.right}>
|
||
|
|
{r.num}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className={styles.progressLine}>
|
||
|
|
<Progress percent={62} showInfo={false} className={styles['progress' + i]}/>
|
||
|
|
</div>
|
||
|
|
</div>)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Rank;
|