feat: 在播放控制器中优化日期选择器,增加自定义样式和类型处理,提升用户体验
This commit is contained in:
parent
8cd8bb7491
commit
d870848926
@ -210,8 +210,9 @@ const handleTimelineClick = (event: MouseEvent) => {
|
||||
<a-date-picker
|
||||
:value="selectedDate"
|
||||
placeholder="请选择回放日期"
|
||||
@change="handleDateChange"
|
||||
@change="handleDateChange as any"
|
||||
style="margin-right: 8px"
|
||||
dropdownClassName="playback-datepicker-theme"
|
||||
/>
|
||||
<a-select :value="selectedHour" style="width: 150px" :options="hourOptions" @change="handleHourChange" />
|
||||
</a-col>
|
||||
@ -340,3 +341,22 @@ body[data-theme='dark'] {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.playback-datepicker-theme {
|
||||
.ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
|
||||
border-color: #0dbb8a !important; /* Today indicator */
|
||||
}
|
||||
.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
|
||||
background-color: #0dbb8a !important; /* Selected date background */
|
||||
}
|
||||
.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner .ant-picker-calendar-date-value {
|
||||
color: white !important; /* Text color for selected date */
|
||||
}
|
||||
|
||||
.ant-picker-today-btn {
|
||||
color: #0dbb8a !important; /* "Today" button text color */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user