front-end/hdApp/src/pagesOrder/components/stepStatus.vue

<template>
    <view class="step-status_bx">
        <template
            v-for="(s,idx) in stepOptions"
        >
            <view
                  :key="idx"
            >
                <i :class="['iconfont','iconjihuo', s.complete?'clorBule':'']"></i>
                {{s.name}}
            </view>
            <view 
                :key="idx"
                v-if="idx != 2"
                class="dot-box">
                <view 
                :key="i"
                v-for="i in 5" :class="['dot',s.complete?'clorBule':'']"></view>
            </view>
         </template>     
    </view>
</template>

<script>
    export default {
        name:'StepStatus',
        props:{
            stepOptions:{
                type:Array,
                default:()=>[]
            },
            active:{
                type:Number,
                default: 0
            }
        }
    }
</script>

<style lang="scss" scoped>
    .step-status_bx {
        padding:30upx 40upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #FFFFFF;
         & .iconfont {
            color: #CCCCCC;
            font-size: 44upx;
            margin-right: 10upx;
            &.clorBule {
                color: #3385FF;
            }
        }
        .dot-box {
            width: 88upx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            & .dot {
                width: 8upx;
                height: 8upx;
                background-color: #CCCCCC;
                border-radius: 50%;
                &.clorBule {
                     background-color: #3385FF;
                }
            }
        }
       
    }
</style>