el-steps横线进度条 修改时间轴

 

<template>
    <div class="box">
      <el-steps :active="active" align-center>
        <template v-for="item in arrData">
          <el-step :key="item.name"  :class="item.isSelected ?'highlight' : '' "   :title="item.name"></el-step>
        </template>
      </el-steps>
    </div>
</template>
<script>
export default {
  data() {
    return {
      active:'',
      arrData: [
        {
          name: "2001",
          isSelected: false,
        },
        {
          name: "2002",
          isSelected: false,
        },
        {
          name: "2005",
          isSelected: true,
        },
        {
          name: "2006",
          isSelected: false,
        },
        {
          name: "2007",
          isSelected: false,
        },
      ],
    };
  },

};
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}



.highlight::v-deep .el-step__icon {
  background: rgb(147, 226, 0);
}
.el-steps {
  margin-top: 5px;
}
::v-deep .el-step__icon {
  border: none;
  background: #007eff;
  margin-top: 5px;
  width: 15px;
  height: 15px;
}
::v-deep .el-step__line {
  background-color: #0050ad;
}
::v-deep .el-step__icon-inner {
  display: none;
}
.box ::v-deep .el-step__title {
  font-size: 10px;
  line-height: 18px;
  color: #fff;
}
.box {
  width: 500px;
  height: 45px;
  background: #001a50;
  border-radius: 50px;
  padding: 0 20px;
}
</style>