shangyun/Web/src/components/flight-area/FlightAreaIcon.vue

<template>
  <div class="flex-row flex-align-center">
    <div class="shape" :class="type" :style="isCircle ? 'border-radius: 50%;' : ''"></div>
    <div class="ml5" v-if="!hideTitle">{{ FlightAreaTypeTitleMap[type][isCircle ? EGeometryType.CIRCLE :
      EGeometryType.POLYGON] }}</div>
  </div>
</template>

<script lang="ts" setup>
import { EFlightAreaType, EGeometryType, FlightAreaTypeTitleMap } from '../../types/flight-area'

const props = defineProps<{
  type: EFlightAreaType,
  isCircle: boolean,
  hideTitle?: boolean
}>()
</script>

<style lang="scss">
.nfz {
  border-color: red;
}

.dfence {
  border-color: $tag-green;
}

.shape {
  width: 16px;
  height: 16px;
  border-width: 3px;
  border-style: solid;
}
</style>