fix: 图例-离线、降级、故障三部分的图标换成设计图的红绿灯图片样式

src/components/TongzhouTrafficMap.vue

@@ -11,18 +11,47 @@
           <div class="legend-label" style="font-weight: bold;">全选</div>
         </div>
 
+        <!-- <div class="legend-item" :class="{ 'is-inactive': !activeLegends.includes(item.name) }" :key="item.name"
+          v-for="item in legendConfig" @click="toggleRouteVisible(item.name)">
+          <div
+            class="legend-dot"
+            :style="{ backgroundColor: item.color }"
+            :class="{ 'special-route': ['干线协调', '勤务路线'].includes(item.name) }"
+          >
+            <span>{{ item.name.charAt(0) }}</span>
+          </div>
+          <div class="legend-dot" :style="{ backgroundColor: item.color }">
+
+            <span v-if="!['离线', '降级', '故障'].includes(item.name)">
+              {{ item.name.charAt(0) }}
+            </span>
+
+            <img v-else-if="item.name === '离线'" src="@/assets/images/icon_lixian.png" class="status-icon" />
+            <img v-else-if="item.name === '降级'" src="@/assets/images/icon_jiangji.png" class="status-icon" />
+            <img v-else-if="item.name === '故障'" src="@/assets/images/icon_guzhang.png" class="status-icon" />
+
+          </div>
+
+          <div class="legend-label">{{ item.name }}</div>
+        </div> -->
         <div v-for="item in legendConfig" class="legend-item" @click="toggleRouteVisible(item.name)" :key="item.name"
           :class="{ 'is-inactive': !activeLegends.includes(item.name) }">
-          <!-- <div class="legend-dot" :style="{ backgroundColor: item.color }">
-            <span>{{ item.name.charAt(0) }}</span>
-          </div> -->
-          <div class="legend-dot" :style="{ backgroundColor: item.color }"
-            :class="{ 'special-route': ['干线协调', '勤务路线'].includes(item.name) }">
-            <span>{{ item.name.charAt(0) }}</span>
+
+          <div class="legend-dot"
+            :style="{ backgroundColor: ['离线', '降级', '故障'].includes(item.name) ? 'transparent' : item.color }"
+            :class="{ 'special-route': ['干线协调', '勤务路线'].includes(item.name), 'is-status-wrapper': ['离线', '降级', '故障'].includes(item.name) }">
+
+            <span v-if="!['离线', '降级', '故障'].includes(item.name)">
+              {{ item.name.charAt(0) }}
+            </span>
+
+            <img v-else
+              :src="require(`@/assets/images/icon_${item.name === '离线' ? 'lixian' : item.name === '降级' ? 'jiangji' : 'guzhang'}.png`)"
+              class="status-icon" />
+
           </div>
 
           <div class="legend-label">{{ item.name }}</div>
-          <!-- <div class="legend-status">{{ activeLegends.includes(item.name) ? '在线' : '离线' }}</div> -->
         </div>
       </div>
     </div>
@@ -431,15 +460,6 @@ export default {
   min-width: 200px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-}
-
-::v-deep .custom-info-card {
-  background: rgba(10, 15, 24, 0.95);
-  border-radius: 10px;
-  padding: 12px 16px;
-  min-width: 200px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
   color: #fff;
 }
 
@@ -524,10 +544,16 @@ export default {
 }
 
 .legend-dot {
+  margin-right: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.legend-dot:not(.is-status-wrapper) {
   width: 20px;
   height: 20px;
-  margin-right: 10px;
-  border-radius: 10px;
+  border-radius: 50%;
 }
 
 .legend-dot span {
@@ -605,4 +631,21 @@ export default {
   width: 10px;
   height: 10px;
 }
+
+.legend-dot.is-status-wrapper {
+  width: 28px;
+  height: 28px;
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
+  margin-right: 0;
+  transform: translateX(-15%);
+}
+
+.status-icon {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
 </style>