<template>
|
<div class="legend-container">
|
<div class="legend-title">水位高度图例</div>
|
<ul class="legend-list">
|
<li v-for="(item, index) in waterHeightLevels" :key="index" class="legend-item">
|
<span class="legend-color-box" :style="{ 'background-color': item.color }"></span>
|
<span class="legend-label">{{ item.height }} 米</span>
|
</li>
|
</ul>
|
</div>
|
</template>
|
|
<script setup>
|
import { onMounted, ref } from "vue";
|
|
// 定义水位高度数据
|
const waterHeightLevels = ref([
|
{ height: 0.5, color: "#09a2dc" },
|
{ height: 1.0, color: "#58c196" },
|
{ height: 1.5, color: "#bedf74" },
|
{ height: 2.0, color: "#d7f06e" },
|
{ height: 2.5, color: "#ffe930" },
|
{ height: 3.0, color: "#fdd10a" },
|
{ height: 4.0, color: "#feb652" },
|
{ height: 5.0, color: "#fd7f06" },
|
{ height: 10.0, color: "#fe2b07" },
|
]);
|
onMounted(()=>{
|
})
|
</script>
|
|
<style lang="less" scoped>
|
.legend-container {
|
padding: 0.8rem;
|
border: 1px solid #ddd;
|
border-radius: 8px;
|
max-width: 100%;
|
width: auto;
|
font-size: clamp(10px, 1vw, 14px);
|
}
|
|
.legend-title {
|
margin-bottom: 8px;
|
width: 100%;
|
text-align: center;
|
letter-spacing: 2px;
|
font-weight: 600;
|
font-size: clamp(16px, 1vw, 20px);
|
}
|
|
.legend-list {
|
list-style: none;
|
padding: 0;
|
display: flex;
|
flex-direction: column;
|
gap: 0.5rem;
|
}
|
|
.legend-item {
|
display: flex;
|
align-items: center;
|
}
|
|
.legend-color-box {
|
width: 4rem;
|
height: 1rem;
|
margin-right: 0.5rem;
|
margin-left: 0.5rem;
|
display: inline-block;
|
}
|
|
.legend-label {
|
font-size: inherit;
|
}
|
</style>
|
