modify transaction statistics page style

This commit is contained in:
MaysWind
2023-07-16 15:28:43 +08:00
parent 9d273c172d
commit 2bf26212af
@@ -35,7 +35,8 @@
<v-card variant="flat"> <v-card variant="flat">
<template #title> <template #title>
<div class="d-flex align-center"> <div class="d-flex align-center">
<div class="statistics-toolbar"> <span>{{ $t('Statistics Data') }}</span>
<div class="statistics-toolbar ml-4">
<v-btn-group color="default" density="comfortable" variant="outlined" divided> <v-btn-group color="default" density="comfortable" variant="outlined" divided>
<v-btn :icon="icons.left" <v-btn :icon="icons.left"
:disabled="loading || query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type" :disabled="loading || query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
@@ -123,17 +124,17 @@
:key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader> :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader>
</v-card-text> </v-card-text>
<v-card-title class="statistics-overview-title pt-0" v-if="!initing"> <v-card-text class="statistics-overview-title pt-0" v-if="!initing">
<div>{{ totalAmountName }}</div> <span class="text-subtitle-1">{{ totalAmountName }}</span>
<div class="statistics-overview-amount ml-3" :class="statisticsTextColor" <span class="statistics-overview-amount ml-3" :class="statisticsTextColor"
v-if="statisticsData && statisticsData.items && statisticsData.items.length"> v-if="statisticsData && statisticsData.items && statisticsData.items.length">
{{ getDisplayAmount(statisticsData.totalAmount, defaultCurrency) }} {{ getDisplayAmount(statisticsData.totalAmount, defaultCurrency) }}
</div> </span>
<div class="text-subtitle-1 ml-3" <span class="text-subtitle-1 ml-3"
v-else-if="!statisticsData || !statisticsData.items || !statisticsData.items.length"> v-else-if="!statisticsData || !statisticsData.items || !statisticsData.items.length">
{{ $t('No transaction data') }} {{ $t('No transaction data') }}
</div> </span>
</v-card-title> </v-card-text>
<v-card-text v-if="!initing && query.chartType === allChartTypes.Pie"> <v-card-text v-if="!initing && query.chartType === allChartTypes.Pie">
<pie-chart <pie-chart
@@ -645,6 +646,7 @@ export default {
.statistics-overview-title { .statistics-overview-title {
line-height: 2rem !important; line-height: 2rem !important;
height: 46px;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
} }