fix: 事件详情弹窗UI调整

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

@@ -9,18 +9,12 @@ import {
   Center,
   Text,
   useBreakpointValue,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalCloseButton,
   useDisclosure
 } from '@chakra-ui/react';
 import { InfoIcon } from '@chakra-ui/icons';
 import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
 import EventDetailScrollPanel from './EventDetailScrollPanel';
-import DynamicNewsDetailPanel from '../DynamicNewsDetail/DynamicNewsDetailPanel';
+import EventDetailModal from '../EventDetailModal';
 
 /**
  * 纵向分栏模式布局
@@ -165,20 +159,11 @@ const VerticalModeLayout = React.memo(({
 
       {/* 移动端详情弹窗 */}
       {isMobile && (
-        <Modal isOpen={isMobileModalOpen} onClose={onMobileModalClose} size="full" scrollBehavior="inside">
-          <ModalOverlay bg="blackAlpha.800" backdropFilter="blur(10px)" />
-          <ModalContent maxW="100vw" m={0} borderRadius={0}>
-            <ModalHeader bg="gray.900" color="white" borderBottom="1px solid" borderColor="gray.700">
-              {mobileSelectedEvent?.title || '事件详情'}
-            </ModalHeader>
-            <ModalCloseButton color="white" />
-            <ModalBody p={0} bg="gray.900">
-              {mobileSelectedEvent && (
-                <DynamicNewsDetailPanel event={mobileSelectedEvent} showHeader={false} />
-              )}
-            </ModalBody>
-          </ModalContent>
-        </Modal>
+        <EventDetailModal
+          open={isMobileModalOpen}
+          onClose={onMobileModalClose}
+          event={mobileSelectedEvent}
+        />
       )}
     </Flex>
   );