104 lines
1.8 KiB
Vue
104 lines
1.8 KiB
Vue
|
<template>
|
|||
|
|
<div class="summary-card common-card">
|
|||
|
|
<template v-for="(config, key) in periodConfigs" :key="key">
|
|||
|
|
<div class="summary-item">
|
|||
|
|
<div class="label">{{ config.label }}{{ title }}率</div>
|
|||
|
|
<div class="value" :class="getValueClass(stats[key].rate)">
|
|||
|
|
{{ stats[key].rate }}<span class="unit">%</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="config.showDivider" class="divider"></div>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
const props = defineProps({
|
|||
|
|
stats: {
|
|||
|
|
type: Object,
|
|||
|
|
required: true
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
type: String,
|
|||
|
|
required: true
|
|||
|
|
},
|
|||
|
|
getValueClass: {
|
|||
|
|
type: Function,
|
|||
|
|
required: true
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const periodConfigs = {
|
|||
|
|
month: { label: '本月', showDivider: true },
|
|||
|
|
year: { label: '年度', showDivider: false }
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.summary-card {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: center;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 12px 16px;
|
|||
|
|
margin-top: 12px;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-item {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-item .label {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #969799;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-item .value {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
color: #323233;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-item :deep(.value.expense) {
|
|||
|
|
color: #ee0a24;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-item :deep(.value.income) {
|
|||
|
|
color: #07c160;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-item :deep(.value.warning) {
|
|||
|
|
color: #ff976a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-item .unit {
|
|||
|
|
font-size: 11px;
|
|||
|
|
margin-left: 1px;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-item .sub-label {
|
|||
|
|
font-size: 11px;
|
|||
|
|
color: #c8c9cc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.divider {
|
|||
|
|
width: 1px;
|
|||
|
|
height: 24px;
|
|||
|
|
background-color: #ebedf0;
|
|||
|
|
margin: 0 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (prefers-color-scheme: dark) {
|
|||
|
|
.summary-item .value {
|
|||
|
|
color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
.divider {
|
|||
|
|
background-color: #2c2c2c;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|