fix(energy): sticky 头部不再半透明,避免快捷选按钮"半截露脸"+ 文案改「每日加氢量」
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
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:
@@ -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">
|
<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;同一张卡片,无间隙 */}
|
{/* 统一 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">
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
|
||||||
{/* 顶部 tab:氢能 / 电能 / ETC */}
|
{/* 顶部 tab:氢能 / 电能 / ETC */}
|
||||||
<div className={`px-4 py-2 flex items-center gap-6 ${showSubTabs ? 'border-b border-slate-50' : ''}`}>
|
<div className={`px-4 py-2 flex items-center gap-6 ${showSubTabs ? 'border-b border-slate-50' : ''}`}>
|
||||||
|
|||||||
@@ -98,7 +98,7 @@ export default function HydrogenDaily() {
|
|||||||
{!(customer === 'external' && totalKg === 0) && trendData.length > 0 && (
|
{!(customer === 'external' && totalKg === 0) && trendData.length > 0 && (
|
||||||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4">
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4">
|
||||||
<div className="flex items-center justify-between mb-2">
|
<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>
|
<span className="text-[11px] text-slate-400 font-bold">单位 Kg</span>
|
||||||
</div>
|
</div>
|
||||||
<ResponsiveContainer width="100%" height={160}>
|
<ResponsiveContainer width="100%" height={160}>
|
||||||
|
|||||||
Reference in New Issue
Block a user