<template>
  <div class="alarmOn flashing" :style="alarmStyle">
    <div class=" slot-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "Alarm",
  props: {
    backgroudColor: {
      type: String,
      default: "red",
    },
    size:{
        type: Number,
        default: 100,
    }
  },
  computed: {
    alarmStyle() {
      return {
        '--size': `${this.size}px`,
        borderColor: `transparent transparent ${this.backgroudColor} transparent`,
      };
    },
  },
};
</script>

<style lang="less" scoped>
:root {
  --size: 100px; /* 默认值 */
}
@keyframes flashing {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.alarmOn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: var(--size);
  color: white;
  width: 0;
  height: 0;
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: calc(var(--size)*2) solid red;
}

.flashing {
  animation: flashing 2s infinite ease-in-out;
}

.slot-content {
  position: absolute;
  top: var(--size); /* Adjust this value to center the content vertically */
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>