feat: 优化 EventScrollList 分页控制器位置和样式

本次提交包含以下优化:

 分页控制器位置调整
- 从底部移至顶部右对齐
- 使用相对定位 (Flex justify="flex-end")
- 移除 CardBody 顶部 padding (pt={0})
- 确保分页控制器紧贴顶部,无任何间距

 箭头样式优化
- 调整箭头大小和颜色
- 使用毛玻璃效果背景
- 改善视觉层次和交互体验

修改文件:
- src/views/Community/components/DynamicNewsCard.js (CardBody pt={0})
- src/views/Community/components/DynamicNewsCard/EventScrollList.js (分页位置和箭头样式)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-11-03 15:56:19 +08:00
parent 7e32dda2df
commit 26dcfd061c
2 changed files with 41 additions and 30 deletions

View File

@@ -111,7 +111,7 @@ const DynamicNewsCard = forwardRef(({
</CardHeader> </CardHeader>
{/* 主体内容 */} {/* 主体内容 */}
<CardBody position="relative"> <CardBody position="relative" pt={0}>
{/* 横向滚动事件列表 - 始终渲染(除非为空) */} {/* 横向滚动事件列表 - 始终渲染(除非为空) */}
{events && events.length > 0 ? ( {events && events.length > 0 ? (
<EventScrollList <EventScrollList

View File

@@ -52,26 +52,43 @@ const EventScrollList = ({
return ( return (
<Box> <Box>
{/* 分页控制器 - 右上角相对定位 */}
{totalPages > 1 && (
<Flex justify="flex-end" p={0} m={0} mb={2}>
<PaginationControl
currentPage={currentPage}
totalPages={totalPages}
onPageChange={onPageChange}
/>
</Flex>
)}
{/* 横向滚动区域 */} {/* 横向滚动区域 */}
<Box position="relative"> <Box position="relative">
{/* 左侧翻页按钮 - 上一页 */} {/* 左侧翻页按钮 - 上一页 */}
{currentPage > 1 && ( {currentPage > 1 && (
<IconButton <IconButton
icon={<ChevronLeftIcon boxSize={8} />} icon={<ChevronLeftIcon boxSize={6} color="blue.500" />}
position="absolute" position="absolute"
left="2" left="0"
top="50%" top="50%"
transform="translateY(-50%)" transform="translateY(-50%)"
zIndex={2} zIndex={2}
onClick={() => onPageChange(currentPage - 1)} onClick={() => onPageChange(currentPage - 1)}
colorScheme="blue" variant="ghost"
variant="solid" size="md"
size="lg" w="40px"
h="40px"
minW="40px"
borderRadius="full" borderRadius="full"
shadow="lg" bg={useColorModeValue('rgba(255, 255, 255, 0.9)', 'rgba(0, 0, 0, 0.6)')}
bg="blue.500" boxShadow="0 2px 8px rgba(0, 0, 0, 0.15)"
_hover={{ bg: 'blue.600', transform: 'translateY(-50%) scale(1.1)' }} _hover={{
_active={{ bg: 'blue.700' }} bg: useColorModeValue('rgba(255, 255, 255, 1)', 'rgba(0, 0, 0, 0.8)'),
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
transform: 'translateY(-50%) scale(1.05)'
}}
aria-label="上一页" aria-label="上一页"
title="上一页" title="上一页"
/> />
@@ -80,21 +97,26 @@ const EventScrollList = ({
{/* 右侧翻页按钮 - 下一页 */} {/* 右侧翻页按钮 - 下一页 */}
{currentPage < totalPages && ( {currentPage < totalPages && (
<IconButton <IconButton
icon={<ChevronRightIcon boxSize={8} />} icon={<ChevronRightIcon boxSize={6} color="blue.500" />}
position="absolute" position="absolute"
right="2" right="0"
top="50%" top="50%"
transform="translateY(-50%)" transform="translateY(-50%)"
zIndex={2} zIndex={2}
onClick={() => onPageChange(currentPage + 1)} onClick={() => onPageChange(currentPage + 1)}
colorScheme="blue" variant="ghost"
variant="solid" size="md"
size="lg" w="40px"
h="40px"
minW="40px"
borderRadius="full" borderRadius="full"
shadow="lg" bg={useColorModeValue('rgba(255, 255, 255, 0.9)', 'rgba(0, 0, 0, 0.6)')}
bg="blue.500" boxShadow="0 2px 8px rgba(0, 0, 0, 0.15)"
_hover={{ bg: 'blue.600', transform: 'translateY(-50%) scale(1.1)' }} _hover={{
_active={{ bg: 'blue.700' }} bg: useColorModeValue('rgba(255, 255, 255, 1)', 'rgba(0, 0, 0, 0.8)'),
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
transform: 'translateY(-50%) scale(1.05)'
}}
aria-label="下一页" aria-label="下一页"
title="下一页" title="下一页"
/> />
@@ -183,17 +205,6 @@ const EventScrollList = ({
))} ))}
</Flex> </Flex>
</Box> </Box>
{/* 分页控制器 - 右下角 */}
{totalPages > 1 && (
<Flex justify="flex-end" mt={3}>
<PaginationControl
currentPage={currentPage}
totalPages={totalPages}
onPageChange={onPageChange}
/>
</Flex>
)}
</Box> </Box>
); );
}; };