Compare commits

...

2 Commits

Author SHA1 Message Date
zdl
5aedde7528 feat:H5 移动端已隐藏整个顶部控制栏 2025-11-26 16:51:52 +08:00
zdl
f5f89a1c72 feat:箭头绝对定位
移除左右 padding
隐藏重复箭头
2025-11-26 16:50:46 +08:00
2 changed files with 40 additions and 31 deletions

View File

@@ -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">

View File

@@ -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;
}
/* 禁用状态 */