时间轴组件，数据展示为卡片形式

```javascript
import React, { useState } from 'react';
import styles from '@/styles/portrait/TrafficAdministrativeCases.module.less'

const Left: React.FC = ({ }) => {
return (
<div className={styles.left}>
<div className={styles.unknow}>22</div>
<div className={styles.leftSJ}>2022-02</div>
</div>
);
};

const Middle: React.FC = ({ }) => {
return (
<div className={styles.middle}>
<div className={styles.big}>
<div className={styles.small}></div>
</div>
<div className={styles.line}></div>
</div>
);
};

const Card: React.FC = ({ }) => {
return (
<div className={styles.card}>
<div className={styles.firstRow}>
{/* */}
<div className={styles.xq}>aaa</div>
{/* */}
<div className={styles.sj}>bbb4</div>
</div>
<div className={styles.secondRow}>
{/* */}
<div className={styles.dz}>ccc</div>
{/* */}
<div className={styles.cf}>ddd</div>
</div>
</div>
);
};

const App: React.FC = () => {
const traffic = []

return (
<div style={{ overflowY: 'auto' }} className={styles.traffic}>
<div className={styles.item}>
<Left />
<Middle />
<Card />
</div>
<div className={styles.item}>
<Left />
<Middle />
<Card />
</div>
<div className={styles.item}>
<Left />
<Middle />
<Card />
</div>
</div>
);
};

export default App;

```

```less
.traffic {
margin: 0;
padding: 0;
margin-top: 10px;
width: 716px;
height: 243px;
overflow-y: visible;

.item {
position: relative;
margin-bottom: 24px;
height: 82px;

.left {
position: absolute;
top: 10px;
left: 0;
width: 65px;
height: 42px;

// background-color: #1990ff;
.unknow {
font-size: 14px;
line-height: 14px;
margin-bottom: 16px;
}

.leftSJ {
font-size: 12px;
line-height: 12px;
color: #a6b4c3;
}
}

.middle {
position: absolute;
top: 34px;
left: 95px;
display: flex;
flex-direction: column;
align-items: center;
width: 12px;

.big {
margin-bottom: 4px;
padding: 4px;
width: 12px;
height: 12px;
border-radius: 6px;
background-color: #1990ff;

.small {
width: 4px;
height: 4px;
border-radius: 2px;
background-color: #fff;
}
}

.line {
border-left: 2px dashed #a6b4c3;
height: 78px;
//line-height:1px;
}
}

.card {
position: absolute;
top: 0;
right: 0;
width: 572px;
height: 82px;
background-color: #f4f7fb;

.firstRow {
position: relative;
margin-top: 20px;
margin-left: 16px;
margin-bottom: 11px;
height: 20px;

.xq {
position: absolute;
left: 0;
font-size: 20px;
line-height: 20px;
color: #333;
}

.sj {
position: absolute;
top: 8px;
right: 16px;
font-size: 12px;
line-height: 20px;
color: #a6b4c3;
}
}

.secondRow {
position: relative;
margin-left: 16px;

.dz {
position: absolute;
left: 0;
font-size: 16px;
line-height: 16px;
color: #a6b4c3;
}

.cf {
position: absolute;
right: 16px;
font-size: 16px;
line-height: 16px;
color: #1990ff;
}
}
}
}

.item:last-child {
margin-bottom: 0;
.line {
display: none;
}
}

}
```