diff --git a/src/views/Community/components/DynamicNewsCard.js b/src/views/Community/components/DynamicNewsCard.js index a2c568cc..7d5f1b4f 100644 --- a/src/views/Community/components/DynamicNewsCard.js +++ b/src/views/Community/components/DynamicNewsCard.js @@ -111,7 +111,7 @@ const DynamicNewsCard = forwardRef(({ {/* 主体内容 */} - + {/* 横向滚动事件列表 - 始终渲染(除非为空) */} {events && events.length > 0 ? ( + {/* 分页控制器 - 右上角相对定位 */} + {totalPages > 1 && ( + + + + )} + {/* 横向滚动区域 */} + {/* 左侧翻页按钮 - 上一页 */} {currentPage > 1 && ( } + icon={} position="absolute" - left="2" + left="0" top="50%" transform="translateY(-50%)" zIndex={2} onClick={() => onPageChange(currentPage - 1)} - colorScheme="blue" - variant="solid" - size="lg" + variant="ghost" + size="md" + w="40px" + h="40px" + minW="40px" borderRadius="full" - shadow="lg" - bg="blue.500" - _hover={{ bg: 'blue.600', transform: 'translateY(-50%) scale(1.1)' }} - _active={{ bg: 'blue.700' }} + bg={useColorModeValue('rgba(255, 255, 255, 0.9)', 'rgba(0, 0, 0, 0.6)')} + boxShadow="0 2px 8px rgba(0, 0, 0, 0.15)" + _hover={{ + 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="上一页" title="上一页" /> @@ -80,21 +97,26 @@ const EventScrollList = ({ {/* 右侧翻页按钮 - 下一页 */} {currentPage < totalPages && ( } + icon={} position="absolute" - right="2" + right="0" top="50%" transform="translateY(-50%)" zIndex={2} onClick={() => onPageChange(currentPage + 1)} - colorScheme="blue" - variant="solid" - size="lg" + variant="ghost" + size="md" + w="40px" + h="40px" + minW="40px" borderRadius="full" - shadow="lg" - bg="blue.500" - _hover={{ bg: 'blue.600', transform: 'translateY(-50%) scale(1.1)' }} - _active={{ bg: 'blue.700' }} + bg={useColorModeValue('rgba(255, 255, 255, 0.9)', 'rgba(0, 0, 0, 0.6)')} + boxShadow="0 2px 8px rgba(0, 0, 0, 0.15)" + _hover={{ + 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="下一页" title="下一页" /> @@ -183,17 +205,6 @@ const EventScrollList = ({ ))} - - {/* 分页控制器 - 右下角 */} - {totalPages > 1 && ( - - - - )} ); };