<template>
	<view class="page">
		<u-navbar title="押金" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='38'></u-navbar>

		<view class="jine">
			<view class="titleje">
				<text>￥</text> 0
			</view>
			<view class="cz" @click="btncz">
				充值
			</view>
		</view>

		<view class="yajintx">
			<view class="totals">
				<view class="zt">
					<u-icon name="file-text" size="32" style="vertical-align: middle;margin-right: 5rpx;"></u-icon>
					押金变动明细
				</view>
				<view class="" style="padding-right: 34rpx;">
					共2条
				</view>
			</view>
			<view class="yajinlist">
				<view class="jelist" v-for="(item,index) in 2" :key="index">
					<view class="left">
						<view class="tjtx">
							押金提现
						</view>
						<view class="rq">
							<text>2024-04-02 10:14:41</text>
						</view>
					</view>
					<view class="right">
						<view class="je">
							-99
						</view>
						<view class="txcg">
							提现成功
						</view>
					</view>
				</view>
				
				<view class="wb">
					全部加载完毕
				</view>
			</view>
		</view>
          
		  <view class="czxy">
		  	《充值协议》
		  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
            btncz(){
				uni.navigateTo({
					url:'/pages/deposit/czyj'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: ;
		background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.page {
		width: 750rpx;
		padding-left: 34rpx;
		padding-right: 34rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
         .czxy{
			 width: 100%;
			 text-align: center;
			 font-size: 28rpx;
			 color: #808080;
			 margin-top: 38rpx;
		 }
		.jine {
			width: 680rpx;
			height: 400rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: auto;
			margin-top: 30rpx;
			text-align: center;
			padding-top: 104rpx;

			.titleje {
				font-weight: 500;
				font-size: 52rpx;
				color: #3D3D3D;

				text {
					font-size: 32rpx;
				}
			}

			.cz {
				margin-top: 102rpx !important;
				width: 586rpx;
				height: 68rpx;
				background: linear-gradient(270deg, #54DAA1 0%, #19CD82 100%);
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				font-weight: 500;
				line-height: 68rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: auto;
			}
		}

		.yajintx {
			margin-top: 26rpx;
			width: 680rpx;
			height: 870rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.totals {
				display: flex;
				justify-content: space-between;
				padding: 24rpx 0;
				border-bottom: 1px solid #ccc;
				font-size: 28rpx;
				color: #3D3D3D;

				.zt {
					padding-left: 34rpx;
					box-sizing: border-box;
				}
			}

			.yajinlist {
                .wb{
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					color: #979797;
					margin-top: 24rpx;
				}
				padding: 0 34rpx;
				box-sizing: border-box;

				.jelist {
					border-bottom: 1px solid #ccc;
					display: flex;
					justify-content: space-between;
					padding: 28rpx 0;
					box-sizing: border-box;

					.left {
						.tjtx {
							font-size: 32rpx;
							color: #3D3D3D;
						}

						.rq {
							font-size: 20rpx;
							color: #979797;
							margin-top: 8rpx;
						}
					}

					.right {
						.je {
							font-weight: 500;
							font-size: 40rpx;
							color: #3D3D3D;
						}

						.txcg {
							font-size: 20rpx;
							color: #25CE88;
							margin-top: 8rpx;
						}
					}
				}

			}
		}
	}
</style>