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

<script setup>
	
</script>

<template>
	<div class="main">
		<div class="number1">
			<div class="number">320</div>
			<div class="title">总设备数量</div>
		</div>
		<div class="inline">
			<div class="number">210</div>
			<div class="title">在线设备</div>
		</div>
		<div class="online">
			<div class="number">10</div>
			<div class="title">离线设备</div>
		</div>
		<div class="warning">
			<div class="number" style="color: red;">15</div>
			<div class="title">告警设备</div>
		</div>
		<div class="open">
			<div class="number">95</div>
			<div class="title">开泵数量</div>
		</div>
		<div class="close">
			<div class="number">85</div>
			<div class="title">关泵数量</div>
		</div>
		<div class="water">
			<div class="number">1500吨</div>
			<div class="title">耗水总量/月</div>
		</div>
		<div class="elect">
			<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::-webkit-scrollbar {
		width: 0px;
		background-color: rgba(0,0,0,0);
		// 滚动条整体样式
		// 高宽分别对应横竖滚动条的尺寸
	}
	
	.main{
		width:100%;
		height:100%;
		display:flex;
		margin-top: 10rem;
		padding-bottom: 5rem;
		flex:2;
		overflow: scroll;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		.number1{
			background:url('@/assets/images/shebei/number.png') no-repeat;
			background-size:100% 100%;
			width: 120rem;
			height: 56rem;
		}
		.close{
			background:url('@/assets/images/shebei/close.png') no-repeat;
			background-size:100% 100%;
			width: 120rem;
			height: 56rem;
			margin-top: 5rem;
		}
		.elect{
			background:url('@/assets/images/shebei/elect.png') no-repeat;
			background-size:100% 100%;
			width: 120rem;
			height: 56rem;
			margin-top: 5rem;
		}
		.inline{
			background:url('@/assets/images/shebei/inline.png') no-repeat;
			background-size:100% 100%;
			width: 120rem;
			height: 56rem;
		}
		.online{
			background:url('@/assets/images/shebei/online.png') no-repeat;
			background-size:100% 100%;
			width: 120rem;
			height: 56rem;
			margin-top: 5rem;
		}
		.water{
			background:url('@/assets/images/shebei/water.png') no-repeat;
			background-size:100% 100%;
			width: 120rem;
			height: 56rem;
			margin-top: 5rem;
		}
		.warning{
			background:url('@/assets/images/shebei/warning.png') no-repeat;
			background-size:100% 100%;
			width: 120rem;
			margin-top: 5rem;
			height: 56rem;
		}
		.open{
			background:url('@/assets/images/shebei/open.png') no-repeat;
			background-size:100% 100%;
			width: 120rem;
			height: 56rem;
			margin-top: 5rem;
		}
	}
</style>