Bläddra i källkod

style: 个人中心余额卡改品牌渐变,页面底色青调呼应

余额主卡改为青绿渐变+白色排版(¥符号与大数字基线对齐、充值按钮白底青字),成为页面视觉锚点与顶部背景呼应;页面底色改青调灰使下方白卡层次清晰
skyline 3 veckor sedan
förälder
incheckning
9809d8150c
1 ändrade filer med 22 tillägg och 11 borttagningar
  1. 22 11
      charge-front/src/pages/user/user.vue

+ 22 - 11
charge-front/src/pages/user/user.vue

@@ -9,7 +9,7 @@
         <view class="phone fs-34 color-fff">{{ user.mobilePhoneFormat }}</view>
       </view>
 
-      <!-- 钱包余额主卡 -->
+      <!-- 钱包余额主卡(品牌色块,呼应顶部背景) -->
       <view
         class="panel pressable"
         hover-class="pressed"
@@ -17,8 +17,11 @@
         @click="toPage(-1)"
       >
         <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 class="recharge-btn flex-center fs-26 fw-500">充值</view>
       </view>
@@ -191,6 +194,10 @@ onShow(() => {
 <style lang="scss">
 @use "../../styles/dialog.scss";
 
+page {
+  background-color: var(--bg-page);
+}
+
 .bg {
   position: absolute;
   left: 0;
@@ -220,13 +227,17 @@ onShow(() => {
 .panel {
   display: flex;
   align-items: center;
-  background: #ffffff;
+  background: linear-gradient(135deg, #2d9e95 0%, #23807a 100%);
   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 {
-    color: #1c2b29;
+    color: #ffffff;
     line-height: normal;
   }
 
@@ -235,13 +246,13 @@ onShow(() => {
     width: 128rpx;
     height: 56rpx;
     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 {
-    background: var(--color-primary-deep);
+    opacity: 0.85;
   }
 }