fix(energy): 桌面 sticky 失效 —— overflow:hidden 限定到移动端横屏
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:
kkfluous
2026-04-30 15:42:32 +08:00
parent 034654265c
commit dc6f541c8b

View File

@@ -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 半截露脸 */}