冰蓝毛玻璃风数据看板

解决什么问题

数据看板页面容易在视觉与实现之间失控：背景太普通、卡片像默认 UI、图表类型选择随意、指标卡居中对齐、地图 hover 变色、移动端栅格拥挤。@user_133d6951/dashboard-design 提供一套面向冰蓝毛玻璃风数据看板的统一设计规范，适合制作可视化报表、数据长图、运营驾驶舱类页面。

规范如何落地

该技能把风格拆成可执行约束：

• 背景与氛围：要求多层径向渐变叠加 background-attachment: fixed，并用低同步周期光球制造呼吸感。
• 材质系统：卡片使用 saturate(180%) blur(20px)、半透明白边框、大圆角和浅投影，避免实色不透明卡片。
• 图表选型：时间序列优先折线，占比优先环图，类别过多改用表格或水平条形，地域分布用 ECharts 地图并禁用 select 态。
• 布局与响应式：内容区 max-width: 1280px，双列变单列时覆盖栅格，图表容器优先使用 aspect-ratio 和 min-height。
• 交互细节：时间选择器、视图切换器、对象选择器均有毛玻璃面板、选中态和搜索过滤规则。

适用边界

适合 B 端或产品看板的前端视觉规范，尤其使用 Chart.js 4.x、ECharts 5.x、纯 CSS Grid/Flex 的单 HTML 页面。若目标是营销落地页、3D 大屏、雷达图或词云强需求，或要求实色高对比卡片，这套规范需要降级使用，重点保留图表选型、栅格和交互检查项。