ソースを参照

style: 优化充电启动页余额提示的排版与文案

- 金额独立成行放大加粗,标题加钱包图标
- 去充值改为胶囊按钮(正常灰描边/低余额红底白字)
- 低余额整卡浅红底红边框,提示文案嵌入具体金额

Co-Authored-By: Claude Code <noreply@anthropic.com>
skyline 1 日 前
コミット
6db0616496
1 ファイル変更14 行追加14 行削除
  1. 14 14
      charge-front/src/pages-charge/appointment/appointment.vue

+ 14 - 14
charge-front/src/pages-charge/appointment/appointment.vue

@@ -200,34 +200,34 @@
       <!-- 当前余额 + 低余额提醒,点击去充值(充值后返回本页) -->
       <view
           class="mt-20 block flex-align-center pl-30 pr-30 pt-30 pb-30"
+          :style="isLowBalance ? 'background-color: #fff5f5; border: 1rpx solid rgba(244, 54, 54, 0.25);' : ''"
           @click="to('/pages-user/wallet-recharge/wallet-recharge?back=1')"
       >
         <view class="flex-column">
           <view class="flex-align-center">
-            <view class="fs-28 color-000">当前余额</view>
-            <view
-                class="ml-64 fs-26"
-                :style="{ color: isLowBalance ? '#f43636' : '#333' }"
-            >{{ balanceText }}
-            </view
-            >
+            <uni-icons type="wallet-filled" size="16" :color="isLowBalance ? '#f43636' : '#999'"></uni-icons>
+            <view class="fs-26 ml-8 color-333">当前余额</view>
+          </view>
+          <view class="mt-8">
+            <view class="fs-40 fw-600" :style="{ color: isLowBalance ? '#f43636' : '#333' }">{{ balanceText }}</view>
           </view>
           <view
-              class="fs-24 mt-8"
-              style="color: #f43636"
               v-if="isLowBalance"
-          >余额较少,可能无法完成本次充电,建议先充值
+              class="fs-24 mt-8 lh-30"
+              style="color: #f43636"
+          >余额仅 {{ balanceText }},可能无法完成本次充电
           </view
           >
         </view>
-        <view class="ml-auto flex-align-center">
+        <view class="ml-auto">
           <view
-              class="fs-24 mr-10"
-              :style="{ color: isLowBalance ? '#f43636' : '#999' }"
+              class="flex-center fs-24 fw-500"
+              :style="isLowBalance
+                  ? 'height: 56rpx; border-radius: 56rpx; background-color: #f43636; color: #fff; padding: 0 28rpx;'
+                  : 'height: 56rpx; border-radius: 56rpx; border: 1rpx solid rgba(0, 0, 0, 0.15); color: #666; padding: 0 28rpx;'"
           >去充值
           </view
           >
-          <uni-icons type="right" size="16" color="rgba(0,0,0,0.4)"></uni-icons>
         </view>
       </view>
       <view class="pt-60 pb-80"></view>