diff --git a/src/views/Center/components/EventDetailModal.less b/src/views/Center/components/EventDetailModal.less new file mode 100644 index 00000000..ee6719ec --- /dev/null +++ b/src/views/Center/components/EventDetailModal.less @@ -0,0 +1,70 @@ +/* EventDetailModal.less - 事件详情弹窗黑金主题样式 */ + +// ==================== 变量定义 ==================== +@color-bg-deep: #0A0A14; +@color-bg-primary: #0F0F1A; +@color-bg-elevated: #1A1A2E; + +@color-gold-400: #D4AF37; +@color-gold-500: #B8960C; +@color-gold-gradient: linear-gradient(135deg, #D4AF37 0%, #F5E6A3 100%); + +@color-line-subtle: rgba(212, 175, 55, 0.1); +@color-line-default: rgba(212, 175, 55, 0.2); + +@color-text-primary: rgba(255, 255, 255, 0.95); +@color-text-secondary: rgba(255, 255, 255, 0.6); + +// ==================== 全局 Modal 遮罩层样式 ==================== +.event-detail-modal-root { + .ant-modal-mask { + background: rgba(0, 0, 0, 0.7) !important; + backdrop-filter: blur(4px); + } +} + +// ==================== 主样式 ==================== +.event-detail-modal { + // Modal 整体 + .ant-modal-content { + background: linear-gradient(135deg, @color-bg-elevated 0%, @color-bg-primary 100%) !important; + border: 1px solid @color-line-default; + border-radius: 12px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 24px rgba(212, 175, 55, 0.1); + backdrop-filter: blur(16px); + } + + // Modal 头部 + .ant-modal-header { + background: transparent !important; + border-bottom: 1px solid @color-line-subtle; + padding: 16px 24px; + } + + // Modal 标题 + .ant-modal-title { + font-size: 18px; + font-weight: 700; + background: @color-gold-gradient; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + // 关闭按钮 + .ant-modal-close { + color: @color-text-secondary; + transition: all 0.3s ease; + + &:hover { + color: @color-gold-400; + background: rgba(212, 175, 55, 0.1); + } + } + + // Modal 内容区域 + .ant-modal-body { + padding: 16px 24px 24px; + background: transparent; + } +}