<!-- 顶部步骤条 -->
<div class="createorder_top">
<div class="createorder_top_left">
<span
class="createorder_left_set"
:class="activeNum == 0 ||activeNum ==1||activeNum ==2?'activeSet':''"
>1.上传销售合同</span>
<span class="createorder_left_setdivision"></span>
<span
class="createorder_left_set"
:class="activeNum ==1||activeNum ==2?'activeSet':''"
>2.编辑信息</span>
<span class="createorder_left_setdivision"></span>
<span class="createorder_left_set" :class="activeNum ==2?'activeSet':''">3.指标要求</span>
</div>
<div class="createorder_top_right">
<el-button type="primary" @click="next">下一步</el-button>
</div>
</div>
<!-- 步骤条所对应的内容 -->
<div class="createorder_bott">
<div class="createorder_bott_one" v-if="activeNum==0">1</div>
<div class="createorder_bott_one" v-if="activeNum==1">2</div>
<div class="createorder_bott_one" v-if="activeNum==2">3</div>
</div>
通过css样式可以将步骤条修改成你自己想要的样式
.createorder_top {
background-color: #fff;
padding: 0 18px;
width: 100%;
height: 71px;
line-height: 71px;
display: flex;
justify-content: space-between;
}
.createorder_top .createorder_top_left .createorder_left_set {
font-size: 18px;
color: #304156;
}
.createorder_top .createorder_top_left .activeSet {
color: #409EFF;
}
.createorder_top .createorder_top_left .createorder_left_setdivision {
display: inline-block;
background-color: #99A9BF;
width: 2px;
height: 14px;
margin: 0 46px;
}
export default {
data(){
return{
activeNum: 0,
}
},
created(){
this.activeNum = 0
},
methods: {
// 下一步
next() {
if (this.activeNum++ >= 2) {
this.activeNum = 0;
}
},
// 上一步
upNext() {
this.activeNum --
},
}
}
