修改MapLegend组件改用图片图标；调整首页布局；

src/components/ui/MapLegend.vue

@@ -1,21 +1,13 @@
 <template>
   <div class="map-legend">
     <div class="legend-header">图例</div>
-    
+
     <div class="legend-list">
-      <div 
-        class="legend-item" 
-        v-for="(item, index) in legendData" 
-        :key="index"
-      >
-        <div class="legend-icon" :style="{ backgroundColor: item.color }">
-          <span v-if="item.type === 'text'">{{ item.char }}</span>
-          
-          <div v-else-if="item.type === 'signal'" class="css-signal-icon">
-            <i></i><i></i><i></i>
-          </div>
+      <div class="legend-item" v-for="(item, index) in legendData" :key="index">
+        <div class="legend-icon">
+          <img :src="item.iconUrl" />
         </div>
-        
+
         <span class="legend-label">{{ item.label }}</span>
       </div>
     </div>
@@ -29,17 +21,17 @@ export default {
     return {
       // 完全按照图片内容配置的数据字典
       legendData: [
-        { type: 'text', char: '中', label: '中心计划', color: '#3b5cff' },
-        { type: 'text', char: '干', label: '干线协调', color: '#2ecc71' },
-        { type: 'text', char: '勤', label: '勤务路线', color: '#e74c3c' },
-        { type: 'text', char: '定', label: '定周期控制', color: '#3498db' },
-        { type: 'text', char: '感', label: '感应控制', color: '#e67e22' },
-        { type: 'text', char: '自', label: '自适应控制', color: '#9b59b6' },
-        { type: 'text', char: '手', label: '手动控制', color: '#f39c12' },
-        { type: 'text', char: '特', label: '特殊控制', color: '#a0522d' }, // 棕色
-        { type: 'signal', label: '离线', color: '#5b5c60' }, // 灰色
-        { type: 'signal', label: '降级', color: '#f1c40f' }, // 黄色
-        { type: 'signal', label: '故障', color: '#e74c3c' }  // 红色
+        { label: '中心计划', iconUrl: require('@/assets/images/icon_zhong.png') },
+        { label: '干线协调', iconUrl: require('@/assets/images/icon_ganxian.png') },
+        { label: '勤务路线', iconUrl: require('@/assets/images/icon_qin.png') },
+        { label: '定周期控制', iconUrl: require('@/assets/images/icon_ding.png') },
+        { label: '感应控制', iconUrl: require('@/assets/images/icon_gan.png') },
+        { label: '自适应控制', iconUrl: require('@/assets/images/icon_zi.png') },
+        { label: '手动控制', iconUrl: require('@/assets/images/icon_shou.png') },
+        { label: '特殊控制', iconUrl: require('@/assets/images/icon_te.png') },
+        { label: '离线', iconUrl: require('@/assets/images/icon_lixian.png') },
+        { label: '降级', iconUrl: require('@/assets/images/icon_jiangji.png') },
+        { label: '故障', iconUrl: require('@/assets/images/icon_guzhang.png') }
       ]
     };
   }
@@ -49,13 +41,14 @@ export default {
 <style scoped>
 /* ================== 容器主面板 ================== */
 .map-legend {
-  width: 160px;
-  background: rgba(16, 28, 56, 0.85); /* 深蓝色半透明背景 */
-  backdrop-filter: blur(10px);        /* 毛玻璃模糊效果 */
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid rgba(100, 150, 255, 0.2); /* 淡淡的科技感边框 */
-  border-radius: 10px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); /* 底部阴影让它浮起来 */
+  width: 130px;
+  background: radial-gradient(circle at 20% 0%, rgba(40,120,200,0.2) 0%, rgba(20,60,130,0.4) 70%);
+  box-shadow: inset 0px 0px 0.625rem 0px rgba(88, 146, 255, 0.4), inset 1.25rem 0px 1.875rem -0.625rem rgba(88, 146, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 7px;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  /* 底部阴影让它浮起来 */
   overflow: hidden;
   user-select: none;
 }
@@ -63,20 +56,23 @@ export default {
 /* ================== 头部标题 ================== */
 .legend-header {
   color: #ffffff;
-  font-size: 15px;
-  font-weight: bold;
+  font-size: 14px;
+  font-weight: 600;
   padding: 12px 16px;
-  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
+  /* background: linear-gradient(180deg, rgba(24, 144, 255, 0.1) 0%, rgba(24, 144, 255, 0.3) 100%); */
+  /* box-shadow: inset 0 0 8px rgba(24, 144, 255, 0.2); */
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   letter-spacing: 1px;
+  background: rgba(119,161,255,0.23);
 }
 
 /* ================== 列表区域 ================== */
 .legend-list {
-  padding: 12px 16px;
+  padding: 12px 8px;
   display: flex;
   flex-direction: column;
-  gap: 14px; /* 控制每一行之间的间距 */
+  gap: 12px;
+  /* 控制每一行之间的间距 */
 }
 
 .legend-item {
@@ -86,50 +82,29 @@ export default {
 
 /* ================== 左侧图标统一底座 ================== */
 .legend-icon {
-  width: 22px;
-  height: 22px;
-  border-radius: 50%; /* 正圆形 */
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  /* 正圆形 */
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: 12px; /* 和右侧文字的间距 */
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3) inset; /* 内阴影增加立体感 */
+  margin-right: 8px;
+  /* 和右侧文字的间距 */
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3) inset;
+  /* 内阴影增加立体感 */
 }
 
 /* 单字图标样式 */
-.legend-icon span {
-  color: #ffffff;
-  font-size: 12px;
-  font-weight: bold;
-  transform: scale(0.9); /* 汉字稍微缩放一点更好看 */
-}
-
-/* ================== 纯 CSS 手绘信号灯 ================== */
-.css-signal-icon {
-  width: 8px;
-  height: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.9);
-  border-radius: 3px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  align-items: center;
-  box-sizing: border-box;
-}
-
-/* 信号灯里面的三个小圆点 */
-.css-signal-icon i {
-  display: block;
-  width: 2px;
-  height: 2px;
-  background-color: #ffffff;
-  border-radius: 50%;
+.legend-icon img {
+  width: 20px;
+  height: 20px;
 }
 
 /* ================== 右侧文字标签 ================== */
 .legend-label {
   /* 提取图片中极其特殊的淡薄荷绿文字颜色 */
-  color: #8ce6cc; 
+  color: #6CFFD2;
   font-size: 14px;
   letter-spacing: 1px;
 }

src/views/Home.vue

@@ -119,6 +119,12 @@
       </div>
     </template>
 
+    <template #center>
+      <div class="map-legend-pos">
+        <MapLegend></MapLegend>
+      </div>
+    </template>
+
   </DashboardLayout>
 </template>
 
@@ -133,6 +139,7 @@ import TechTabPane from '@/components/ui/TechTabPane.vue';
 import TickDonutChart from '@/components/ui/TickDonutChart.vue';
 import AlarmMessageList from '@/components/ui/AlarmMessageList.vue';
 import TechTable from '@/components/ui/TechTable.vue';
+import MapLegend from '@/components/ui/MapLegend.vue';
 
 
 const mockDeviceData = {
@@ -175,7 +182,8 @@ export default {
     TechTabPane,
     TickDonutChart,
     AlarmMessageList,
-    TechTable
+    TechTable,
+    MapLegend
   },
   data() {
     return {
@@ -304,4 +312,9 @@ export default {
   color: #32F6F8;
   text-decoration: underline;
 }
+.map-legend-pos {
+  position: absolute;
+  bottom: 100px;
+  right: 0;
+}
 </style>