jp-housekeep-electric/pages/recharge/rechargeRecord.vue

<template>
	<view>
		<u-navbar title="充值记录"  title-color="#101010" ></u-navbar>
		<!-- 折线图 -->
		<view class="chart-box">
			<view class="title">
				1月电费共支出
			</view>
			<view class="sum">
				1000.00<text class="unit">元</text>
			</view>
			<view class="chart">
				<image class="img" src="../../assets/img/jVzkNKE@1x.png" mode=""></image>
			</view>
			
		</view>
<!-- 标签 -->
			<view class="tabs">
				<view class="tabs-item">
					全部类型<u-icon size="24" name="arrow-down" color="#B6BBB8"></u-icon>
				</view>
				<view class="tabs-item">
					全部时间<u-icon size="24" name="arrow-down" color="#B6BBB8"></u-icon>
				</view>
			</view>
			<!-- 记录 -->
			<view class="records" v-for="item in 2">
				<view class="time">
					01月  支出  1000.00元

				</view>
				<view class="details">
					<view class="details-title">
						<view class="name">
							电费充值-联通公司-荆鹏软件园
						</view>
						<view class="record-time">
							01-07 10:00 420667788991100
						</view>
					</view>
					<view class="sum">
						1000.00

					</view>
				</view>
				
			</view>
	</view>
</template>

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

<style lang="scss" scoped>
	// 折线图
	.chart-box{
		padding: 24rpx 32rpx;
		background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(255,255,255,1) 100%);
	
	 .title{
		 color: rgb(16,16,16);
	 }
	 .sum{
		 color: rgb(51,51,51);
		 font-size: 64rpx;
		 margin-top: 16rpx;
		 .unit{
		 		 color: rgb(16,16,16);
				 font-size: 28rpx;
				 margin-left: 8rpx;
		 }
	 }
	 .chart{
		 width: 100%;
		 height: 240rpx;
		 margin-top: 8rpx;
		 .img{
			 width: 100%;
			 height: 100%;
		 }
	 }
	 
	}
	// 标签
	.tabs{
		display: flex;
		justify-content: space-between;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #fff;
		border-top: 1px solid rgba(241,241,241,1);
		.tabs-item{
			width: 50%;
			text-align: center;
		}
	}

// 记录
.records{
	.time{
		padding: 24rpx 32rpx;
		color: rgba(119,119,119,1);
		font-size: 32rpx;
	}
	.details{
		background-color: #fff;
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.details-title{
			.title{
				color: rgba(51,51,51,1);
				font-size: 32rpx;
			}
			.record-time{
				color: rgb(153,153,153);
				font-size: 24rpx;
				
				margin-top: 8rpx;
			}
		}
		.sum{
			color: rgb(16,16,16);
			font-size: 40rpx;
		}
	}
}
</style>