JT-CIM/src/views/Table/components/BasicInfor.vue

<template>

	<div class="Background">
		<p>
			系统建设应坚持“先进、可靠、实用、落地”的原则，实行“整体规划、分步实施；统一标准、加强管理；先进实用、政策落地”的建设方针。
		</p>
	</div>

	<div class="leftTitle">
		<div class='topIcon'>
			<div class="fontInfo">20.4</div>
			<div class="font">本年规划(亩)</div>
		</div>
		<div class='bottomIcon'>
			<div class="fontInfo">100</div>
			<div class="font">地块数量(块)</div>
		</div>

	</div>
	<div class="rightTitle">
		<div class='topRightIcon'>
			<div class="fontInfo">121.94</div>
			<div class="font">已完成(亩)</div>
		</div>
		<div class='bottomRightIcon'>
			<div class="fontInfo">112.92</div>
			<div class="font">累计面积(亩)</div>
		</div>

	</div>
</template>

<script>
</script>
<style>
	.Background {
		margin-top: 10rem;
		margin-left: 5rem;
		font-size: 14rem;
		height: 100rem;
		width: 345rem;
		background: url('@/assets/images/basic.png') no-repeat;
		background-size: 33% 100%;
	}

	.Background p {
		margin-top: 0rem;
		text-indent: 30rem;
		margin-left: 150rem;
		display: inline-block;
		text-align: left;
		font-size: 14rem;
	}

	.leftTitle {
		float: left;
		width: 200rem;
		display: inline-block
	}

	.topIcon {
		margin-top: 15rem;
		margin-left: 10rem;
		height: 44rem;
		width: 130rem;
		background: url('@/assets/images/icon.png') no-repeat;
	}

	.bottomIcon {
		margin-left: 10rem;
		margin-top: 15rem;
		height: 44rem;
		width: 130rem;
		background: url('@/assets/images/bottom.png') no-repeat;
	}

	.topRightIcon {
		margin-right: 10rem;
		margin-top: 15rem;
		height: 44rem;
		width: 130rem;
		background: url('@/assets/images/rightTop.png') no-repeat;
	}

	.bottomRightIcon {
		margin-right: 10rem;
		margin-top: 15rem;
		height: 44rem;
		width: 130rem;
		background: url('@/assets/images/rightBottom.png') no-repeat;
	}

	.rightTitle {
		float: right;
		display: inline-block
	}

	.fontInfo {
		font-size: 24rem;
		color: rgb(200, 250, 255);
		margin-left: 50rem;

	}

	.font {
		font-size: 14rem;
		color: rgb(200, 250, 255);
		margin-left: 50rem;
	}
</style>