|
|
@@ -1,19 +1,22 @@
|
|
|
<template>
|
|
|
- <div class="riskWarn">
|
|
|
- <div class="risk-title">{{ riskTitle }}</div>
|
|
|
- <div class="risk-content">
|
|
|
- <div class="center-box">
|
|
|
- <div class="animation-box">
|
|
|
- <canvas class="rain"></canvas>
|
|
|
-
|
|
|
- <div class="bottom" :class="{
|
|
|
- bottom1: centerData.levels == 101,
|
|
|
- bottom2: centerData.levels == 102,
|
|
|
- bottom3: centerData.levels == 103,
|
|
|
- bottom4: centerData.levels == 104,
|
|
|
- bottom5: centerData.levels == 201,
|
|
|
- }">
|
|
|
- <!-- <div class="animation1">
|
|
|
+ <div class="riskWarn">
|
|
|
+ <div class="risk-title">{{ riskTitle }}</div>
|
|
|
+ <div class="risk-content">
|
|
|
+ <div class="center-box">
|
|
|
+ <div class="animation-box">
|
|
|
+ <canvas class="rain"></canvas>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="bottom"
|
|
|
+ :class="{
|
|
|
+ bottom1: centerData.levels == 101,
|
|
|
+ bottom2: centerData.levels == 102,
|
|
|
+ bottom3: centerData.levels == 103,
|
|
|
+ bottom4: centerData.levels == 104,
|
|
|
+ bottom5: centerData.levels == 201,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <!-- <div class="animation1">
|
|
|
<div class="ball"></div>
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="355.334" height="77.559"
|
|
|
viewBox="0 0 375.334 77.559" style="opacity: 0.5">
|
|
|
@@ -35,600 +38,590 @@
|
|
|
</g>
|
|
|
</svg>
|
|
|
</div> -->
|
|
|
- <div class="text-box">
|
|
|
- <div class="text1">{{
|
|
|
- centerData.levels == 101
|
|
|
- ? '正常'
|
|
|
- : centerData.levels == 102
|
|
|
- ? '低风险'
|
|
|
- : centerData.levels == 103
|
|
|
- ? '中风险'
|
|
|
- : centerData.levels == 104
|
|
|
- ? '高风险'
|
|
|
- : centerData.levels == 201
|
|
|
- ? '报警'
|
|
|
- : '--'
|
|
|
- }}</div>
|
|
|
- <div class="text2">风险分析</div>
|
|
|
- </div>
|
|
|
- <div class="icon-animation"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="total-item-monitor-box">
|
|
|
- <div class="item item1">
|
|
|
- <div class="icon-box">
|
|
|
- <div class="icon"></div>
|
|
|
- </div>
|
|
|
- <div class="item-monitor-box">
|
|
|
- <span class="title">火灾监测</span>
|
|
|
- <span class="value value1">{{ centerData.fire }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item item2">
|
|
|
- <div class="icon-box">
|
|
|
- <div class="icon"></div>
|
|
|
- </div>
|
|
|
- <div class="item-monitor-box">
|
|
|
- <span class="title">设备监测</span>
|
|
|
- <span class="value value">{{ centerData.sb }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item item3">
|
|
|
- <div class="icon-box">
|
|
|
- <div class="icon"></div>
|
|
|
- </div>
|
|
|
- <div class="item-monitor-box">
|
|
|
- <span class="title">瓦斯监测</span>
|
|
|
- <span class="value">{{ centerData.ws }}</span>
|
|
|
- <!-- <div class="">
|
|
|
+ <div class="text-box">
|
|
|
+ <div class="text1">{{
|
|
|
+ centerData.levels == 101
|
|
|
+ ? '正常'
|
|
|
+ : centerData.levels == 102
|
|
|
+ ? '低风险'
|
|
|
+ : centerData.levels == 103
|
|
|
+ ? '中风险'
|
|
|
+ : centerData.levels == 104
|
|
|
+ ? '高风险'
|
|
|
+ : centerData.levels == 201
|
|
|
+ ? '报警'
|
|
|
+ : '--'
|
|
|
+ }}</div>
|
|
|
+ <div class="text2">风险分析</div>
|
|
|
+ </div>
|
|
|
+ <div class="icon-animation"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="total-item-monitor-box">
|
|
|
+ <div class="item item1">
|
|
|
+ <div class="icon-box">
|
|
|
+ <div class="icon"></div>
|
|
|
+ </div>
|
|
|
+ <div class="item-monitor-box">
|
|
|
+ <span class="title">火灾监测</span>
|
|
|
+ <span class="value value1">{{ centerData.fire }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item item2">
|
|
|
+ <div class="icon-box">
|
|
|
+ <div class="icon"></div>
|
|
|
+ </div>
|
|
|
+ <div class="item-monitor-box">
|
|
|
+ <span class="title">设备监测</span>
|
|
|
+ <span class="value value">{{ centerData.sb }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item item3">
|
|
|
+ <div class="icon-box">
|
|
|
+ <div class="icon"></div>
|
|
|
+ </div>
|
|
|
+ <div class="item-monitor-box">
|
|
|
+ <span class="title">瓦斯监测</span>
|
|
|
+ <span class="value">{{ centerData.ws }}</span>
|
|
|
+ <!-- <div class="">
|
|
|
<span class="title">矿井瓦斯鉴定等级监测</span>
|
|
|
<span class="value">低瓦斯</span>
|
|
|
</div> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item item4">
|
|
|
- <div class="icon-box">
|
|
|
- <div class="icon"></div>
|
|
|
- </div>
|
|
|
- <div class="item-monitor-box">
|
|
|
- <span class="title">粉尘监测</span>
|
|
|
- <span class="value">{{ centerData.fc }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item item5">
|
|
|
- <div class="icon-box">
|
|
|
- <div class="icon"></div>
|
|
|
- </div>
|
|
|
- <div class="item-monitor-box">
|
|
|
- <span class="title">通风监测</span>
|
|
|
- <span class="value">{{ centerData.tf }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="item item4">
|
|
|
+ <div class="icon-box">
|
|
|
+ <div class="icon"></div>
|
|
|
+ </div>
|
|
|
+ <div class="item-monitor-box">
|
|
|
+ <span class="title">粉尘监测</span>
|
|
|
+ <span class="value">{{ centerData.fc }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item item5">
|
|
|
+ <div class="icon-box">
|
|
|
+ <div class="icon"></div>
|
|
|
+ </div>
|
|
|
+ <div class="item-monitor-box">
|
|
|
+ <span class="title">通风监测</span>
|
|
|
+ <span class="value">{{ centerData.tf }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, reactive, onMounted } from 'vue'
|
|
|
-import { rainBg } from '/@/utils/ui.js';
|
|
|
+ import { ref, reactive, onMounted } from 'vue';
|
|
|
+ import { rainBg } from '/@/utils/ui.js';
|
|
|
|
|
|
-let riskTitle = ref('一通三防风险分析与预警')
|
|
|
-let centerData = reactive({
|
|
|
+ let riskTitle = ref('一通三防风险分析与预警');
|
|
|
+ let centerData = reactive({
|
|
|
levels: 103,
|
|
|
fire: '正常',
|
|
|
sb: '正常',
|
|
|
ws: '异常',
|
|
|
fc: '正常',
|
|
|
tf: '正常',
|
|
|
-})
|
|
|
+ });
|
|
|
|
|
|
-onMounted(async () => {
|
|
|
+ onMounted(async () => {
|
|
|
rainBg('rain', 'animation-box');
|
|
|
-});
|
|
|
-
|
|
|
+ });
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-@font-face {
|
|
|
+ @font-face {
|
|
|
font-family: 'douyuFont';
|
|
|
src: url('../../../../assets/font/douyuFont.otf');
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-.riskWarn {
|
|
|
+ .riskWarn {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
|
|
|
.risk-title {
|
|
|
- position: absolute;
|
|
|
- left: 50px;
|
|
|
- top: 10px;
|
|
|
- color: #fff;
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
+ position: absolute;
|
|
|
+ left: 50px;
|
|
|
+ top: 10px;
|
|
|
+ color: #fff;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.risk-content {
|
|
|
- height: 100%;
|
|
|
- padding: 55px 0px 20px 0px;
|
|
|
- box-sizing: border-box;
|
|
|
+ height: 100%;
|
|
|
+ padding: 55px 0px 20px 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .center-box {
|
|
|
+ .center-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .animation-box {
|
|
|
+ height: fit-content;
|
|
|
+ flex: 1;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background: url('/@/assets/images/vent/alarm/center-bg.png');
|
|
|
+ background-size: contain;
|
|
|
+ background-position: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ top: 0px;
|
|
|
+
|
|
|
+ .rain {
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: flex-end;
|
|
|
-
|
|
|
- .animation-box {
|
|
|
- height: fit-content;
|
|
|
- flex: 1;
|
|
|
+ height: 90%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ width: 230px;
|
|
|
+ height: 234px;
|
|
|
+ position: absolute;
|
|
|
+ left: 112px;
|
|
|
+ top: -19px;
|
|
|
+ background: url('/@/assets/images/vent/alarm/warning-bg.png') no-repeat;
|
|
|
+ background-size: 92% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .animation1 {
|
|
|
+ width: 320px;
|
|
|
+ height: 78px;
|
|
|
+ position: absolute;
|
|
|
+ top: 4px;
|
|
|
+ left: 31px;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ .ball {
|
|
|
+ position: absolute;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
|
|
|
+ border-radius: 6px;
|
|
|
+ background-size: cover;
|
|
|
+ offset-path: path(
|
|
|
+ 'M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z'
|
|
|
+ );
|
|
|
+ animation: 10s linear 0s infinite alternate ball;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .animation2 {
|
|
|
+ width: 340px;
|
|
|
+ height: 92px;
|
|
|
+ position: absolute;
|
|
|
+ top: 36px;
|
|
|
+ left: 12px;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ // animation: rotate4 3s linear infinite;
|
|
|
+ .ball1 {
|
|
|
+ position: absolute;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
|
|
|
+ border-radius: 6px;
|
|
|
+ background-size: cover;
|
|
|
+ offset-path: path(
|
|
|
+ 'M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z'
|
|
|
+ );
|
|
|
+ animation: 10s linear 0s infinite alternate ball1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ color: #fff;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 52px;
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 2px;
|
|
|
margin-bottom: 10px;
|
|
|
- background: url('/@/assets/images/vent/alarm/center-bg.png');
|
|
|
- background-size: contain;
|
|
|
- background-position: center;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- top: 0px;
|
|
|
+ }
|
|
|
|
|
|
- .rain {
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
+ .text2 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffffdd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ width: 118px;
|
|
|
+ height: 129px;
|
|
|
+ margin: 0 auto;
|
|
|
+ top: -90px;
|
|
|
+ left: 2px;
|
|
|
+ position: relative;
|
|
|
+ animation: 0.5s linear 0s infinite alternate iconMove;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom1 {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
|
|
|
+ background-size: 80% 100%;
|
|
|
+ background-position: 50% 0%;
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ background: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ .text1 {
|
|
|
+ color: #00d8ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom2 {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
|
|
|
+ background-size: 80% 100%;
|
|
|
+ background-position: 50% 0%;
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ background: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ .text1 {
|
|
|
+ color: #fcfc22;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom3 {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
|
|
|
+ background-size: 80% 100%;
|
|
|
+ background-position: 50% 0%;
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ background: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ .text1 {
|
|
|
+ color: #ff7010;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom4 {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
|
|
|
+ background-size: 80% 100%;
|
|
|
+ background-position: 50% 0%;
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ background: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ .text1 {
|
|
|
+ color: #df4e43;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom5 {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
|
|
|
+ background-size: 80% 100%;
|
|
|
+ background-position: 50% 0%;
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ background: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ .text1 {
|
|
|
+ color: #ff2313;
|
|
|
+ // animation: color-blink 1s infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ // @keyframes color-blink {
|
|
|
+ // 0% { color: red; }
|
|
|
+ // 50% { color: blue; }
|
|
|
+ // 100% { color: red; }
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-item-monitor-box {
|
|
|
+ width: 66%;
|
|
|
+ height: 124px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ top: 122px;
|
|
|
+ left: 0;
|
|
|
+ background: url('/@/assets/images/vent/alarm/bottom1.png') no-repeat;
|
|
|
+
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
|
- .bottom {
|
|
|
- width: 100%;
|
|
|
- height: 90%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- position: absolute;
|
|
|
- z-index: 999;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- width: 230px;
|
|
|
- height: 234px;
|
|
|
- position: absolute;
|
|
|
- left: 112px;
|
|
|
- top: -19px;
|
|
|
- background: url('/@/assets/images/vent/alarm/warning-bg.png') no-repeat;
|
|
|
- background-size: 92% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .animation1 {
|
|
|
- width: 320px;
|
|
|
- height: 78px;
|
|
|
- position: absolute;
|
|
|
- top: 4px;
|
|
|
- left: 31px;
|
|
|
- z-index: 999;
|
|
|
-
|
|
|
- .ball {
|
|
|
- position: absolute;
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
|
|
|
- ;
|
|
|
- border-radius: 6px;
|
|
|
- background-size: cover;
|
|
|
- offset-path: path('M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z');
|
|
|
- animation: 10s linear 0s infinite alternate ball;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .animation2 {
|
|
|
- width: 340px;
|
|
|
- height: 92px;
|
|
|
- position: absolute;
|
|
|
- top: 36px;
|
|
|
- left: 12px;
|
|
|
- z-index: 999;
|
|
|
-
|
|
|
- // animation: rotate4 3s linear infinite;
|
|
|
- .ball1 {
|
|
|
- position: absolute;
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
|
|
|
- ;
|
|
|
- border-radius: 6px;
|
|
|
- background-size: cover;
|
|
|
- offset-path: path('M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z');
|
|
|
- animation: 10s linear 0s infinite alternate ball1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .text-box {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- color: #fff;
|
|
|
- align-items: center;
|
|
|
- margin-top: 52px;
|
|
|
-
|
|
|
- .text1 {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 600;
|
|
|
- letter-spacing: 2px;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .text2 {
|
|
|
- font-size: 14px;
|
|
|
- color: #ffffffdd;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .icon-animation {
|
|
|
- width: 118px;
|
|
|
- height: 129px;
|
|
|
- margin: 0 auto;
|
|
|
- top: -90px;
|
|
|
- left: 2px;
|
|
|
- position: relative;
|
|
|
- animation: .5s linear 0s infinite alternate iconMove;
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+
|
|
|
+ width: 400px;
|
|
|
+ height: 362px;
|
|
|
+ position: absolute;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ transform: translateX(0%) translateY(0%) rotateX(72deg);
|
|
|
+ background: url('/@/assets/images/vent/alarm/bottom.png');
|
|
|
+ background-size: 100% 100%; //lxh
|
|
|
+ animation: rotate1 3s linear infinite;
|
|
|
+
|
|
|
+ top: -93px;
|
|
|
+ left: -52px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ // width: 107px;
|
|
|
+ // height: 107px;
|
|
|
+ // left: 120px;
|
|
|
+ // top: 115px;
|
|
|
+ // animation: red-ball 10s linear infinite;
|
|
|
+ .icon-box {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+
|
|
|
+ width: 80px;
|
|
|
+ height: 42px;
|
|
|
+ top: 30px;
|
|
|
+ z-index: -1;
|
|
|
+ background: url('/@/assets/images/vent/alarm/icon-bg.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
|
- .bottom1 {
|
|
|
- background-image: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
|
|
|
- background-size: 80% 100%;
|
|
|
- background-position: 50% 0%;
|
|
|
-
|
|
|
- .icon-animation {
|
|
|
- background: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .text-box {
|
|
|
- .text1 {
|
|
|
- color: #00d8ff;
|
|
|
- }
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ top: 33px;
|
|
|
+ left: 14px;
|
|
|
+ z-index: 1;
|
|
|
+ background: url(/src/assets/images/vent/alarm/icon-animation.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ transform: translateX(0%) rotateX(70deg);
|
|
|
+ animation: rotate2 2s linear infinite;
|
|
|
}
|
|
|
|
|
|
- .bottom2 {
|
|
|
- background-image: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
|
|
|
- background-size: 80% 100%;
|
|
|
- background-position: 50% 0%;
|
|
|
-
|
|
|
- .icon-animation {
|
|
|
- background: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .text-box {
|
|
|
- .text1 {
|
|
|
- color: #FCFC22;
|
|
|
- }
|
|
|
- }
|
|
|
+ .icon {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top center;
|
|
|
+ position: relative;
|
|
|
+ top: 27px;
|
|
|
+ left: 24px;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .bottom3 {
|
|
|
- background-image: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
|
|
|
- background-size: 80% 100%;
|
|
|
- background-position: 50% 0%;
|
|
|
-
|
|
|
- .icon-animation {
|
|
|
- background: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .text-box {
|
|
|
- .text1 {
|
|
|
- color: #ff7010;
|
|
|
- }
|
|
|
- }
|
|
|
+ .item-monitor-box {
|
|
|
+ width: 112px;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ top: -58px;
|
|
|
+ left: -16px;
|
|
|
+ font-weight: 600;
|
|
|
+
|
|
|
+ padding: 0px 5px 0px 5px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 112px;
|
|
|
+ height: 24px;
|
|
|
+ left: 4px;
|
|
|
+ top: 0px;
|
|
|
+ background: url('/@/assets/images/vent/alarm/data-bg.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
|
- .bottom4 {
|
|
|
- background-image: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
|
|
|
- background-size: 80% 100%;
|
|
|
- background-position: 50% 0%;
|
|
|
-
|
|
|
- .icon-animation {
|
|
|
- background: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .text-box {
|
|
|
- .text1 {
|
|
|
- color: #DF4E43;
|
|
|
- }
|
|
|
- }
|
|
|
+ .value {
|
|
|
+ color: #2bdcff;
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
- .bottom5 {
|
|
|
- background-image: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
|
|
|
- background-size: 80% 100%;
|
|
|
- background-position: 50% 0%;
|
|
|
-
|
|
|
- .icon-animation {
|
|
|
- background: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .text-box {
|
|
|
- .text1 {
|
|
|
- color: #ff2313;
|
|
|
- // animation: color-blink 1s infinite;
|
|
|
- }
|
|
|
-
|
|
|
- // @keyframes color-blink {
|
|
|
- // 0% { color: red; }
|
|
|
- // 50% { color: blue; }
|
|
|
- // 100% { color: red; }
|
|
|
- // }
|
|
|
- }
|
|
|
+ .value1 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 800;
|
|
|
+ margin-top: 6px;
|
|
|
+ color: #ff0000;
|
|
|
+ animation: color-blink 1s infinite;
|
|
|
}
|
|
|
|
|
|
- .total-item-monitor-box {
|
|
|
-
|
|
|
- width: 66%;
|
|
|
- height: 124px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- top: 122px;
|
|
|
- left: 0;
|
|
|
- background: url('/@/assets/images/vent/alarm/bottom1.png') no-repeat;
|
|
|
-
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
-
|
|
|
- width: 400px;
|
|
|
- height: 362px;
|
|
|
- position: absolute;
|
|
|
- transform-style: preserve-3d;
|
|
|
- transform: translateX(0%) translateY(0%) rotateX(72deg);
|
|
|
- background: url('/@/assets/images/vent/alarm/bottom.png');
|
|
|
- background-size: 100% 100%; //lxh
|
|
|
- animation: rotate1 3s linear infinite;
|
|
|
-
|
|
|
- top: -93px;
|
|
|
- left: -52px;
|
|
|
- }
|
|
|
-
|
|
|
- .item {
|
|
|
- position: absolute;
|
|
|
-
|
|
|
- // width: 107px;
|
|
|
- // height: 107px;
|
|
|
- // left: 120px;
|
|
|
- // top: 115px;
|
|
|
- // animation: red-ball 10s linear infinite;
|
|
|
- .icon-box {
|
|
|
-
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
-
|
|
|
- position: relative;
|
|
|
- z-index: 0;
|
|
|
-
|
|
|
- &::before {
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
-
|
|
|
- width: 80px;
|
|
|
- height: 42px;
|
|
|
- top: 30px;
|
|
|
- z-index: -1;
|
|
|
- background: url('/@/assets/images/vent/alarm/icon-bg.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
- top: 33px;
|
|
|
- left: 14px;
|
|
|
- z-index: 1;
|
|
|
- background: url(/src/assets/images/vent/alarm/icon-animation.png) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- transform: translateX(0%) rotateX(70deg);
|
|
|
- animation: rotate2 2s linear infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: top center;
|
|
|
- position: relative;
|
|
|
- top: 27px;
|
|
|
- left: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item-monitor-box {
|
|
|
- width: 112px;
|
|
|
- color: #fff;
|
|
|
- position: relative;
|
|
|
- top: -58px;
|
|
|
- left: -16px;
|
|
|
- font-weight: 600;
|
|
|
-
|
|
|
- padding: 0px 5px 0px 5px;
|
|
|
-
|
|
|
- &::before {
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
- width: 112px;
|
|
|
- height: 24px;
|
|
|
- left: 4px;
|
|
|
- top: 0px;
|
|
|
- background: url('/@/assets/images/vent/alarm/data-bg.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .value {
|
|
|
- color: #2bdcff;
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .value1 {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 800;
|
|
|
- margin-top: 6px;
|
|
|
- color: #ff0000;
|
|
|
- animation: color-blink 1s infinite;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes color-blink {
|
|
|
- 0% {
|
|
|
- color: red;
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- color: rgb(198, 0, 0);
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- color: rgb(255, 18, 18);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item1 {
|
|
|
-
|
|
|
- top: 85px;
|
|
|
- left: 100px;
|
|
|
-
|
|
|
- .icon {
|
|
|
- background-image: url('/@/assets/images/vent/alarm/icon-fire.svg');
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item2 {
|
|
|
- top: 68px;
|
|
|
- left: -38px;
|
|
|
-
|
|
|
- .icon {
|
|
|
- background-image: url('/@/assets/images/vent/alarm/icon-device.svg');
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item3 {
|
|
|
- top: 68px;
|
|
|
- left: 247px;
|
|
|
-
|
|
|
- .icon {
|
|
|
- background-image: url('/@/assets/images/vent/alarm/icon-gas.svg');
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- // .item-monitor-box {
|
|
|
- // top: -155px;
|
|
|
-
|
|
|
- // &::before {
|
|
|
- // top: 10px;
|
|
|
- // }
|
|
|
- // }
|
|
|
- }
|
|
|
-
|
|
|
- .item4 {
|
|
|
- top: -5px;
|
|
|
- left: 247px;
|
|
|
-
|
|
|
- .icon {
|
|
|
- background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .item5 {
|
|
|
- top: -5px;
|
|
|
- left: -38px;
|
|
|
-
|
|
|
- .icon {
|
|
|
- background-image: url('/@/assets/images/vent/alarm/icon-vent.svg');
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
+ @keyframes color-blink {
|
|
|
+ 0% {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ 50% {
|
|
|
+ color: rgb(198, 0, 0);
|
|
|
+ }
|
|
|
|
|
|
- @keyframes iconMove {
|
|
|
- 100% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ color: rgb(255, 18, 18);
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- @keyframes rotate1 {
|
|
|
- 0% {
|
|
|
- transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
|
|
|
- }
|
|
|
+ .item1 {
|
|
|
+ top: 85px;
|
|
|
+ left: 100px;
|
|
|
|
|
|
- 100% {
|
|
|
- transform: translateX(0%) rotateX(72deg) rotateZ(0);
|
|
|
- }
|
|
|
- }
|
|
|
+ .icon {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/icon-fire.svg');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- @keyframes rotate2 {
|
|
|
- 0% {
|
|
|
- transform: translateX(0%) rotateX(70deg) rotateZ(0);
|
|
|
- }
|
|
|
+ .item2 {
|
|
|
+ top: 68px;
|
|
|
+ left: -38px;
|
|
|
|
|
|
- 100% {
|
|
|
- transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
|
|
|
- }
|
|
|
- }
|
|
|
+ .icon {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/icon-device.svg');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- @keyframes rotate3 {
|
|
|
- 0% {
|
|
|
- transform: translateX(0%) rotateX(80deg) rotateZ(0);
|
|
|
- }
|
|
|
+ .item3 {
|
|
|
+ top: 68px;
|
|
|
+ left: 247px;
|
|
|
|
|
|
- 100% {
|
|
|
- transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
|
|
|
- }
|
|
|
- }
|
|
|
+ .icon {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/icon-gas.svg');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
- @keyframes rotate4 {
|
|
|
- 100% {
|
|
|
- transform: translateX(0%) rotateX(80deg) rotateZ(0);
|
|
|
- }
|
|
|
+ // .item-monitor-box {
|
|
|
+ // top: -155px;
|
|
|
|
|
|
- 0% {
|
|
|
- transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
|
|
|
- }
|
|
|
- }
|
|
|
+ // &::before {
|
|
|
+ // top: 10px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
|
|
|
- @keyframes ball {
|
|
|
- 100% {
|
|
|
- offset-distance: 100%;
|
|
|
- }
|
|
|
+ .item4 {
|
|
|
+ top: -5px;
|
|
|
+ left: 247px;
|
|
|
|
|
|
- 0% {
|
|
|
- offset-distance: 0%;
|
|
|
- }
|
|
|
- }
|
|
|
+ .icon {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- @keyframes ball1 {
|
|
|
- 0% {
|
|
|
- offset-distance: 100%;
|
|
|
- }
|
|
|
+ .item5 {
|
|
|
+ top: -5px;
|
|
|
+ left: -38px;
|
|
|
|
|
|
- 100% {
|
|
|
- offset-distance: 0%;
|
|
|
- }
|
|
|
- }
|
|
|
+ .icon {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/icon-vent.svg');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ @keyframes iconMove {
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rotate1 {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
|
|
|
+ }
|
|
|
|
|
|
+ 100% {
|
|
|
+ transform: translateX(0%) rotateX(72deg) rotateZ(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-}
|
|
|
+ @keyframes rotate2 {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0%) rotateX(70deg) rotateZ(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rotate3 {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0%) rotateX(80deg) rotateZ(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rotate4 {
|
|
|
+ 100% {
|
|
|
+ transform: translateX(0%) rotateX(80deg) rotateZ(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes ball {
|
|
|
+ 100% {
|
|
|
+ offset-distance: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ 0% {
|
|
|
+ offset-distance: 0%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes ball1 {
|
|
|
+ 0% {
|
|
|
+ offset-distance: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ offset-distance: 0%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
-
|
hongrunxia
