1

Web/src/views/statisticsV2/modules/IncomeBalanceCard.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="income-balance-card common-card">
+    <div class="stats-row">
+      <div class="stat-item">
+        <div class="stat-label">
+          本月收入
+        </div>
+        <div class="stat-amount income">
+          ¥{{ formatMoney(income) }}
+        </div>
+      </div>
+
+      <div class="stat-item">
+        <div class="stat-label">
+          结余
+        </div>
+        <div
+          class="stat-amount"
+          :class="balanceClass"
+        >
+          ¥{{ formatMoney(balance) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { formatMoney } from '@/utils/format'
+
+const props = defineProps({
+  income: {
+    type: Number,
+    required: true
+  },
+  balance: {
+    type: Number,
+    required: true
+  }
+})
+
+const balanceClass = computed(() => ({
+  'positive': props.balance >= 0,
+  'negative': props.balance < 0
+}))
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/theme.css';
+
+.income-balance-card {
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-xl);
+  margin-bottom: var(--spacing-xl);
+  box-shadow: var(--shadow-sm);
+}
+
+.stats-row {
+  display: flex;
+  gap: var(--spacing-3xl);
+}
+
+.stat-item {
+  flex: 1;
+
+  .stat-label {
+    font-size: var(--font-base);
+    color: var(--text-secondary);
+    margin-bottom: var(--spacing-md);
+  }
+
+  .stat-amount {
+    font-size: var(--font-xl);
+    font-weight: var(--font-semibold);
+    font-family: var(--font-display);
+    line-height: 1.2;
+
+    &.income {
+      color: var(--accent-success);
+    }
+
+    &.positive {
+      color: var(--accent-success);
+    }
+
+    &.negative {
+      color: var(--accent-danger);
+    }
+  }
+}
+</style>