<script setup>
|
import {VideoCameraFilled} from "@element-plus/icons-vue";
|
import {computed} from "vue";
|
|
const props = defineProps({
|
state: {
|
type: Number,
|
default: 0
|
}
|
});
|
|
const iconClass = computed(()=>{
|
const state = props.state;
|
return {
|
normal: state === 0, // 正常
|
warning: state === 1, // 告警
|
danger: state === 2, // 异常
|
};
|
})
|
</script>
|
|
<template>
|
<div class="video-item-icon" :class="iconClass">
|
<el-icon class="video-icon"><VideoCameraFilled /></el-icon>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.video-item-icon {
|
display: inline-block;
|
margin-right: 8px;
|
font-size: 20px;
|
vertical-align: middle;
|
&.normal {
|
color: #11f11b;
|
}
|
&.warning {
|
color: #f6b032;
|
animation: warning 1s infinite;
|
}
|
&.danger {
|
color: #FF0000;
|
animation: danger 1s infinite;
|
}
|
}
|
|
@keyframes warning {
|
0% {
|
color: #f6b032;
|
}
|
50% {
|
color: #FFFFFF;
|
}
|
100% {
|
color: #f6b032;
|
}
|
}
|
|
@keyframes danger {
|
0% {
|
color: #FF0000;
|
}
|
50% {
|
color: #FFFFFF;
|
}
|
100% {
|
color: #FF0000;
|
}
|
}
|
</style>
|
