<!-- 充值中心 -->
<template>
	<view class="container">
		<up-navbar bgColor="transparent" title="充值中心" @leftClick="back"></up-navbar>
		<view class="header-wrap">
			<image class="bg" src="/static/czzx_header_bg.png" mode="aspectFill"></image>
			<view class="select-shop">
				<view class="select-btn">
					<up-icon name="map" color="#333"></up-icon>
					<text class="t">双屿Pisces</text>
					<up-icon name="arrow-right" color="#333"></up-icon>
				</view>
			</view>
			<view class="balance-wrap">
				<view class="left">
					<text class="i t">余额</text>
					<text class="n t">12223.53</text>
				</view>
				<view class="right">
					<text class="t">明细</text>
					<text class="t">密码设置</text>
				</view>
			</view>
			<view class="btm-wrap">
				<view class="">
					
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
function back() {
	uni.navigateBack();
}
</script>

<style scoped lang="scss">
.header-wrap {
	width: 100%;
	height: 600upx;
	padding: calc(var(--status-bar-height) + 180upx) 28upx 28upx;
	position: relative;
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.select-shop {
		display: flex;
		align-items: center;
		position: relative;
		.select-btn {
			display: flex;
			align-items: center;
			gap: 12upx;
			.t {
				color: #333;
			}
		}
	}
	.balance-wrap {
		display: flex;
		justify-content: space-between;
		position: relative;
		padding-top: 40upx;

		.left {
			display: flex;
			align-items: center;
			.t {
				color: #5e3110;
				&.i {
					position: relative;
					top: 10upx;
					font-size: 28upx;
				}
				&.n {
					font-size: 64upx;
					font-weight: bold;
				}
			}
		}
		.right {
			display: flex;
			flex-direction: column;
			gap: 12upx;
			.t {
				color: #86491d;
				font-size: 28upx;
			}
		}
	}
}
</style>
