update ui

src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js

@@ -2,7 +2,7 @@
 // 纵向分栏模式布局组件
 
 import React, { useState } from 'react';
-import { Box, VStack, Flex, Center, Text } from '@chakra-ui/react';
+import { Box, VStack, Flex, Center, Text, useBreakpointValue } from '@chakra-ui/react';
 import { InfoIcon } from '@chakra-ui/icons';
 import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
 import EventDetailScrollPanel from './EventDetailScrollPanel';
@@ -33,6 +33,11 @@ const VerticalModeLayout = ({
   // 详情面板重置 key（预留，用于未来功能）
   const [detailPanelKey] = useState(0);
 
+  // 响应式布局
+  const isMobile = useBreakpointValue({ base: true, lg: false });
+  const flexDirection = useBreakpointValue({ base: 'column', lg: 'row' });
+  const gap = useBreakpointValue({ base: 3, lg: 6 });
+
   // 固定布局比例：左侧（4），右侧（6）- 平衡布局，确保左侧有足够空间显示内容
   const leftFlex = '4';
   const rightFlex = '6';
@@ -40,7 +45,8 @@ const VerticalModeLayout = ({
   return (
     <Flex
       display={display}
-      gap={6}
+      direction={flexDirection}
+      gap={gap}
       position="relative"
       transition="all 0.3s ease-in-out"
       h="100%"
@@ -48,8 +54,9 @@ const VerticalModeLayout = ({
     >
       {/* 左侧：事件列表 - 独立滚动 */}
       <Box
-        flex={leftFlex}
+        flex={isMobile ? '1' : leftFlex}
         minWidth={0}
+        w={isMobile ? '100%' : 'auto'}
         overflowY="auto"
         h="100%"
         data-event-list-container="true"
@@ -109,21 +116,23 @@ const VerticalModeLayout = ({
         )}
       </Box>
 
-      {/* 右侧：事件详情 - 独立滚动 */}
-      <Box
-        flex={rightFlex}
-        minHeight={0}
-        position="relative"
-        overflow="hidden"
-        h="100%"
-      >
-        {/* 详情面板 */}
-        <EventDetailScrollPanel
-          key={detailPanelKey}
-          detailMode="no-header"
-          selectedEvent={selectedEvent}
-        />
-      </Box>
+      {/* 右侧：事件详情 - 独立滚动 - 移动端隐藏 */}
+      {!isMobile && (
+        <Box
+          flex={rightFlex}
+          minHeight={0}
+          position="relative"
+          overflow="hidden"
+          h="100%"
+        >
+          {/* 详情面板 */}
+          <EventDetailScrollPanel
+            key={detailPanelKey}
+            detailMode="no-header"
+            selectedEvent={selectedEvent}
+          />
+        </Box>
+      )}
     </Flex>
   );
 };