515 lines
9.8 KiB
Vue
515 lines
9.8 KiB
Vue
<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;
|
|
}
|
|
|
|
.group_48163 {
|
|
width: 152rpx;
|
|
height: 38rpx;
|
|
margin-left: 540rpx;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.rectangle_23285 {
|
|
width: 750rpx;
|
|
height: 108rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.text_5 {
|
|
position: absolute;
|
|
top: 38rpx;
|
|
left: 60rpx;
|
|
font-size: 28rpx;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.text_6 {
|
|
position: absolute;
|
|
top: 40rpx;
|
|
right: 28rpx;
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* ===== banner ===== */
|
|
.group_48140_3x {
|
|
width: 750rpx;
|
|
height: 364rpx;
|
|
}
|
|
|
|
/* ===== limit ===== */
|
|
.group_48166 {
|
|
width: 750rpx;
|
|
}
|
|
|
|
.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> |