From 7d933131fffc30016c7b725f8288609ccd0f4afc Mon Sep 17 00:00:00 2001
From: wikiboss <zacow@163.com>
Date: Thu, 17 Sep 2026 16:19:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(uniapp):=20=E5=AF=B9=E9=BD=90=E9=92=B1?=
 =?UTF-8?q?=E5=8C=85=E4=BD=99=E9=A2=9D=E9=A1=B5=E9=9D=A2=E9=BB=91=E9=87=91?=
 =?UTF-8?q?=E5=B0=8A=E4=BA=AB=E5=8D=A1=E7=89=87=E4=B8=8E=E6=94=B6=E6=94=AF?=
 =?UTF-8?q?=E6=98=8E=E7=BB=86=E5=8D=A1=E7=89=87=E6=B5=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tests/verify_wallet_money_spec.js  |  75 +++
 uniapp/pages/user/wallet/money.vue | 989 ++++++++++++++++++-----------
 2 files changed, 708 insertions(+), 356 deletions(-)
 create mode 100644 tests/verify_wallet_money_spec.js

diff --git a/tests/verify_wallet_money_spec.js b/tests/verify_wallet_money_spec.js
new file mode 100644
index 0000000..f034ca9
--- /dev/null
+++ b/tests/verify_wallet_money_spec.js
@@ -0,0 +1,75 @@
+const fs = require('fs');
+const path = require('path');
+
+let passed = 0;
+let failed = 0;
+
+function assert(condition, testName, detail = '') {
+    if (condition) {
+        console.log(` [PASS] ${testName}`);
+        passed++;
+    } else {
+        console.error(` [FAIL] ${testName} - ${detail}`);
+        failed++;
+    }
+}
+
+console.log("========================================================");
+console.log("  钱包余额页面对齐黑金卡片与流水卡片流规格测试");
+console.log("========================================================\n");
+
+// 1. 验证 money.vue 存在性
+const moneyVuePath = path.resolve(__dirname, '../uniapp/pages/user/wallet/money.vue');
+assert(fs.existsSync(moneyVuePath), 'money.vue 文件存在');
+const content = fs.readFileSync(moneyVuePath, 'utf-8');
+
+// 2. 验证黑金尊享卡片结构
+assert(
+    content.includes('asset-card') && content.includes('money-hero'),
+    '包含黑金资产卡片与核心大字数结构',
+    '未升级为 asset-card 结构'
+);
+
+// 3. 验证余额与充值按钮
+assert(
+    content.includes('userInfo.money') &&
+    content.includes('/pages/pay/recharge') &&
+    content.includes('充值'),
+    '包含余额展示与充值跳转入口',
+    '缺少余额绑定或充值入口'
+);
+
+// 4. 验证金额显隐切换
+assert(
+    content.includes('showMoney') &&
+    (content.includes('cicon-eye') || content.includes('cicon-eye-off')),
+    '支持余额明文/掩码显隐切换',
+    '缺少显隐切换逻辑'
+);
+
+// 5. 验证流水列表卡片流升级
+assert(
+    content.includes('log-card'),
+    '收支明细升级为独立 log-card 卡片流',
+    '仍采用普通边框单行列表'
+);
+
+// 6. 验证总收入与总支出统计
+assert(
+    content.includes('pagination.income') && content.includes('pagination.expense'),
+    '包含当前筛选周期总收入与总支出统计',
+    '缺少收支统计'
+);
+
+// 7. 移除失效的 wallet_card_bg.png 依赖
+assert(
+    !content.includes('wallet_card_bg.png'),
+    '移除对失效旧背景图 wallet_card_bg.png 的硬编码依赖',
+    '仍依赖旧版失效背景图'
+);
+
+console.log("\n--------------------------------------------------------");
+console.log(`测试执行结果: 通过 ${passed} 项, 失败 ${failed} 项`);
+console.log("========================================================");
+
+process.exit(failed === 0 ? 0 : 1);
diff --git a/uniapp/pages/user/wallet/money.vue b/uniapp/pages/user/wallet/money.vue
index e147732..27e47ca 100644
--- a/uniapp/pages/user/wallet/money.vue
+++ b/uniapp/pages/user/wallet/money.vue
@@ -1,356 +1,633 @@
-<template>
-  <s-layout class="wallet-wrap" title="钱包">
-    <!-- 钱包卡片 -->
-    <view class="header-box ss-flex ss-row-center ss-col-center">
-      <view class="card-box ui-BG-Main ui-Shadow-Main">
-        <view class="card-head ss-flex ss-col-center">
-          <view class="card-title ss-m-r-10">钱包余额（元）</view>
-          <view
-            @tap="state.showMoney = !state.showMoney"
-            class="ss-eye-icon"
-            :class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"
-          ></view>
-        </view>
-        <view class="ss-flex ss-row-between ss-col-center ss-m-t-64">
-          <view class="money-num">{{ state.showMoney ? userInfo.money : '*****' }}</view>
-          <button class="ss-reset-button topup-btn" @tap="sheep.$router.go('/pages/pay/recharge')">
-            充值
-          </button>
-        </view>
-      </view>
-    </view>
-
-    <su-sticky>
-      <!-- 统计 -->
-      <view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
-        <uni-datetime-picker
-          v-model="state.data"
-          type="daterange"
-          @change="onChangeTime"
-          :end="state.today"
-        >
-          <button class="ss-reset-button date-btn">
-            <text>{{ dateFilterText }}</text>
-            <text class="cicon-drop-down ss-seldate-icon"></text>
-          </button>
-        </uni-datetime-picker>
-
-        <view class="total-box">
-          <view class="ss-m-b-10">总收入￥{{ state.pagination.income.toFixed(2) }}</view>
-          <view>总支出￥{{ (-state.pagination.expense).toFixed(2) }}</view>
-        </view>
-      </view>
-      <su-tabs
-        :list="tabMaps"
-        @change="onChange"
-        :scrollable="false"
-        :current="state.currentTab"
-      ></su-tabs>
-    </su-sticky>
-    <s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
-    <!-- 钱包记录 -->
-    <view v-if="state.pagination.total > 0">
-      <view
-        class="wallet-list ss-flex border-bottom"
-        v-for="item in state.pagination.data"
-        :key="item.id"
-      >
-        <view class="list-content">
-          <view class="title-box ss-flex ss-row-between ss-m-b-20">
-            <text class="title ss-line-1"
-              >{{ item.event_text }}{{ item.memo ? '-' + item.memo : '' }}</text
-            >
-            <view class="money">
-              <text v-if="item.amount >= 0" class="add">+{{ item.amount }}</text>
-              <text v-else class="minus">{{ item.amount }}</text>
-            </view>
-          </view>
-          <text class="time">{{ item.createtime }}</text>
-        </view>
-      </view>
-    </view>
-    <uni-load-more
-      v-if="state.pagination.total > 0"
-      :status="state.loadStatus"
-      :content-text="{
-        contentdown: '上拉加载更多',
-      }"
-    />
-  </s-layout>
-</template>
-
-<script setup>
-  import { computed, watch, reactive } from 'vue';
-  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
-  import sheep from '@/sheep';
-  import dayjs from 'dayjs';
-  import _ from 'lodash';
-
-  const headerBg = sheep.$url.css('/assets/addons/shopro/uniapp/user/wallet_card_bg.png');
-
-  const pagination = {
-    data: [],
-    current_page: 1,
-    total: 1,
-    last_page: 1,
-    expense: 0,
-    income: 0,
-  };
-  // 数据
-  const state = reactive({
-    showMoney: false,
-    date: [],
-    currentTab: 0,
-    pagination,
-    loadStatus: '',
-    today: '',
-  });
-
-  const tabMaps = [
-    {
-      name: '全部',
-      value: 'all',
-    },
-    {
-      name: '收入',
-      value: 'income',
-    },
-    {
-      name: '支出',
-      value: 'expense',
-    },
-  ];
-  const userInfo = computed(() => sheep.$store('user').userInfo);
-
-  const dateFilterText = computed(() => {
-    if (state.date[0] === state.date[1]) {
-      return state.date[0];
-    } else {
-      return state.date.join('~');
-    }
-  });
-
-  async function getLogList(page = 1, list_rows = 8) {
-    state.loadStatus = 'loading';
-    let res = await sheep.$api.user.wallet.log({
-      type: 'money',
-      tab: tabMaps[state.currentTab].value,
-      list_rows,
-      page,
-      date: appendTimeHMS(state.date),
-    });
-    if (res.code === 1) {
-      let list = _.concat(state.pagination.data, res.data.list.data);
-      state.pagination = {
-        ...res.data.list,
-        data: list,
-        income: res.data.income,
-        expense: res.data.expense,
-      };
-      if (state.pagination.current_page < state.pagination.last_page) {
-        state.loadStatus = 'more';
-      } else {
-        state.loadStatus = 'noMore';
-      }
-    }
-  }
-  onLoad(async (options) => {
-    state.today = dayjs().format('YYYY-MM-DD');
-    state.date = [state.today, state.today];
-    getLogList();
-  });
-
-  function onChange(e) {
-    state.pagination = pagination;
-    state.currentTab = e.index;
-    getLogList();
-  }
-
-  function onChangeTime(e) {
-    state.date[0] = e[0];
-    state.date[1] = e[e.length - 1];
-    state.pagination = pagination;
-    getLogList();
-  }
-
-  function appendTimeHMS(arr) {
-    return [arr[0] + ' 00:00:00', arr[1] + ' 23:59:59'];
-  }
-
-  onReachBottom(() => {
-    if (state.loadStatus !== 'noMore') {
-      getLogList(state.pagination.current_page + 1);
-    }
-  });
-</script>
-
-<style lang="scss" scoped>
-  // 钱包
-  .header-box {
-    background-color: $white;
-    padding: 30rpx;
-
-    .card-box {
-      width: 100%;
-      min-height: 300rpx;
-      padding: 40rpx;
-      background-size: 100% 100%;
-      border-radius: 30rpx;
-      overflow: hidden;
-      position: relative;
-      z-index: 1;
-      box-sizing: border-box;
-
-      &::after {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 100%;
-        z-index: 2;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: v-bind(headerBg) no-repeat;
-        pointer-events: none;
-      }
-
-      .card-head {
-        color: $white;
-        font-size: 30rpx;
-      }
-
-      .ss-eye-icon {
-        font-size: 40rpx;
-        color: $white;
-      }
-
-      .money-num {
-        font-size: 70rpx;
-        line-height: 70rpx;
-        font-weight: 500;
-        color: $white;
-        font-family: OPPOSANS;
-      }
-
-      .reduce-num {
-        font-size: 26rpx;
-        font-weight: 400;
-        color: $white;
-      }
-
-      .topup-btn {
-        width: 120rpx;
-        height: 60rpx;
-        line-height: 60rpx;
-        border-radius: 30px;
-        font-size: 26rpx;
-        font-weight: 500;
-        background-color: $white;
-        color: var(--ui-BG-Main);
-      }
-    }
-  }
-
-  // 筛选
-
-  .filter-box {
-    height: 114rpx;
-    background-color: $bg-page;
-
-    .total-box {
-      font-size: 24rpx;
-      font-weight: 500;
-      color: $dark-9;
-    }
-
-    .date-btn {
-      background-color: $white;
-      line-height: 54rpx;
-      border-radius: 27rpx;
-      padding: 0 20rpx;
-      font-size: 24rpx;
-      font-weight: 500;
-      color: $dark-6;
-
-      .ss-seldate-icon {
-        font-size: 50rpx;
-        color: $dark-9;
-      }
-    }
-  }
-
-  .tabs-box {
-    background: $white;
-    border-bottom: 2rpx solid #eeeeee;
-  }
-
-  // tab
-  .wallet-tab-card {
-    .tab-item {
-      height: 80rpx;
-      position: relative;
-
-      .tab-title {
-        font-size: 30rpx;
-      }
-
-      .cur-tab-title {
-        font-weight: $font-weight-bold;
-      }
-
-      .tab-line {
-        width: 60rpx;
-        height: 6rpx;
-        border-radius: 6rpx;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        bottom: 2rpx;
-        background-color: var(--ui-BG-Main);
-      }
-    }
-  }
-
-  // 钱包记录
-  .wallet-list {
-    padding: 30rpx;
-    background-color: #ffff;
-
-    .head-img {
-      width: 70rpx;
-      height: 70rpx;
-      border-radius: 50%;
-      background: $gray-c;
-    }
-
-    .list-content {
-      justify-content: space-between;
-      align-items: flex-start;
-      flex: 1;
-
-      .title {
-        font-size: 28rpx;
-        color: $dark-3;
-        width: 400rpx;
-      }
-
-      .time {
-        color: $gray-c;
-        font-size: 22rpx;
-      }
-    }
-
-    .money {
-      font-size: 28rpx;
-      font-weight: bold;
-      font-family: OPPOSANS;
-      .add {
-        color: var(--ui-BG-Main);
-      }
-
-      .minus {
-        color: $dark-3;
-      }
-    }
-  }
-</style>
+<template>
+  <s-layout class="money-wrap" title="钱包">
+    <!-- 顶部黑金尊享资产卡片 -->
+    <view class="header-box">
+      <view class="asset-card">
+        <!-- 卡片顶栏 -->
+        <view class="card-top ss-flex ss-row-between ss-col-center">
+          <view class="top-tag ss-flex ss-col-center">
+            <text class="tag-badge">现金资产</text>
+            <text class="top-title">账户钱包余额</text>
+          </view>
+          <view
+            class="eye-btn ss-flex ss-col-center"
+            @tap="state.showMoney = !state.showMoney"
+          >
+            <text class="eye-btn-text">{{ state.showMoney ? '隐藏金额' : '显示金额' }}</text>
+            <text
+              class="ss-m-l-6"
+              :class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"
+            ></text>
+          </view>
+        </view>
+
+        <!-- 余额核心大字数 -->
+        <view class="money-hero ss-flex ss-col-bottom ss-row-between">
+          <view class="hero-left ss-flex ss-col-bottom">
+            <text class="hero-symbol">¥</text>
+            <text class="hero-num">{{ state.showMoney ? (userInfo.money || '0.00') : '*****' }}</text>
+            <text class="hero-unit">元</text>
+          </view>
+          <button
+            class="ss-reset-button topup-btn ss-flex ss-row-center ss-col-center"
+            @tap="sheep.$router.go('/pages/pay/recharge')"
+          >
+            <text class="cicon-moneybag ss-m-r-6"></text>
+            <text>充值</text>
+          </button>
+        </view>
+
+        <!-- 动态指示胶囊 -->
+        <view class="rate-capsule ss-flex ss-row-between ss-col-center">
+          <view class="capsule-left ss-flex ss-col-center">
+            <text class="capsule-dot"></text>
+            <text class="capsule-text">线上充值与消费余额 · 下单直接抵扣</text>
+          </view>
+          <text class="capsule-tag">即时可用</text>
+        </view>
+
+        <!-- 底部数据栏：当前周期总收入 / 总支出 -->
+        <view class="card-footer ss-flex ss-row-between ss-col-center">
+          <view class="footer-metric">
+            <text class="metric-label">周期总收入</text>
+            <view class="metric-val-wrap ss-flex ss-col-bottom">
+              <text class="currency-symbol">¥</text>
+              <text class="metric-val">{{ state.showMoney ? (state.pagination.income || 0).toFixed(2) : '***' }}</text>
+            </view>
+          </view>
+          <view class="footer-metric">
+            <text class="metric-label">周期总支出</text>
+            <view class="metric-val-wrap ss-flex ss-col-bottom">
+              <text class="currency-symbol">¥</text>
+              <text class="metric-val">{{ state.showMoney ? (-state.pagination.expense || 0).toFixed(2) : '***' }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 吸顶筛选与 Tabs -->
+    <su-sticky>
+      <view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
+        <uni-datetime-picker
+          v-model="state.date"
+          type="daterange"
+          @change="onChangeTime"
+          :end="state.today"
+        >
+          <button class="ss-reset-button date-btn ss-flex ss-col-center">
+            <text class="cicon-calendar ss-m-r-8"></text>
+            <text>{{ dateFilterText }}</text>
+            <text class="cicon-drop-down ss-m-l-6"></text>
+          </button>
+        </uni-datetime-picker>
+
+        <view class="stats-summary ss-flex ss-col-center">
+          <view class="stat-tag income ss-m-r-12">
+            入 +¥{{ (state.pagination.income || 0).toFixed(2) }}
+          </view>
+          <view class="stat-tag expense">
+            出 -¥{{ (-state.pagination.expense || 0).toFixed(2) }}
+          </view>
+        </view>
+      </view>
+      <su-tabs
+        :list="tabMaps"
+        @change="onChange"
+        :scrollable="false"
+        :current="state.currentTab"
+      ></su-tabs>
+    </su-sticky>
+
+    <!-- 列表标题区 -->
+    <view class="section-header ss-flex ss-row-between ss-col-center">
+      <view class="section-title-wrap ss-flex ss-col-center">
+        <view class="title-bar"></view>
+        <text class="section-title">收支明细</text>
+      </view>
+      <text class="section-subtitle">实时流水入账</text>
+    </view>
+
+    <!-- 空状态 -->
+    <view class="empty-wrap" v-if="state.pagination.total === 0">
+      <s-empty text="暂无收支明细" icon="/static/data-empty.png" />
+    </view>
+
+    <!-- 流水卡片列表 -->
+    <view class="list-container" v-if="state.pagination.total > 0">
+      <view
+        class="log-card"
+        v-for="item in state.pagination.data"
+        :key="item.id"
+      >
+        <view class="log-top ss-flex ss-row-between ss-col-center">
+          <view class="log-title-box ss-flex ss-col-center">
+            <view
+              class="coin-icon ss-flex ss-row-center ss-col-center"
+              :class="item.amount >= 0 ? 'income' : 'expense'"
+            >
+              <text :class="item.amount >= 0 ? 'cicon-wallet' : 'cicon-order'"></text>
+            </view>
+            <view class="log-main-info">
+              <text class="log-title">{{ item.event_text }}{{ item.memo ? ' · ' + item.memo : '' }}</text>
+              <text class="log-date">{{ item.createtime }}</text>
+            </view>
+          </view>
+          <view class="log-amount ss-flex ss-col-center">
+            <text v-if="item.amount >= 0" class="amount-plus">+</text>
+            <text class="amount-num" :class="item.amount >= 0 ? 'income-num' : 'expense-num'">
+              {{ item.amount }}
+            </text>
+            <text class="amount-unit">元</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 加载更多 -->
+    <uni-load-more
+      v-if="state.pagination.total > 0"
+      :status="state.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import { computed, reactive } from 'vue';
+  import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import dayjs from 'dayjs';
+  import _ from 'lodash';
+
+  const pagination = {
+    data: [],
+    current_page: 1,
+    total: 1,
+    last_page: 1,
+    expense: 0,
+    income: 0,
+  };
+
+  const state = reactive({
+    showMoney: true,
+    date: [],
+    currentTab: 0,
+    pagination,
+    loadStatus: '',
+    today: '',
+  });
+
+  const tabMaps = [
+    {
+      name: '全部',
+      value: 'all',
+    },
+    {
+      name: '收入',
+      value: 'income',
+    },
+    {
+      name: '支出',
+      value: 'expense',
+    },
+  ];
+
+  const userInfo = computed(() => sheep.$store('user').userInfo || {});
+
+  const dateFilterText = computed(() => {
+    if (!state.date || state.date.length === 0) return '选择日期';
+    if (state.date[0] === state.date[1]) {
+      return state.date[0];
+    } else {
+      return `${state.date[0]} ~ ${state.date[1]}`;
+    }
+  });
+
+  async function getLogList(page = 1, list_rows = 10) {
+    state.loadStatus = 'loading';
+    try {
+      const res = await sheep.$api.user.wallet.log({
+        type: 'money',
+        tab: tabMaps[state.currentTab].value,
+        list_rows,
+        page,
+        date: appendTimeHMS(state.date),
+      });
+      if (res?.code === 1) {
+        const list = page === 1 ? res.data.list.data : _.concat(state.pagination.data, res.data.list.data);
+        state.pagination = {
+          ...res.data.list,
+          data: list,
+          income: res.data.income || 0,
+          expense: res.data.expense || 0,
+        };
+        state.loadStatus = state.pagination.current_page < state.pagination.last_page ? 'more' : 'noMore';
+        return;
+      }
+    } catch (e) {}
+    state.loadStatus = 'noMore';
+  }
+
+  onLoad(async () => {
+    state.today = dayjs().format('YYYY-MM-DD');
+    state.date = [state.today, state.today];
+    sheep.$store('user').getInfo();
+    getLogList(1);
+  });
+
+  onPullDownRefresh(async () => {
+    await sheep.$store('user').getInfo();
+    await getLogList(1);
+    uni.stopPullDownRefresh();
+  });
+
+  function onChange(e) {
+    state.pagination = { ...pagination, data: [] };
+    state.currentTab = e.index;
+    getLogList(1);
+  }
+
+  function onChangeTime(e) {
+    state.date[0] = e[0];
+    state.date[1] = e[e.length - 1];
+    state.pagination = { ...pagination, data: [] };
+    getLogList(1);
+  }
+
+  function appendTimeHMS(arr) {
+    if (!arr || arr.length < 2) return undefined;
+    return [`${arr[0]} 00:00:00`, `${arr[1]} 23:59:59`];
+  }
+
+  onReachBottom(() => {
+    if (state.loadStatus !== 'noMore') {
+      getLogList(state.pagination.current_page + 1);
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .money-wrap {
+    min-height: 100vh;
+    background-color: #f7f8fa;
+  }
+
+  /* 顶部资产区域 */
+  .header-box {
+    padding: 24rpx 30rpx 10rpx;
+
+    .asset-card {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 36rpx 32rpx 30rpx;
+      border-radius: 28rpx;
+      background: linear-gradient(138deg, #20222a 0%, #15161a 52%, #2c2419 100%);
+      box-shadow: 0 16rpx 36rpx rgba(18, 19, 23, 0.18), inset 0 1rpx 0 rgba(247, 219, 168, 0.28);
+      border: 1rpx solid rgba(235, 197, 131, 0.26);
+      position: relative;
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        position: absolute;
+        right: -60rpx;
+        top: -60rpx;
+        width: 240rpx;
+        height: 240rpx;
+        background: radial-gradient(circle, rgba(235, 197, 131, 0.16) 0%, rgba(235, 197, 131, 0) 70%);
+        border-radius: 50%;
+        pointer-events: none;
+      }
+
+      .card-top {
+        position: relative;
+        z-index: 2;
+
+        .top-tag {
+          .tag-badge {
+            font-size: 20rpx;
+            color: #2a2012;
+            background: linear-gradient(90deg, #f7dfa6 0%, #e2be78 100%);
+            padding: 4rpx 14rpx;
+            border-radius: 8rpx;
+            font-weight: 600;
+            margin-right: 12rpx;
+          }
+
+          .top-title {
+            font-size: 26rpx;
+            color: rgba(255, 255, 255, 0.85);
+            font-weight: 400;
+            letter-spacing: 1rpx;
+          }
+        }
+
+        .eye-btn {
+          padding: 6rpx 18rpx;
+          background: rgba(255, 255, 255, 0.08);
+          border: 1rpx solid rgba(235, 197, 131, 0.3);
+          border-radius: 24rpx;
+
+          .eye-btn-text {
+            font-size: 22rpx;
+            color: #f2cf8f;
+          }
+
+          .cicon-eye,
+          .cicon-eye-off {
+            font-size: 24rpx;
+            color: #f2cf8f;
+          }
+        }
+      }
+
+      /* 核心数值展示 */
+      .money-hero {
+        margin-top: 24rpx;
+        position: relative;
+        z-index: 2;
+
+        .hero-left {
+          .hero-symbol {
+            font-size: 36rpx;
+            font-weight: 700;
+            color: #ffffff;
+            margin-right: 6rpx;
+            margin-bottom: 6rpx;
+          }
+
+          .hero-num {
+            font-size: 64rpx;
+            font-weight: 700;
+            color: #ffffff;
+            line-height: 1.1;
+            font-family: OPPOSANS, DIN, -apple-system, sans-serif;
+            letter-spacing: 1rpx;
+          }
+
+          .hero-unit {
+            font-size: 26rpx;
+            color: #f4d397;
+            font-weight: 600;
+            margin-left: 12rpx;
+            margin-bottom: 6rpx;
+          }
+        }
+
+        .topup-btn {
+          height: 56rpx;
+          padding: 0 28rpx;
+          background: linear-gradient(90deg, #f7dfa6 0%, #e2be78 100%);
+          border-radius: 28rpx;
+          color: #3b2b10;
+          font-size: 24rpx;
+          font-weight: 600;
+          box-shadow: 0 6rpx 16rpx rgba(226, 190, 120, 0.28);
+        }
+      }
+
+      /* 胶囊指示栏 */
+      .rate-capsule {
+        margin-top: 24rpx;
+        background: rgba(244, 211, 151, 0.1);
+        border: 1rpx solid rgba(244, 211, 151, 0.22);
+        border-radius: 12rpx;
+        padding: 14rpx 20rpx;
+        position: relative;
+        z-index: 2;
+
+        .capsule-left {
+          .capsule-dot {
+            width: 10rpx;
+            height: 10rpx;
+            border-radius: 50%;
+            background-color: #eabf76;
+            margin-right: 12rpx;
+            box-shadow: 0 0 8rpx #eabf76;
+          }
+
+          .capsule-text {
+            font-size: 24rpx;
+            color: #fce8bf;
+            font-weight: 500;
+          }
+        }
+
+        .capsule-tag {
+          font-size: 20rpx;
+          color: #f7d598;
+          opacity: 0.85;
+        }
+      }
+
+      /* 底部收支汇总栏 */
+      .card-footer {
+        margin-top: 26rpx;
+        padding-top: 22rpx;
+        border-top: 1rpx solid rgba(255, 255, 255, 0.08);
+        position: relative;
+        z-index: 2;
+
+        .footer-metric {
+          flex: 1;
+
+          .metric-label {
+            font-size: 22rpx;
+            color: rgba(255, 255, 255, 0.55);
+            display: block;
+            margin-bottom: 6rpx;
+          }
+
+          .metric-val-wrap {
+            .currency-symbol {
+              font-size: 24rpx;
+              color: #f4d397;
+              font-weight: 600;
+              margin-right: 2rpx;
+              margin-bottom: 2rpx;
+            }
+
+            .metric-val {
+              font-size: 30rpx;
+              font-weight: 700;
+              color: #f4d397;
+              font-family: OPPOSANS, DIN, -apple-system, sans-serif;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /* 筛选区域 */
+  .filter-box {
+    height: 104rpx;
+    background-color: #ffffff;
+    border-bottom: 1rpx solid #f1f2f5;
+
+    .date-btn {
+      background-color: #f7f8fa;
+      height: 60rpx;
+      line-height: 60rpx;
+      border-radius: 30rpx;
+      padding: 0 24rpx;
+      font-size: 24rpx;
+      color: #374151;
+      font-weight: 500;
+
+      .cicon-calendar {
+        font-size: 28rpx;
+        color: #9ca3af;
+      }
+
+      .cicon-drop-down {
+        font-size: 24rpx;
+        color: #9ca3af;
+      }
+    }
+
+    .stats-summary {
+      .stat-tag {
+        font-size: 22rpx;
+        font-family: OPPOSANS;
+        padding: 4rpx 14rpx;
+        border-radius: 8rpx;
+        font-weight: 500;
+
+        &.income {
+          background-color: #e6f9f0;
+          color: #10b981;
+        }
+
+        &.expense {
+          background-color: #fef2f2;
+          color: #ef4444;
+        }
+      }
+    }
+  }
+
+  /* 列表标题区 */
+  .section-header {
+    padding: 30rpx 32rpx 16rpx;
+
+    .section-title-wrap {
+      .title-bar {
+        width: 6rpx;
+        height: 28rpx;
+        border-radius: 4rpx;
+        background: linear-gradient(180deg, #dfb775 0%, #ba8938 100%);
+        margin-right: 14rpx;
+      }
+
+      .section-title {
+        font-size: 30rpx;
+        font-weight: 600;
+        color: #22252a;
+      }
+    }
+
+    .section-subtitle {
+      font-size: 22rpx;
+      color: #999ea6;
+    }
+  }
+
+  .empty-wrap {
+    padding: 60rpx 0;
+  }
+
+  /* 卡片流列表 */
+  .list-container {
+    padding: 0 30rpx 20rpx;
+
+    .log-card {
+      background: #ffffff;
+      border-radius: 20rpx;
+      padding: 26rpx 28rpx;
+      margin-bottom: 20rpx;
+      box-shadow: 0 4rpx 16rpx rgba(35, 42, 60, 0.04);
+      border: 1rpx solid #f0f1f5;
+
+      .log-top {
+        .log-title-box {
+          .coin-icon {
+            width: 64rpx;
+            height: 64rpx;
+            border-radius: 50%;
+            margin-right: 18rpx;
+
+            &.income {
+              background: linear-gradient(135deg, #e6f9f0 0%, #c9f4de 100%);
+              .cicon-wallet {
+                font-size: 32rpx;
+                color: #10b981;
+              }
+            }
+
+            &.expense {
+              background: linear-gradient(135deg, #fef2f2 0%, #fde2e2 100%);
+              .cicon-order {
+                font-size: 32rpx;
+                color: #ef4444;
+              }
+            }
+          }
+
+          .log-main-info {
+            display: flex;
+            flex-direction: column;
+
+            .log-title {
+              font-size: 28rpx;
+              font-weight: 600;
+              color: #23272e;
+              margin-bottom: 6rpx;
+              max-width: 380rpx;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+
+            .log-date {
+              font-size: 22rpx;
+              color: #9ea4af;
+            }
+          }
+        }
+
+        .log-amount {
+          .amount-plus {
+            font-size: 30rpx;
+            font-weight: 700;
+            color: #b58028;
+            margin-right: 2rpx;
+          }
+
+          .amount-num {
+            font-size: 34rpx;
+            font-weight: 700;
+            font-family: OPPOSANS, DIN, -apple-system, sans-serif;
+
+            &.income-num {
+              color: #b58028;
+            }
+
+            &.expense-num {
+              color: #1f2937;
+            }
+          }
+
+          .amount-unit {
+            font-size: 22rpx;
+            color: #6b7280;
+            margin-left: 4rpx;
+          }
+        }
+      }
+    }
+  }
+</style>