<template>
	<view class="page">
		<view class="item">
			<view class="title">账户余额</view>
			<view class="money">￥998.57</view>
			<view class="moneyBox">
				<view class="mitem" @click="chonghzi">
					<image src="../../static/money_a.png" mode="widthFix" class="itemImg" />
					<view class="word">我要充值</view>
				</view>
				<view class="mitem" @click="zhuanzhang">
					<image src="../../static/money_b.png" mode="widthFix" class="itemImg" />
					<view class="word">我要转账</view>
				</view>
				<view class="mitem" @click="tixian">
					<image src="../../static/money_c.png" mode="widthFix" class="itemImg" />
					<view class="word">我要提现</view>
				</view>
			</view>
			<view class="tipsword">账户明细</view>
		</view>
		<view class="item">
			<view class="title">赊吧剩余额度</view>
			<view class="money">￥698.57</view>
			<view class="moneyBox">
				<view class="zitem">
					<view class="name">总额度</view>
					<view class="word">￥8800.00</view>
				</view>
				<view class="zitem">
					<view class="name">全部待还</view>
					<view class="word">￥1100.00</view>
				</view>
			</view>
			<view class="tipsword" @click="sheba">赊吧订单</view>
		</view>
	</view>
</template>

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

			}
		},
		methods: {
			// 赊吧
			sheba() {
				uni.navigateTo({
					'url': '/pages/usercenter/myCredit'
				})
			},
			// 我要充值
			chonghzi() {
				uni.navigateTo({
					'url': '/pages/usercenter/recharge'
				})
			},
			// 我要转账
			zhuanzhang(){
				uni.navigateTo({
					url:'/pages/usercenter/transferAccounts'
				})
			},
			// 提现
			tixian(){
				uni.navigateTo({
					url:'/pages/usercenter/cashOut'
				})
			}
		}
	}
</script>

<style>
	page {
		background: #C29445;
	}

	.item {
		width: 686rpx;
		height: 382rpx;
		background: url(../../static/wallet.png) no-repeat center;
		background-size: cover;
		margin: 30rpx auto;
		padding: 50rpx 60rpx;
		box-sizing: border-box;
		position: relative;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(120, 71, 0, 1);
	}

	.money {
		font-size: 48rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(120, 71, 0, 1);
		line-height: 56rpx;
		margin-top: 12rpx;
	}

	.moneyBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.mitem {
		width: 114rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.mitem .itemImg {
		width: 60rpx;
		margin-bottom: 16rpx;
	}

	.mitem .word {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(120, 71, 0, 1);
		line-height: 32rpx;
	}

	.zitem {
		margin-top: 10rpx;
		width: 43%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		;

	}

	.zitem .name {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(120, 71, 0, 1);
	}

	.zitem .word {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(120, 71, 0, 1);
	}

	.tipsword {
		width: 120rpx;
		height: 40rpx;
		background: linear-gradient(234deg, rgba(150, 100, 27, 1) 0%, rgba(120, 71, 0, 1) 100%);
		border-radius: 200rpx 0 0 200rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(245, 205, 143, 1);
		position: absolute;
		right: 26rpx;
		top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>