foster-pc-vue/src/components/common/stepBox.vue

<template>
    <div class="step-content" :class="isDone ? `step-4` : `step-${card.orderStatus ? card.orderStatus : card.orderStatus === 0 ? card.orderStatus : card.status}`">
        <div class="step-text t-r">专家</div>
        <div class="step-text b-l">农服</div>
        <div class="step-text b-r">农资</div>
        <!-- <div class="step-time time-t-l" v-if="card.updateDate0">
                {{ formatDate(card.updateDate0) }}
            </div>
            <div class="step-time time-b-r" v-if="card.updateDate1">
                {{ formatDate(card.updateDate1) }}
            </div>
            <div class="step-time time-b-l" v-if="card.updateDate4">
                {{ formatDate(card.updateDate4) }}
            </div> -->
        <img class="step-img" :src="require(`@/assets/img/gallery/step-${isDone ? 4 : (card.orderStatus ? card.orderStatus : card.orderStatus === 0 ? card.orderStatus : card.status)}.png`)" />
    </div>
</template>

<script setup>
const props = defineProps({
    card: {},
    isDone: {
        type: Boolean,
        default: false
    }
})

// 正则表达式 将日期 YYYY-MM-DD 格式的字符串转换为 MM-DD
const formatDate = (dateStr) => {
    return dateStr.replace(/^\d{4}-(\d{2}-\d{2})$/, "$1");
};
</script>

<style lang="scss" scoped>
.step-content {
    position: relative;
    width: 100px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    &.step-0 {
        .t-r {
            color: #FFD489;
        }
    }
    &.step-1 {
        .t-r {
            color: #FFD489;
        }
        .b-r {
            color: #FFD489;
        }
    }
    &.step-2 {
        .t-r {
            color: #FFD489;
        }
        .b-r {
            color: #FFD489;
        }
        .b-l {
            color: #FFD489;
        }
    }
    &.step-3 {
        .t-r {
            color: #FFD489;
        }
        .b-r {
            color: #FFD489;
        }
        .b-l {
            color: #FFD489;
        }
        .t-l {
            color: #FFD489;
        }
    }
    &.step-4 {
        .t-r {
            color: #ffb132;
        }
        .b-r {
            color: #ffb132;
        }
        .b-l {
            color: #ffb132;
        }
        .t-l {
            color: #ffb132;
        }
    }
    .step-text {
        position: absolute;
        font-size: 12px;
        color: #bbbbbb;
    }
    .t-l {
        top: 0;
        left: 0;
    }
    .t-r {
        left: 50%;
        transform: translateX(-50%);
        top: -10px;
    }
    .b-l {
        bottom: 8px;
        left: 4px;
    }
    .b-r {
        bottom: 8px;
        right: 2px;
    }

    .step-time {
        position: absolute;
        font-size: 10px;
        color: rgba(0, 0, 0, 0.2);
        &.time-t-l {
            left: 0;
            right: 0;
            top: -12px;
            margin: 0 auto;
            text-align: center;
        }
        &.time-b-l {
            top: 0;
            bottom: 0;
            margin: 0 auto;
            left: 0;
            display: flex;
            align-items: center;
        }
        &.time-b-r {
            top: 0;
            bottom: 0;
            margin: 0 auto;
            right: 0;
            display: flex;
            align-items: center;
        }
    }
    .step-img {
        width: 42px;
    }
}
</style>