fix: 图例-干线协调和勤务路线图标更换为设计图样式

src/components/TongzhouTrafficMap.vue

@@ -13,9 +13,14 @@
 
         <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 }">
+          <!-- <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>
+
           <div class="legend-label">{{ item.name }}</div>
           <!-- <div class="legend-status">{{ activeLegends.includes(item.name) ? '在线' : '离线' }}</div> -->
         </div>
@@ -79,7 +84,7 @@ export default {
     // 2. 核心修改：清理 routeGroups
     Object.values(this.routeGroups).forEach(g => {
       if (!g) return;
-      
+
       if (Array.isArray(g)) {
         // 如果是数组（当前的逻辑），遍历每个成员销毁
         g.forEach(overlay => {
@@ -364,7 +369,6 @@ export default {
   height: 100%;
 }
 
-/* --- 红绿灯圆点：去掉数字后的纯净样式 --- */
 ::v-deep .pure-light-node {
   width: 16px;
   height: 16px;
@@ -403,7 +407,6 @@ export default {
   }
 }
 
-/* 关闭按钮样式 */
 ::v-deep .close-btn {
   position: absolute;
   top: 10px;
@@ -420,7 +423,6 @@ export default {
   color: #ffffff;
 }
 
-/* 确保容器相对定位，以便按钮定位 */
 ::v-deep .custom-info-card {
   position: relative;
   background: rgba(10, 15, 24, 0.95);
@@ -431,12 +433,9 @@ export default {
   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);
@@ -481,18 +480,15 @@ export default {
 
 ::v-deep .label {
   color: #8da6c7;
-  /* 标签灰色 */
   white-space: nowrap;
 }
 
 ::v-deep .value {
   color: #ffffff;
-  /* 内容白色 */
 }
 
 ::v-deep .digital {
   font-family: 'Consolas', monospace;
-  /* 模拟数字字体 */
 }
 
 .map-legend {
@@ -545,6 +541,47 @@ export default {
   line-height: 20px;
 }
 
+.legend-dot.special-route {
+  position: relative;
+  overflow: visible !important;
+  z-index: 1;
+  border: none !important;
+  border-radius: 50%;
+}
+
+.legend-dot.special-route span {
+  position: relative;
+  z-index: 3;
+  font-weight: bold;
+}
+
+.legend-dot.special-route::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 150%;
+  height: 3px;
+  background-color: inherit;
+  opacity: 0.8;
+  transform: translate(-50%, -50%) rotate(-45deg);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.legend-dot.special-route::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  z-index: 2;
+  background-color: inherit;
+  opacity: 1;
+}
+
 .legend-label {
   flex: 1;
   color: #d0d9e2;