forked from dyf/dyf-vue-ui
81 lines
1.9 KiB
Vue
81 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<div class="alarmOvery">
|
|
<div class="alarm">
|
|
<div class="alarmIMG">
|
|
<div class="alarmNum">{{ alarmOverview.activeAlarms || '0' }} <span>个</span></div>
|
|
</div>
|
|
<div class="alarmText">正在报警</div>
|
|
</div>
|
|
|
|
<div class="alarm">
|
|
<div class="alarmIMG">
|
|
<div class="alarmNum">{{ alarmOverview.totalAlarms || '0' }} <span>个</span></div>
|
|
</div>
|
|
<div class="alarmText">报警总数</div>
|
|
</div>
|
|
<div class="alarm">
|
|
<div class="alarmIMG">
|
|
<div class="alarmNum">{{ alarmOverview.processedAlarms || '0' }} <span>个</span></div>
|
|
</div>
|
|
<div class="alarmText">已处理</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
alarmOverview: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.alarmOvery {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
align-items: center;
|
|
margin-top: 7.5vh;
|
|
text-align: center;
|
|
font-size: 0.7vw;
|
|
color: #DEEFFF;
|
|
padding: 1.5vw;
|
|
}
|
|
|
|
.alarmIMG {
|
|
width: 12vh;
|
|
height: 12vh;
|
|
background: url(@/assets/homeIndex/alarmIMG.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.alarmText {
|
|
padding-top: 1.5vh;
|
|
}
|
|
|
|
.alarmNum {
|
|
line-height: 12vh;
|
|
display: inline-block;
|
|
position: relative;
|
|
background: radial-gradient(circle at center, #F63838 0%, #FFFFFF 49%);
|
|
/* 兼容写法 */
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
z-index: 1;
|
|
overflow: visible;
|
|
font-size: 1.3vw;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.alarmNum span {
|
|
font-size: 0.6vw;
|
|
}
|
|
</style> |