原生步骤条书写

步骤条预览

第一步：

第二步：

第三步：

代码展示

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