elementUI步骤条Steps样式修改vue

官网原样式

修改完成样式

样式代码

 <div class="theSteps">
    <el-steps :active="2" align-center>
        <el-step title="选择影片场次"></el-step>
        <el-step title="选择座位"></el-step>
        <el-step title="14分钟内付款"></el-step>
        <el-step title="影院取票观影"></el-step>
    </el-steps>
 </div>

style要写scoped 不然会效果作用不上，貌似>>>这个符号是强渗透的意思，强制向下去该样式

<style scoped>
.theSteps >>> .el-step__line {
  position: absolute;
  border-color: inherit;
  background-color: #f03d37;
  z-index: -50;
}
.theSteps >>> .el-step__head.is-finish {
  color: white;
  border-color: #f03d37;
}
.theSteps >>> .el-step__head.is-wait {
  color: white;
  border-color: #f03d37;
  opacity: 0.5;
}
.theSteps >>> .el-step__head.is-process {
  color: white;
  border-color: #f03d37;
}
.theSteps >>> .el-step__title.is-process {
  font-weight: 400;
  color: #f03d37;
}
.theSteps >>> .el-step__icon.is-text {
  border-radius: 50%;
  border: 2px solid;
  border-color: inherit;
  background-color: #f03d37;
}
.theSteps >>> .el-step__title.is-finish {
  color: #f03d37;
}
.theSteps >>> .el-step.is-horizontal .el-step__line {
  height: 2px;
  top: 11px;
  width: 290px;
}
</style>

大家如果有一些不知道class的name是什么，就打开浏览器控制台，把鼠标移动到元素身上，就可以查看该节点的classname