jp-housekeep-electric/pages/equipmentDataMonitoring/equipmentElectricity.vue

<template>
	<view>
		<view class="navbar-c">
			<view class="back">
				<u-icon name="arrow-left" color="#101010" size="36"></u-icon>
			</view>
			<view class="title">
				设备用电量<image class="img" src="@/assets/img/refresh-line.svg"></image>
			</view>
			
		</view>
		<!-- 标签 -->
		<view class="tabs-box">
			<view class="tabs">
				<u-tabs :list="list" :is-scroll="false" inactive-color="#999999"  active-color="#666666" :current="current" @change="change"></u-tabs>
			</view>
			<view class="icon">
				<u-icon name="arrow-down" color="#999999"></u-icon>
			</view>
		</view>
		<!-- 用电量 -->
		<view class="main">
			<view class="item" v-for="item in 3">
				<view class="icon">
					<image class="img" src="@/assets/img/energyMeter.svg" mode=""></image>
				</view>
				<view class="equipment">
					<view class="equipment1">
						荆鹏软件园01
					</view>
					<view class="equipment2">
						荆鹏集团
					</view>
				</view>
				<view class="electricity">
					<view class="electricity-item">
						<view class="number">
							120.5
						</view>
						<view class="date">
							昨日
						</view>
					</view>
					<view class="electricity-item">
						<view class="number">
							120.5
						</view>
						<view class="date">
							本月
						</view>
					</view>
					<view class="electricity-item">
						<view class="number">
							120.5
						</view>
						<view class="date">
							上月
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '荆鹏集团'
				}, {
					name: '青少年宫',
					
				}, {
					name: '荆州院子',
					
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs-box{
		background-color: #fff;
		display: flex;
		align-items: center;
		.tabs{
			width: 80%;
		}
		.icon{
			margin-left: auto;
			margin-right: 24rpx;
		}
	}
   // 用电量
   .main{
	   background-color: #fff;
	   .item{
		   padding: 32rpx;
		   display: flex;
		   align-items: center;
		   border-bottom: 1px solid rgba(245,245,245,1);
		   .icon{
			   width: 72rpx;
			   height: 72rpx;
			   border-radius: 4px;
			   background-color: rgba(219,234,255,1);
			   display: flex;
			   align-items: center;
			   justify-content: center;
			   .img{
				   width: 48rpx;
				   height: 48rpx;
			   }
		   }
		   .equipment{
			   margin-left: 16rpx;
			   .equipment1{
				   color: rgba(51,51,51,1);
				   font-size: 32rpx;
			   }
			   .equipment2{
				   color: rgba(119,119,119,1);
			   }
		   }
		   .electricity{
			   display: flex;
			   justify-content: space-between;
			   flex: 1;
			   margin-left: 48rpx;
			   text-align: center;
			   .electricity-item{
				   .number{
					   color: rgba(51,51,51,1);
					   font-size: 32rpx;
					   font-weight: bold;
				   }
				   .date{
					   color: rgba(119,119,119,1);
					   margin-top: 4rpx;
				   }
			   }
		   }
	   }
   }
</style>