HTML部分:
<div class="process-box">
<div class="process">
<span class="fontColor borderColor">1</span>
<div class="bgColor"></div>
<span
:class="{ fontColor: processId >= 2, borderColor: processId >= 2 }"
>2</span
>
<div :class="{ bgColor: processId >= 3 }"></div>
<span
:class="{ fontColor: processId >= 3, borderColor: processId >= 3 }"
>3</span
>
<div :class="{ bgColor: processId == 4 }"></div>
<span
:class="{ fontColor: processId == 4, borderColor: processId == 4 }"
>4</span
>
</div>
<ul class="process-text">
<li class="fontColor">第一步</li>
<li :class="{ fontColor: processId >= 2 }">第二步</li>
<li :class="{ fontColor: processId >= 3 }">第三步</li>
<li :class="{ fontColor: processId == 4 }">第四步</li>
</ul>
</div>
css部分
/* 步骤条 */
.process-box {
width: 420px;
.process {
width: 100%;
display: flex;
align-items: center;
margin: 22px 0 10px 37px;
span {
width: 32px;
height: 32px;
border: 4px solid #eeeeee;
border-radius: 50%;
text-align: center;
line-height: 32px;
font-weight: 700;
color: #eeeeee;
}
div {
width: 65px;
height: 2px;
background-color: #eeeeee;
}
}
ul {
display: flex;
justify-content: space-around;
padding: 0;
li {
list-style: none;
font-size: 14px;
color: #eeeeee;
font-weight: 700;
}
}
}
//字体颜色
.fontColor {
color: #479cf1 !important;
}
// 背景颜色
.bgColor {
background-color: #479cf1 !important;
}
// 边框颜色
.borderColor {
border: 4px solid #479cf1 !important;
}
效果图