noob-components/packages/base/item/light-box.vue

<template>
    <div v-if="data !== null" class="number">{{ data }}</div>
    <div v-if="data === null && status == 0" class="box green"></div>
    <div v-if="data === null && status == 1" class="box red"></div>
    <div v-if="data === null && status == 2" class="box yellow"></div>
    <div v-if="data === null && status == 3" class="box red"></div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";

const { state, commit, dispatch } = useStore();

const prop = defineProps({
    status: {
        type: Number,
        default: null,
    },
    data: {
        type: Number,
        default: null,
    },
});

onMounted(() => { });
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.box {
    float: left;
    width: 20px;
    height: 20px;
    margin: 3.6px;
}

.red {
    background: red;
    background-size: 5px 5px;
    border-radius: 50%;
    animation: 13s red infinite;
    box-shadow:
        0 0 20px #c00 inset,
        0 0 10px red;
}

.yellow {
    background: yellow;
    background-size: 5px 5px;
    border-radius: 50%;
    animation: 13s yellow infinite;
    box-shadow:
        0 0 20px #cc0 inset,
        0 0 10px yellow;
}

.green {
    background: green;
    background-size: 5px 5px;
    border-radius: 50%;
    animation: 13s green infinite;
    box-shadow:
        0 0 20px #0c0 inset,
        0 0 10px lime;
}

.number {
    float: left;
    width: 15px;
    height: 20px;
    padding-top: 4px;
}
</style>