diff --git a/src/views/Center/components/InvestmentCalendar.less b/src/views/Center/components/InvestmentCalendar.less index 9df43695..e5bf9c88 100644 --- a/src/views/Center/components/InvestmentCalendar.less +++ b/src/views/Center/components/InvestmentCalendar.less @@ -1,23 +1,37 @@ -// src/views/Dashboard/components/InvestmentCalendar.less +// src/views/Center/components/InvestmentCalendar.less +// 黑金主题日历样式 -// 颜色变量(与日历视图按钮一致的紫色) -@primary-color: #805AD5; -@primary-hover: #6B46C1; -@border-color: #e2e8f0; -@text-color: #2d3748; -@today-bg: #e6f3ff; +// ==================== 颜色变量 ==================== +// 黑金主题主色 +@gold-400: #D4AF37; +@gold-500: #B8960C; +@gold-gradient: linear-gradient(135deg, #D4AF37 0%, #F5E6A3 100%); -// 暗色模式颜色 -@dark-border-color: #4a5568; -@dark-text-color: #e2e8f0; -@dark-today-bg: #2d3748; +// 背景色 +@bg-deep: #0A0A14; +@bg-primary: #0F0F1A; +@bg-elevated: #1A1A2E; +@bg-surface: #252540; -// FullCalendar 自定义样式 +// 边框色 +@line-subtle: rgba(212, 175, 55, 0.1); +@line-default: rgba(212, 175, 55, 0.2); +@line-emphasis: rgba(212, 175, 55, 0.4); + +// 文字色 +@text-primary: rgba(255, 255, 255, 0.95); +@text-secondary: rgba(255, 255, 255, 0.6); +@text-muted: rgba(255, 255, 255, 0.4); + +// 今天高亮背景 +@today-bg: rgba(212, 175, 55, 0.1); + +// ==================== FullCalendar 样式 ==================== .fc { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; } -// 工具栏按钮紧密排列(提升优先级) +// 工具栏布局 .fc .fc-toolbar.fc-header-toolbar { justify-content: flex-start !important; gap: 8px !important; @@ -28,68 +42,96 @@ gap: 4px !important; } +// 标题金色渐变 +.fc .fc-toolbar-title { + background: @gold-gradient; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-weight: 700; +} + +// 表格边框 .fc-theme-standard { td, th { - border-color: @border-color; + border-color: @line-default; } } -// 按钮样式(针对 fc-button-group 内的按钮) -.fc .fc-toolbar .fc-button-group .fc-button { - background-color: @primary-color !important; - border-color: @primary-color !important; - color: #fff !important; +// 导航按钮样式 +.fc .fc-toolbar .fc-button-group .fc-button, +.fc .fc-button-primary { + background-color: @gold-400 !important; + border-color: @gold-400 !important; + color: @bg-deep !important; + font-weight: 600 !important; + transition: all 0.3s ease; &:hover { - background-color: @primary-hover !important; - border-color: @primary-hover !important; + background-color: @gold-500 !important; + border-color: @gold-500 !important; + transform: translateY(-1px); } &:not(:disabled):active, &:not(:disabled).fc-button-active { - background-color: @primary-hover !important; - border-color: @primary-hover !important; + background-color: @gold-500 !important; + border-color: @gold-500 !important; } } // 今天按钮样式 .fc .fc-toolbar .fc-today-button { - background-color: @primary-color !important; - border-color: @primary-color !important; - color: #fff !important; + background-color: @gold-400 !important; + border-color: @gold-400 !important; + color: @bg-deep !important; + font-weight: 600 !important; &:hover { - background-color: @primary-hover !important; - border-color: @primary-hover !important; + background-color: @gold-500 !important; + border-color: @gold-500 !important; } // 选中状态(disabled 表示当前视图包含今天) &:disabled { - background-color: @primary-hover !important; - border-color: @primary-hover !important; + background-color: @gold-500 !important; + border-color: @gold-500 !important; opacity: 1 !important; - color: #fff !important; + color: @bg-deep !important; } } +// 星期头 +.fc-col-header-cell-cushion { + color: @text-secondary; + font-weight: 500; +} + // 日期数字 .fc-daygrid-day-number { - color: @text-color; + color: @text-primary; font-weight: 500; } // 今天高亮 .fc-daygrid-day.fc-day-today { background-color: @today-bg !important; - border: 2px solid @primary-color !important; + border: 2px solid @gold-400 !important; } // 事件样式 .fc-event { border: none; - padding: 2px 4px; + padding: 2px 6px; font-size: 12px; font-weight: 500; + border-radius: 4px; + transition: all 0.2s ease; + + &:hover { + transform: scale(1.02); + box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3); + } } .fc-daygrid-event-dot { @@ -100,24 +142,53 @@ margin-top: 2px; } -// 暗色模式支持 +// 更多事件链接 +.fc-daygrid-more-link { + color: @gold-400; + font-weight: 500; + + &:hover { + color: @gold-500; + } +} + +// 弹出层样式 +.fc-popover { + background: @bg-elevated; + border: 1px solid @line-default; + border-radius: 8px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); + + .fc-popover-header { + background: rgba(212, 175, 55, 0.1); + color: @gold-400; + font-weight: 600; + } + + .fc-popover-body { + background: @bg-elevated; + } +} + +// ==================== 暗色模式支持 ==================== +// 由于整体设计已是暗色,这里主要是对比度微调 @media (prefers-color-scheme: dark) { .fc-theme-standard { td, th { - border-color: @dark-border-color; + border-color: @line-default; } } .fc-daygrid-day-number { - color: @dark-text-color; + color: @text-primary; } .fc-daygrid-day.fc-day-today { - background-color: @dark-today-bg !important; + background-color: @today-bg !important; } .fc-col-header-cell-cushion, .fc-daygrid-day-number { - color: @dark-text-color; + color: @text-primary; } }