47 lines
1013 B
Vue
47 lines
1013 B
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' }">
|
|
<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;
|
|
// background-color: red;
|
|
text-align: center;
|
|
}
|
|
.smallIcon {
|
|
width: 22px !important;
|
|
height: 22px !important;
|
|
}
|
|
.legendIconTitle {
|
|
cursor: pointer;
|
|
flex: 1 1;
|
|
}
|
|
&:hover {
|
|
color: #2f6b98;
|
|
}
|
|
}
|
|
</style>
|