aiot-app/pages/production/order/components/progressBox.vue

<template>
    <div class="progress-container">
      <ul>
        <li
          v-for="(item, index) in list"
          :key="index"
          :class="{ active: active >= index }"
        >
		  <div class="progress-box">
		    {{index+1}}
		  </div>
          <p class="name">{{ item.name }}</p>
        </li>
      </ul>
    </div>
</template>

<script>
  export default {
    props: {
      // active: {
      //   type: [Number, String],
      //   default: 3
      // },
		list:{
			type: Array,
			default: []
		},
    },
    data () {
      return {
        stepList: [],
		active:2
      };
    },
	watch: {
	  list: {
	    handler () {
	  //     if (this.list.length) {
	  //       this.stepList = this.list
	  //       this.stepList.map((item,index)=>{
			// 	item.percent = ( item.number / this.total)*100  + '%'
			// })
			// const active = this.stepList.findIndex((item) => item.number === 0)
			// if(active==-1){
			// 	this.active = this.stepList.length-1
			// }
	  //     }
	    },
	    immediate: true
	  }
	},
	methods:{
		
	}
  };
</script>

<style lang="scss" scoped>
  .progress-container {
	  width: 100%;
	  overflow-x: auto;
    ul {
      list-style: none;
      display: flex;
      justify-content: flex-start;
      align-items: center;
	  padding: 0 10rpx;
      li {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        flex: 1;
        position: relative;
		min-width: 110px;
        &::after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          top: 38%;
          transform: translateY(-50%);
          height: 1px;
          background-color: #ccc;
        }
        &:first-of-type::after {
          left: 50%;
        }
        &:last-of-type::after {
          right: 50%;
        }
        &.active {
          &::after {
            background-color:#157a2c;
          }
          .progress-box {
            border-color:#157a2c;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background:#157a2c;
          }
        }
		.el-tooltip{
		  width: 100%;
		  text-align: center;
		  white-space: nowrap; /* 不换行 */
		  overflow: hidden; /* 超出部分隐藏 */
		  text-overflow: ellipsis; /* 显示省略号 */
		}
        .name{
          width: 100%;
          text-align: center;
		  color: #157a2c;
        }
        .progress-box {
          position: relative;
          z-index: 1;
          width: 32px;
          height: 32px;
          margin: 10px 0;
          border-radius: 50%;
          background: #fff;
          border: 1px solid #ccc;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  color: #ccc;
        }
      }
    }
  }
</style>