<!--
|
* @Author : yuan
|
* @Date : 2026-01-17 14:51:39
|
* @LastEditors : yuan
|
* @LastEditTime : 2026-01-17 15:13:50
|
* @FilePath : \applications\drone-command\src\views\dataCockpit\components\LegendBar.vue
|
* @Description :
|
* Copyright 2026 OBKoro1, All Rights Reserved.
|
* 2026-01-17 14:51:39
|
-->
|
<template>
|
<div class="legend-bar">
|
<div class="legend-title" data-text="图例">图例</div>
|
<div class="legend-item">
|
<span class="legend-color defense"></span>
|
<span class="legend-text" data-text="防区">防区</span>
|
</div>
|
<div class="legend-item">
|
<span class="legend-color partition"></span>
|
<span class="legend-text" data-text="区域">区域</span>
|
</div>
|
<div class="legend-item">
|
<img class="legend-icon drone" :src="droneIcon" alt="无人机" />
|
<span class="legend-text" data-text="无人机">无人机</span>
|
</div>
|
<div class="legend-item">
|
<img class="legend-icon" :src="commandPostIcon" alt="指挥点" />
|
<span class="legend-text" data-text="指挥点">指挥点</span>
|
</div>
|
<div class="legend-item">
|
<img class="legend-icon" :src="equipmentIcon" alt="设备" />
|
<span class="legend-text" data-text="设备">设备</span>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import droneIcon from '@/assets/images/dataCockpit/legend/drone.png'
|
import commandPostIcon from '@/assets/images/dataCockpit/legend/command-post.png'
|
import equipmentIcon from '@/assets/images/dataCockpit/legend/equipment.png'
|
</script>
|
|
<style scoped lang="scss">
|
.legend-bar {
|
display: flex;
|
align-items: center;
|
gap: 20px;
|
padding: 10px 16px;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-size: 14px;
|
color: #FFFFFF;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
}
|
|
.legend-title {
|
font-weight: 800;
|
}
|
|
.legend-item {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
font-size: 12px;
|
}
|
|
.legend-title,
|
.legend-text {
|
position: relative;
|
white-space: nowrap;
|
|
text-shadow:
|
-1px -1px 0 black,
|
1px -1px 0 black,
|
-1px 1px 0 black,
|
1px 1px 0 black;
|
}
|
|
.legend-color {
|
width: 30px;
|
height: 30px;
|
border-radius: 0;
|
}
|
|
.legend-color.defense {
|
background: radial-gradient(50% 50% at 50% 50%, #2aedbf 0%, #012b11 100%);
|
border: 1px solid #19d266;
|
}
|
|
.legend-color.partition {
|
background: radial-gradient(50% 50% at 50% 50%, #ffc609 0%, #583300 100%);
|
border: 1px solid #ffcd2a;
|
}
|
|
.legend-icon {
|
width: 30px;
|
height: 42px;
|
display: block;
|
}
|
|
.legend-icon.drone {
|
width: 30px;
|
height: 30px;
|
display: block;
|
}
|
</style>
|
