99 lines
1.8 KiB
Vue
99 lines
1.8 KiB
Vue
<!-- 充值中心 -->
|
|
<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>
|