展示圖：

<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>企業及法人信息</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>服務能力</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>