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

<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-secondary);
  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>