|
|
@@ -1,29 +1,35 @@
|
|
|
<template>
|
|
|
<navigation-bar title="个人中心"></navigation-bar>
|
|
|
|
|
|
- <image src="/static/images/user-bg.png" mode="widthFix" class="bg" />
|
|
|
+ <image
|
|
|
+ src="/static/images/user-bg.png"
|
|
|
+ mode="aspectFill"
|
|
|
+ class="bg"
|
|
|
+ />
|
|
|
|
|
|
<block v-if="user && user.mobilePhone">
|
|
|
<view class="container" :style="containerStyle">
|
|
|
- <view class="header">
|
|
|
- <view class="phone fs-34 color-fff">{{ user.mobilePhoneFormat }}</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 钱包余额主卡(品牌色块,呼应顶部背景) -->
|
|
|
+ <!-- 账户卡:手机号(用户名)+ 钱包余额 -->
|
|
|
<view
|
|
|
class="panel pressable"
|
|
|
hover-class="pressed"
|
|
|
hover-stay-time="80"
|
|
|
@click="toPage(-1)"
|
|
|
>
|
|
|
- <view class="panel-info flex-grow">
|
|
|
- <view class="fs-24 panel-label">钱包余额(元)</view>
|
|
|
- <view class="panel-amount">
|
|
|
- <text class="panel-symbol">¥</text>
|
|
|
- <text class="panel-num">{{ user.balance }}</text>
|
|
|
+ <view class="flex-align-center">
|
|
|
+ <uni-icons type="person" size="16" color="rgba(255,255,255,0.8)"></uni-icons>
|
|
|
+ <view class="panel-user fs-28 ml-8">{{ user.mobilePhoneFormat }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="panel-body flex-align-center">
|
|
|
+ <view class="panel-info flex-grow">
|
|
|
+ <view class="fs-24 panel-label">钱包余额(元)</view>
|
|
|
+ <view class="panel-amount">
|
|
|
+ <text class="panel-symbol">¥</text>
|
|
|
+ <text class="panel-num">{{ user.balance }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ <view class="recharge-btn flex-center fs-26 fw-500">充值</view>
|
|
|
</view>
|
|
|
- <view class="recharge-btn flex-center fs-26 fw-500">充值</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 功能菜单分组 -->
|
|
|
@@ -203,7 +209,7 @@ page {
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
width: 100%;
|
|
|
- height: 660rpx;
|
|
|
+ height: 320rpx;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
@@ -213,26 +219,29 @@ page {
|
|
|
height: 100vh;
|
|
|
width: 100%;
|
|
|
overflow-y: auto;
|
|
|
- padding: 0 30rpx;
|
|
|
+ padding: 20rpx 30rpx 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.header {
|
|
|
- height: 160rpx;
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- padding-bottom: 32rpx;
|
|
|
-}
|
|
|
-
|
|
|
.panel {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
background: linear-gradient(135deg, #2fa79d 0%, #1e756f 100%);
|
|
|
border-radius: 20rpx;
|
|
|
- padding: 40rpx;
|
|
|
+ padding: 36rpx 40rpx;
|
|
|
box-shadow: 0 8rpx 24rpx rgba(30, 117, 111, 0.35);
|
|
|
|
|
|
+ .panel-user {
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .panel-body {
|
|
|
+ margin-top: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
.panel-label {
|
|
|
color: rgba(255, 255, 255, 0.8);
|
|
|
line-height: 34rpx;
|