Explorar el Código

fix: 余额卡渐变加深与排版重构,修复内容重叠

渐变色差加大(#2fa79d→#1e756f)+投影加深,卡片边界清晰;信息区flex-grow+min-width防挤压,金额行固定行高+nowrap防重叠,充值按钮独立右置
skyline hace 3 semanas
padre
commit
95b577e97b
Se han modificado 1 ficheros con 36 adiciones y 13 borrados
  1. 36 13
      charge-front/src/pages/user/user.vue

+ 36 - 13
charge-front/src/pages/user/user.vue

@@ -16,11 +16,11 @@
         hover-stay-time="80"
         @click="toPage(-1)"
       >
-        <view class="flex-column">
+        <view class="panel-info flex-grow">
           <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 class="recharge-btn flex-center fs-26 fw-500">充值</view>
@@ -227,27 +227,50 @@ page {
 .panel {
   display: flex;
   align-items: center;
-  background: linear-gradient(135deg, #2d9e95 0%, #23807a 100%);
+  overflow: hidden;
+  background: linear-gradient(135deg, #2fa79d 0%, #1e756f 100%);
   border-radius: 20rpx;
   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 {
-    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;
-    line-height: normal;
+    line-height: 72rpx;
+    white-space: nowrap;
   }
 
   .recharge-btn {
     flex-shrink: 0;
-    width: 128rpx;
-    height: 56rpx;
-    border-radius: 28rpx;
+    width: 136rpx;
+    height: 60rpx;
+    margin-left: 24rpx;
+    border-radius: 30rpx;
     background: #ffffff;
-    color: var(--color-primary-deep);
+    color: #1e756f;
     transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1);
   }