<template>
|
<div class="legend-container">
|
<div class="legend-title">监测位置图例</div>
|
<ul class="legend-list">
|
<li v-for="(item, index) in legendItems" :key="index" class="legend-item">
|
<img :src="getImageUrl(item.icon)" :alt="item.label" class="legend-icon" />
|
<span class="legend-label">{{ item.label }}</span>
|
</li>
|
</ul>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from "vue";
|
|
// 定义图例数据
|
const legendItems = ref([
|
{ icon: "崩塌.png", label: "崩塌" },
|
{ icon: "泥石流.png", label: "泥石流" },
|
{ icon: "滑坡.png", label: "滑坡" },
|
]);
|
|
// 获取 public 下的图片路径
|
const getImageUrl = (iconName) => {
|
return `/images/poi/${iconName}`;
|
};
|
|
onMounted(() => {
|
// console.log("这里是图例集合！");
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.legend-container {
|
padding: 1rem; // 减少内边距
|
// background-color: #f9f9f9;
|
border: 1px solid #ddd;
|
border-radius: 8px;
|
max-width: 100%;
|
width: auto;
|
font-size: clamp(10px, 1vw, 14px); // 更小的基础字号
|
}
|
|
.legend-title {
|
width: 100%;
|
// border: 1px solid #ddd;
|
margin-bottom: 10%;
|
text-align: center;
|
letter-spacing: 2px;
|
font-weight: 600;
|
font-size: clamp(16px, 1vw, 20px); // 更小的基础字号
|
|
}
|
|
.legend-list {
|
list-style: none;
|
padding: 0;
|
// margin: 0;
|
display: flex;
|
flex-direction: column; // 改为垂直方向布局
|
gap: 0.5rem; // 减少间距
|
}
|
|
.legend-item {
|
display: flex;
|
align-items: center;
|
}
|
|
.legend-icon {
|
width: 23px; // 减少图标大小
|
height: 25px; // 减少图标大小
|
margin-right: 0.5rem; // 减少右边距
|
}
|
|
.legend-label {
|
font-size: inherit; // 继承父级字体大小
|
}
|
</style>
|
