fix: 按设计图修改地图图例的图标

src/components/TongzhouTrafficMap.vue

@@ -16,9 +16,16 @@
           <div class="legend-label" style="font-weight: bold;">全选</div>
         </div>
 
-        <div v-for="item in legendConfig" :key="item.name" class="legend-item"
-          :class="{ 'is-inactive': !activeLegends.includes(item.name) }" @click="toggleRouteVisible(item.name)">
-          <div class="legend-dot" :style="{ backgroundColor: item.color }"></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-label">{{ item.name }}</div>
           <!-- <div class="legend-status">{{ activeLegends.includes(item.name) ? '在线' : '离线' }}</div> -->
         </div>
@@ -385,7 +392,6 @@ export default {
   position: absolute;
   bottom: 30px;
   right: 40px;
-  width: 140px;
   background: rgba(5, 22, 45, 0.9);
   border: 1px solid #1e4d8e;
   padding: 15px;
@@ -415,10 +421,21 @@ export default {
 }
 
 .legend-dot {
-  width: 10px;
-  height: 10px;
+  width: 20px;
+  height: 20px;
   margin-right: 10px;
-  border-radius: 2px;
+  border-radius: 10px;
+}
+
+.legend-dot span {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  font-size: 12px;
+  color: #FFF;
+  text-align: center;
+  transform: scale(0.75);
+  line-height: 20px;
 }
 
 .legend-label {
@@ -441,6 +458,8 @@ export default {
 .all-select .legend-dot {
   border-radius: 2px;
   transition: all 0.3s;
+  width: 10px;
+  height: 10px;
 }
 
 /* 搜索框容器 */