Commit c52e623c authored by 李纪文's avatar 李纪文

fix: 修改日期选择样式

parent 9b178d22
......@@ -5,20 +5,19 @@
width: 230px;
}
.@{datepicker-custom-prefix-cls}-quarter {
// :global {
.ant-picker-year-panel,
.ant-picker-quarter-panel {
.@{ant-prefix}-picker-year-panel,
.@{ant-prefix}-picker-quarter-panel {
width: 230px;
}
// 修改选中的年份、季度背景颜⾊
.ant-picker-cell-selected {
.ant-picker-cell-inner {
.@{ant-prefix}-picker-cell-selected {
.@{ant-prefix}-picker-cell-inner {
background: #1890ff;
}
}
// 使⽤CSS改变季度选择器的内容
.ant-picker-quarter-panel {
.ant-picker-content {
.@{ant-prefix}-picker-quarter-panel {
.@{ant-prefix}-picker-content {
// 使季度选择器可以换⾏成两排
tr {
display: flex;
......@@ -35,14 +34,14 @@
}
}
// 使before伪元素和按钮背景颜⾊⼀致
.ant-picker-cell-selected {
.@{ant-prefix}-picker-cell-selected {
&::before {
color: #fff;
background: #1890ff;
}
}
// 控制伪元素所占宽度
.ant-picker-cell {
.@{ant-prefix}-picker-cell {
&::before {
right: auto;
left: auto;
......@@ -53,30 +52,29 @@
}
}
// 隐藏季度选择器的按钮,⽤伪元素代替
.ant-picker-cell-inner {
.@{ant-prefix}-picker-cell-inner {
display: none;
}
// 根据title更换相应伪元素的content,使其代替原本的按钮
.ant-picker-cell[title$='-Q1'] {
.@{ant-prefix}-picker-cell[title$='-Q1'] {
&::before {
content: '第一季度';
}
}
.ant-picker-cell[title$='-Q2'] {
.@{ant-prefix}-picker-cell[title$='-Q2'] {
&::before {
content: '第二季度';
}
}
.ant-picker-cell[title$='-Q3'] {
.@{ant-prefix}-picker-cell[title$='-Q3'] {
&::before {
content: '第三季度';
}
}
.ant-picker-cell[title$='-Q4'] {
.@{ant-prefix}-picker-cell[title$='-Q4'] {
&::before {
content: '第四季度';
}
}
}
// }
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment