样式调整

Web/src/views/BalanceView.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="page-container-flex">
+    <!-- 顶部导航栏 -->
+    <van-nav-bar title="交易记录" placeholder>
+      <template #right>
+        <van-button 
+          v-if="tabActive === 'balance'" 
+          type="primary" 
+          size="small" 
+          @click="transactionsRecordRef.openAddDialog()"
+        >
+          手动录账
+        </van-button>
+        <van-button 
+          v-if="tabActive === 'email'"
+          size="small" 
+          type="primary" 
+          :loading="syncing"
+          @click="emailRecordRef.handleSync()"
+        >
+          立即同步
+        </van-button>
+      </template>
+    </van-nav-bar>
+    <van-tabs v-model:active="tabActive" animated>
+      <van-tab title="账单记录" name="balance" />
+      <van-tab title="邮件记录" name="email" />
+    </van-tabs>
+
+    <TransactionsRecord v-if="tabActive === 'balance'" ref="transactionsRecordRef"/>
+    <EmailRecord v-else-if="tabActive === 'email'" ref="emailRecordRef" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import TransactionsRecord from './TransactionsRecord.vue';
+import EmailRecord from './EmailRecord.vue';
+const tabActive = ref('balance');
+
+const transactionsRecordRef = ref(null);
+const emailRecordRef = ref(null);
+
+</script>
+
+<style scoped>
+:deep(.van-pull-refresh) {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 设置页面容器背景色 */
+:deep(.van-nav-bar) {
+  background: transparent !important;
+}
+</style>