修复小区背景颜色，巡检点顺序一致，投诉处理按钮

src/components/StepTimeline/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="step-timeline">
+    <div v-for="(item, index) in steps" :key="index" class="step-item" :class="item.status">
+      <div class="step-node">
+        <div class="step-circle">
+          <el-icon v-if="item.status === 'completed'" :size="12"><Check /></el-icon>
+          <span v-else>{{ index + 1 }}</span>
+        </div>
+        <div v-if="index > 0" class="step-line"></div>
+      </div>
+      <div class="step-content">
+        <div class="step-title">
+          <slot name="title" :item="item" :index="index"></slot>
+        </div>
+        <div v-if="item.wrap === true">
+          <div class="step-subtitle">
+            <slot name="subtitle" :item="item" :index="index"></slot>
+          </div>
+          <div class="step-time">
+            <slot name="time" :item="item" :index="index"></slot>
+          </div>
+        </div>
+        <div v-else>
+          <span>
+            <slot name="subtitle" :item="item" :index="index"></slot>
+          </span>
+          &nbsp;&nbsp;
+          <span>
+            <slot name="time" :item="item" :index="index"></slot>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Check } from '@element-plus/icons-vue';
+
+export interface StepItem {
+  status: 'completed' | 'pending' | 'waiting';
+  title: string;
+  subtitle: string;
+  time: string;
+  wrap: boolean;
+}
+
+defineProps<{
+  steps: StepItem[];
+}>();
+</script>
+
+<style lang="scss" scoped>
+.step-timeline {
+  display: flex;
+  flex-direction: column-reverse;
+  padding: 0;
+  height: 100%;
+}
+
+.step-item {
+  flex: 1;
+  display: flex;
+  align-content: flex-start;
+  gap: 16px;
+}
+
+.step-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.step-circle {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 800;
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.step-line {
+  width: 2px;
+  flex: 1;
+  min-height: 20px;
+  margin-top: 4px;
+}
+
+/* 已完成 */
+.step-item.completed {
+  color: #409eff;
+  .step-circle {
+    background-color: #fff;
+    color: #409eff;
+    border: 1px solid #409eff;
+  }
+
+  .step-line {
+    background-color: #409eff;
+  }
+}
+
+/* 进行中 */
+.step-item.pending {
+  color: #409eff;
+  .step-circle {
+    background-color: #409eff;
+    color: #fff;
+  }
+  .step-line {
+    background-color: #409eff;
+  }
+}
+
+/* 未完成 */
+.step-item.waiting {
+  color: #cccccc;
+  .step-circle {
+    background-color: #fff;
+    color: #cccccc;
+    border: 1px solid #cccccc;
+  }
+  .step-line {
+    border-left: 2px dashed #cccccc;
+    background: none;
+  }
+}
+
+.step-content {
+  padding-bottom: 4px;
+  min-height: 28px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.step-title {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 28px;
+}
+
+.step-subtitle {
+  font-size: 13px;
+  line-height: 22px;
+  margin-top: 2px;
+}
+
+.step-time {
+  font-size: 12px;
+  line-height: 20px;
+  margin-top: 2px;
+}
+</style>