feat: 热点事件UI调整

This commit is contained in:
zdl
2025-10-27 15:59:13 +08:00
parent 629c63f4ee
commit e568b5e05f
6 changed files with 11 additions and 19 deletions

View File

@@ -37,13 +37,14 @@ const EventTimelineCard = forwardRef(({
onSearch, onSearch,
onPageChange, onPageChange,
onEventClick, onEventClick,
onViewDetail onViewDetail,
...rest
}, ref) => { }, ref) => {
const cardBg = useColorModeValue('white', 'gray.800'); const cardBg = useColorModeValue('white', 'gray.800');
const borderColor = useColorModeValue('gray.200', 'gray.700'); const borderColor = useColorModeValue('gray.200', 'gray.700');
return ( return (
<Card ref={ref} bg={cardBg} borderColor={borderColor} mb={4}> <Card ref={ref} {...rest} bg={cardBg} borderColor={borderColor} mb={4}>
{/* 标题部分 */} {/* 标题部分 */}
<CardHeader> <CardHeader>
<EventTimelineHeader lastUpdateTime={lastUpdateTime} /> <EventTimelineHeader lastUpdateTime={lastUpdateTime} />

View File

@@ -1,8 +1,7 @@
/* Hot Events Section */ /* Hot Events Section */
.hot-events-section { .hot-events-section {
padding: 24px 0; padding-bottom: 24px;
} }
.section-title { .section-title {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@@ -41,12 +41,6 @@ const HotEvents = ({ events }) => {
return ( return (
<div className="hot-events-section"> <div className="hot-events-section">
<h2 className="section-title">
<FireOutlined style={{ marginRight: 8, color: '#ff4d4f' }} />
近期热点信息
</h2>
<p className="section-subtitle">展示最近5天内涨幅最高的事件助您把握市场热点</p>
{events && events.length > 0 ? ( {events && events.length > 0 ? (
<Row gutter={[16, 16]}> <Row gutter={[16, 16]}>
{events.map((event, index) => ( {events.map((event, index) => (

View File

@@ -24,11 +24,12 @@ const HotEventsSection = ({ events }) => {
} }
return ( return (
<Card mt={8} bg={cardBg}> <Card mt={0} bg={cardBg}>
<CardHeader> <CardHeader pb={0}>
<Heading size="md">🔥 热点事件</Heading> <Heading size="md">🔥 热点事件</Heading>
<p className="section-subtitle" style={{paddingTop: '8px'}}>展示最近5天内涨幅最高的事件助您把握市场热点</p>
</CardHeader> </CardHeader>
<CardBody> <CardBody py={0} px={4}>
<HotEvents events={events} /> <HotEvents events={events} />
</CardBody> </CardBody>
</Card> </Card>

View File

@@ -210,8 +210,6 @@
/* 热点事件部分样式 */ /* 热点事件部分样式 */
.hot-events-section { .hot-events-section {
margin-top: 48px;
padding: 32px;
background: white; background: white;
border-radius: 16px; border-radius: 16px;
box-shadow: 0 4px 24px rgba(0,0,0,0.06); box-shadow: 0 4px 24px rgba(0,0,0,0.06);

View File

@@ -93,16 +93,15 @@ const Community = () => {
return ( return (
<Box minH="100vh" bg={bgColor}> <Box minH="100vh" bg={bgColor}>
{/* 导航栏已由 MainLayout 提供 */}
{/* 主内容区域 */} {/* 主内容区域 */}
<Container maxW="container.xl" py={8}> <Container maxW="container.xl" pt={6} pb={8}>
{/* 热点事件区域 */} {/* 热点事件区域 */}
<HotEventsSection events={hotEvents} /> <HotEventsSection events={hotEvents} />
{/* 实时事件时间轴卡片 */} {/* 实时事件 */}
<EventTimelineCard <EventTimelineCard
ref={eventTimelineRef} ref={eventTimelineRef}
mt={6}
events={events} events={events}
loading={loading} loading={loading}
pagination={pagination} pagination={pagination}