173 lines
4.1 KiB
Vue
173 lines
4.1 KiB
Vue
<style lang='scss' scoped>
|
||
@keyframes myrotate{
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
.rotateAction{
|
||
animation:myrotate 2s linear infinite;
|
||
}
|
||
.smoke{
|
||
|
||
width: 100%;
|
||
/* height: 100%; */
|
||
/* background-color: #eee; */
|
||
&-top{
|
||
width: 100%;
|
||
height: 450rpx;
|
||
position: relative;
|
||
&-bottom-wave{
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 1;
|
||
}
|
||
&-circle{
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
position: relative;
|
||
margin: 0 auto;
|
||
&-bg{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
}
|
||
&-line{
|
||
width: 260rpx;
|
||
height: 260rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
margin-left: -130rpx;
|
||
margin-top: -130rpx;
|
||
/* transform: translate(-50%,-50%); */
|
||
z-index: 2;
|
||
}
|
||
&-text{
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
width: 100%;
|
||
/* height: 60rpx; */
|
||
font-size: 50rpx;
|
||
z-index: 99;
|
||
transform: translate(0,-50%);
|
||
text-align: center;
|
||
color: #1C87FF;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
&-alarm-list{
|
||
padding: 30rpx $paddingLR;
|
||
}
|
||
&-alarm-box{
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: $box-shadow;
|
||
margin-bottom: 30rpx;
|
||
&-info{
|
||
padding: 0 10rpx;
|
||
|
||
}
|
||
}
|
||
&-normal{
|
||
width: 100%;
|
||
text-align: center;
|
||
&-img{
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin: 0 auto;
|
||
margin-top: 100rpx;
|
||
}
|
||
&-text{
|
||
padding-top: 20rpx;
|
||
width: 200rpx;
|
||
margin: 0 auto;
|
||
color: #96BBF3;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="smoke">
|
||
<!-- <u-navbar back-text="返回" title="剑未配妥，出门已是江湖" :background="background" :border-bottom="false"></u-navbar> -->
|
||
<view class="smoke-top" :style="{backgroundColor:getCurrentMainColor}">
|
||
<view class="smoke-top-circle">
|
||
<u-image class="smoke-top-circle-bg" width="100%" height="100%" src="http://static.drgyen.com/app/hc-app-power/images/home/smoke/circle.png"></u-image>
|
||
<view class="smoke-top-circle-line">
|
||
|
||
</view>
|
||
<u-image class="rotateAction" width="100%" height="100%" src="http://static.drgyen.com/app/hc-app-power/images/home/smoke/line.png"></u-image>
|
||
<view class="smoke-top-circle-text" :style="{color:getCurrentMainColor}">{{currentState}}</view>
|
||
</view>
|
||
<u-image class="smoke-top-bottom-wave" width="100%" height="128rpx" src="http://static.drgyen.com/app/hc-app-power/images/home/smoke/wave.png"></u-image>
|
||
</view>
|
||
<view class="smoke-normal" v-if="currentState=='正常'">
|
||
<view class="smoke-normal-img">
|
||
<u-image width="100%" height="100%" src="/static/images/home/smoke/normal.png"></u-image>
|
||
</view>
|
||
<view class="smoke-normal-text">
|
||
场所很安全暂无设备异常
|
||
</view>
|
||
</view>
|
||
<mescroll-body v-else top="0" ref="mescrollRef" bottom="100" height="400" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||
<view class="smoke-alarm-list">
|
||
<view class="smoke-alarm-box flex-center" v-for="(item,index) in 3" :key="index">
|
||
<tuiIcon name="huozai" color="#FA5E42" size="60"></tuiIcon>
|
||
<view class="smoke-alarm-box-info">
|
||
<view class="smoke-alarm-box-info-name">火警为最高级报警，提示头部：已火警为首</view>
|
||
<view class="smoke-alarm-box-info-subtitle text--mini--grey">福建省福州市闽侯县上街镇乌龙江中青大厦</view>
|
||
</view>
|
||
<u-icon name="arrow-right" color="#999"></u-icon>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentState:"故障",
|
||
currentMainColor:""
|
||
}
|
||
},
|
||
mixins:[MescrollMixin],
|
||
computed:{
|
||
getCurrentMainColor(){
|
||
switch (this.currentState){
|
||
case "正常":
|
||
return "#1C9AFF";
|
||
break;
|
||
case "火警":
|
||
return "#FF4E2D";
|
||
break;
|
||
case "故障":
|
||
return "#FFAE2E";
|
||
break;
|
||
default:
|
||
return "#1C9AFF";
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
uni.setNavigationBarColor({
|
||
frontColor: '#ffffff',
|
||
backgroundColor: this.getCurrentMainColor,
|
||
})
|
||
},
|
||
methods: {}
|
||
}
|
||
</script>
|