css实现步骤条,可根据自身需求修改

```<template>
  <div class="order_status">
    <span class="s-step" :style="{ width: stepswidth + '%' }" v-for="(item, index) in stepsList" :key="index">
      <b :style="{ marginLeft: clacWidth(stepsList) + 'px' }">
        <b :class="item.state == 1 ? 'backgroundb1' : item.state == 2 ? 'backgroundb2' : 'backgroundb3'"></b>
      </b>
      <p :class="item.state == 1 ? 'state1' : item.state == 2 ? 'state2' : 'state3'" :style="{ width: 85 + '%' }" v-if="quantity - 1 != index"></p>
      <em :class="item.state == 2 ? 'colorl2' : 'colorl3'">{{ item.timedescribe }}</em>
      <em :class="item.state == 2 ? 'colorl2' : 'colorl3'">{{ item.time }}</em>
      <em v-if="item.stepsdescribe" class="backgroundb4">{{ item.stepsdescribe }}</em>
      <div :class="item.state == 1 ? 'divtext1' : item.state == 2 ? 'divtext2' : 'divtext3'">{{ item.title }}</div>
    </span>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'Mysteps',
  // props: {
  //   stepsList: {
  //     type: Object,
  //     default: []
  //   }
  // },
  data() {
    return {
      stepswidth: null,
      quantity: null,
      stepsList: [
        { title: '规划启动', state: '1', time: '3月3日', timedescribe: '实际开始时间', stepsdescribe: '某某活动重开受影响2项活动' },
        { title: '需求专题', state: '1', time: '3月8日', timedescribe: '实际完成时间', stepsdescribe: '受活动重开影响5项活动被动重开' },
        { title: '需求审查', state: '2', time: '3月10日', timedescribe: '当前进度', stepsdescribe: '落后计划2天待协调问题3个' },
        { title: '方案评审', state: '3', time: '3月12日', timedescribe: '计划进度', stepsdescribe: '' },
        { title: '方案审查', state: '3', time: '3月16日', timedescribe: '计划进度', stepsdescribe: '' },
        { title: '.....', state: '3', time: '3月18日', timedescribe: '完成时间', stepsdescribe: '' }
        // { title: '方案审查', state: '', time: '3月16日', timedescribe: '计划进度', stepsdescribe: '' },
        // { title: '.....', state: '', time: '3月18日', timedescribe: '完成时间', stepsdescribe: '' }
        // { title: '.....', state: '', time: '3月18日', timedescribe: '完成时间', stepsdescribe: '' }
      ]
    }
  },
  mounted() {
    this.quantity = this.stepsList.length

    this.stepswidth = 100 / this.quantity
  },
  methods: {
    //根据数据的多少，修改小圆移动的位置
    clacWidth(val) {
      if (val.length == 3) {
        return -25
      } else {
        return -25 + (val.length - 3) * 2
      }
    }
  },
  watch: {}
}
</script>

<style lang="less" rel="stylesheet/less" scoped="true">
/*进度条start*/

.order_status {
  height: 175px;
  padding-top: 70px;
  padding-left: 150px;
}

.order_status .s-step {
  float: left;
  // width: 16.66%;
  height: 60px;
  position: relative;
}

.order_status .s-step > b {
  display: block;
  width: 8px;
  height: 8px;
  line-height: 8px;
  border-radius: 8px;
  position: absolute;
  // margin-left: -15px;
  top: -20px;
  z-index: 87;
}

.order_status .s-step > b > b {
  display: block;
  width: 8px;
  height: 8px;
  line-height: 8px;
  border-radius: 8px;
  margin-top: -3px;
  z-index: 88;
}

.order_status .s-step > p {
  top: -20px;
  position: absolute;
  z-index: 86;
}

.backgroundb1 {
  background: rgb(3, 131, 18);
}
.backgroundb2 {
  background: rgba(230, 246, 4, 0.913);
}
.backgroundb3 {
  background: #ddd;
}

.backgroundb4 {
  margin-top: 5px;
  background: rgb(243, 127, 127);
  border-radius: 8px;
  padding-bottom: 5px;
}
.state1 {
  border: 1px solid rgb(3, 131, 18);
}

.state2 {
  border: 1px dashed rgba(230, 246, 4, 0.913);
}

.colorl2 {
  color: rgba(230, 246, 4, 0.913);
}
.colorl3 {
  color: #ddd;
}
.state3 {
  border: 1px solid #ddd;
}
.order_status .s-step em {
  display: block;
  padding-top: 8px;
  font-style: normal;
  text-align: center;
  font-size: 12px;
  margin-left: -80px;
  width: 130px;
}

.order_status .s-step > div {
  display: block;
  width: 80px;
  height: 32px;
  line-height: 32px;
  position: absolute;
  margin-left: -55px;
  top: -60px;
  z-index: 87;
  text-align: center;
  font-size: 12px;
  border-radius: 10px;
}
.divtext1 {
  border: 1px solid rgb(3, 131, 18);
  color: rgb(3, 131, 18);
}
.divtext2 {
  border: 1px solid rgba(230, 246, 4, 0.913);
  color: rgba(230, 246, 4, 0.913);
}

.divtext3 {
  border: 1px solid #ccc;
}
/*步骤条end*/
</style>