de-net/src/view/components/red-dot.vue

<template>
    <div class="red-dot" 
        :style="{width: size + 'px', height: size + 'px',
        background: color}">
    </div>
</template>

<script setup>
import { defineProps } from "vue";
defineProps({
    size: {
        type: String,
        default: '8'
    },
    color: {
        type: String,
        default: '#FF0000'
    },
});
</script>

<style lang="scss" scoped>
.red-dot {
    border-radius: 50%;
}
</style>