uni-zhks-app/pages/p-i-well/p-i-well.vue

<template>
	<view>
		<view class="top">
			<image src="./icon/well.png" mode=""></image>
			<view class="time">
				2019-10-22 星期二 11:01:32
			</view>
		</view>
		<!-- 高密沉淀 -->
		<view class="section">
			<view class="title">
				<view class="icon"></view>
				<view class="name">高密沉淀</view>
			</view>
			<view class="content">
				<view class="box">
					<view class="box_title">矸石山调节池液位</view>
					<view class="box_list">
						<view class="item">
							<view class="text name">矸石山调节池A</view>
							<view class="text num">
								<view class="num_box">0.74</view>
							</view>
							<view class="text company">m</view>
						</view>
						<view class="item">
							<view class="text name">矸石山调节池B</view>
							<view class="text num">
								<view class="num_box">0.74</view>
							</view>
							<view class="text company">m</view>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="box_title">外排水池液位</view>
					<view class="box_list">
						<view class="item">
							<view class="text name">外排水池A液位</view>
							<view class="text num">
								<view class="num_box">1.98</view>
							</view>
							<view class="text company">m</view>
						</view>
						<view class="item">
							<view class="text name">外排水池B液位</view>
							<view class="text num">
								<view class="num_box">1.98</view>
							</view>
							<view class="text company">m</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 快滤池 -->
		<view class="section section_2">
			<view class="title">
				<view class="icon"></view>
				<view class="name">快滤池</view>
			</view>
			<view class="content">
				<view class="box">
					<view class="box_list">
						<view class="item">
							<view class="text name">滤池出水流量</view>
							<view class="text num">
								<view class="num_box">0.833</view>
							</view>
							<view class="text company">m3/h</view>
						</view>
						<view class="item">
							<view class="text name">滤池出水流量累积</view>
							<view class="text num">
								<view class="num_box">933759</view>
							</view>
							<view class="text company">m3</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	page{
		background: #009FE8;
	}
	.top{
		position: relative;
		image{
			width: 750rpx;
			height: 302rpx;
		}
		.time{
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			
			font-size: 31rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	
	.section{
		margin: 10rpx 15rpx 0;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 30rpx 0px rgba(59, 74, 116, 0.14);
		border-radius: 21rpx;

		.title{
			height: 103rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			
			border-bottom: 2rpx solid #f3f3f3;
			.icon{
				width: 68rpx;
				height: 71rpx;
				background-image: url(icon/icon_1.png);
				background-size: cover;
				background-repeat: no-repeat;
			}
			.name{
				margin-left: 30rpx;
				font-size: 31rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #232627;

			}
		}
		.content{
			padding-bottom: 20rpx;
			.box{
				box-sizing: border-box;
				padding: 0 15rpx;
				.box_title{
					margin: 10rpx 0;
					height: 42rpx;
					line-height: 42rpx;
					
					font-size: 29rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #232627;
					
					border-left: 4rpx solid #009fe8;
					padding-left: 15rpx;

				}
				.box_list{
					padding-bottom: 10rpx;
					.item{
						display: flex;
						
						border-bottom: 1rpx solid #f3f3f3;
						.text{
							font-size: 27rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #232627;
							line-height: 83rpx;
							text-align: center;
						}
						.name{
							width: 324rpx;
						}
						.num{
							margin-left: 26rpx;
							width: 162rpx;
							.num_box{
								margin-top: 22rpx;
								background: #8ADAFF;
								line-height: 40rpx;
							}
						}
						.company{
							margin-left: 16rpx;
							width: 162rpx;
						}
					}
				}
			}
		}
	}
	.section_2{
		.title{
			.icon{
				background-image: url(icon/icon_2.png);
			}
		}
	}
</style>