<template>
  <div>
    <a-steps :current="current">
      <a-step v-for="(step, i) of stepList" :title="step.label" />
    </a-steps>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'NsSteps',
    props: {
      current: {
        type: Number,
        default: 0,
      },
      stepList: {
        type: Array,
        default: () => [],
      },
    },
    setup() {},
  });
</script>
<style scoped>
  :deep(.ant-steps-item-icon) {
    width: 24px;
    height: 24px;
    line-height: 24px;
  }
  :deep(.ant-steps-item-title) {
    line-height: 24px;
  }
  :deep(.ant-steps-item-title::after) {
    position: absolute;
    top: 12px;
    left: 100%;
    display: block;
    width: 150px;
    height: 1px;
    background: #f0f0f0;
    content: '';
    max-width: 200px;
    min-width: 32px;
  }
  :deep(.ant-steps) {
    margin: 0 !important;
    justify-content: center;
  }
  :deep(.ant-steps-item) {
    flex: none;
    flex-shrink: 1;
    margin-right: 0px !important;
    width: 200px;
  }
  :deep(.ant-steps-item-container) {
  }
</style>