<!--
|
* @Date: 2024-01-08 19:38:05
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-01-13 22:09:04
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/components/newComp/Status.vue
|
-->
|
<template>
|
<div class="top">
|
<slot name="before"></slot>
|
<div class="top-item top-1">
|
<div>{{info.stop}}</div>
|
<div>停机状态</div>
|
</div>
|
<div class="top-item top-2">
|
<div>{{info.run}}</div>
|
<div>运行状态</div>
|
</div>
|
<div class="top-item top-3">
|
<div>{{info.idle}}</div>
|
<div>待机状态</div>
|
</div>
|
<div class="top-item top-4">
|
<div>{{info.alarm}}</div>
|
<div>报警状态</div>
|
</div>
|
<slot name="after"></slot>
|
<!-- <div class="top-item top-5">
|
<div>16</div>
|
<div>停机状态</div>
|
</div> -->
|
</div>
|
</template>
|
<script>
|
export default {
|
props: ['info'],
|
}
|
</script>
|
<style lang="scss" scoped>
|
.top {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.top-item {
|
font-size: 29px;
|
color: #F7F8FA;
|
div:first-child {
|
width: 99px;
|
height: 99px;
|
text-align: center;
|
line-height: 99px;
|
background: url('./img/1.png') 0 0 no-repeat;
|
background-size: contain;
|
color: #D6EEEF;
|
}
|
div:last-child {
|
margin-top: 20px;
|
font-size: 24px;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
color: #E4FFFE;
|
line-height: 29px;
|
text-shadow: 0px 1px 4px rgba(122,255,248,0.5);
|
}
|
}
|
.top-2 {
|
div:first-child {
|
background-image: url('./img/2.png')
|
}
|
|
}
|
.top-3 {
|
div:first-child {
|
background-image: url('./img/3.png')
|
}
|
}
|
.top-4 {
|
div:first-child {
|
background-image: url('./img/4.png')
|
}
|
}
|
.top-5 {
|
div:first-child {
|
background-image: url('./img/5.png')
|
}
|
}
|
.top-item ~.top-item {
|
margin-left: 100px;
|
}
|
}
|
</style>
|
