展示圖：

<template><div class='createorder'><!-- 頂部步驟條 --><div class="createorder_top"><div class="createorder_top_left"><!-- 0 --><span class="createorder_left_set" :class="value == 0||value ==1||value ==2||value ==3||value ==4?'activeSet':''"><span class="look" v-if="value ==1||value ==2||value ==3||value ==4">√</span><span class="look" v-else>1</span>店長信息</span><span class="createorder_left_setdivision" :class="value ==1||value ==2||value ==3||value ==4?'createorder_left_setdivisions':''"></span><!-- 1 --><span class="createorder_left_set" :class="value ==1||value ==2||value ==3||value ==4?'activeSet':''"><span class="look" v-if="value ==2||value ==3||value ==4">√</span><span class="look" v-else>2</span>企業(yè)及法人信息</span><span class="createorder_left_setdivision" :class="value ==2||value ==3||value ==4?'createorder_left_setdivisions':''"></span><!-- 2 --><span class="createorder_left_set" :class="value ==2||value ==3||value ==4?'activeSet':''"><span class="look" v-if="value ==3||value ==4">√</span><span class="look" v-else>3</span>藥店信息</span><span class="createorder_left_setdivision" :class="value ==3||value ==4?'createorder_left_setdivisions':''"></span><!-- 3 --><span class="createorder_left_set" :class="value ==3||value ==4?'activeSet':''"><span class="look" v-if="value ==4">√</span><span class="look" v-else>4</span>服務(wù)能力</span><span class="createorder_left_setdivision" :class="value ==4?'createorder_left_setdivisions':''"></span><!-- 4 --><span class="createorder_left_set" :class="value ==4?'activeSet':''"><span class="look" v-if="value ==4">√</span><span class="look" v-else>5</span>入駐成功</span></div></div></div> </template><script> export default {props: {value: {type: Number,default: "",},},data(){return{}},created(){},mounted () {},methods: {} }</script><style scoped lang='less'> .look{text-align: center;font-size: 20px;display: inline-block;width: 25px;height: 25px;line-height: 25px;border-radius: 42px;border: 2px solid;margin-right: 5px; } .createorder_top {background-color: #F9F9F9;border-radius:50px;width: 99%;margin: 0 auto;margin-top: 10px; } .createorder_top .createorder_top_left{padding: 20px 30px;display: flex;justify-content: space-between;align-items: center;} .createorder_top .createorder_top_left .createorder_left_set {font-size: 18px;color: #ABACB3; }.createorder_top .createorder_top_left .activeSet {color: #2846FF; }.createorder_top .createorder_top_left .createorder_left_setdivision {display: inline-block;background-color: #F1EFF2;width: 123px;height: 2px;margin: 10px 25px;margin-bottom: 5px; } .createorder_top .createorder_top_left .createorder_left_setdivisions {display: inline-block;background-color: #2846FF;width: 123px;height: 2px;margin: 10px 25px;margin-bottom: 5px; }</style>

總結(jié)

以上是生活随笔為你收集整理的自定义步骤条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。