JT-CIM-ZHNY/src/views/Table/components/zksb.vue

<script setup>
	
</script>

<template>
	<div class="main">
		<div class="shape">
			<div class="number">23</div>
			<div class="title">水肥一体</div>
		</div>
		<div class="shape">
			<div class="number">2742</div>
			<div class="title">灌溉设备</div>
		</div>
		<div class="shape">
			<div class="number">0</div>
			<div class="title">环境监测</div>
		</div>
		<div class="shape">
			<div class="number">40</div>
			<div class="title">井电双控</div>
		</div>
		<div class="shape">
			<div class="number">9</div>
			<div class="title">虫情监测</div>
		</div>
		<div class="shape">
			<div class="number">10</div>
			<div class="title">气象监测</div>
		</div>
		<div class="shape">
			<div class="number">2</div>
			<div class="title">土壤墒情</div>
		</div>
		<div class="shape">
			<div class="number">15</div>
			<div class="title">视频监控</div>
		</div>
		<div class="shape">
			<div class="number">5</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);
		color: rgb(200, 250, 255);
		font-weight: 700;
		margin-top: 11rem;
		font-size: 25rem;
		margin-left: -8rem;
	}
	.title{
		color: rgb(200, 250, 255);
		font-size: 18rem;
		font-weight: 700;
		// text-shadow: 0 0 2rem 2rem rgba(29,191,205,1);
		margin-top: 4rem;
		margin-left: -9rem;
	}
	
	.main{
		width:90%;
		height:97%;
		display:flex;
		margin-left: 25rem;
		margin-top: 2rem;
		flex:2;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		.shape{
			background:url('@/assets/images/sbbjt.png') no-repeat;
			background-size:90% 80%;
			width: 100rem;
			height: 56rem;
			
		}
	}
</style>