فهرست منبع

style: 手机号并入账户卡作为用户名展示

删除顶部独立手机号行,账户卡改为上下结构:顶部人物图标+手机号身份行,下方余额与充值按钮;顶部背景图收窄至320rpx作氛围层(aspectFill防变形),页面更聚焦
skyline 3 هفته پیش
والد
کامیت
c34a881dd6
1فایلهای تغییر یافته به همراه32 افزوده شده و 23 حذف شده
  1. 32 23
      charge-front/src/pages/user/user.vue

+ 32 - 23
charge-front/src/pages/user/user.vue

@@ -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;