ucard-person-app-front/src/components/StepList.vue

<template>
    <div class="step">
        <div class="step-list">
            <div class="step-item" v-for="i in options.length" :key="i" :style="{ width: 100 / options.length + '%' }">
                <div :class="['item-li', currentStep <= i ? '' : 'ok', currentStep === i ? 'active' : '']">
                    <em :class="[i == 1 ? '' : 'step-dash step-dash1']"></em>
                    <img v-if="currentStep > i" src="@/assets/images/success.png" alt="" />
                    <span v-else></span>
                    <em :class="[i == options.length ? '' : 'step-dash step-dash2']"></em>
                </div>
            </div>
        </div>
        <div class="step-ul">
            <div class="step-li" v-for="t in options" :key="t" :style="{ width: 100 / options.length + '%' }">{{ t }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps<{
    currentStep: number
    options: Array<string>
}>()
</script>

<style scoped lang="scss">
.step {
    padding-bottom: 16px;

    .step-list {
        display: flex;
        align-items: center;

        .step-item {
            display: flex;
            justify-content: center;
            align-items: center;
            .item-li {
                display: flex;
                width: 100%;
                justify-content: center;
                align-items: center;
                span {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    aspect-ratio: 1/1;
                    border-radius: 64px;
                    border: 2px solid #beb6b6;
                    position: relative;
                    &::after {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        content: '';
                        width: 4px;
                        height: 4px;
                        border-radius: 50%;
                        background: #beb6b6;
                    }
                }
                em {
                    height: 2px;
                    flex: 1 0 0;
                    background: transparent;
                }
                .step-dash {
                    height: 2px;
                    flex: 1 0 0;
                    background: #beb6b6;
                }
                img {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                }
            }

            .active {
                span {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    aspect-ratio: 1/1;
                    border-radius: 64px;
                    border: 2px solid #ff4766;
                    position: relative;
                    &::after {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        content: '';
                        width: 4px;
                        height: 4px;
                        border-radius: 50%;
                        background: #ff4766;
                    }
                }
                em {
                    height: 2px;
                    flex: 1 0 0;
                    background: transparent;
                }
                .step-dash {
                    height: 2px;
                    flex: 1 0 0;
                    background: #beb6b6;
                }
                .step-dash1 {
                    background: #ff4766;
                }
            }
            .ok {
                span {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    aspect-ratio: 1/1;
                    border-radius: 64px;
                    border: 2px solid #ff4766;
                    position: relative;
                    &::after {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        content: '';
                        width: 4px;
                        height: 4px;
                        border-radius: 50%;
                        background: #ff4766;
                    }
                }
                em {
                    height: 2px;
                    flex: 1 0 0;
                    background: transparent;
                }
                .step-dash {
                    height: 2px;
                    flex: 1 0 0;
                    background: #ff4766;
                }
            }
        }
    }

    .step-ul {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        color: #474747;
        text-align: center;
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0.014px;
        .step-li {
            text-align: center;
        }
    }
}
</style>