feat: 表单库卡片改横版统一尺寸 + 日程页小月历背景融入与休息日区分
- 表单库:卡片网格改为固定 3 列等宽,aspectRatio 恢复 4/3 横版,缩略图字段数同步调回 2 - 日程页:小月历背景透明融入左侧容器,周六/周日表头与单元格红字、浅灰底区分休息日(选中保持蓝底白字)
This commit is contained in:
+790
-265
File diff suppressed because it is too large
Load Diff
@@ -359,8 +359,8 @@ export default function SchedulePage() {
|
||||
<span style={{ fontWeight: 600 }}>日程</span>
|
||||
</div>
|
||||
|
||||
{/* 小型月历 */}
|
||||
<div style={{ padding: '8px 8px 4px' }}>
|
||||
{/* 小型月历:背景融入容器,休息日(周六/周日)与工作日区分 */}
|
||||
<div className="schedule-mini-calendar" style={{ padding: '8px 8px 4px' }}>
|
||||
<Calendar
|
||||
fullscreen={false}
|
||||
value={selectedDate}
|
||||
@@ -405,6 +405,34 @@ export default function SchedulePage() {
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<style>{`
|
||||
/* 背景融入左侧容器(#f7f7f7) */
|
||||
.schedule-mini-calendar .ant-picker-calendar,
|
||||
.schedule-mini-calendar .ant-picker-panel {
|
||||
background: transparent;
|
||||
}
|
||||
/* 表头休息日列(日/六)红色 */
|
||||
.schedule-mini-calendar .ant-picker-content th:first-child,
|
||||
.schedule-mini-calendar .ant-picker-content th:last-child {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
/* 休息日(周六/周日)浅灰底 + 红色日期,与工作日区分 */
|
||||
.schedule-mini-calendar .ant-picker-content .ant-picker-cell:nth-child(7n+1):not(.ant-picker-cell-selected) .ant-picker-calendar-date,
|
||||
.schedule-mini-calendar .ant-picker-content .ant-picker-cell:nth-child(7n+7):not(.ant-picker-cell-selected) .ant-picker-calendar-date {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.schedule-mini-calendar .ant-picker-content .ant-picker-cell:nth-child(7n+1):not(.ant-picker-cell-selected) .ant-picker-calendar-date-value,
|
||||
.schedule-mini-calendar .ant-picker-content .ant-picker-cell:nth-child(7n+7):not(.ant-picker-cell-selected) .ant-picker-calendar-date-value {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
/* 选中单元格保持高亮,不受休息日底色影响 */
|
||||
.schedule-mini-calendar .ant-picker-content .ant-picker-cell-selected .ant-picker-calendar-date {
|
||||
background: #1677ff;
|
||||
}
|
||||
.schedule-mini-calendar .ant-picker-content .ant-picker-cell-selected .ant-picker-calendar-date-value {
|
||||
color: #fff;
|
||||
}
|
||||
`}</style>
|
||||
{/* 图例 */}
|
||||
<div
|
||||
style={{
|
||||
|
||||
Reference in New Issue
Block a user