sl-sfy-safety/src/views/map-config/mini-map/components/DefaultTip.vue

<template>
  <div class="tip-content">
    <span>默认摄像头</span>
    <div v-if="props.position === TipPositionEnum.TOP" class="tip-narrow bottom"></div>
    <div v-else-if="props.position === TipPositionEnum.BOTTOM" class="tip-narrow top"></div>
    <div v-else-if="props.position === TipPositionEnum.RIGHT" class="tip-narrow left"></div>
    <div v-else class="tip-narrow right"></div>
  </div>
</template>

<script setup lang="ts">
  import { TipPositionEnum } from '../type';

  const props = withDefaults(defineProps<{ position: TipPositionEnum }>(), {
    position: TipPositionEnum.TOP,
  });
</script>

<style scoped lang="scss">
  .tip-content {
    position: relative;
    width: 86px;
    height: 35px;
    background-color: #3c3c3d;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    margin: 5px;
  }

  .tip-narrow {
    position: absolute;
    border: 5px solid transparent;

    &.bottom {
      top: 100%;
      left: 50%;
      border-top-color: #3c3c3d;
      transform: translateX(-50%);
    }

    &.top {
      top: 0%;
      left: 50%;
      border-bottom-color: #3c3c3d;
      transform: translate(-50%, -100%);
    }

    &.left {
      top: 50%;
      left: 0%;
      border-right-color: #3c3c3d;
      transform: translate(-100%, -50%);
    }

    &.right {
      top: 50%;
      right: 0%;
      border-left-color: #3c3c3d;
      transform: translate(100%, -50%);
    }
  }
</style>