关于flex的应用，时间轴

  <div class="center flex-column">
    <div class="flow-div" v-for="(item, i) in activeStep" :key="item">
      <div class="flow-left">
        {{ item.czdzmc }}
      </div>
      <div class="flow-middle flex-column">
        <div :class="i < activeStep.length ? 'circle' : 'uncircle'">{{ i + 1 }}</div>
        <div :class="i < activeStep.length - 1 ? 'line' : 'unline'" v-show="activeStep.length != i + 1"></div>
      </div>
      <div class="flow-right">
        <div>
          <div class="right-name">
            {{ item.czrymc }}
          </div>
          <div class="step-nr">{{ item?.nr }}</div>
        </div>
        <div class="right-time">
          {{ item.czsj }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref, watch } from 'vue'
  import { ydrzDetail } from '/@/api/request/traceable'

  let stepArr = reactive([])
  const activeStep = ref([])
  const props = defineProps({
    ydbh: {
      type: String
    }
  })

  const getRecordData = async (ydbh) => {
    const res = await ydrzDetail(ydbh)
    activeStep.value = res
  }

  watch(
    () => props.ydbh,
    () => {
      getRecordData(props.ydbh)
    }
  )

  // 轮询日志
  onMounted(() => {
    getRecordData(props.ydbh)
  })
</script>

<style lang="less" scoped>
  .flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .center {
    width: 100%;
    padding: 40px 0;

    .flow-div {
      display: flex;
      width: 100%;

      .flow-left {
        flex: 1;
        text-align: right;
        font-size: 22px;
        font-family: 'PingFangSC-Medium', 'PingFang SC';
        font-weight: 545;
        color: #232323;
      }

      .flow-middle {
        width: 60px;

        .circle {
          width: 32px;
          height: 32px;
          font-size: 18px;
          text-align: center;
          color: white;
          background: #578c59;
          line-height: 32px;
          border-radius: 50%;
        }
        .uncircle {
          width: 32px;
          height: 32px;
          font-size: 18px;
          text-align: center;
          color: #828282;
          background: #e0e6ec;
          line-height: 32px;
          border-radius: 50%;
        }

        .line {
          width: 2px;
          min-height: 75px;
          height: calc(100% - 22px);
          background: #578c59;
        }
        .unline {
          width: 2px;
          height: 75px;
          background: #e0e6ec;
        }
      }

      .flow-right {
        flex: 1;
        .right-name {
          font-size: 22px;
          font-family: 'PingFangSC-Medium', 'PingFang SC';
          font-weight: 545;
          color: #232323;
        }
        .step-nr {
          width: 400px;
          font-size: 22px;
          font-family: 'PingFangSC-Medium', 'PingFang SC';
          font-weight: 800;
          color: #232323;
          word-wrap: break-word;
          word-break: break-all;
          white-space: pre-wrap;
        }

        .right-time {
          font-size: 20px;
          font-family: 'PingFangSC-Regular', 'PingFang SC';
          font-weight: 400;
          color: #525252;
        }
      }
    }
  }
</style>