JT-CIM/src/views/Map3d/components/ggsbtj.vue

<script setup>
	
</script>

<template>
	<div class="main">
		<div class="shape">
			<div class="number">320</div>
			<div class="title">总设备数量</div>
		</div>
		<div class="shape">
			<div class="number">210</div>
			<div class="title">在线设备</div>
		</div>
		<div class="shape">
			<div class="number">10</div>
			<div class="title">离线设备</div>
		</div>
		<div class="shape-red">
			<div class="number" style="color: red;">15</div>
			<div class="title">告警设备</div>
		</div>
		<div class="shape">
			<div class="number">95</div>
			<div class="title">开泵数量</div>
		</div>
		<div class="shape">
			<div class="number">85</div>
			<div class="title">关泵数量</div>
		</div>
		<div class="shape">
			<div class="number">1500吨</div>
			<div class="title">耗水总量/月</div>
		</div>
		<div class="shape">
			<div class="number">400kw/h</div>
			<div class="title">耗电总量/月</div>
		</div>
	</div>
</template>

<script>
	let jt3d = undefined;
	export default {
		data() {
			return {
				// viewersName: '', //视角标签名称
				// ImgurlList: [], //截图地址列表
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.number{
		color: rgba(29,191,205,1);
		font-weight: 600;
		margin-top: 10rem;
		width: 80rem;
		margin-left: 40rem;
		text-align: center;
	}
	.title{
		font-size: 13rem;
		text-shadow: 0 0 2rem 2rem rgba(29,191,205,1);
		margin-top: 3rem;
		margin-left: 38rem;
	}
	
	.main{
		width:100%;
		height:100%;
		display:flex;
		flex:2;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		.shape{
			background:url('@/assets/images/fang.png') no-repeat;
			background-size:100% 100%;
			width: 120rem;
			height: 56rem;
			
		}
		.shape-red{
			background:url('@/assets/images/fang-red.png') no-repeat;
			background-size:100% 100%;
			width: 120rem;
			height: 56rem;
			
		}
	}
</style>