fix: 统一ui风格 修复导出当天的记录为空的问题

This commit is contained in:
xuncha
2026-01-10 23:41:15 +08:00
parent bc9ef140f5
commit bd3e9a63b7
2 changed files with 341 additions and 80 deletions

View File

@@ -379,29 +379,21 @@
border-radius: 10px;
font-size: 14px;
color: var(--text-primary);
cursor: pointer;
transition: all 0.2s;
&:hover {
background: var(--bg-hover);
}
svg {
color: var(--text-tertiary);
flex-shrink: 0;
}
span {
flex: 1;
}
.change-btn {
background: none;
border: none;
padding: 4px;
cursor: pointer;
color: var(--text-tertiary);
display: flex;
align-items: center;
justify-content: center;
&:hover {
color: var(--text-primary);
}
}
}
.media-options {
@@ -655,7 +647,8 @@
padding: 28px 32px;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
min-width: 400px;
min-width: 420px;
max-width: 500px;
h3 {
font-size: 18px;
@@ -664,41 +657,178 @@
margin: 0 0 20px;
}
.date-inputs {
.quick-select {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.date-input-group {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
label {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
}
input[type="date"] {
padding: 10px 14px;
.quick-btn {
flex: 1;
padding: 10px 12px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
outline: none;
transition: border-color 0.2s;
cursor: pointer;
transition: all 0.2s;
&:focus {
&:hover {
background: var(--bg-hover);
border-color: var(--primary);
color: var(--primary);
}
&::-webkit-calendar-picker-indicator {
cursor: pointer;
filter: var(--icon-filter, none);
&:active {
transform: scale(0.98);
}
}
}
.date-display {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: var(--bg-secondary);
border-radius: 12px;
margin-bottom: 24px;
.date-display-item {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: rgba(var(--primary-rgb), 0.05);
}
&.active {
background: rgba(var(--primary-rgb), 0.1);
border: 1px solid var(--primary);
}
.date-label {
font-size: 12px;
color: var(--text-tertiary);
font-weight: 500;
}
.date-value {
font-size: 15px;
color: var(--text-primary);
font-weight: 600;
}
}
.date-separator {
font-size: 14px;
color: var(--text-tertiary);
padding: 0 4px;
}
}
.calendar-container {
margin-bottom: 20px;
}
.calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
padding: 0 4px;
.calendar-nav-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
color: var(--text-secondary);
transition: all 0.2s;
&:hover {
background: var(--bg-hover);
border-color: var(--primary);
color: var(--primary);
}
&:active {
transform: scale(0.95);
}
}
.calendar-month {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 8px;
.calendar-weekday {
text-align: center;
font-size: 12px;
font-weight: 500;
color: var(--text-tertiary);
padding: 8px 0;
}
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
.calendar-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--text-primary);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
position: relative;
&.empty {
cursor: default;
}
&:not(.empty):hover {
background: var(--bg-hover);
}
&.in-range {
background: rgba(var(--primary-rgb), 0.08);
}
&.start,
&.end {
background: var(--primary);
color: #fff;
font-weight: 600;
&:hover {
background: var(--primary-hover);
}
}
}
}
@@ -715,6 +845,10 @@
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
&:active {
transform: scale(0.98);
}
}
.cancel-btn {
@@ -741,6 +875,11 @@
}
@keyframes exportSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}