JT-CIM-ZHNY/src/views/turang/components/MoniInfor.vue

<template>
	<div class="main">
		
		<div class="top">
			<div class="topLeft">
				<div class="icon">
					<img class="icon-shuiwen" src="@/assets/images/shuiwentu.png" s />
				</div>
				<div class="title">
					<div>温度（℃）</div>
					<div>36</div>
				</div>
			</div>
			<div class="topRight">
				<div class="icon">
					<img class="icon-shuiwen" src="@/assets/images/shuiwentu.png" s />
				</div>
				<div class="title">
					<div>湿度（%RH）</div>
					<div>---</div>
				</div>
			</div>
			<div class="topLeft">
				<div class="icon">
					<img class="icon-shuiwen" src="@/assets/images/shuishi.png" s />
				</div>
				<div class="title">
					<div>水势（KPa）</div>
					<div>--</div>
				</div>
			</div>
			<div class="topRight">
				<div class="icon">
					<img class="icon-shuiwen" src="@/assets/images/PH.png" s />
				</div>
				<div class="title">
					<div>PH值</div>
					<div>---</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div style="text-align:left;margin-left: 20rem; color: rgb(200, 250, 255); ">墒情评价</div>
			<div class="ref000">
				适宜：土壤水分满足作物播种出苗或生长发育需求《土壤相含水量60%~80%)，有利于作物正常生长。
			</div>
		</div>

	</div>
</template>

<script>
</script>

<style scoped>
	.main{
		overflow: hidden;
	}
	.top {
		height: 60rem;
		width: 350rem;
		margin-top: 20rem;
		position: relative;

	}

	.topLeft {

		margin-left: 20rem;
		height: 60rem;
		width: 100rem;
		position: absolute;


	}

	.topRight {
		margin-left: 100rem;
		height: 60rem;
		width: 100rem;
		display: inline-block;



	}

	.icon {
		height: 50rem;
		width: 50rem;
		background: url("@/assets/images/beijingtu.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
	}

	.icon-shuiwen {
		margin-top: 10rem;
		height: 30rem;
		width: 30rem;

	}

	.title {
		font-size: 14rem;
		margin-top: 5rem;
		margin-left: 20rem;
		height: 50rem;
		width: 150rem;
		color: rgb(200, 250, 255);
	}

	.bottom {
		margin-top: 60rem;
	}

	.ref000 {

		height: 75rem;
		width: 300rem;
		right: 0;
		margin-top: 10rem;
		text-indent: 30rem;
		/* margin-left: 100rem; */
		display: inline-block;
		text-align: left;
		font-size: 14rem !important;
		overflow-y: auto
	}
</style>