1.结构

<ul class="stepUl">

              <li class="stepLi" v-for="(item, index) in stepList" :key="index">

                <div class="top">

                  <p :class="{active: currentState >= item.key}">{{ item.value }}</p>

                  <img

                    v-if="currentState >= item.key"

                    :src="require(`./../../static/img/icons/iconed${index}.png`)"

                  />

                  <img v-else :src="require(`./../../static/img/icons/icon${index}.png`)" />

                </div>

                <div v-if="item.value != '工单闭环'">

                  <img

                    v-if="currentState >= item.key"

                    class="arrow"

                    src="./../../static/img/icons/arrowed.png"

                  />

                  <img

                    v-else

                    class="arrow"

                    src="./../../static/img/icons/arrow.png"

                  />

                </div>

              </li>

            </ul>

2.数据

stepList:[
    {
        "key": "-1",
        "value": "撤单"
    },
    {
        "key": "1",
        "value": "创建工单"
    },
    {
        "key": "20",
        "value": "科室接单"
    },
    {
        "key": "30",
        "value": "科员处理"
    },
    {
        "key": "40",
        "value": "科室确认"
    },
    {
        "key": "50",
        "value": "工单闭环"
    }
]

3.样式

.stepUl {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  text-align: left;

  .stepLi {

    display: flex;

    justify-content: center;

    align-items: center;

    .top {

      p {

        width: 72px;

        color: #ccc;

        margin-bottom: 5px;

        margin-left: -5px;

        text-align: center;

        &.active {

          color: #000;

        }

      }

      img {

        width: 57px;

      }

    }

    .arrow {

      margin-top: 20px;

    }

  }

}