dtScreen/src/components/ui/MapLegend.vue

<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>
        
        <span class="legend-label">{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MapLegend',
  data() {
    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' }  // 红色
      ]
    };
  }
};
</script>

<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); /* 底部阴影让它浮起来 */
  overflow: hidden;
  user-select: none;
}

/* ================== 头部标题 ================== */
.legend-header {
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  padding: 12px 16px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  letter-spacing: 1px;
}

/* ================== 列表区域 ================== */
.legend-list {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px; /* 控制每一行之间的间距 */
}

.legend-item {
  display: flex;
  align-items: center;
}

/* ================== 左侧图标统一底座 ================== */
.legend-icon {
  width: 22px;
  height: 22px;
  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; /* 内阴影增加立体感 */
}

/* 单字图标样式 */
.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-label {
  /* 提取图片中极其特殊的淡薄荷绿文字颜色 */
  color: #8ce6cc; 
  font-size: 14px;
  letter-spacing: 1px;
}
</style>