zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modify the style of the custom time range

Browse Source
This commit is contained in:
MaysWind
2025-08-25 22:21:57 +08:00
parent 25681f622d
commit 0b48502a10
2 changed files with 24 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/desktop/statistics/TransactionPage.vue
+6 -7
View File
@@ -69,11 +69,12 @@
<v-list-item :key="dateRange.type" :value="dateRange.type"
:append-icon="(queryDateType === dateRange.type ? mdiCheck : undefined)"
v-for="dateRange in allDateRanges">
<v-list-item-title
class="cursor-pointer"
@click="setDateFilter(dateRange.type)">
{{ dateRange.displayName }}
<div class="statistics-custom-datetime-range" v-if="dateRange.isUserCustomRange && canShowCustomDateRange(dateRange.type)">
<v-list-item-title class="cursor-pointer"
@click="setDateFilter(dateRange.type)">
<div class="d-flex align-center">
<span>{{ dateRange.displayName }}</span>
</div>
<div class="statistics-custom-datetime-range smaller" v-if="dateRange.isUserCustomRange && canShowCustomDateRange(dateRange.type)">
<span>{{ queryStartTime }}</span>
<span>&nbsp;-&nbsp;</span>
<br/>
@@ -1020,9 +1021,7 @@ init(props);
<style>
.statistics-custom-datetime-range {
font-size: 0.7rem;
line-height: 1rem;
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)) !important;
}
.statistics-overview-title {
src/views/desktop/transactions/ListPage.vue
+18 -15
View File
@@ -208,26 +208,24 @@
</div>
</template>
<v-list :selected="[query.dateType]">
<template :key="dateRange.type"
v-for="dateRange in allDateRanges">
<v-list-item class="text-sm" density="compact"
:value="dateRange.type"
:class="{ 'list-item-selected': query.dateType === dateRange.type }"
:append-icon="(query.dateType === dateRange.type ? mdiCheck : undefined)">
<v-list-item-title class="cursor-pointer"
@click="changeDateFilter(dateRange.type)">
<div class="d-flex align-center">
<span class="text-sm ms-3">{{ dateRange.displayName }}</span>
</div>
</v-list-item-title>
<div class="ms-3 smaller" v-if="dateRange.isUserCustomRange && query.dateType === dateRange.type && query.minTime && query.maxTime">
<v-list-item class="text-sm" density="compact"
:key="dateRange.type" :value="dateRange.type"
:class="{ 'list-item-selected': query.dateType === dateRange.type }"
:append-icon="(query.dateType === dateRange.type ? mdiCheck : undefined)"
v-for="dateRange in allDateRanges">
<v-list-item-title class="cursor-pointer"
@click="changeDateFilter(dateRange.type)">
<div class="d-flex align-center">
<span class="text-sm ms-3">{{ dateRange.displayName }}</span>
</div>
<div class="transaction-list-custom-datetime-range ms-3 smaller" v-if="dateRange.isUserCustomRange && query.dateType === dateRange.type && query.minTime && query.maxTime">
<span>{{ queryMinTime }}</span>
<span>&nbsp;-&nbsp;</span>
<br/>
<span>{{ queryMaxTime }}</span>
</div>
</v-list-item>
</template>
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</th>
@@ -1783,6 +1781,11 @@ init(props);
row-gap: 1rem;
}
.transaction-list-custom-datetime-range {
line-height: 1rem;
}
.transaction-list-datetime-range .transaction-list-datetime-range-text {
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)) !important;
}