modify the style of the custom time range

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
@@ -69,11 +69,12 @@
<v-list-item :key="dateRange.type" :value="dateRange.type" <v-list-item :key="dateRange.type" :value="dateRange.type"
:append-icon="(queryDateType === dateRange.type ? mdiCheck : undefined)" :append-icon="(queryDateType === dateRange.type ? mdiCheck : undefined)"
v-for="dateRange in allDateRanges"> v-for="dateRange in allDateRanges">
<v-list-item-title <v-list-item-title class="cursor-pointer"
class="cursor-pointer" @click="setDateFilter(dateRange.type)">
@click="setDateFilter(dateRange.type)"> <div class="d-flex align-center">
{{ dateRange.displayName }} <span>{{ dateRange.displayName }}</span>
<div class="statistics-custom-datetime-range" v-if="dateRange.isUserCustomRange && canShowCustomDateRange(dateRange.type)"> </div>
<div class="statistics-custom-datetime-range smaller" v-if="dateRange.isUserCustomRange && canShowCustomDateRange(dateRange.type)">
<span>{{ queryStartTime }}</span> <span>{{ queryStartTime }}</span>
<span>&nbsp;-&nbsp;</span> <span>&nbsp;-&nbsp;</span>
<br/> <br/>
@@ -1020,9 +1021,7 @@ init(props);
<style> <style>
.statistics-custom-datetime-range { .statistics-custom-datetime-range {
font-size: 0.7rem;
line-height: 1rem; line-height: 1rem;
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)) !important;
} }
.statistics-overview-title { .statistics-overview-title {
+18 -15
View File
@@ -208,26 +208,24 @@
</div> </div>
</template> </template>
<v-list :selected="[query.dateType]"> <v-list :selected="[query.dateType]">
<template :key="dateRange.type" <v-list-item class="text-sm" density="compact"
v-for="dateRange in allDateRanges"> :key="dateRange.type" :value="dateRange.type"
<v-list-item class="text-sm" density="compact" :class="{ 'list-item-selected': query.dateType === dateRange.type }"
:value="dateRange.type" :append-icon="(query.dateType === dateRange.type ? mdiCheck : undefined)"
:class="{ 'list-item-selected': query.dateType === dateRange.type }" v-for="dateRange in allDateRanges">
:append-icon="(query.dateType === dateRange.type ? mdiCheck : undefined)"> <v-list-item-title class="cursor-pointer"
<v-list-item-title class="cursor-pointer" @click="changeDateFilter(dateRange.type)">
@click="changeDateFilter(dateRange.type)"> <div class="d-flex align-center">
<div class="d-flex align-center"> <span class="text-sm ms-3">{{ dateRange.displayName }}</span>
<span class="text-sm ms-3">{{ dateRange.displayName }}</span> </div>
</div> <div class="transaction-list-custom-datetime-range ms-3 smaller" v-if="dateRange.isUserCustomRange && query.dateType === dateRange.type && query.minTime && query.maxTime">
</v-list-item-title>
<div class="ms-3 smaller" v-if="dateRange.isUserCustomRange && query.dateType === dateRange.type && query.minTime && query.maxTime">
<span>{{ queryMinTime }}</span> <span>{{ queryMinTime }}</span>
<span>&nbsp;-&nbsp;</span> <span>&nbsp;-&nbsp;</span>
<br/> <br/>
<span>{{ queryMaxTime }}</span> <span>{{ queryMaxTime }}</span>
</div> </div>
</v-list-item> </v-list-item-title>
</template> </v-list-item>
</v-list> </v-list>
</v-menu> </v-menu>
</th> </th>
@@ -1783,6 +1781,11 @@ init(props);
row-gap: 1rem; row-gap: 1rem;
} }
.transaction-list-custom-datetime-range {
line-height: 1rem;
}
.transaction-list-datetime-range .transaction-list-datetime-range-text { .transaction-list-datetime-range .transaction-list-datetime-range-text {
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)) !important; color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)) !important;
} }