WholeProcessPlatform/frontend/src/components/mapLegend/LegendItem.vue

<!-- LegendItem.vue -->
<template>
  <div
    class="legendItem"
    :class="{ gray: item.checked == 0, disabled: item.canBeChecked == 0 }"
  >
    <div
      class="legendIcon"
      :class="{
        smallIcon: item.layerCode == 'eng_point' || item.layerCode == 'ef_point'
      }"
    >
      <img :src="getIconPath(item.icon)" alt="" />
    </div>
    <div class="legendIconTitle">
      <span v-html="item.name" style="white-space: pre-wrap"></span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getIconPath } from '@/utils/index';
defineProps<{ item: any }>();
</script>
<style scoped lang="scss">
.legendItem {
  cursor: pointer;
  margin-right: 10px;
  padding: 4px 0;
  min-height: 30px;
  display: flex;
  flex-direction: row;
  .legendIcon {
    width: 25px !important;
    height: 25px !important;
    text-align: center;
    img {
      max-width: 80%;
      max-height: 80%;
      vertical-align: middle;
      display: inline-block;
    }
  }
  .smallIcon {
    width: 22px !important;
    height: 22px !important;
    text-align: center;
  }
  .legendIconTitle {
    cursor: pointer;
    flex: 1 1;
  }
  &:hover {
    color: #2f6b98;
  }
}
</style>