<template>
	<view>
		<u-navbar title="用电详情"  title-color="#101010" >
			
			<view class="slot" slot="right" >
				计费规则
			</view>
		</u-navbar>
		<view class="background">
			<!-- 用电记录 -->
			<view class="details">
				<view class="headline">
					1月1日用电记录
				</view>
				<view class="infos">
					<view class="infos-item">
						<view class="item-title">
							用电量
						</view>
						<view class="item-value">
							100.00度
						</view>
					</view>
					<view class="infos-item">
						<view class="item-title">
							电费
						</view>
						<view class="item-value">
							94.5元
						</view>
					</view>
					<view class="infos-item">
						<view class="item-title">
							峰时用电 (1.28元/度)
						


						</view>
						<view class="item-value">
							
							
							20.00度 25.6元
							
						
					

						</view>
					</view>
					<view class="infos-item">
						<view class="item-title">
							
							谷时用电 (0.65元/度)
							
							
						</view>
						<view class="item-value">
							40.00度 26元
							
							
						</view>
					</view>
					<view class="infos-item">
						<view class="item-title">
							平时用电 (0.98元/度)
							
							
						</view>
						<view class="item-value">
							30.00度 29.4元
							
							
						</view>
					</view>
					<view class="infos-item">
						<view class="item-title">
							尖时用电 (1.36元/度)
						</view>
						<view class="item-value">
							10.00度 13.6元
						</view>
					</view>
					<view class="infos-item" >
						<view class="item-title">
							用户信息
						</view>
						<view class="item-value">
							物业公司
						</view>
					</view>
					<view class="infos-item">
						<view class="item-title">
							户号
						</view>
						<view class="item-value">
							00101010
						</view>
					</view>
				</view>
				<!-- 折线图 -->
				<view class="chat-box">
					<view class="title">
						1月1日 用电量趋势
					</view>
					<view class="chat">
						<image src="@/assets/img/chart@1x.png" mode=""></image>
					</view>
				</view>
			</view>
			<button class="back">返回</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.background{
		height: 400rpx;
		padding-top: 32rpx;
		background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(203,234,255,0) 100%);
	    
		// 用电记录
		.details{

			background-color: #fff;
			border-radius: 8px;
			padding: 32rpx;
			margin: 0rpx 32rpx;
			
			.headline{
				color: rgb(16,16,16);
				font-size: 40rpx;
				text-align: center;
			}
			.infos{
				margin-top: 32rpx;
				border-bottom: 1px solid rgba(241,241,241,1);
			.infos-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;
				.item-title{
					color: rgba(51,51,51,1);
				}
				.item-value{
					color: rgba(16,16,16,1);
				}
			}
			}
		}
	// 折线图
	.chat-box{
		border-radius: 8px;
		background: linear-gradient(180deg, rgba(214,238,255,1) 0%,rgba(208,236,236,0) 100%);
		.title{
			color: rgba(16,16,16,1);
			padding: 24rpx;
		}
		.chat-box{
			width: 100%;
			height: 322rpx;
			.img{
				width: 100%;
				height: 100%;
			}
		}
	}
	
	}
	
	// 返回
	.back{
		 border: 1px solid rgba(205,205,205,1);
		 line-height: 88rpx;
		 background-color: rgba(255,255,255,1);
		 color: rgba(119,119,119,1);
		 font-size: 32rpx;
		 margin: 32rpx;
	}
</style>
