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

```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;
    }
  }

}
```