<style lang='scss' scoped>
	.electricalFire{
		width: 100%;
		&-header{
			width: 100%;
			height: 500rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: linear-gradient(180deg, #1C9AFF 0%, #FFFFFF 100%);
			&-total{
				width:300rpx;
				height: 300rpx;
				position: relative;
				&-bg{
					position: absolute;
					left: 0;
					top: 0;
					z-index: 0;
				}
				&-content{
					position: absolute;
					left:50%;
					top: 100rpx;
					width: 160rpx;
					height: 146rpx;
					transform: translateX(-80rpx);
					z-index: 1;
				}
				&-number{
					text-align: center;
					color: #fff;
					font-size: 50rpx;
					font-weight: bold;
				}
				&-text{
					width: 100%;
					height: 50rpx;
					color: #fff;
					background-color: #40AAFF;
					border-radius: 25rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			&-info{
				width: 80%;
				padding: 20rpx 0;
				/* height: 100rpx; */
				background: #FFFFFF;
				margin-top: 30rpx;
				box-shadow: 0px 0px 8px 0px rgba(202, 202, 202, 0.77);
				border-radius: 40rpx;
				display: flex;
				&-box{
					width: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #feb84a;
					&:first-child{
						border-right: 1px solid #F2F2F2;
					}
					&-icon{
						width: 56rpx;
						height: 56rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 50%;
						background-color: #feb84a;
						margin-right: 20rpx;
					}
				}
			}
		}
		&-nav-list{
			padding: $paddingTB $paddingLR;
		}
		.nav-box-icon{
			width: 80rpx;
			height: 80rpx;
			border-radius: 14rpx;
			text-align: center;
			line-height: 80rpx;
			/* background-color: #5fadfd; */
			margin-bottom: 20rpx;
		}
	}
</style>
<template>
	<view class="electricalFire">
		<view class="electricalFire-header">
			<view class="electricalFire-header-total">
				<u-image class="electricalFire-header-total-bg" width="300" height="300" src="http://static.drgyen.com/app/hc-app-power/images/home/electricalFire/deciveTotal.png"></u-image>
				<view class="electricalFire-header-total-content">
					<view class="electricalFire-header-total-number">30</view>
					<view class="electricalFire-header-total-text mt20">设备总数</view>
				</view>
			</view>
			<view class="electricalFire-header-info">
				<view class="electricalFire-header-info-box">
					<view class="electricalFire-header-info-box-icon">
						<tuiIcon name="jinggao1" color="#fff"></tuiIcon>
					</view>
					<text>故障：2</text>
				</view>
				<view class="electricalFire-header-info-box" style="color: #FE5D3F;">
					<view class="electricalFire-header-info-box-icon" style="background-color: #FE5D3F;">
						<tuiIcon name="huozai" color="#fff"></tuiIcon>
					</view>
					<text>火警：1</text>
				</view>
			</view>
		</view>
		<view class="electricalFire-nav-list mt30">
			<!-- <view class="electricalFire-nav-box">
				<view class="">
					<tuiIcon name="yanwu"></tuiIcon>
				</view>
				<view class="">设备</view>
			</view> -->
			<u-grid :col="3" :border="false">
				<u-grid-item v-for="(item,index) in navList" :key="index" @click="goNavBoxFn(item)">
					<view class="nav-box-icon" :style="{backgroundColor:item.bgColor}">
						<tuiIcon :name="item.icon" color="#fff" size="50"></tuiIcon>
					</view>
					<view class="grid-text">{{item.name}}</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				navList:[{
					name:"设备",
					icon:"yanwu",
					bgColor:"#5fadfd",
					url:"./device"
				},{
					name:"场所管理",
					icon:"yanwu",
					bgColor:"#31c7bb",
					url:"./placeManage"
				},{
					name:"告警中心",
					icon:"loudianyujing",
					bgColor:"#fc7d7b",
					url:"./alarmCenter"
				},{
					name:"消息中心",
					icon:"zixun",
					bgColor:"#fe994a",
					url:""
				}]
			}
		},
		onLoad() {},
		methods: {
			goNavBoxFn(item){
				console.log(item,"item");
				uni.navigateTo({
					url:item.url
				})
			}
		}
	}
</script>
