94 lines
1.7 KiB
Vue
94 lines
1.7 KiB
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>
|