fix: 侧栏顶部虚化遮罩与半透明卡片

- 新增固定侧栏遮罩层，滚动后淡入，blur(14px) + 透明渐变，不随吸底 transform 移动 - 侧栏资料/服务/导航卡改为 64% 半透明 + 毛玻璃 - 修正只输出 -webkit-backdrop-filter 导致不生效的问题 - 验证：遮罩 top=148、blur 生效、卡片 alpha=0.64
2026-10-31 16:00:45 +08:00
parent 4304fd75b4
commit 50aea29ea6
4 changed files with 83 additions and 21 deletions
@@ -147,6 +147,14 @@ DELETE /api/items/:id

 ## 11. 实施记录

+### P21（2026-10-31，侧栏虚化遮罩与透明度）
+
+- 侧栏顶部增加独立 fixed 遮罩层：位置跟随侧栏左右/宽度，固定在滚动区顶部（y=148），滚动后淡入；
+- 遮罩用 `backdrop-filter: blur(14px)` + 45%→20%→透明的页面色渐变，既虚化又不挡内容；不能挂在侧栏内部（会被吸底 `translateY` 带走）；
+- 左侧资料卡 / 本地服务 / 导航卡改成 64% 不透明 + `backdrop-filter` 毛玻璃，露出页面背景；
+- 修复 Tailwind/构建器只保留 `-webkit-backdrop-filter` 导致 Chromium 不生效的问题：只写标准属性；
+- 验证：滚动后遮罩 top=148、opacity=1、backdrop-filter=blur(14px) saturate(1.1)，卡片背景 alpha=0.64。
+
 ### P20（2026-10-31，双栏非对称吸底滚动）

 - 两栏顶部对齐：去掉首页侧栏额外的 `padding-top`，两栏都从 `#page-scroll` 顶部（y=148）开始；