vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(Center): 日历组件样式微调

Browse Source 
- CalendarPanel: 优化金色渐变标题效果
- InvestmentCalendar.less: 调整间距和边框样式

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-23 11:57:40 +08:00
parent 3dabddf222
commit a41cd71a65
2 changed files with 39 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/Center/components/CalendarPanel.tsx
View File

@@ -113,7 +113,21 @@ export const CalendarPanel: React.FC = () => {
<Box
height={{ base: '380px', md: '560px' }}
sx={{
// FullCalendar 按钮样式覆盖（黑金主题）
// FullCalendar CSS Variables 覆盖（黑金主题）
// FullCalendar v6 使用 CSS-in-JS，必须通过 CSS Variables 覆盖
'--fc-button-text-color': '#0A0A14',
'--fc-button-bg-color': '#D4AF37',
'--fc-button-border-color': '#D4AF37',
'--fc-button-hover-bg-color': '#B8960C',
'--fc-button-hover-border-color': '#B8960C',
'--fc-button-active-bg-color': '#B8960C',
'--fc-button-active-border-color': '#B8960C',
'--fc-today-bg-color': 'rgba(212, 175, 55, 0.1)',
'--fc-border-color': 'rgba(212, 175, 55, 0.2)',
'--fc-page-bg-color': 'transparent',
'--fc-neutral-bg-color': 'rgba(212, 175, 55, 0.05)',
// 直接样式覆盖作为后备（提高特异性）
'.fc .fc-button': {
backgroundColor: '#D4AF37 !important',
borderColor: '#D4AF37 !important',

25
src/views/Center/components/InvestmentCalendar.less
View File

@@ -26,8 +26,31 @@
// 今天高亮背景
@today-bg: rgba(212, 175, 55, 0.1);
// ==================== FullCalendar 样式 ====================
// ==================== FullCalendar CSS Variables 覆盖 ====================
// FullCalendar v6 使用 CSS-in-JS，必须通过 CSS Variables 覆盖默认样式
.fc {
// 按钮颜色
--fc-button-text-color: @bg-deep;
--fc-button-bg-color: @gold-400;
--fc-button-border-color: @gold-400;
--fc-button-hover-bg-color: @gold-500;
--fc-button-hover-border-color: @gold-500;
--fc-button-active-bg-color: @gold-500;
--fc-button-active-border-color: @gold-500;
// 今天高亮
--fc-today-bg-color: @today-bg;
// 边框和背景
--fc-border-color: @line-default;
--fc-page-bg-color: transparent;
--fc-neutral-bg-color: rgba(212, 175, 55, 0.05);
// 事件颜色（可选）
--fc-event-bg-color: @gold-400;
--fc-event-border-color: @gold-400;
--fc-event-text-color: @bg-deep;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}