日期選擇器el-date-picker的樣式修改
阿新 • • 發佈:2022-04-06
<style lang="less"> .el-picker-panel { background: #0f0472a9 !important; color: #ffffff; border: 1px solid #93bee7 !important; line-height: 20px; } .el-picker-panel .el-date-range-picker__time-header { border-bottom: 1px solid #93bee7 !important; } .el-picker-panel__icon-btn { width: 8px; height: 10px; color: #cbd3f0 !important; } .el-picker-panel .el-input__inner { background-color: #19466f; border: #75ebf2; color: #e8fdff; } .el-date-picker__header-label { color: #6ce6cb !important; } .el-date-picker__header-label:hover { color: #ffffff; } .el-date-table td.disabled div { background-color: #6891cfa8 !important; } .el-picker-panel .el-date-table th { color: #c3e3ec; } .el-picker-panel .el-date-table td.available { font-size: 16px; font-weight: bold; color: #6ce6cb; } .el-picker-panel .el-date-table td.available:hover { color: #ffffff; }
部分樣式在scope下無法生效,所以單獨寫了一個script
效果:
參考連結:https://blog.csdn.net/weixin_43131046/article/details/119248963?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-1-119248963.pc_agg_new_rank&utm_term=.el-picker-panel__footer&spm=1000.2123.3001.4430