224 lines
6.7 KiB
SCSS
224 lines
6.7 KiB
SCSS
|
/* ========================================
|
||
|
|
el-date-picker 自定义主题样式
|
||
|
|
背景色: #122C45
|
||
|
|
文字色: #FFFFFF
|
||
|
|
主题色/选中背景色: #289DFF
|
||
|
|
======================================== */
|
||
|
|
|
||
|
|
/* 防止样式被覆盖，提高优先级 */
|
||
|
|
.custom-date-picker {
|
||
|
|
/* 弹出框整体背景色 */
|
||
|
|
background-color: #122C45 !important;
|
||
|
|
/* 弹出框边框（主题色） */
|
||
|
|
border: 1px solid #289DFF !important;
|
||
|
|
/* 可选：阴影效果 */
|
||
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3) !important;
|
||
|
|
}
|
||
|
|
.el-date-editor .el-range-input {
|
||
|
|
color: #289DFF !important;
|
||
|
|
}
|
||
|
|
/* ========== 1. 顶部栏（年月切换区域） ========== */
|
||
|
|
.custom-date-picker .el-date-picker__header,
|
||
|
|
.custom-date-picker .el-picker-panel__header {
|
||
|
|
background-color: #122C45 !important;
|
||
|
|
border-bottom: 1px solid rgba(40, 157, 255, 0.3) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-date-picker .el-date-picker__header-label,
|
||
|
|
.custom-date-picker .el-picker-panel__header-label {
|
||
|
|
color: #FFFFFF !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-date-picker .el-picker-panel__icon-btn {
|
||
|
|
color: #FFFFFF !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-date-picker .el-picker-panel__icon-btn:hover {
|
||
|
|
color: #289DFF !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 年份/月份快速选择面板 */
|
||
|
|
.custom-date-picker .el-year-table td .el-year-table__cell__text,
|
||
|
|
.custom-date-picker .el-month-table td .el-month-table__cell__text {
|
||
|
|
color: #FFFFFF !important;
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-date-picker .el-year-table td .el-year-table__cell__text:hover,
|
||
|
|
.custom-date-picker .el-month-table td .el-month-table__cell__text:hover {
|
||
|
|
color: #289DFF !important;
|
||
|
|
background-color: rgba(40, 157, 255, 0.2) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-date-picker .el-year-table td.current .el-year-table__cell__text,
|
||
|
|
.custom-date-picker .el-month-table td.current .el-month-table__cell__text {
|
||
|
|
background-color: #289DFF !important;
|
||
|
|
color: #FFFFFF !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 2. 星期栏 ========== */
|
||
|
|
.custom-date-picker .el-date-table th,
|
||
|
|
.custom-date-picker .el-date-table__header th {
|
||
|
|
color: #289DFF !important;
|
||
|
|
background-color: #122C45 !important;
|
||
|
|
border-bottom: 1px solid rgba(40, 157, 255, 0.3) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 3. 日期单元格（默认状态） ========== */
|
||
|
|
.custom-date-picker .el-date-table td .el-date-table-cell__text {
|
||
|
|
color: #FFFFFF !important;
|
||
|
|
background-color: transparent !important;
|
||
|
|
border-radius: 4px;
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-date-picker .el-date-table td .el-date-table-cell__text:hover {
|
||
|
|
color: #289DFF !important;
|
||
|
|
background-color: rgba(40, 157, 255, 0.2) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 4. 选中状态（核心样式） ========== */
|
||
|
|
.custom-date-picker .el-date-table td.current .el-date-table-cell__text {
|
||
|
|
background-color: #289DFF !important;
|
||
|
|
color: #FFFFFF !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 5. 今天按钮样式 ========== */
|
||
|
|
.custom-date-picker .el-date-table td.today .el-date-table-cell__text {
|
||
|
|
color: #289DFF !important;
|
||
|
|
font-weight: bold;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-date-picker .el-date-table td.today.current .el-date-table-cell__text {
|
||
|
|
color: #FFFFFF !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 6. 其他月份日期（灰色显示） ========== */
|
||
|
|
.custom-date-picker .el-date-table td.next-month .el-date-table-cell__text,
|
||
|
|
.custom-date-picker .el-date-table td.prev-month .el-date-table-cell__text {
|
||
|
|
color: rgba(255, 255, 255, 0.35) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 7. 禁用日期样式 ========== */
|
||
|
|
.custom-date-picker .el-date-table td.disabled .el-date-table-cell__text {
|
||
|
|
color: rgba(255, 255, 255, 0.2) !important;
|
||
|
|
background-color: rgba(0, 0, 0, 0.2) !important;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 8. 底部按钮区域 ========== */
|
||
|
|
.custom-date-picker .el-picker-panel__footer {
|
||
|
|
background-color: #122C45 !important;
|
||
|
|
border-top: 1px solid rgba(40, 157, 255, 0.3) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-date-picker .el-button--text {
|
||
|
|
color: #289DFF !important;
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-date-picker .el-button--text:hover {
|
||
|
|
color: #66ccff !important;
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-date-picker .el-button--primary {
|
||
|
|
background-color: #289DFF !important;
|
||
|
|
border-color: #289DFF !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-date-picker .el-button--primary:hover {
|
||
|
|
background-color: #1a7acc !important;
|
||
|
|
border-color: #1a7acc !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 9. 小三角箭头 ========== */
|
||
|
|
/* Element Plus 版本 */
|
||
|
|
.custom-date-picker .el-popper__arrow::before {
|
||
|
|
background-color: #122C45 !important;
|
||
|
|
border: 1px solid #289DFF !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Element UI 版本 */
|
||
|
|
.custom-date-picker .popper__arrow {
|
||
|
|
border-bottom-color: #122C45 !important;
|
||
|
|
}
|
||
|
|
.custom-date-picker .popper__arrow::after {
|
||
|
|
border-bottom-color: #122C45 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 10. 范围选择器样式 ========== */
|
||
|
|
/* 范围选择器整体背景 */
|
||
|
|
.custom-date-picker.el-picker-panel--date-range {
|
||
|
|
background-color: #122C45 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 范围选择左右面板 */
|
||
|
|
.custom-date-picker .el-date-range-picker__content {
|
||
|
|
background-color: #122C45 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 范围选择头部 */
|
||
|
|
.custom-date-picker .el-date-range-picker__header {
|
||
|
|
color: #FFFFFF !important;
|
||
|
|
background-color: #122C45 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 范围选择 - 起始日期 */
|
||
|
|
.custom-date-picker .el-date-table td.start-date .el-date-table-cell__text,
|
||
|
|
.custom-date-picker .el-date-table td.end-date .el-date-table-cell__text {
|
||
|
|
background-color: #289DFF !important;
|
||
|
|
color: #FFFFFF !important;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 范围选择 - 中间区间 */
|
||
|
|
.custom-date-picker .el-date-table td.in-range .el-date-table-cell__text {
|
||
|
|
background-color: rgba(40, 157, 255, 0.25) !important;
|
||
|
|
color: #FFFFFF !important;
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 范围选择 - 区间悬停效果 */
|
||
|
|
.custom-date-picker .el-date-table td.in-range .el-date-table-cell__text:hover {
|
||
|
|
background-color: rgba(40, 157, 255, 0.4) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 11. 滚动条样式 ========== */
|
||
|
|
.custom-date-picker .el-scrollbar__bar {
|
||
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-date-picker .el-scrollbar__thumb {
|
||
|
|
background-color: #289DFF !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 12. 时间选择器样式（如有） ========== */
|
||
|
|
.custom-date-picker .el-time-spinner__item {
|
||
|
|
color: #FFFFFF !important;
|
||
|
|
background-color: #122C45 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-date-picker .el-time-spinner__item:hover {
|
||
|
|
background-color: rgba(40, 157, 255, 0.2) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-date-picker .el-time-spinner__item.active {
|
||
|
|
background-color: #289DFF !important;
|
||
|
|
color: #FFFFFF !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ========== 13. 快捷选项样式 ========== */
|
||
|
|
.custom-date-picker .el-picker-panel__shortcut {
|
||
|
|
color: #FFFFFF !important;
|
||
|
|
background-color: #122C45 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-date-picker .el-picker-panel__shortcut:hover {
|
||
|
|
background-color: rgba(40, 157, 255, 0.2) !important;
|
||
|
|
color: #289DFF !important;
|
||
|
|
}
|
||
|
|
.el-range__icon{
|
||
|
|
color: #289DFF !important;
|
||
|
|
}
|