jp-housekeep-manage/pages/platformRevenueStatistics/platformRevenueStatistics.vue

<template>
	<view>
		<u-navbar title="平台收入统计" title-color="#101010"></u-navbar>
		<!-- 标签 -->
		<view class="tabs">
			<u-picker v-model="tabShow1" mode="selector" :default-selector="[0]" :range="selector"></u-picker>
		   <u-picker v-model="tabShow2" mode="time"></u-picker>
			<view class="tabsItem" @click="tabShow1=!tabShow1" >荆鹏软件园 <u-icon
					name="arrow-up" v-if="tabShow1" ></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
			<view class="tabsItem" @click="tabShow2=!tabShow2" >2024-06 <u-icon
					name="arrow-up" v-if="tabShow2"> 2024-06</u-icon><u-icon v-else  name="arrow-down"></u-icon></view>
		</view>
		<!-- 统计 -->
		<view class="statistics">
			<view class="statistics-total">
				<view class="total-title">
					6月预计收入
				</view>
				<view class="total-number">
					324.75元
				</view>
			</view>
			
			<view class="statistics-group">
				<view class="statistics-item" v-for="item in 3" >
					<view class="content">
						<!-- 收入 -->
						<view class="income">
							<view class="income-title">
								线损电费收入
							</view>
							<view class="income-number">
								108.25元
							</view>
						</view>
						<!-- 电量 -->
						<view class="electric-quantity">
							<view class="electric-quantity-title">
								线损电量
							</view>
							<view class="electric-quantity-number">
								125.33度
							</view>
						</view>
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#acacac" size="24" ></u-icon>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 图表 -->
		<view class="chart">
			<img src="@/assets/img/incomeChart1@3x.png" alt="" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabShow1:false,
				tabShow2:false,
				selector: [1, 2, 3],
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		padding-bottom: 100px;
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	// 标签
	.tabs {
	
		height: 96rpx;
		line-height: 96rpx;
		background-color: #fff;
		border-top: 1px solid rgba(241, 241, 241, 1);
		display: flex;
		justify-content: space-around;
	
	}

     // 统计
	 .statistics{
		 .statistics-total{
			 display: flex;
			 align-items: center;
			 justify-content: space-between;
			 padding: 36rpx 32rpx;
			 background-color: rgba(22,119,255,1);
			 color: rgba(255,255,255,1);
			 font-size:40rpx;
			 font-weight: bold;
		 }
		 
		 .statistics-group{
			 .statistics-item{
				 padding: 24rpx 32rpx;
				 display: flex;
				 align-items: center;
				 justify-content: space-between;
				 border-bottom: 1px solid rgba(245,245,245,1);
				 
				 .content{
					 flex: 0.99;
					 // 收入
					 .income{
						 display: flex;
						 align-items: center;
						 justify-content: space-between;
						 font-size: 32rpx;
						 font-weight: bold;
						 .income-title{
							 color: rgba(51,51,51,1);
							 
						 }
						 .income-number{
							 color: rgba(22,119,255,1);
							 
						 }
					 }
					 // 电量
					 .electric-quantity{
						 display: flex;
						 align-items: center;
						 justify-content: space-between;
						 font-size: 24rpx;
						 color: rgba(119,119,119,1);
						
					 }
					 
				 }
			 }
			 
		 }
	 }

 // 图表
 .chart{
	 margin-top: 40rpx;
	 padding: 0 15rpx;
	 img{
		 width: 100%;
		 height: 600rpx;
	 }
 }


</style>