<template>
  <div style="margin-bottom: 20px;">
    <div>售后进度：</div>
    <el-steps style="max-width: 600px" :active="1" finish-status="success">
      <el-step v-for="item in data.steps" :title="item">
        <template #icon>
          <i class="spot el-step__line-inner" />
        </template>
      </el-step>
    </el-steps>
  </div>
</template>

<script setup>
const data = reactive({
  // 进度条
  steps: ['待质检', '质检完成', '待维修', '维修中', '维修完成', '已发货'],
})
</script>

<style lang="scss" scoped>
:deep(.el-steps) {
  .el-step__head {
    margin-left: 6px;
  }

  .el-step__title {
    font-size: 10px;
    line-height: 1;
  }

  .el-step__icon {
    width: 20px;
    position: absolute;
  }

  .el-step__main {
    margin-top: 30px;
  }
}

.spot {
  transform: scale(3);
  border-radius: 50%;
}
</style>