<div class="dataScreen-main-chart">
<div v-show="state.safetyDoorNum === 0" class="big-data-down-center-two-content">
<div class="circle" v-for="i in 4" :key="i"></div>
<div class="text-box">
<span class="text">暂无异常</span>
</div>
</div>
<div v-show="state.safetyDoorNum > 0" class="warningBg" />
</div>
</div>
// gif动图
.warningBg {
width: 300px;
height: 300px;
background: url("./images/warning.png") 0 0 no-repeat;
background-size: 300px 300px !important;
animation: twinkling 0.8s infinite ease-in-out;
}
@keyframes twinkling {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
// 暂无异常圆圈
.big-data-down-center-one-content {
width: 300px;
height: 300px;
margin: auto;
margin-top: 45px;
.circle {
position: absolute;
z-index: 10;
background: #000000;
background: rgb(0 0 0 / 1%);
border-radius: 50%;
}
.text-box {
z-index: 11;
margin-top: auto;
color: #c0d1f2;
text-align: center;
.text {
font-size: 18px;
font-weight: bold;
line-height: 300px;
}
}
.circle:nth-of-type(1) {
width: 300px;
height: 290px;
box-shadow: 0 0 1px 0 #869fe4, inset 0 0 10px 0 #869fe4;
animation: turnAround 6s infinite linear;
}
.circle:nth-of-type(2) {
width: 285px;
height: 300px;
box-shadow: 0 0 1px 0 #3397f2, inset 0 0 10px 0 #3397f2;
animation: turnAround 10s infinite linear;
}
.circle:nth-of-type(3) {
width: 325px;
height: 300px;
box-shadow: 0 0 1px 0 #3eaadc, inset 0 0 10px 0 #3eaadc;
animation: turnAround 5s infinite linear;
}
.circle:nth-of-type(4) {
width: 300px;
height: 325px;
box-shadow: 0 0 1px 0 #0099ff, inset 0 0 10px 0 #0099ff;
animation: turnAround 15s infinite linear;
}
@keyframes turnAround {
100% {
transform: rotate(360deg);
}
}
}