JP-ChargeTeam51/pages/newPage/chargeMoney/financialDetails.vue

<template>
	<view>
		<view class="header">
			<ujp-navbar title="充电金" title-color="#fff" :border-bottom="false" back-icon-color="#fff">
				<view slot="right" style="margin-right: 10px;" @click="openModalBl=true">
			
					<view class="iconfont qr-code">
						&#xe60d;
					</view>
				</view>
			</ujp-navbar>
			<!-- 金额 -->
			<view class="money">
				<view class="amount">
					<view class="title">
						总金额(元)
					</view>
					<view class="number">
						2000.88
					</view>
				</view>
				<view class="earnings">
					<view class="title">
						累计收益(元)
					</view>
					<view class="number">
						160.88
					</view>
				</view>
				
			</view>
			
		</view>
		
		<!-- 明细 -->
		<view class="detail">
			<view class="title">
				展示近3个月明细
				<view class="select" @click="flag=!flag">
					全部<u-icon name="arrow-down" size="24"></u-icon>
					<view class="option" v-if="flag==true" >
						<view class="option-item">选项1</view>
						<view class="option-item">选项2</view>
						<view class="option-item">选项3</view>
					</view>
				</view>
				
			</view>
			<view class="item">
				<view class="left">
					<view class="text">
						每日收益
					</view>
					<view class="date">
						2023-07-24 00:00:38
					</view>
				</view>
				<view class="right">
					<view class="add">
						+0.88
					</view>
					<view class="balance">
						2000.00
					</view>
				</view>
				
			</view>
			
			<view class="item">
				<view class="left">
					<view class="text">
						单次转入
					</view>
					<view class="date">
						2023-07-24 00:00:38
					</view>
				</view>
				<view class="right">
					<view class="add">
						+2888
					</view>
					<view class="balance">
						2000.00
					</view>
				</view>
				
			</view>
		</view>
		<u-divider color="#B0B4B8" bg-color="#F2F4F4" margin-top="40">已经到底了</u-divider>
	</view>
</template>

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

		}
	}
</script>

<style lang="scss" scoped>
	.header{
		height: 320rpx;
		margin-bottom: 80rpx;
		background: linear-gradient(180deg, rgba(0,185,98,1) 56%,rgba(246,246,246,1) 100%);
	::v-deep.u-navbar{
		z-index: 1 !important;
		background: none !important;
		
	}
	
		.qr-code {
			
			color: #fff;
		}
	 // 金额
	 .money{
		 border-radius: 12px;
		 background-color: rgba(255, 255, 255, 1);
		 margin: 24rpx 32rpx;
		 padding: 56rpx 40rpx;
		 display: flex;
		 justify-content: space-between;
		 .title{
			 color: rgba(51, 51, 51, 1);
		 }
		 .number{
			 color: rgba(51, 51, 51, 1);
			 font-size: 64rpx;
			 margin-top: 16rpx;
			 
		 }
		 .amount{
			 .number{
				 color: #FF3D00;
			 }
		 }
	 }
	}
	// 明细
	.detail{
		background-color: rgba(255, 255, 255, 1);
		border-radius: 12px;
		margin: 0 32rpx;
		padding: 0 32rpx;
		.title{
			display: flex;
			align-items: center;
			padding: 36rpx 0;
			border-bottom: 1px solid #F0F0F2;
			.select{
				margin-left: auto;
				width: 144rpx;
				height: 56rpx;
				line-height: 56rpx;
				border-radius: 4px;
				background-color: rgba(255, 255, 255, 1);
				color: rgba(0, 185, 98, 1);
				text-align: center;
				border: 1px solid rgba(0, 185, 98, 1);
				position: relative;
				::v-deep.u-icon{
					margin-left: 10rpx;
				}
				
			}
			.option{
				background-color: #fff;
				z-index: 999;
				position: absolute;
				top: 28px;
				left: 0;
				right: 0;
				color: #333333;
				
    box-shadow: 0 0px 4px 2px #999999;
			}
		}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 0;
		border-bottom: 1px solid #F0F0F2;
		.left{
			.text{
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
			}
			.date{
				color: rgba(119, 119, 119, 1);
				font-size: 24rpx;
			}
		}
		.right{
			text-align: right;
			.add{
				color: rgba(51, 51, 51, 1);
				font-size: 40rpx;
			}
			.balance{
				color: rgba(119, 119, 119, 1);
				font-size: 24rpx;
			}
		}
	}
	
	
	}

</style>