feiniao-farm-h5/src/components/farmSteps.vue

<template>
    <div class="steps-container">
        <div
            v-for="(step, index) in steps"
            :key="index"
            class="step-item"
            :class="{ completed: index < currentStep, active: index === currentStep }"
        >
            <div class="step-circle">
                <el-icon v-if="index < currentStep"><Select /></el-icon>
                <span v-else class="step-number">{{ index + 1 }}</span>
            </div>
            <div class="step-label">{{ step.label }}</div>
            <div v-if="index < steps.length - 1" class="step-line" :class="{ completed: index < currentStep }"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps } from "vue";

const props = defineProps({
    currentStep: {
        type: Number,
        default: 2,
    },
});

const steps = ref([
    { label: "触发农事" },
    { label: "农事确认" },
    { label: "农事执行" },
    { label: "农事复核" },
]);
</script>

<style lang="scss" scoped>
.steps-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    .step-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        flex: 1;
        z-index: 2;
        .step-circle {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            transition: all 0.3s ease;
            .step-number {
                font-size: 14px;
            }
        }
        .step-label {
            font-size: 12px;
            text-align: center;
            line-height: 1.2;
            max-width: 60px;
        }
        .step-line {
            position: absolute;
            top: 13px;
            left: 74%;
            width: calc(100% - 38px);
            height: 2px;
            background-color: rgba(0, 0, 0, 0.22);
            z-index: 1;
        }
        &.completed {
            .step-circle {
                background-color: #1890ff;
                color: white;
            }
            .step-line {
                background-color: #1890ff;
            }
        }
        &.active {
            .step-circle {
                background-color: #1890ff;
                color: white;
            }
        }
    }
}
.step-item:not(.completed):not(.active) .step-circle {
    background-color: #FFFFFF;
    color: #999;
}
.step-item.completed .step-label,
.step-item.active .step-label {
    color: #333;
    font-weight: 500;
}

.step-item:not(.completed):not(.active) .step-label {
    color: rgba(0, 0, 0, 0.5);
}

.step-line.completed {
    background-color: #1890ff;
}
.step-item:last-child .step-line {
    display: none;
}
</style>