@root-entry-name: 'default'; @import '~antd/es/style/themes/index.less'; @datepicker-custom-prefix-cls: ~'@{ant-prefix}-datepicker-custom'; .@{datepicker-custom-prefix-cls}-quarter-box { width: 230px; } .@{datepicker-custom-prefix-cls}-quarter { .@{ant-prefix}-picker-year-panel, .@{ant-prefix}-picker-quarter-panel { width: 230px; } // 修改选中的年份、季度背景颜⾊ .@{ant-prefix}-picker-cell-selected { .@{ant-prefix}-picker-cell-inner { background: #1890ff; } } // 使⽤CSS改变季度选择器的内容 .@{ant-prefix}-picker-quarter-panel { .@{ant-prefix}-picker-content { // 使季度选择器可以换⾏成两排 tr { display: flex; flex-wrap: wrap; } // 控制按钮外层宽度,使器溢出换⾏ td { display: flex; align-items: center; justify-content: center; width: 50%; height: 50px; padding: 20px; } } // 使before伪元素和按钮背景颜⾊⼀致 .@{ant-prefix}-picker-cell-selected { &::before { color: #fff; background: #1890ff; } } // 控制伪元素所占宽度 .@{ant-prefix}-picker-cell { &::before { right: auto; left: auto; display: flex; align-items: center; justify-content: center; width: 60%; } } // 隐藏季度选择器的按钮,⽤伪元素代替 .@{ant-prefix}-picker-cell-inner { display: none; } // 根据title更换相应伪元素的content,使其代替原本的按钮 .@{ant-prefix}-picker-cell[title$='-Q1'] { &::before { content: '第一季度'; } } .@{ant-prefix}-picker-cell[title$='-Q2'] { &::before { content: '第二季度'; } } .@{ant-prefix}-picker-cell[title$='-Q3'] { &::before { content: '第三季度'; } } .@{ant-prefix}-picker-cell[title$='-Q4'] { &::before { content: '第四季度'; } } } }