feat:添加步骤条组件

src/components/farmSteps.vue

@@ -0,0 +1,116 @@
+<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: "农事执行" },
+    { 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>