|
@@ -9,7 +9,7 @@
|
|
|
<view class="phone fs-34 color-fff">{{ user.mobilePhoneFormat }}</view>
|
|
<view class="phone fs-34 color-fff">{{ user.mobilePhoneFormat }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <!-- 钱包余额主卡 -->
|
|
|
|
|
|
|
+ <!-- 钱包余额主卡(品牌色块,呼应顶部背景) -->
|
|
|
<view
|
|
<view
|
|
|
class="panel pressable"
|
|
class="panel pressable"
|
|
|
hover-class="pressed"
|
|
hover-class="pressed"
|
|
@@ -17,8 +17,11 @@
|
|
|
@click="toPage(-1)"
|
|
@click="toPage(-1)"
|
|
|
>
|
|
>
|
|
|
<view class="flex-column">
|
|
<view class="flex-column">
|
|
|
- <view class="fs-24" style="color: #8c9997">钱包余额(元)</view>
|
|
|
|
|
- <view class="fs-56 fw-600 mt-8 balance-num">{{ user.balance }}</view>
|
|
|
|
|
|
|
+ <view class="fs-24 panel-label">钱包余额(元)</view>
|
|
|
|
|
+ <view class="flex-align-baseline mt-8">
|
|
|
|
|
+ <text class="fs-32 fw-500 panel-label">¥</text>
|
|
|
|
|
+ <text class="fs-64 fw-600 ml-8 balance-num">{{ user.balance }}</text>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="recharge-btn flex-center fs-26 fw-500">充值</view>
|
|
<view class="recharge-btn flex-center fs-26 fw-500">充值</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -191,6 +194,10 @@ onShow(() => {
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
@use "../../styles/dialog.scss";
|
|
@use "../../styles/dialog.scss";
|
|
|
|
|
|
|
|
|
|
+page {
|
|
|
|
|
+ background-color: var(--bg-page);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.bg {
|
|
.bg {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
left: 0;
|
|
left: 0;
|
|
@@ -220,13 +227,17 @@ onShow(() => {
|
|
|
.panel {
|
|
.panel {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- background: #ffffff;
|
|
|
|
|
|
|
+ background: linear-gradient(135deg, #2d9e95 0%, #23807a 100%);
|
|
|
border-radius: 20rpx;
|
|
border-radius: 20rpx;
|
|
|
- padding: 36rpx 40rpx;
|
|
|
|
|
- box-shadow: 0 4rpx 16rpx rgba(28, 43, 41, 0.05);
|
|
|
|
|
|
|
+ padding: 40rpx;
|
|
|
|
|
+ box-shadow: 0 8rpx 24rpx rgba(45, 158, 149, 0.25);
|
|
|
|
|
+
|
|
|
|
|
+ .panel-label {
|
|
|
|
|
+ color: rgba(255, 255, 255, 0.75);
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
.balance-num {
|
|
.balance-num {
|
|
|
- color: #1c2b29;
|
|
|
|
|
|
|
+ color: #ffffff;
|
|
|
line-height: normal;
|
|
line-height: normal;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -235,13 +246,13 @@ onShow(() => {
|
|
|
width: 128rpx;
|
|
width: 128rpx;
|
|
|
height: 56rpx;
|
|
height: 56rpx;
|
|
|
border-radius: 28rpx;
|
|
border-radius: 28rpx;
|
|
|
- background: var(--color-primary);
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- transition: background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
|
|
|
|
|
|
|
+ background: #ffffff;
|
|
|
|
|
+ color: var(--color-primary-deep);
|
|
|
|
|
+ transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&:active .recharge-btn {
|
|
&:active .recharge-btn {
|
|
|
- background: var(--color-primary-deep);
|
|
|
|
|
|
|
+ opacity: 0.85;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|