From 0b48502a101812f650dc0680cf4accd100da76f2 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Mon, 25 Aug 2025 22:21:57 +0800
Subject: [PATCH] modify the style of the custom time range

---
 .../desktop/statistics/TransactionPage.vue    | 13 ++++----
 src/views/desktop/transactions/ListPage.vue   | 33 ++++++++++---------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index b07a6ce8..e9a3ca8a 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -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 {
diff --git a/src/views/desktop/transactions/ListPage.vue b/src/views/desktop/transactions/ListPage.vue
index 01a38eac..4ff7fd66 100644
--- a/src/views/desktop/transactions/ListPage.vue
+++ b/src/views/desktop/transactions/ListPage.vue
@@ -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;
 }