style: 我的钱包页参照个人中心风格重设计

banner图片卡改青绿渐变账户卡（标题+退款白底按钮+余额排版与个人中心一致）；页面底改青调灰；tabs与流水合并为白卡并用分隔线过渡；清理废弃的banner定位/scrollViewHeight/无限滚动死代码

charge-front/src/pages-user/wallet/wallet.vue

@@ -1,63 +1,57 @@
 <template>
   <view class="page flex-column">
     <navigation-bar
-        autoFixedStyle="background-color:#fff;"
+        autoFixedStyle="background-color:#f4f7f6;"
         title="我的钱包"
-        @ready="ready"
     ></navigation-bar>
-    <view class="head flex-shrink">
-      <view>
-        <image class="bg" src="../static/wallet-banner.png"></image>
-        <view class="fg pt-48 pl-48 pr-48">
-          <view class="flex-align-center">
-            <uni-icons
-                type="wallet-filled"
-                size="24"
-                color="#ffffff"
-            ></uni-icons>
-            <view class="fs-36 color-fff fw-500 ml-16">我的钱包</view>
-            <view
-                class="btn flex-center fs-28 ml-auto"
-                @click="to(`/pages-user/wallet-refund/wallet-refund`)"
-            >退款
-            </view
-            >
+    <view class="body flex-grow flex-column">
+      <!-- 账户卡（与个人中心同风格） -->
+      <view class="panel">
+        <view class="flex-align-center">
+          <uni-icons
+              type="wallet-filled"
+              size="22"
+              color="rgba(255,255,255,0.9)"
+          ></uni-icons>
+          <view class="fs-32 fw-600 ml-12 panel-title">我的钱包</view>
+          <view
+              class="refund-btn flex-center fs-26 fw-500 ml-auto"
+              hover-class="btn-pressed"
+              hover-stay-time="80"
+              @click="to(`/pages-user/wallet-refund/wallet-refund`)"
+          >退款
           </view>
-          <view class="price mt-50" v-if="user">
-            <text class="color-fff fw-600 fs-48" style="vertical-align: top"
-            >¥
-            </text
-            >
-            <text
-                class="color-fff fw-600 ml-12"
-                style="font-size: 46px; line-height: 46px"
-            >{{ user.balance }}
-            </text
-            >
+        </view>
+        <view class="mt-32" v-if="user">
+          <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>
-    </view>
-    <view class="body flex-grow flex-column">
-      <view class="tabs flex-shrink flex-center">
-        <view
-            v-for="(item, index) in tabs"
-            :key="index"
-            class="tab-item flex-center fs-30"
-            :style="{
-            color: tab === item.value ? '#1c2b29' : '#5c6b69',
-            fontWeight: tab === item.value ? '600' : '400',
-          }"
-            @click="changeTab(index)"
-        >{{ item.label }}
+      <!-- 记录卡：tabs + 流水 -->
+      <view class="record-card">
+        <view class="tabs flex-shrink flex-center">
           <view
-              :style="{ opacity: tab === item.value ? '1' : '0' }"
-              class="active"
-          ></view
-          >
+              v-for="(item, index) in tabs"
+              :key="index"
+              class="tab-item flex-center fs-30"
+              :style="{
+              color: tab === item.value ? '#1c2b29' : '#5c6b69',
+              fontWeight: tab === item.value ? '600' : '400',
+            }"
+              @click="changeTab(index)"
+          >{{ item.label }}
+            <view
+                :style="{ opacity: tab === item.value ? '1' : '0' }"
+                class="active"
+            ></view
+            >
+          </view>
         </view>
-      </view>
-      <view class="list pl-60 pr-60">
+        <view class="tabs-divider"></view>
+        <view class="list pl-40 pr-40">
         <view
             class="item flex-align-center pressable"
             hover-class="pressed"
@@ -105,6 +99,7 @@
         >
           <view class="fs-26" style="color: #8c9997">暂无记录</view>
         </view>
+        </view>
       </view>
       <view style="height: 170rpx"></view>
     </view>
@@ -122,12 +117,10 @@
 </template>
 
 <script setup lang="ts">
-import {useInfiniteScroll} from "../../utils/infinite-scroll";
 import {onReachBottom, onPullDownRefresh, onShow} from "@dcloudio/uni-app";
 import {fetchProfile, fetchWallet, listRefund} from "../../api/user";
 import {to} from "../../utils/navigate";
 import {ref} from "vue";
-import {rpxToPx} from "@/utils/device";
 import { requireAuth } from "@/utils/auth";
 
 const user = ref();
@@ -169,17 +162,6 @@ const dotColor = (item: any) => {
   if (item.type === 2) return "var(--color-warning)";
   return "#9daaa8";
 };
-/*const infiniteScroller = useInfiniteScroll(10, (page) => {
-  return fetchWallet(tab.value, page, 10).then((res: any) => {
-    if (res && res.length) {
-      res.forEach((item: any) => {
-        item.amount = (Number(item.amount) / 100).toFixed(2);
-      });
-    }
-    return res;
-  });
-});*/
-const scrollViewHeight = ref(0);
 
 onShow(() => {
   if (!requireAuth()) {
@@ -199,18 +181,9 @@ onReachBottom(() => {
 });
 
 onPullDownRefresh(() => {
-  // if(tab.value!==2){
-  //   infiniteScroller.refresh();
-  // }
   loadData();
 });
 
-const ready = (e: any) => {
-  scrollViewHeight.value =
-      getApp<any>().globalData.device.windowHeight -
-      (e.detail.navigationBarHeight + rpxToPx(380));
-};
-
 const refundLabel = (value: string) => {
   return refundStatusMap.value.find((item: any) => item.value === value)?.label
 }
@@ -240,26 +213,6 @@ const setupLabelColorStyle = (hex: string = "#000000", opacity = 0.2) => {
 const changeTab = (index: number) => {
   tab.value = tabs.value[index].value;
   loadData();
-  /*  if (tab.value === 2) {
-      let user = getApp<any>().globalData.user;
-      if (user) {
-        listRefund({userId: user.id,pageSize:1000}).then((res: any) => {
-          console.log(res)
-          let  dataList = (res.list || []).map(item => {
-            item.amount = (Number(item.refund) / 100).toFixed(2);
-            item.type = 2;
-            if (item.successTime) {
-              item.transactionTime = item.successTime.slice(0, 3).join("-") + " " + item.successTime.slice(3, 6).join(":")
-            }
-            return item;
-          })
-          infiniteScroller.setList(dataList);
-        })
-      } else {
-        infiniteScroller.refresh();
-      }
-
-    }*/
 }
 
 const loadData = () => {
@@ -311,44 +264,72 @@ const detail = (index: number) => {
 
 <style lang="scss">
 .page {
-  height: 100vh;
+  min-height: 100vh;
   width: 100vw;
-  background: linear-gradient(
-          180deg,
-          #d9efec 0%,
-          rgba(255, 255, 255, 0) 60.13%
-  );
-
-  .head {
-    padding: 30rpx 40rpx;
-
-    & > view {
-      position: relative;
-      height: 320rpx;
-      border-radius: 40rpx;
-      overflow: hidden;
-
-      .bg {
-        height: 100%;
-        width: 100%;
-      }
+  background: var(--bg-page);
 
-      .fg {
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        height: 100%;
-        width: 100%;
-
-        .btn {
-          width: 120rpx;
-          height: 64rpx;
-          border-radius: 40rpx;
-          background: rgba(255, 255, 255, 0.3);
-          color: var(--color-primary-deep);
-        }
-      }
+  .panel {
+    margin: 20rpx 30rpx 0;
+    background: linear-gradient(135deg, #2fa79d 0%, #1e756f 100%);
+    border-radius: 20rpx;
+    padding: 36rpx 40rpx;
+    box-shadow: 0 8rpx 24rpx rgba(30, 117, 111, 0.35);
+
+    .panel-title {
+      color: rgba(255, 255, 255, 0.95);
+    }
+
+    .panel-label {
+      color: rgba(255, 255, 255, 0.8);
+      line-height: 34rpx;
+    }
+
+    .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;
+    }
+
+    .panel-num {
+      font-size: 64rpx;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 72rpx;
+      white-space: nowrap;
+    }
+
+    .refund-btn {
+      width: 112rpx;
+      height: 56rpx;
+      border-radius: 28rpx;
+      background: #ffffff;
+      color: #1e756f;
+      transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1);
     }
+
+    .btn-pressed {
+      opacity: 0.85;
+    }
+  }
+
+  .record-card {
+    margin: 20rpx 30rpx 0;
+    background: #ffffff;
+    border-radius: 20rpx;
+    padding: 0 10rpx 10rpx;
+  }
+
+  .tabs-divider {
+    height: 1rpx;
+    background: var(--divider);
+    margin: 0 20rpx;
   }
 
   .body {
@@ -360,7 +341,7 @@ const detail = (index: number) => {
         /* flex-basis 0 强制严格等分，不受文字宽度影响 */
         flex: 1 1 0;
         min-width: 0;
-        height: 72rpx;
+        height: 88rpx;
         text-align: center;
 
         .active {
@@ -415,7 +396,6 @@ const detail = (index: number) => {
 
 .refund-status {
   display: inline-block;
-  //padding: 8rpx;
   font-size: 22rpx;
   font-weight: 500;
 }