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

<script setup>

</script>

<template>
	<el-row>
		<el-col :span="12">
			<div class="main">
				<div class="shape">
					<!-- <span style="color: rgb(200, 250, 255);margin-left: -73rem;">耕地质量</span> -->
					<div class="shape2">
						<img src="@/assets/images/dengji1.png" style="width: 46rem;vertical-align: -20%;"/>
						<span style="margin-left: 20rem;font-weight: 400;font-size: 20rem;color: rgb(200, 250, 255);">23063</span>
						<span style="font-size: 10rem;color: rgb(200, 250, 255);">公顷</span>
					</div>
					<div class="shape3">
						<img src="@/assets/images/dengji2.png" style="width: 46rem;vertical-align: -20%;"/>
						<span style="margin-left: 20rem;font-weight: 400;font-size: 20rem;color: rgb(200, 250, 255);">53150</span>
						<span style="font-size: 10rem;color: rgb(200, 250, 255);">公顷</span>
					</div>
					<div class="shape4">
						<img src="@/assets/images/dengji3.png" style="width: 46rem;vertical-align: -20%;"/>
						<span style="margin-left: 20rem;font-weight: 400;font-size: 20rem;color: rgb(200, 250, 255);">75005</span>
						<span style="font-size: 10rem;color: rgb(200, 250, 255);">公顷</span>
					</div>
					<div class="shape4">
						<img src="@/assets/images/dengji4.png" style="width: 46rem;vertical-align: -20%;"/>
						<span style="margin-left: 20rem;font-weight: 400;font-size: 20rem;color: rgb(200, 250, 255);">21247</span>
						<span style="font-size: 10rem;color: rgb(200, 250, 255);">公顷</span>
					</div>
					<div class="shape4">
						<img src="@/assets/images/dengji5.png" style="width: 46rem;vertical-align: -20%;"/>
						<span style="margin-left: 32rem;font-weight: 400;font-size: 20rem;color: rgb(200, 250, 255);">3764</span>
						<span style="font-size: 10rem;color: rgb(200, 250, 255);">公顷</span>
					</div>
				</div>
			</div>
		</el-col>
		<el-col :span="12">
			<div class="main2">
				<div class="shape">
					<span style="color: rgb(200, 250, 255);margin-left: -73rem;font-size: 25rem;font-weight: 300;">提升面积</span>
					<div class="shape5">
						<span style="font-weight: 400;font-size: 30rem;margin-left: -55rem;color: rgb(200, 250, 255);">53</span>
						<span style="font-size: 10rem;color: rgb(200, 250, 255);">公顷</span>
						<span style="font-size: 10rem;color: rgb(200, 250, 255);">(比上一年)</span>
					</div>
					<div class="shape6">
					<div style="color: rgb(200, 250, 255);margin-left: -73rem;font-size: 25rem;margin-bottom: 6rem;font-weight: 300;">流转价格</div>
					<span style="font-weight: 400;font-size: 30rem;margin-left: -48rem;color: rgb(200, 250, 255);">826</span>
					<span style="font-size: 10rem;color: rgb(200, 250, 255);">元</span>
					<span style="font-size: 10rem;color: rgb(200, 250, 255);">(增长15%)</span>
				</div>
				</div>
			</div>
		</el-col>
	</el-row>


</template>

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

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		// width: 90%;
		// height: 97%;
		display: flex;
		flex: 2;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		// color: rgba(29,191,205,1);
		margin-left: 28rem;
		margin-top: 10rem;

		.shape {
			margin-top: 0rem;

			.shape2 {
				margin-top: 10rem;
			}

			.shape3 {
				margin-top: 10rem;
			}

			.shape4 {
				margin-top: 10rem;
			}
		}
	}
	.main2 {
		// width: 90%;
		// height: 97%;
		display: flex;
		flex: 2;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		// color: rgba(29,191,205,1);
		margin-left: 35rem;
		margin-top: 20rem;
	
		.shape {
			margin-top: 0rem;
			margin-left: 11rem;
	
			.shape5 {
				margin-top: 10rem;
			}
			.shape6 {
				margin-top: 10rem;
			}
		}
	}
</style>