agriculture-one-map/src/views/warningHome/components/mapLegend.vue

<template>
    <div class="map-legend">
        <div
            v-for="(item, index) in legendObj[type]"
            :key="`${type}-${item.label}-${index}`"
            class="legend-item"
        >
            <span class="legend-dot" v-if="item.color" :style="{ backgroundColor: item.color }"></span>
            <img class="legend-icon" v-else :src="item.icon" alt="">
            <span class="legend-label">{{ item.label }}</span>
        </div>
    </div>
</template>

<script setup>
import legendIcon1 from "@/assets/images/common/legend-icon-1.png";
import legendIcon2 from "@/assets/images/common/legend-icon-2.png";
import legendIcon3 from "@/assets/images/common/legend-icon-3.png";

const props = defineProps({
    type: {
        type: String,
        default: "作物分布",
    },
});

const legendObj = {
    "物候期分布": [
        { label: "抽穗期", color: "#E17C00" },
        { label: "拔节期", color: "#985300" },
        { label: "孕穗期", color: "#512D00" },
    ],
    "预警分布": [
        { label: "干旱等级Ⅰ级", color: "#BD231E" },
        { label: "干旱等级Ⅰ级", color: "#FF6600" },
        { label: "干旱等级Ⅰ级", color: "#FFCD00" },
    ],
    "农场分布": [
        { label: "冷链冷库", icon: legendIcon1 },
        { label: "加工厂", icon: legendIcon2 },
    ],
    "农服管理": [
        { label: "冷链仓库", icon: legendIcon3 },
    ],
}
</script>

<style lang="scss" scoped>
.map-legend {
    position: fixed;
    bottom: 18px;
    right: 430px;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    z-index: 9;
    color: #ffffff;
    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        .legend-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #f2a038; // 默认颜色，实际由内联样式覆盖
        }
        .legend-icon{
            width: 20px;
            height: 20px;
        }
    }
}
</style>