|
@@ -16,11 +16,11 @@
|
|
|
hover-stay-time="80"
|
|
hover-stay-time="80"
|
|
|
@click="toPage(-1)"
|
|
@click="toPage(-1)"
|
|
|
>
|
|
>
|
|
|
- <view class="flex-column">
|
|
|
|
|
|
|
+ <view class="panel-info flex-grow">
|
|
|
<view class="fs-24 panel-label">钱包余额(元)</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 class="panel-amount">
|
|
|
|
|
+ <text class="panel-symbol">¥</text>
|
|
|
|
|
+ <text class="panel-num">{{ user.balance }}</text>
|
|
|
</view>
|
|
</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>
|
|
@@ -227,27 +227,50 @@ page {
|
|
|
.panel {
|
|
.panel {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- background: linear-gradient(135deg, #2d9e95 0%, #23807a 100%);
|
|
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ background: linear-gradient(135deg, #2fa79d 0%, #1e756f 100%);
|
|
|
border-radius: 20rpx;
|
|
border-radius: 20rpx;
|
|
|
padding: 40rpx;
|
|
padding: 40rpx;
|
|
|
- box-shadow: 0 8rpx 24rpx rgba(45, 158, 149, 0.25);
|
|
|
|
|
|
|
+ box-shadow: 0 8rpx 24rpx rgba(30, 117, 111, 0.35);
|
|
|
|
|
|
|
|
.panel-label {
|
|
.panel-label {
|
|
|
- color: rgba(255, 255, 255, 0.75);
|
|
|
|
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
|
|
+ line-height: 34rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .panel-info {
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .panel-amount {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: baseline;
|
|
|
|
|
+ margin-top: 12rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .panel-symbol {
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: rgba(255, 255, 255, 0.85);
|
|
|
|
|
+ margin-right: 10rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .balance-num {
|
|
|
|
|
|
|
+ .panel-num {
|
|
|
|
|
+ font-size: 64rpx;
|
|
|
|
|
+ font-weight: 600;
|
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
|
- line-height: normal;
|
|
|
|
|
|
|
+ line-height: 72rpx;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.recharge-btn {
|
|
.recharge-btn {
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
- width: 128rpx;
|
|
|
|
|
- height: 56rpx;
|
|
|
|
|
- border-radius: 28rpx;
|
|
|
|
|
|
|
+ width: 136rpx;
|
|
|
|
|
+ height: 60rpx;
|
|
|
|
|
+ margin-left: 24rpx;
|
|
|
|
|
+ border-radius: 30rpx;
|
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
|
- color: var(--color-primary-deep);
|
|
|
|
|
|
|
+ color: #1e756f;
|
|
|
transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1);
|
|
transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1);
|
|
|
}
|
|
}
|
|
|
|
|
|