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

<template>

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

	<div class="Titles">
		<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>
	</div>

</template>

<script>
</script>
<style scoped>
	.imgback {
		background: url('@/assets/images/basic.png') no-repeat;
		background-size: 100% 100%;
		width: 100rem;
		height: 100rem;
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
	}

	.Background {
		margin-top: 10rem;
		margin-left: 5rem;
		font-size: 14rem;
		height: 100rem;
		width: 345rem;
		position: relative;
	}

	.ref000 {
		position: absolute;
		height: 100rem;
		width: 220rem;
		right: 0;
		top: 0;
		text-indent: 30rem;
		/* margin-left: 100rem; */
		display: inline-block;
		text-align: left;
		font-size: 14rem !important;
		overflow-y:auto
	}
	.Titles{
		margin-top:2%
		
	}

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

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

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

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

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

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

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

	}

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