update ui

src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js

@@ -11,6 +11,7 @@ import {
     Text,
     Tooltip,
     useColorModeValue,
+    useBreakpointValue,
 } from '@chakra-ui/react';
 import { getImportanceConfig } from '../../../../constants/importanceLevels';
 import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
@@ -62,6 +63,13 @@ const HorizontalDynamicNewsEventCard = ({
     const linkColor = PROFESSIONAL_COLORS.text.primary;
     const borderColor = PROFESSIONAL_COLORS.border.default;
 
+    // 响应式布局
+    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 spacing = useBreakpointValue({ base: 2, md: 3 }); // 间距
+
     /**
      * 根据平均涨幅计算背景色（专业配色 - 深色主题）
      * @param {number} avgChange - 平均涨跌幅
@@ -97,15 +105,17 @@ const HorizontalDynamicNewsEventCard = ({
     };
 
     return (
-        <HStack align="stretch" spacing={3} w="full">
-            {/* 左侧时间轴 */}
-            <EventTimeline
-                createdAt={event.created_at}
-                timelineStyle={timelineStyle}
-                borderColor={timelineBorderColor}
-                minHeight={layout === 'four-row' ? '60px' : 0}
-                importance={importance}
-            />
+        <HStack align="stretch" spacing={spacing} w="full">
+            {/* 左侧时间轴 - 移动端隐藏 */}
+            {showTimeline && (
+                <EventTimeline
+                    createdAt={event.created_at}
+                    timelineStyle={timelineStyle}
+                    borderColor={timelineBorderColor}
+                    minHeight={layout === 'four-row' ? '60px' : 0}
+                    importance={importance}
+                />
+            )}
 
             {/* 右侧事件卡片容器 */}
             <Box flex="1" position="relative">
@@ -148,9 +158,9 @@ const HorizontalDynamicNewsEventCard = ({
                     cursor="pointer"
                     onClick={() => onEventClick?.(event)}
                 >
-                    <CardBody p={3} pb={2}>
+                    <CardBody p={cardPadding} pb={2}>
                         {/* 右上角：关注按钮 */}
-                        <Box position="absolute" top={2} right={2} zIndex={2}>
+                        <Box position="absolute" top={{ base: 1, md: 2 }} right={{ base: 1, md: 2 }} zIndex={2}>
                             <EventFollowButton
                                 isFollowing={isFollowing}
                                 followerCount={followerCount}
@@ -189,10 +199,10 @@ const HorizontalDynamicNewsEventCard = ({
                                     cursor="pointer"
                                     onClick={(e) => onTitleClick?.(e, event)}
                                     mt={1}
-                                    paddingRight="120px"
+                                    paddingRight={titlePaddingRight}
                                 >
                                     <Text
-                                        fontSize="md"
+                                        fontSize={titleFontSize}
                                         fontWeight="semibold"
                                         color={linkColor}
                                         lineHeight="1.4"