From 26dcfd061cec905b311a9a75be8629e6f84bffab Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Mon, 3 Nov 2025 15:56:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20EventScrollList=20?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5=E6=8E=A7=E5=88=B6=E5=99=A8=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

本次提交包含以下优化：

✅ 分页控制器位置调整
- 从底部移至顶部右对齐
- 使用相对定位 (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>
---
 .../Community/components/DynamicNewsCard.js   |  2 +-
 .../DynamicNewsCard/EventScrollList.js        | 69 +++++++++++--------
 2 files changed, 41 insertions(+), 30 deletions(-)

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(({
       </CardHeader>
 
       {/* 主体内容 */}
-      <CardBody position="relative">
+      <CardBody position="relative" pt={0}>
         {/* 横向滚动事件列表 - 始终渲染（除非为空） */}
         {events && events.length > 0 ? (
           <EventScrollList
diff --git a/src/views/Community/components/DynamicNewsCard/EventScrollList.js b/src/views/Community/components/DynamicNewsCard/EventScrollList.js
index 146a66fe..6a200a4a 100644
--- a/src/views/Community/components/DynamicNewsCard/EventScrollList.js
+++ b/src/views/Community/components/DynamicNewsCard/EventScrollList.js
@@ -52,26 +52,43 @@ const EventScrollList = ({
 
   return (
     <Box>
+      {/* 分页控制器 - 右上角相对定位 */}
+      {totalPages > 1 && (
+        <Flex justify="flex-end" p={0} m={0} mb={2}>
+          <PaginationControl
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={onPageChange}
+          />
+        </Flex>
+      )}
+
       {/* 横向滚动区域 */}
       <Box position="relative">
+
         {/* 左侧翻页按钮 - 上一页 */}
       {currentPage > 1 && (
         <IconButton
-          icon={<ChevronLeftIcon boxSize={8} />}
+          icon={<ChevronLeftIcon boxSize={6} color="blue.500" />}
           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 && (
         <IconButton
-          icon={<ChevronRightIcon boxSize={8} />}
+          icon={<ChevronRightIcon boxSize={6} color="blue.500" />}
           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 = ({
         ))}
       </Flex>
       </Box>
-
-      {/* 分页控制器 - 右下角 */}
-      {totalPages > 1 && (
-        <Flex justify="flex-end" mt={3}>
-          <PaginationControl
-            currentPage={currentPage}
-            totalPages={totalPages}
-            onPageChange={onPageChange}
-          />
-        </Flex>
-      )}
     </Box>
   );
 };