artículo paso vue

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;
}