fix(energy): sticky 头部不再半透明,避免快捷选按钮"半截露脸"+ 文案改「每日加氢量」
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

问题 1:sticky 头部 bg-[#F8F9FB]/85 backdrop-blur-md 半透明,
下方「本周/本月/近15天」快捷选按钮在滚动时透过 sticky 条隐约可见,
看起来像被遮罩切掉一半,效果差。

修复:把头部背景改为不透明页面色 bg-[#F8F9FB],去掉 backdrop-blur,
加上一条很淡的下投影 shadow(仅在头部下边缘)作为分割线,
既不再透出后面的内容,也保留了一点层次感。

问题 2:氢能 daily 图表标题「时段每日加氢量」→「每日加氢量」更简洁。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-04-30 15:28:23 +08:00
parent fe70ec389b
commit ee981639eb
2 changed files with 3 additions and 2 deletions

View File

@@ -31,7 +31,8 @@ export default function EnergyModule() {
<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">
{/* 统一 sticky 头部top tab + (氢能时) 子 tab同一张卡片无间隙 */}
<div className="sticky top-0 z-30 -mx-3 md:-mx-6 px-3 md:px-6 -mt-3 md:-mt-6 pt-3 md:pt-6 pb-2 bg-[#F8F9FB]/85 backdrop-blur-md">
{/* 背景不透明(页面色),避免下方快捷选按钮在滚动时透过来"半截露脸" */}
<div className="sticky top-0 z-30 -mx-3 md:-mx-6 px-3 md:px-6 -mt-3 md:-mt-6 pt-3 md:pt-6 pb-2 bg-[#F8F9FB] shadow-[0_8px_12px_-12px_rgba(15,23,42,0.08)]">
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
{/* 顶部 tab氢能 / 电能 / ETC */}
<div className={`px-4 py-2 flex items-center gap-6 ${showSubTabs ? 'border-b border-slate-50' : ''}`}>

View File

@@ -98,7 +98,7 @@ export default function HydrogenDaily() {
{!(customer === 'external' && totalKg === 0) && trendData.length > 0 && (
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4">
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-bold text-slate-700"></span>
<span className="text-sm font-bold text-slate-700"></span>
<span className="text-[11px] text-slate-400 font-bold"> Kg</span>
</div>
<ResponsiveContainer width="100%" height={160}>