<template>
	<view>
		<u-navbar title="三相电流监测"  title-color="#101010" >
			
			<view class="slot" slot="right" @click="show=true">
				<image class="img" src="@/assets/img/riLine-calendar-todo-line 2.svg" mode=""></image>
			</view>
		</u-navbar>
		
	
		 <u-picker-select title="日期选择" v-model="show"mode="time" :params="params"   ></u-picker-select>
		  <view class="main">
		  	<view class="title">
		  		<view class="icon">
		  			
		  		</view>
				<view class="text">
					电流监测 (A)
				</view>
		  	</view>
			<view class="chat">
				<image class="img" src="@/assets/img/3chat.png" mode=""></image>
			</view>
			
			<!-- 表格 -->
			<view class="table">
				
				<u-table bg-color="#f1f2f5" border-color="#f1f2f5" color="#101010" padding="20rpx 0">
						<u-tr>
							<u-th></u-th>
							<u-th>实时电流</u-th>
							<u-th>最大电流</u-th>
									<u-th>最小电流</u-th>
						</u-tr>
						<u-tr>
							<u-td>A相</u-td>
							<u-td>36</u-td>
							<u-td>140 (12:00)</u-td>
									<u-td>4 (02:00)</u-td>
						</u-tr>
						<u-tr>
							<u-td>B相</u-td>
							<u-td>24</u-td>
							<u-td>80 (11:00)</u-td>
									<u-td>8 (02:00)</u-td>
						</u-tr>
								<u-tr>
									<u-td>C相</u-td>
									<u-td>20</u-td>
									<u-td>110 (13:00)</u-td>
									<u-td>2 (02:00)</u-td>
								</u-tr>
					</u-table>
			</view>
		  </view>
		  
		  
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				show: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.slot{
		display: flex;
		align-items: center;
		.img{
			width: 48rpx;
			height: 48rpx;
			margin-right: 4rpx;
		}
	}
     .main{
		 padding: 32rpx;
		 .title{
			 display: flex;
			 align-items: center;
			 
			 .icon{
				 width: 8rpx;
				 height: 32rpx;
				 background-color: rgba(22,119,255,1);
			 }
			 .text{
				 color: rgb(16,16,16);
				 font-size: 36rpx;
				 margin-left: 12rpx;
				 font-weight: bold;
			 }
		 }
		 .chat{
			 width: 100%;
			 height: 480rpx;
			 margin-top: 32rpx;
			 .img{
				 width: 100%;
				 height: 100%;
			 }
		 }
		 // 表格
		 .table{
			 margin-top: 60rpx;
			 border-radius: 8px;
			 
			 z-index: 999;
		 }
	 }
</style>
