diff --git a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js index 7a552c91..5ed34b71 100644 --- a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js +++ b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js @@ -15,6 +15,7 @@ import { } from '@chakra-ui/react'; import { getImportanceConfig } from '../../../../constants/importanceLevels'; import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme'; +import { useDevice } from '@hooks/useDevice'; // 导入子组件 import ImportanceStamp from './ImportanceStamp'; @@ -54,6 +55,7 @@ const HorizontalDynamicNewsEventCard = React.memo(({ layout = 'vertical', }) => { const importance = getImportanceConfig(event.importance); + const { isMobile } = useDevice(); // 专业配色 - 黑色、灰色、金色主题 const cardBg = PROFESSIONAL_COLORS.background.card; @@ -67,7 +69,7 @@ const HorizontalDynamicNewsEventCard = React.memo(({ const showTimeline = useBreakpointValue({ base: false, md: true }); // 移动端隐藏时间轴 const cardPadding = useBreakpointValue({ base: 2, md: 3 }); // 移动端减小内边距 const titleFontSize = useBreakpointValue({ base: 'sm', md: 'md' }); // 移动端减小标题字体 - const titlePaddingRight = useBreakpointValue({ base: '80px', md: '120px' }); // 为关键词留空间 + const titlePaddingRight = useBreakpointValue({ base: '16px', md: '120px' }); // 桌面端为关键词留空间,移动端不显示关键词 const spacing = useBreakpointValue({ base: 2, md: 3 }); // 间距 /** @@ -170,8 +172,8 @@ const HorizontalDynamicNewsEventCard = React.memo(({ /> - {/* Keywords梦幻轮播 - 绝对定位在卡片右侧空白处 */} - {event.keywords && event.keywords.length > 0 && ( + {/* Keywords梦幻轮播 - 绝对定位在卡片右侧空白处(移动端隐藏) */} + {!isMobile && event.keywords && event.keywords.length > 0 && (