diff --git a/src/components/EventDetailPanel/CollapsibleHeader.js b/src/components/EventDetailPanel/CollapsibleHeader.js
index 77799a64..9c47ecd5 100644
--- a/src/components/EventDetailPanel/CollapsibleHeader.js
+++ b/src/components/EventDetailPanel/CollapsibleHeader.js
@@ -10,9 +10,9 @@ import {
Badge,
IconButton,
Button,
- useColorModeValue,
} from '@chakra-ui/react';
import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
+import { PROFESSIONAL_COLORS } from '@constants/professionalTheme';
/**
* 可折叠模块标题组件
@@ -38,9 +38,10 @@ const CollapsibleHeader = ({
onModeToggle = null,
isLocked = false
}) => {
- const sectionBg = useColorModeValue('gray.50', 'gray.750');
- const hoverBg = useColorModeValue('gray.100', 'gray.700');
- const headingColor = useColorModeValue('gray.700', 'gray.200');
+ // 使用深色主题颜色
+ const sectionBg = 'rgba(26, 31, 46, 0.6)';
+ const hoverBg = 'rgba(33, 38, 51, 0.8)';
+ const headingColor = PROFESSIONAL_COLORS.text.primary;
// 获取按钮文案
const getButtonText = () => {
diff --git a/src/components/EventDetailPanel/CollapsibleSection.js b/src/components/EventDetailPanel/CollapsibleSection.js
index 289e2b80..2ad10aec 100644
--- a/src/components/EventDetailPanel/CollapsibleSection.js
+++ b/src/components/EventDetailPanel/CollapsibleSection.js
@@ -5,10 +5,8 @@ import React, { useState } from 'react';
import {
Box,
Collapse,
- useColorModeValue,
} from '@chakra-ui/react';
import CollapsibleHeader from './CollapsibleHeader';
-import { PROFESSIONAL_COLORS } from '@constants/professionalTheme';
/**
* 通用可折叠区块组件
@@ -38,7 +36,8 @@ const CollapsibleSection = ({
showModeToggle = false,
defaultMode = 'detailed'
}) => {
- const sectionBg = PROFESSIONAL_COLORS.background.secondary;
+ // 使用半透明深色背景
+ const sectionBg = 'rgba(21, 25, 34, 0.6)';
// 模式状态：'detailed' | 'simple'
const [displayMode, setDisplayMode] = useState(defaultMode);
diff --git a/src/components/EventDetailPanel/DynamicNewsDetailPanel.js b/src/components/EventDetailPanel/DynamicNewsDetailPanel.js
index a2d16d1b..ef0569e4 100644
--- a/src/components/EventDetailPanel/DynamicNewsDetailPanel.js
+++ b/src/components/EventDetailPanel/DynamicNewsDetailPanel.js
@@ -86,8 +86,9 @@ const sectionReducer = (state, action) => {
const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
const dispatch = useDispatch();
const { user } = useAuth();
- const cardBg = PROFESSIONAL_COLORS.background.card;
- const borderColor = PROFESSIONAL_COLORS.border.default;
+ // 使用半透明背景以支持毛玻璃效果
+ const cardBg = 'rgba(26, 31, 46, 0.6)';
+ const borderColor = 'rgba(255, 255, 255, 0.08)';
const textColor = PROFESSIONAL_COLORS.text.secondary;
// 使用 useWatchlist Hook 管理自选股
diff --git a/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js b/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
index 49eba932..232f4348 100644
--- a/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
+++ b/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
@@ -130,12 +130,12 @@ const TimelineEventItem = React.memo(({ event, isSelected, onEventClick }) => {
{/* 第二行：标题 */}
{event.title}
diff --git a/src/views/Community/components/EventDetailModal/EventDetailModal.less b/src/views/Community/components/EventDetailModal/EventDetailModal.less
index e2378b3f..6707f9fc 100644
--- a/src/views/Community/components/EventDetailModal/EventDetailModal.less
+++ b/src/views/Community/components/EventDetailModal/EventDetailModal.less
@@ -1,7 +1,132 @@
-// 事件详情抽屉样式（从底部弹出）
-// 注意：大部分样式已在 TSX 的 styles 属性中配置，这里只保留必要的覆盖
-.event-detail-drawer {
- // 标题样式
+// 事件详情抽屉样式（从底部弹出）- 深色毛玻璃风格
+
+// 深色主题变量
+@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);
+
+.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;
+ }
+
+ // 折叠区块标题样式覆盖 - 相关股票等标题
+ .chakra-heading {
+ color: @glass-text !important;
+ }
+
+ // 折叠区块背景
+ [class*="chakra-collapse"] > div,
+ .chakra-card > div > div > div {
+ background: @glass-section-bg !important;
+ }
+
+ // 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;
+ }
+ }
+ }
+
+ // 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;
+ }
+ }
+}
+
+// 原有基础样式保留（非深色模式）
+.event-detail-drawer:not(.event-detail-drawer-dark) {
.ant-drawer-title {
color: #1A202C;
}
diff --git a/src/views/Community/components/EventDetailModal/EventDetailModal.tsx b/src/views/Community/components/EventDetailModal/EventDetailModal.tsx
index fe1e6b71..50751140 100644
--- a/src/views/Community/components/EventDetailModal/EventDetailModal.tsx
+++ b/src/views/Community/components/EventDetailModal/EventDetailModal.tsx
@@ -15,8 +15,17 @@ 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',
+};
+
/**
- * 事件详情抽屉组件（从底部弹出）
+ * 事件详情抽屉组件（从底部弹出）- 深色毛玻璃风格
*/
const EventDetailModal: React.FC = ({
open,
@@ -34,12 +43,12 @@ const EventDetailModal: React.FC = ({
width={isMobile ? '100%' : '70vw'}
title={event?.title || '事件详情'}
destroyOnHidden
- rootClassName="event-detail-drawer"
+ rootClassName="event-detail-drawer event-detail-drawer-dark"
closeIcon={null}
extra={
}
styles={{
@@ -47,10 +56,29 @@ const EventDetailModal: React.FC = ({
maxWidth: 1400,
margin: '0 auto',
borderRadius: '16px 16px 0 0',
+ overflow: 'hidden',
+ },
+ mask: {
+ backdropFilter: 'blur(8px)',
+ background: 'rgba(0, 0, 0, 0.6)',
+ },
+ 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)',
+ },
+ body: {
+ padding: 0,
+ background: 'transparent',
},
- content: { borderRadius: '16px 16px 0 0' },
- header: { background: '#FFFFFF', borderBottom: '1px solid #E2E8F0', padding: '16px 24px' },
- body: { padding: 0, background: '#FFFFFF' },
}}
>
{event && }