From 9750ab75babf3ee661f73a564b076c0207442c48 Mon Sep 17 00:00:00 2001 From: zzlgreat Date: Tue, 23 Dec 2025 10:48:33 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0Company=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E7=9A=84UI=E4=B8=BAFUI=E9=A3=8E=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../EventDetailPanel/CollapsibleHeader.js | 8 +- .../EventDetailPanel/CollapsibleSection.js | 4 +- .../DynamicNewsDetailPanel.js | 6 +- .../EventDetailModal/EventDetailModal.less | 156 ++++++------------ .../EventDetailModal/EventDetailModal.tsx | 24 +-- 5 files changed, 66 insertions(+), 132 deletions(-) diff --git a/src/components/EventDetailPanel/CollapsibleHeader.js b/src/components/EventDetailPanel/CollapsibleHeader.js index 9c47ecd5..6f9de85b 100644 --- a/src/components/EventDetailPanel/CollapsibleHeader.js +++ b/src/components/EventDetailPanel/CollapsibleHeader.js @@ -38,10 +38,10 @@ const CollapsibleHeader = ({ onModeToggle = null, isLocked = false }) => { - // 使用深色主题颜色 - const sectionBg = 'rgba(26, 31, 46, 0.6)'; - const hoverBg = 'rgba(33, 38, 51, 0.8)'; - const headingColor = PROFESSIONAL_COLORS.text.primary; + // 深色主题 - 标题区块背景稍亮 + const sectionBg = '#3D4A5C'; + const hoverBg = '#4A5568'; + const headingColor = '#F7FAFC'; // 获取按钮文案 const getButtonText = () => { diff --git a/src/components/EventDetailPanel/CollapsibleSection.js b/src/components/EventDetailPanel/CollapsibleSection.js index 2ad10aec..394b8623 100644 --- a/src/components/EventDetailPanel/CollapsibleSection.js +++ b/src/components/EventDetailPanel/CollapsibleSection.js @@ -36,8 +36,8 @@ const CollapsibleSection = ({ showModeToggle = false, defaultMode = 'detailed' }) => { - // 使用半透明深色背景 - const sectionBg = 'rgba(21, 25, 34, 0.6)'; + // 深色主题 - 折叠区块背景稍亮 + const sectionBg = '#354259'; // 模式状态：'detailed' | 'simple' const [displayMode, setDisplayMode] = useState(defaultMode); diff --git a/src/components/EventDetailPanel/DynamicNewsDetailPanel.js b/src/components/EventDetailPanel/DynamicNewsDetailPanel.js index ef0569e4..6d92d16b 100644 --- a/src/components/EventDetailPanel/DynamicNewsDetailPanel.js +++ b/src/components/EventDetailPanel/DynamicNewsDetailPanel.js @@ -86,10 +86,10 @@ const sectionReducer = (state, action) => { const DynamicNewsDetailPanel = ({ event, showHeader = true }) => { const dispatch = useDispatch(); const { user } = useAuth(); - // 使用半透明背景以支持毛玻璃效果 - const cardBg = 'rgba(26, 31, 46, 0.6)'; + // 深色主题 - 与弹窗背景一致 + const cardBg = '#2D3748'; const borderColor = 'rgba(255, 255, 255, 0.08)'; - const textColor = PROFESSIONAL_COLORS.text.secondary; + const textColor = '#CBD5E0'; // 使用 useWatchlist Hook 管理自选股 const { diff --git a/src/views/Community/components/EventDetailModal/EventDetailModal.less b/src/views/Community/components/EventDetailModal/EventDetailModal.less index 6707f9fc..c25258ad 100644 --- a/src/views/Community/components/EventDetailModal/EventDetailModal.less +++ b/src/views/Community/components/EventDetailModal/EventDetailModal.less @@ -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; } } } diff --git a/src/views/Community/components/EventDetailModal/EventDetailModal.tsx b/src/views/Community/components/EventDetailModal/EventDetailModal.tsx index 50751140..dd1a60ec 100644 --- a/src/views/Community/components/EventDetailModal/EventDetailModal.tsx +++ b/src/views/Community/components/EventDetailModal/EventDetailModal.tsx @@ -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 = ({ 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, }, }} >