原生步骤条书写

步骤条预览

第一步：

第二步：

第三步：

代码展示

html

  <div class="contract">

    <div class="step-box">
      <div class="step-part" v-for="(step,index) in stepArray" :key="index">
        <div class="step-txt">
          <span :class="active >= step.id ? 'step-id-active' : 'step-id'" >
          <!--    van-icon 是框架vant，如果你的项目未使用vant框架，可以换成一个本地的小图标  
         		   判断条件不要忘记 v-if="active > step.id"     
          -->
            <van-icon v-if="active > step.id" name="checked" color="#1989fa" size="20" style="background: #FFFFFF;"/>
            <span v-else>{{step.id + 1}}</span>
          </span>
          <span :class="active > step.id ? 'step-line-active' : 'step-line'" v-show="step.id !== 2"></span>
        </div>
        <span class="step-name">{{step.name}}</span>
        <span class="step-detail">{{step.detail}}</span>
      </div>
    </div>

    <br>
    <br>
    <br>
    <button @click="active = 0 ">0</button>
    <button @click="active = 1 ">1</button>
    <button @click="active = 2 ">2</button>

  </div>

js

基于vue

import {reactive, ref} from "vue";

const active = ref(0);
const stepArray = reactive([
  {
    id:0,
    name:'合同信息',
    detail:'填写合同信息',
  },
  {
    id:1,
    name:'合同模板',
    detail:'填写合同信息',
  },
  {
    id:2,
    name:'合同发起',
    detail:'预览和发起',
  }
])

css

.contract{
  width: 100%;
  height: 100%;
  overflow: auto;

  .step-box{
    width: 100%;
    height: 120px;
    background: #FFFFFF;
    display: flex;
    justify-content: center;
    text-align: center;

    .step-part{
      width: 30%;
      text-align: center;

      .step-txt{
        padding-top: 10px;
        display: flex;
        position: relative;

        .step-id-active{
          display: block;
          background: #409EFF;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border-radius: 50px;
          color: #FFFFFF;
          font-size: 12px;
          margin-left: calc(50% - 10px);
        }

        .step-id{
          display: block;
          background: #DCDEE0;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border-radius: 50px;
          color: #FFFFFF;
          font-size: 12px;
          margin-left: calc(50% - 10px);
        }

        .step-line-active{
          width: calc(100% - 20px);
          height: 3px;
          background: #409EFF;
          display: block;
          position: absolute;
          top: 18px;
          left: calc(50% + 11px);
        }

        .step-line{
          width: calc(100% - 20px);
          height: 3px;
          background: #DCDEE0;
          display: block;
          position: absolute;
          top: 18px;
          left: calc(50% + 11px);
        }
      }


      .step-name{
        display: block;
        color: #323233;
      }

      .step-detail{
        display: block;
        font-size: 12px;
        color: #969799;
      }
    }
  }
}