<div class="jsc-phone-header">
<div class="header_item" :class="{ active: !isNext, next: isNext }">
<span>1</span>
验证身份
</div>
<div class="header_item" :class="{ activeTwo: isNext }">
<span>2</span>
绑定手机号码
</div>
</div>
<div class="dialog-footer" style="border-top: 1px solid #dcdee0">
<el-button @click="closePhoneDialog">取消</el-button>
<el-button type="primary" @click="saveOrNext(phoneFormRef)">
{{ isNext ? "完成" : "下一步" }}
</el-button>
</div>
.jsc-phone-header {
display: flex;
justify-content: center;
margin: auto;
margin-bottom: 30px;
width: 81%;
height: 36px;
background: #f2f3f5;
.header_item {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
position: relative;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #999999;
span {
display: inline-block;
width: 18px;
height: 18px;
background: #999999;
color: #ffffff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 11px;
}
}
.active {
background: #477fff;
color: #ffffff;
&::after {
content: "";
position: absolute;
top: 0;
right: -18px;
width: 0;
height: 0;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 18px solid #477fff;
}
span {
background: #ffffff;
color: #477fff;
}
}
.activeTwo {
background: #477fff;
color: #ffffff;
&::after {
content: "";
position: absolute;
top: 0;
left: 0px;
width: 0;
height: 0;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 18px solid #f2f3f5;
}
span {
background: #ffffff;
color: #477fff;
}
}
.next {
background: rgba(71, 127, 255, 0.1);
color: #477fff;
&::after {
content: "";
position: absolute;
top: 0;
right: -18px;
width: 0;
height: 0;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 18px solid rgba(71, 127, 255, 0.1);
z-index: 10;
}
span {
background: #477fff;
}
}
}