更新Company页面的UI为FUI风格
This commit is contained in:
@@ -1,126 +1,66 @@
|
||||
// 事件详情抽屉样式（从底部弹出）- 深色毛玻璃风格
|
||||
// 整体比背景亮一些，形成层次感
|
||||
|
||||
// 深色主题变量
|
||||
@glass-bg: rgba(20, 24, 35, 0.95);
|
||||
@glass-header-bg: rgba(26, 31, 46, 0.98);
|
||||
@glass-border: rgba(255, 255, 255, 0.1);
|
||||
@glass-text: #E8E9ED;
|
||||
@glass-text-secondary: #A0A4B8;
|
||||
@glass-card-bg: rgba(26, 31, 46, 0.85);
|
||||
@glass-section-bg: rgba(21, 25, 34, 0.7);
|
||||
// 深色主题变量 - 提亮以区分背景
|
||||
@glass-bg: #2D3748;
|
||||
@glass-header-bg: #3D4A5C;
|
||||
@glass-border: rgba(255, 255, 255, 0.12);
|
||||
@glass-text: #F7FAFC;
|
||||
@glass-text-secondary: #CBD5E0;
|
||||
@glass-card-bg: #354259;
|
||||
@glass-section-bg: #3D4A5C;
|
||||
|
||||
// 深色抽屉样式
|
||||
.event-detail-drawer-dark {
|
||||
// 移除白色外边框和阴影
|
||||
.ant-drawer-content-wrapper {
|
||||
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
// 内容容器 - 深色毛玻璃效果
|
||||
.ant-drawer-content {
|
||||
background: @glass-bg !important;
|
||||
backdrop-filter: blur(24px) !important;
|
||||
-webkit-backdrop-filter: blur(24px) !important;
|
||||
}
|
||||
|
||||
// 标题样式 - 深色主题
|
||||
.ant-drawer-title {
|
||||
color: @glass-text !important;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
max-width: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 头部容器
|
||||
.ant-drawer-header {
|
||||
background: @glass-header-bg !important;
|
||||
border-bottom: 1px solid @glass-border !important;
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
// 头部标题区域
|
||||
.ant-drawer-header-title {
|
||||
flex-direction: row-reverse; // 关闭按钮在右边
|
||||
}
|
||||
|
||||
// 关闭按钮
|
||||
.ant-drawer-extra {
|
||||
.anticon-close {
|
||||
color: @glass-text;
|
||||
font-size: 18px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 内容区域
|
||||
.ant-drawer-body {
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
|
||||
// Chakra Card 样式覆盖
|
||||
.chakra-card {
|
||||
background: @glass-card-bg !important;
|
||||
border: 1px solid @glass-border !important;
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 12px;
|
||||
box-shadow: none !important;
|
||||
// 整个抽屉容器
|
||||
&.ant-drawer {
|
||||
// 内容包装器 - 移除白边
|
||||
.ant-drawer-content-wrapper {
|
||||
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
// 折叠区块标题样式覆盖 - 相关股票等标题
|
||||
.chakra-heading {
|
||||
// 内容容器
|
||||
.ant-drawer-content {
|
||||
background: @glass-bg !important;
|
||||
border: none !important;
|
||||
border-radius: 16px 16px 0 0 !important;
|
||||
}
|
||||
|
||||
// 头部容器
|
||||
.ant-drawer-header {
|
||||
background: @glass-header-bg !important;
|
||||
border-bottom: 1px solid @glass-border !important;
|
||||
padding: 16px 24px !important;
|
||||
border-radius: 16px 16px 0 0 !important;
|
||||
}
|
||||
|
||||
// 标题样式
|
||||
.ant-drawer-title {
|
||||
color: @glass-text !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
// 折叠区块背景
|
||||
[class*="chakra-collapse"] > div,
|
||||
.chakra-card > div > div > div {
|
||||
background: @glass-section-bg !important;
|
||||
}
|
||||
// 关闭按钮区域
|
||||
.ant-drawer-extra {
|
||||
.anticon-close {
|
||||
color: @glass-text !important;
|
||||
font-size: 18px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
// Badge 样式
|
||||
.chakra-badge {
|
||||
background: rgba(59, 130, 246, 0.2) !important;
|
||||
color: #60a5fa !important;
|
||||
}
|
||||
|
||||
// 所有文本默认颜色
|
||||
.chakra-text {
|
||||
color: @glass-text-secondary;
|
||||
}
|
||||
|
||||
// 按钮样式
|
||||
.chakra-button {
|
||||
&[data-variant="ghost"] {
|
||||
color: @glass-text-secondary;
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: @glass-text;
|
||||
color: #fff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// IconButton 样式
|
||||
.chakra-icon-button {
|
||||
color: @glass-text-secondary;
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: @glass-text;
|
||||
}
|
||||
}
|
||||
|
||||
// Ant Design Tag 样式
|
||||
.ant-tag {
|
||||
background: rgba(59, 130, 246, 0.15) !important;
|
||||
border-color: rgba(59, 130, 246, 0.3) !important;
|
||||
color: #60a5fa !important;
|
||||
// 内容区域
|
||||
.ant-drawer-body {
|
||||
background: @glass-bg !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,13 +15,13 @@ interface EventDetailModalProps {
|
||||
event: any; // TODO: 后续可替换为具体的 Event 类型
|
||||
}
|
||||
|
||||
// 深色毛玻璃主题颜色
|
||||
// 深色主题颜色 - 比背景亮，形成层次感（使用实色确保覆盖）
|
||||
const GLASS_THEME = {
|
||||
bg: 'rgba(20, 24, 35, 0.92)',
|
||||
headerBg: 'rgba(26, 31, 46, 0.95)',
|
||||
borderColor: 'rgba(255, 255, 255, 0.08)',
|
||||
textColor: '#E8E9ED',
|
||||
secondaryText: '#A0A4B8',
|
||||
bg: '#2D3748',
|
||||
headerBg: '#3D4A5C',
|
||||
borderColor: 'rgba(255, 255, 255, 0.12)',
|
||||
textColor: '#F7FAFC',
|
||||
secondaryText: '#CBD5E0',
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -55,29 +55,23 @@ const EventDetailModal: React.FC<EventDetailModalProps> = ({
|
||||
wrapper: isMobile ? {} : {
|
||||
maxWidth: 1400,
|
||||
margin: '0 auto',
|
||||
borderRadius: '16px 16px 0 0',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
mask: {
|
||||
backdropFilter: 'blur(8px)',
|
||||
background: 'rgba(0, 0, 0, 0.6)',
|
||||
background: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
content: {
|
||||
borderRadius: '16px 16px 0 0',
|
||||
background: GLASS_THEME.bg,
|
||||
backdropFilter: 'blur(20px)',
|
||||
border: 'none',
|
||||
boxShadow: '0 -8px 32px rgba(0, 0, 0, 0.4)',
|
||||
},
|
||||
header: {
|
||||
background: GLASS_THEME.headerBg,
|
||||
borderBottom: `1px solid ${GLASS_THEME.borderColor}`,
|
||||
padding: '16px 24px',
|
||||
backdropFilter: 'blur(12px)',
|
||||
borderRadius: '16px 16px 0 0',
|
||||
},
|
||||
body: {
|
||||
padding: 0,
|
||||
background: 'transparent',
|
||||
background: GLASS_THEME.bg,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user