Compare commits
2 Commits
e0b7f8c59d
...
5aedde7528
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
5aedde7528 | ||
|
|
f5f89a1c72 |
@@ -637,34 +637,36 @@ const [currentMode, setCurrentMode] = useState('vertical');
|
||||
overflow="visible"
|
||||
zIndex={1}
|
||||
>
|
||||
{/* 顶部控制栏:模式切换按钮 + 分页控制器(滚动时固定在顶部) */}
|
||||
<Box
|
||||
position="sticky"
|
||||
top="0"
|
||||
zIndex={10}
|
||||
bg={cardBg}
|
||||
py={2}
|
||||
mb={2}
|
||||
borderBottom="1px solid"
|
||||
borderColor={borderColor}
|
||||
mx={-6}
|
||||
px={6}
|
||||
boxShadow="sm"
|
||||
>
|
||||
<Flex justify="space-between" align="center" flexWrap="wrap" gap={2}>
|
||||
{/* 左侧:模式切换按钮 */}
|
||||
<ModeToggleButtons mode={mode} onModeChange={handleModeToggle} />
|
||||
{/* 顶部控制栏:模式切换按钮 + 分页控制器(移动端隐藏) */}
|
||||
{!isMobile && (
|
||||
<Box
|
||||
position="sticky"
|
||||
top="0"
|
||||
zIndex={10}
|
||||
bg={cardBg}
|
||||
py={2}
|
||||
mb={2}
|
||||
borderBottom="1px solid"
|
||||
borderColor={borderColor}
|
||||
mx={-6}
|
||||
px={6}
|
||||
boxShadow="sm"
|
||||
>
|
||||
<Flex justify="space-between" align="center" flexWrap="wrap" gap={2}>
|
||||
{/* 左侧:模式切换按钮 */}
|
||||
<ModeToggleButtons mode={mode} onModeChange={handleModeToggle} />
|
||||
|
||||
{/* 右侧:分页控制器(仅在纵向模式显示),H5 放不下时折行 */}
|
||||
{!isMobile && mode === 'vertical' && totalPages > 1 && (
|
||||
<PaginationControl
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={handlePageChangeWithScroll}
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
{/* 右侧:分页控制器(仅在纵向模式显示) */}
|
||||
{mode === 'vertical' && totalPages > 1 && (
|
||||
<PaginationControl
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={handlePageChangeWithScroll}
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* 内容区域 - 撑满剩余高度 */}
|
||||
<Box flex="1" minH={0} position="relative">
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
}
|
||||
|
||||
.hot-events-carousel {
|
||||
padding: 0 40px; /* 增加左右padding为箭头留出空间 */
|
||||
padding: 0; /* 移除左右padding,箭头使用绝对定位 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -65,13 +65,20 @@
|
||||
color: #096dd9 !important;
|
||||
}
|
||||
|
||||
/* 箭头位置 */
|
||||
/* 箭头位置 - 绝对定位,悬浮在卡片边缘 */
|
||||
.hot-events-carousel .slick-prev.custom-carousel-arrow {
|
||||
left: 0 !important;
|
||||
left: 8px !important;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.hot-events-carousel .slick-next.custom-carousel-arrow {
|
||||
right: 0 !important;
|
||||
right: 8px !important;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* 隐藏可能重复的默认箭头 */
|
||||
.hot-events-carousel .slick-arrow:not(.custom-carousel-arrow) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 禁用状态 */
|
||||
|
||||
Reference in New Issue
Block a user