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:
@@ -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
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user