html
<div style="width:1200px;height:200px;" class="Article">
<div class="Article-title">
<div class="Article-title-nav">定金支付</div>
<div class="Article-title-nav">签署合同</div>
<div class="Article-title-nav">支付尾款</div>
<div class="Article-title-nav">交接账号</div>
<div class="Article-title-nav">交易完成</div>
</div>
<div class="Article-nav">
<div class="Article-circle" :class="selectNum==0||selectNum==1||selectNum==2||selectNum==3||selectNum==4?'active-select':''"></div>
<div class="Article-circle" :class="selectNum==1||selectNum==2||selectNum==3||selectNum==4?'active-select':''"></div>
<div class="Article-circle" :class="selectNum==2||selectNum==3||selectNum==4?'active-select':''"></div>
<div class="Article-circle" :class="selectNum==3||selectNum==4?'active-select':''"></div>
<div class="Article-circle" :class="selectNum==4?'active-select':''"></div>
</div>
<div class="line">
<div class='line-chiled' :style="'width:'+percentage+'%;'"></div>
</div>
</div>
<div class="next" @click="henldeNext">下一步</div>
<div class="last" @click="henldeLast">上一步</div>
<pageFooter/>
</div>
js
data(){
return {
selectNum:0,
percentage:0
}
},
methods:{
henldeNext(){
this.selectNum++;
this.percentage=this.selectNum*25;
if(this.selectNum===5){
this.selectNum = 0;
this.percentage = 0;
}
},
henldeLast(){
this.selectNum--
if(this.selectNum === -1){
this.selectNum = 0;
}
this.percentage=this.selectNum*25;
}
}
scss
.Article{
/* background: red;
opacity: 0.2; */
margin: 0 auto;
position: relative;
padding-top:53px;
.Article-title{
width: 850px;
height: 38px;
margin: 0 auto;
box-sizing: border-box;
box-sizing: content-box;
.Article-title-nav{
width: 19.6%;
height: 38px;
display: inline-block;
font-size:16px;
text-align: center;
line-height: 38px;
font-family:Microsoft YaHei;
font-weight:400;
color:#050505;
}
}
.Article-nav{
width: 850px;
height: 18px;
margin: 0 auto;
box-sizing: border-box;
box-sizing: content-box;
/* background-color: red; */
padding-top: 10px;
padding-bottom: 10px;
.Article-circle{
display: inline-block;
width:18px;
height:18px;
background-color: #DCDCDC;
/* background:#76F39F; */
border-radius:50%;
margin: 0 70px;
}
}
.line{
width: 680px;
height: 3px;
background-color: #DCDCDC;
position: absolute;
left: 50%;
top: 55%;
transform: translate(-50%,-50%);
z-index: -1;
.line-chiled{
height: 3px;
background:#76F39F;
}
}
.Article-nav div:nth-of-type(2){
margin-left: 80px;
}
.Article-nav div:nth-of-type(3){
margin-left: 80px;
}
.Article-nav div:nth-of-type(4){
margin-left: 80px;
}
.Article-nav div:nth-of-type(5){
margin-left: 80px;
}
}
.active-select{
background-color:#76F39F !important;
}
.next{
width:207px;
height:56px;
background:rgba(36,214,137,1);
border:3px solid rgba(36,214,137,1);
font-size:16px;
font-family:Microsoft YaHei;
text-align: center;
line-height: 56px;
font-weight:bold;
color:#fff;
}
.last{
width:207px;
height:56px;
background:red;
border:3px solid red;
font-size:16px;
font-family:Microsoft YaHei;
text-align: center;
line-height: 56px;
font-weight:bold;
color:#fff;
}