update ui

src/views/Community/components/HotEventsSection.js

@@ -35,16 +35,34 @@ const HotEventsSection = ({ events, onEventClick }) => {
   }
 
   return (
-    <Card mt={0} bg={cardBg}>
-      <CardHeader pb={0} display="flex" justifyContent="space-between" alignItems="flex-start">
+    <Card
+      mt={6}
+      mb={8}
+      bg={cardBg}
+      boxShadow="lg"
+      borderWidth="1px"
+      borderColor={useColorModeValue('gray.200', 'gray.700')}
+      position="relative"
+      zIndex={1}
+    >
+      <CardHeader pb={3} display="flex" justifyContent="space-between" alignItems="flex-start">
         <Box>
-          <Heading size="md">🔥 热点事件</Heading>
-          <p className="section-subtitle" style={{paddingTop: '8px'}}>展示最近5天内涨幅最高的事件，助您把握市场热点</p>
+          <Heading
+            size="lg"
+            bgGradient="linear(to-r, #FF4500, #FFD700)"
+            bgClip="text"
+            fontWeight="extrabold"
+          >
+            🔥 热点事件
+          </Heading>
+          <p className="section-subtitle" style={{paddingTop: '8px', color: useColorModeValue('#666', '#aaa')}}>
+            展示最近5天内涨幅最高的事件，助您把握市场热点
+          </p>
         </Box>
         {/* 页码指示器 */}
         {totalPages > 1 && (
           <Badge
-            colorScheme="blue"
+            colorScheme="orange"
             fontSize="sm"
             px={3}
             py={1}
@@ -55,7 +73,7 @@ const HotEventsSection = ({ events, onEventClick }) => {
           </Badge>
         )}
       </CardHeader>
-      <CardBody py={0} px={4}>
+      <CardBody py={4} px={4}>
         <HotEvents
           events={events}
           onPageChange={handlePageChange}