<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>
