<template>
	<view>
		<u-navbar title="用电信息" title-color="#101010"></u-navbar>
		<view class="infos">
			<view class="item">
				<view class="item-value">
					0.0
				</view>
				<view class="item-title">
					当前功率(瓦)
				</view>
			</view>
			<view class="item">
				<view class="item-value">
					3.31
				</view>
				<view class="item-title">
					今日用电量(度)
				</view>
			</view>
			<view class="item">
				<view class="item-value">
					3.31
				</view>
				<view class="item-title">
					近一月用电量(度)

				</view>
			</view>
			<view class="item">
				<view class="item-value">
					3.31
				</view>
				<view class="item-title">
					昨日用电量(度)

				</view>
			</view>
			<view class="item">
				<view class="item-value">
					3.31
				</view>
				<view class="item-title">
					今日开启时长(分)

				</view>
			</view>
			<view class="item">
				<view class="item-value">
					3.31
				</view>
				<view class="item-title">
					今日关闭次数

				</view>
			</view>
		</view>
	
	     <view class="chart">
	     	<view class="u-subsection">
	     		<u-subsection :list="list" :current="0" font-size="24"  button-color="#1677FF" active-color="#fff" bg-color="#f2f4f6"  ></u-subsection>
	     	</view>
			 
			 <view class="date">
			     <text>	05/02-05/08</text> <u-icon name="arrow-down" size="24" color="#777777" ></u-icon>
			 </view>
			 <view class="electricity-consumption">
			 	<view class="title">
			 		用电量(度)
			 	</view>
				<view class="value">
					35.15
				</view>
			 </view>
			 <view class="chart-img">
			 	<img src="@/assets/img/jVzkNKE@3x.png" alt="" />
			 </view>
	     </view>
	
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '周'
					},
					{
						name: '月'
					},
					{
						name: '年'}
					
				],
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.infos{
		margin: 24rpx 32rpx;
		border-radius: 12px;
		background-color: rgba(255,255,255,1);
		padding: 40rpx 40rpx 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.item{
			width: 50%;
			text-align: left;
			margin-bottom: 48rpx;
			 .item-title{
				 color: rgba(119,119,119,1);
				 font-size: 24rpx;
				 margin-top: 8rpx;
			 }
			 .item-value{
				 color: rgba(51,51,51,1);
				 font-size: 56rpx;
			 }
		}
	}
   
   .chart{
	    padding: 32rpx;
		margin: 0 32rpx;
		background-color: #fff;
	   /deep/.u-subsection {
	   	 border-radius: 50px !important; 
		
	   }
	   
	   /deep/.u-item-bg {
	   	border-radius: 50px !important; 
	   	
	   }
	   .date{
		   color: rgba(51,51,51,1);
		   font-size: 32rpx;
		   
		   margin-top: 40rpx;
		   text{
			   margin-right: 16rpx;
		   }
	   }
	   .electricity-consumption{
		   margin-top: 16rpx;
		   .title{
			   color: rgba(16,16,16,1);
		   }
		   .value{
			   color: rgb(51,51,51);
			   font-size: 64rpx;
			   margin-top: 16rpx;
		   }
	   }
	   .chart-img{
		   margin-top: 24rpx;
		   img{
			   width: 100%;
			   height: 460rpx;
		   }
	   }
   }
</style>
