Merge branch 'feature_bugfix/251217_stock' of https://git.valuefrontier.cn/vf/vf_react into feature_bugfix/251217_stock
* 'feature_bugfix/251217_stock' of https://git.valuefrontier.cn/vf/vf_react: 更新Company页面的UI为FUI风格 更新Company页面的UI为FUI风格
This commit is contained in:
@@ -130,12 +130,12 @@ const TimelineEventItem = React.memo(({ event, isSelected, onEventClick }) => {
|
||||
{/* 第二行:标题 */}
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color="#63b3ed"
|
||||
color="#e2e8f0"
|
||||
fontWeight="medium"
|
||||
noOfLines={2}
|
||||
lineHeight="1.5"
|
||||
mb={2}
|
||||
_hover={{ textDecoration: "underline" }}
|
||||
_hover={{ textDecoration: "underline", color: "#fff" }}
|
||||
>
|
||||
{event.title}
|
||||
</Text>
|
||||
|
||||
@@ -1,7 +1,72 @@
|
||||
// 事件详情抽屉样式(从底部弹出)
|
||||
// 注意:大部分样式已在 TSX 的 styles 属性中配置,这里只保留必要的覆盖
|
||||
.event-detail-drawer {
|
||||
// 标题样式
|
||||
// 事件详情抽屉样式(从底部弹出)- 深色毛玻璃风格
|
||||
// 整体比背景亮一些,形成层次感
|
||||
|
||||
// 深色主题变量 - 提亮以区分背景
|
||||
@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 {
|
||||
// 内容包装器 - 移除白边
|
||||
.ant-drawer-content-wrapper {
|
||||
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
// 内容容器
|
||||
.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;
|
||||
}
|
||||
|
||||
// 关闭按钮区域
|
||||
.ant-drawer-extra {
|
||||
.anticon-close {
|
||||
color: @glass-text !important;
|
||||
font-size: 18px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 内容区域
|
||||
.ant-drawer-body {
|
||||
background: @glass-bg !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 原有基础样式保留(非深色模式)
|
||||
.event-detail-drawer:not(.event-detail-drawer-dark) {
|
||||
.ant-drawer-title {
|
||||
color: #1A202C;
|
||||
}
|
||||
|
||||
@@ -15,8 +15,17 @@ interface EventDetailModalProps {
|
||||
event: any; // TODO: 后续可替换为具体的 Event 类型
|
||||
}
|
||||
|
||||
// 深色主题颜色 - 比背景亮,形成层次感(使用实色确保覆盖)
|
||||
const GLASS_THEME = {
|
||||
bg: '#2D3748',
|
||||
headerBg: '#3D4A5C',
|
||||
borderColor: 'rgba(255, 255, 255, 0.12)',
|
||||
textColor: '#F7FAFC',
|
||||
secondaryText: '#CBD5E0',
|
||||
};
|
||||
|
||||
/**
|
||||
* 事件详情抽屉组件(从底部弹出)
|
||||
* 事件详情抽屉组件(从底部弹出)- 深色毛玻璃风格
|
||||
*/
|
||||
const EventDetailModal: React.FC<EventDetailModalProps> = ({
|
||||
open,
|
||||
@@ -34,23 +43,36 @@ const EventDetailModal: React.FC<EventDetailModalProps> = ({
|
||||
width={isMobile ? '100%' : '70vw'}
|
||||
title={event?.title || '事件详情'}
|
||||
destroyOnHidden
|
||||
rootClassName="event-detail-drawer"
|
||||
rootClassName="event-detail-drawer event-detail-drawer-dark"
|
||||
closeIcon={null}
|
||||
extra={
|
||||
<CloseOutlined
|
||||
onClick={onClose}
|
||||
style={{ cursor: 'pointer', fontSize: 16, color: '#4A5568' }}
|
||||
style={{ cursor: 'pointer', fontSize: 18, color: GLASS_THEME.textColor }}
|
||||
/>
|
||||
}
|
||||
styles={{
|
||||
wrapper: isMobile ? {} : {
|
||||
maxWidth: 1400,
|
||||
margin: '0 auto',
|
||||
},
|
||||
mask: {
|
||||
background: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
content: {
|
||||
borderRadius: '16px 16px 0 0',
|
||||
background: GLASS_THEME.bg,
|
||||
border: 'none',
|
||||
},
|
||||
header: {
|
||||
background: GLASS_THEME.headerBg,
|
||||
borderBottom: `1px solid ${GLASS_THEME.borderColor}`,
|
||||
borderRadius: '16px 16px 0 0',
|
||||
},
|
||||
content: { borderRadius: '16px 16px 0 0' },
|
||||
header: { background: '#FFFFFF', borderBottom: '1px solid #E2E8F0', padding: '16px 24px' },
|
||||
body: { padding: 0, background: '#FFFFFF' },
|
||||
body: {
|
||||
padding: 0,
|
||||
background: GLASS_THEME.bg,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{event && <DynamicNewsDetailPanel event={event} showHeader={false} />}
|
||||
|
||||
Reference in New Issue
Block a user