<template>
	<view class="gsyh">
		<view v-if="$isVip()">
			<watermark dark="light" source="uni_alipay_other_bank" />
			<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_other_bank')">
				<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
			</liu-drag-button>
		</view>
		<view class="group_45764">
			<view class="rectangle_23284">
				<view class="flexcontainer">
					<view class="group_8">
						<image class="frame" src="/static/logo.png" />
					</view>

					<view class="group_7">
						<text class="text_1">账户详情</text>
					</view>

					<view class="group_9">
						<image class="group_13980" src="/static/logo.png" />
						<image class="group_13979" src="/static/logo.png" />
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 88rpx;">
			
		</view>
		<view class="group_48164">
			<view class="rectangle_23292">
				<image class="group_48163" src="/static/logo.png" />

				<view class="flexcontainer_1">
					<view class="rectangle_23290">
						<image class="f0763869907c4a2a56d1061936006358" src="/static/logo.png" />
					</view>
					<view class="flexcontainer_2">
						<text class="text_2">重庆 借记卡(I 类)</text>
						<text class="text_3">6222****9304</text>
					</view>

					<image class="group_48162" src="/static/logo.png" />

				</view>

				<text class="text_4">柜面注册</text>
			</view>
		</view>

		<view class="group_48161">
			<view class="rectangle_23285">
				<text class="text_5">人民币余额</text>
				<text class="text_6">55.22</text>
			</view>
		</view>

		<!-- <image class="group_48140_3x" src="/组 48140@3x.png" /> -->

		<view class="group_48166">
			<view class="flexcontainer_3">
				<text class="text_7">限额</text>
				<!-- <image class="group_48165" src="/组 48165.png" /> -->
			</view>

			<view class="panel_limits">
				<view class="flexcontainer_4">
					<view class="flexcontainer_5">
						<text class="text_8">当日剩余额度(元)</text>
						<text class="text_9">日累积50,000.00</text>
					</view>
					<text class="text_10">50,000.00</text>
				</view>

				<view class="flexcontainer_6">
					<view class="flexcontainer_7">
						<text class="text_11">当月剩余额度(元)</text>
						<text class="text_12">日累积500,000.00</text>
					</view>
					<text class="text_13">500,000.00</text>
				</view>

				<view class="flexcontainer_8">
					<view class="flexcontainer_9">
						<text class="text_14">当年剩余额度(元)</text>
						<text class="text_15">日累积2,500,000.00</text>
					</view>
					<text class="text_16">2,500,000.00</text>
				</view>

				<!-- <image class="div_2" src="/直线(1).png" />
        <image class="div_3" src="/直线(1).png" /> -->
			</view>
		</view>

		<view class="panel_limits_1">
			<view class="group_13988">
				<view class="rectangle_23294">
					<text class="text_17">基本账户</text>
					<!-- <image class="group_13987" src="/蒙版组 13987.png" /> -->
					<text class="text_18">3100****6438</text>
				</view>
			</view>

			<view class="group_13989">
				<view class="rectangle_23294_1">
					<text class="text_19">启用日期</text>
					<text class="text_20">2019年10月01日</text>
				</view>
			</view>

			<view class="group_13990">
				<view class="rectangle_23294_2">
					<text class="text_21">到期日期</text>
					<!-- <image class="group_48165_1" src="/组 48165.png" /> -->
					<text class="text_22">2029年年8月</text>
				</view>
			</view>

			<view class="group_13991">
				<view class="rectangle_23294_3">
					<text class="text_23">设置别名</text>
					<!-- <image class="group_13987_1" src="/蒙版组 13987.png" /> -->
					<text class="text_24">此卡别名</text>
				</view>
			</view>

			<view class="group_13992">
				<view class="rectangle_23294_4">
					<text class="text_25">账户互转</text>
					<!-- <image class="group_13987_2" src="/蒙版组 13987.png" /> -->
				</view>
			</view>

			<view class="group_13993">
				<view class="rectangle_23294_5">
					<text class="text_26">当面收款</text>
					<!-- <image class="group_13987_3" src="/蒙版组 13987.png" /> -->
				</view>
			</view>

			<view class="group_13994">
				<view class="rectangle_23294_6">
					<text class="text_27">绑手机号</text>
					<!-- <image class="group_13987_4" src="/蒙版组 13987.png" /> -->
				</view>
			</view>

			<!--      <image class="div_4" src="/直线(1).png" />
      <image class="div_5" src="/直线(1).png" />
      <image class="div_6" src="/直线(1).png" />
      <image class="div_7" src="/直线(1).png" />
      <image class="div_8" src="/直线(1).png" />
      <image class="div_9" src="/直线(1).png" /> -->
		</view>

		<view class="group_13994_1">
			<text class="text_28">其他</text>
			<!-- <image class="group_13987_5" src="/蒙版组 13987.png" /> -->
		</view>

		<view class="group_13995">
			<text class="text_29">其他</text>
			<!-- <image class="group_13987_6" src="/蒙版组 13987.png" /> -->
		</view>

		<!-- <image class="dee351fc65540488ca79ac78c10072f2" src="/dee351fc65540488ca79ac78c10072f2.png" /> -->

		<Home class="home" />
	</view>
</template>
<script setup>

</script>
<style lang="scss" >
	page{
		background: #F8F8F8;
	}
	* {
		box-sizing: border-box;
	}

	.gsyh {
		position: relative;
		width: 750rpx;
		overflow: hidden;
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		isolation: isolate;
	}

	/* ===== header ===== */
	.group_45764 {
		width: 750rpx;
		position: fixed;
		z-index: 999;
	}

	.rectangle_23284 {
		width: 750rpx;
		height: 88rpx;
		background-color: #ffffff;
	}

	.flexcontainer {
		display: flex;
		width: 750rpx;
		height: 88rpx;
		flex-direction: row;
		align-items: flex-start;
	}

	.group_8 {
		width: 240rpx;
		height: 96rpx;
	}

	.frame {
		width: 48rpx;
		height: 48rpx;
		margin-top: 32rpx;
		margin-left: 22rpx;
	}

	.group_7 {
		width: 240rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
	}

	.rectangle_18503 {
		width: 240rpx;
		height: 88rpx;
	}

	.text_1 {
		font-size: 36rpx;
		color: #617280;
		text-align: center;
	}

	.group_9 {
		width: 240rpx;
		height: 88rpx;
		display: flex;
		flex-direction: row;    justify-content: flex-end;
	}

	.group_13980,
	.group_13979 {
		width: 48rpx;
		height: 48rpx;
		margin-top: 32rpx;
		margin-left: 28rpx;
	}

	.div_1 {
		width: 754rpx;
		height: 2rpx;
	}

	/* ===== card ===== */
	.group_48164 {
		width: 692rpx;
		height: 232rpx;
		margin-top: 28rpx;
		margin-left: 30rpx;
	}

	.rectangle_23292 {
		width: 692rpx;
		height: 232rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
    position: relative;

	}

	.group_48163 {
		width: 152rpx;
		height: 38rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.flexcontainer_1 {
		display: flex;
		flex-direction: row;
		margin-top: 10rpx;
	}

	.flexcontainer_2 {
		display: flex;
		flex-direction: column;
		margin-left: 22rpx;
	}

	.text_2 {
		font-size: 28rpx;
		color: #333333;
	}

	.text_3 {
		font-size: 26rpx;
		color: #333333;
	}

	.group_48162 {
		width: 52rpx;
		height: 32rpx;
		margin-left: 20rpx;
		margin-top: 46rpx;
	}

	.rectangle_23290 {
		width: 108rpx;
		height: 78rpx;
	}

	.f0763869907c4a2a56d1061936006358 {
		width: 108rpx;
		height: 78rpx;
	}

	.text_4 {
		font-size: 22rpx;
		color: #767676;
		margin-top: 10rpx;
	}

	/* ===== balance ===== */
	.group_48161 {
		position: relative;
		width: 750rpx;
		height: 88rpx;
		margin-top: 28rpx;
		margin-bottom: 14rpx;
	}

	.rectangle_23285 {
		width: 750rpx;
		height: 88rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.text_5 {
		top: 38rpx;
		margin-left: 60rpx;
		font-size: 28rpx;
		color: #1a1a1a;
	}

	.text_6 {
		top: 40rpx;
		margin-right: 28rpx;
		font-size: 34rpx;
		font-weight: bold;
	}

	/* ===== banner ===== */
	.group_48140_3x {
		width: 750rpx;
		height: 364rpx;
	}

	/* ===== limit ===== */
	.group_48166 {
		width: 750rpx;
		position: relative;
	}

	.flexcontainer_3 {
		display: flex;
		flex-direction: row;
		margin-left: 28rpx;
	}

	.text_7 {
		font-size: 28rpx;
	}

	.group_48165 {
		width: 28rpx;
		height: 28rpx;
		margin-left: 10rpx;
	}

	.panel_limits {
		width: 750rpx;
		height: 424rpx;
		background-color: #ffffff;
	}

	.flexcontainer_4,
	.flexcontainer_6,
	.flexcontainer_8 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 40rpx 26rpx 0 26rpx;
	}

	.text_8,
	.text_11,
	.text_14 {
		font-size: 28rpx;
		color: #333;
	}

	.text_9,
	.text_12,
	.text_15 {
		font-size: 24rpx;
		color: #aaa;
	}

	.text_10,
	.text_13,
	.text_16 {
		font-size: 30rpx;
		font-weight: bold;
	}

	/* 分割线 */
	.div_2,
	.div_3 {
		width: 694rpx;
		height: 2rpx;
		margin-left: 28rpx;
	}

	/* ===== list ===== */
	.panel_limits_1 {
		width: 750rpx;
		background-color: #ffffff;
	}

	.rectangle_23294,
	.rectangle_23294_1,
	.rectangle_23294_2,
	.rectangle_23294_3,
	.rectangle_23294_4,
	.rectangle_23294_5,
	.rectangle_23294_6 {
		width: 750rpx;
		height: 108rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1rpx solid #eee;
	}

	.text_17,
	.text_19,
	.text_21,
	.text_23,
	.text_25,
	.text_26,
	.text_27 {
		font-size: 28rpx;
		margin-left: 28rpx;
	}

	.group_13987,
	.group_13987_1,
	.group_13987_2,
	.group_13987_3,
	.group_13987_4 {
		width: 28rpx;
		height: 28rpx;
		margin-left: auto;
		margin-right: 28rpx;
	}

	/* ===== others ===== */
	.group_13994_1,
	.group_13995 {
		width: 750rpx;
		height: 108rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.text_28,
	.text_29 {
		font-size: 28rpx;
		margin-left: 28rpx;
	}

	.group_13987_5,
	.group_13987_6 {
		width: 28rpx;
		height: 28rpx;
		margin-right: 28rpx;
	}

	.dee351fc65540488ca79ac78c10072f2 {
		width: 750rpx;
		height: 200rpx;
	}

	.home {
		position: absolute;
		bottom: 0;
		left: 0;
	}
</style>