dz-app/components/mx-steps/mx-steps.vue

<template>
    <uv-steps :current="step" dot>
        <uv-steps-item v-for="(s, i) in steps" :title="getTitle(s)" :class="{'step-passed': i<=step}"/>
    </uv-steps>
</template>

<script setup>
import {createPropDefine} from "@/utils";

const props = defineProps({
    steps: createPropDefine([], Array),
    step: createPropDefine(0, Number),
    keyName: createPropDefine('')
})

const getTitle = (item) => props.keyName ? item[props.keyName] : item
</script>

<style scoped lang="scss">
::v-deep(.uv-steps) {
    .uv-steps-item__line--row {
        top: 12px !important;
    }

    .uv-steps-item__wrapper--row--dot {
        width: 25px !important;
        height: 25px !important;
        background-color: transparent !important;

        .uv-steps-item__wrapper__dot {
            width: 15px !important;
            height: 15px !important;
        }
    }

    .uv-steps-item__content {
        .uv-text__value {
            font-size: 14px !important;
        }
    }

    .step-passed {
        .uv-steps-item__wrapper__dot {
            position: relative;

            &::before {
                content: ' ';
                position: absolute;
                background: #FFFFFF;
                left: 5px;
                top: 5px;
                border-radius: 2.5px;
                width: 5px;
                height: 5px;
            }
        }

        .uv-steps-item__content .uv-text__value {
            color: var(--primary-color);
        }
    }
}
</style>