fix(energy): 桌面 sticky 失效 —— overflow:hidden 限定到移动端横屏
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
原因:父容器一直挂着 landscape:overflow-hidden,意图是手机横屏全屏 体验。但 Tailwind 的 landscape: 是纯方向匹配(含桌面横屏显示器), 所以桌面也命中 overflow:hidden,sticky 完全失效,滚动时头部 tab 全部消失,看起来像「半截被遮挡」。 修复:把 landscape: 修饰符改为 max-md:landscape: ,仅在移动端 (< 768px)+ 横屏时生效。桌面恢复正常 overflow:visible,sticky 头部能稳稳停在顶部。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -28,7 +28,7 @@ export default function EnergyModule() {
|
||||
const setSub = (id: SubTabId) => activeTab === 'electric' ? setElectricSub(id) : setHydroSub(id);
|
||||
return (
|
||||
<div className="min-h-screen bg-[#F8F9FB] text-gray-800 font-sans p-3 md:p-6 relative" style={{ overflowX: 'clip' }}>
|
||||
<div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 landscape:pb-0 landscape:h-full landscape:flex-1 landscape:overflow-hidden">
|
||||
<div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 max-md:landscape:pb-0 max-md:landscape:h-full max-md:landscape:flex-1 max-md:landscape:overflow-hidden">
|
||||
|
||||
{/* 统一 sticky 头部:top tab + (氢能时) 子 tab;同一张卡片,无间隙 */}
|
||||
{/* pb-4 留一点底部缓冲,避免下方快捷选按钮在滚动时贴着 sticky 半截露脸 */}
|
||||
|
||||
Reference in New Issue
Block a user