wx-qhb/pageC/ensureMoney/ensureMoney.vue

<template>
	<view class="balance">
		<!-- 页面渐变色背景 -->
		<view class="shadow">
		</view>
		<!-- 页面渐变色背景 -->

		<view class="mine-balance">
			<view class="title">
				<text>我的保证金(元)</text>
				<image src="../../static/mine/324.png" @click="toExplain" class="mine-324" mode=""></image>
			</view>
			<view class="money"> 500.00 </view>
			<view class="btn-list">
				<button class="withdrawal" @click="toWithdrawal">提现</button>
				<button class="recharge" @click="toRecharge">充值</button>
			</view>
		</view>
		<view class="money-detail">
			<view class="money-title">
				<text style="font-weight: 600;">保证金明细</text>
				<AllRight name="全部" @toDetail='toDetail' />
			</view>
			<view class="">
				<MoneyDetail v-for="(item,index) in moneyDetail" :itemInfo="item" :key="index" />
			</view>
		</view>
		<view class="bottom-text">
			没有更多数据了
		</view>
	</view>
</template>

<script>
	import AllRight from '../mineComponent/allRight/allRight.vue';
	import MoneyDetail from '../mineComponent/moneyDetail/index.vue'
	export default {
		components: {
			AllRight,
			MoneyDetail
		},
		data() {
			return {
				moneyDetail: [{
						name: '充值',
						time: '2024-1-1 09:34:31',
						money: '+400'
					},
					{
						name: '提现',
						time: '2024-1-1 09:34:31',
						money: '-400'
					},
					{
						name: '充值',
						time: '2024-1-1 09:34:31',
						money: '+400'
					},
				]
			};
		},
		created() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#f74639'
			})
		},
		methods: {
			//跳转明细页面
			toDetail() {
				uni.navigateTo({
					url: '/pageC/balanceDetail/balanceDetail'
				})
			},
			//跳转充值页面
			toRecharge() {
				uni.navigateTo({
					url: '/pageC/recharge/recharge'
				})
			},
			//跳转提现页面
			toWithdrawal() {
				uni.navigateTo({
					url: '/pageC/withdrawal/withdrawal'
				})
			},
			//跳转保证金说明
			toExplain() {
				uni.navigateTo({
					url: "/pageC/ensureExplain/ensureExplain"
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: "#f4f4f4";
	}

	.balance {
		position: relative;
		padding-top: 10px;

		.shadow {
			position: absolute;
			top: 0;
			height: 400px;
			width: 100%;
			background: -webkit-linear-gradient(#f74639, #f4f4f4);
			/* Safari 5.1 - 6.0 */
			background: -o-linear-gradient(#f74639, #f4f4f4);
			/* Opera 11.1 - 12.0 */
			background: -moz-linear-gradient(#f74639, #f4f4f4);
			/* Firefox 3.6 - 15 */
			background: linear-gradient(#f74639, #f4f4f4);
			z-index: -1;
		}

		.mine-balance {
			width: 96%;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 10px;
			padding-top: 82rpx;
			padding-bottom: 62rpx;

			.title {
				text-align: center;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #222;
				height: 45prx;

				.mine-324 {
					width: 36rpx;
					height: 36rpx;
					margin-left: 10rpx;

				}
			}

			.money {
				font-size: 84rpx;
				color: #222;
				font-weight: 600;
				text-align: center;
				margin-top: 36rpx;
			}

			.btn-list {
				display: flex;
				justify-content: space-around;
				margin-top: 76rpx;

				.withdrawal {
					width: 298rpx;
					height: 88rpx;
					background-color: rgba(248, 50, 36, 0.1);
					border-radius: 44px;
					color: #f83224;
					font-size: 32rpx;
				}

				.recharge {
					width: 298rpx;
					height: 88rpx;
					background-color: #f83224;
					border-radius: 44px;
					color: #fff;
					font-size: 32rpx;
					box-shadow: 0rpx 12rpx 28rpx -12rpx #f83224;
				}
			}
		}

		.money-detail {
			background-color: #fff;
			border-radius: 10px;
			width: 88%;
			margin: 10px auto;
			padding: 0 28rpx;

			.money-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 108rpx;
			}
		}

		.bottom-text {
			text-align: center;
			font-size: 24rpx;
			color: #777;
			margin-top: 44rpx;
		}
	}
</style>