style(Center): 新增 EventDetailModal 样式文件
- 添加事件详情弹窗的独立样式 - 配合黑金主题设计 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
70
src/views/Center/components/EventDetailModal.less
Normal file
70
src/views/Center/components/EventDetailModal.less
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user