fix(dashboard): 补齐 glass-tilt 样式,修复新卡片白底/透明不一致
## 问题
出勤指标与库存采购卡片没有白色玻璃底,与首页其它卡片视觉不一致。
## 根因
glass-tilt 并非全局样式,而是各组件自己 <style scoped> 里定义的。
kpi-cards / biz-cards / alert-panel 三个组件各自复制了一份,
而我新建的 hr-stock-cards.vue 漏了这段,导致:
- 没有 background 渐变 → 卡片透明
- 没有 border / box-shadow → 缺少玻璃质感与投影
- 没有 transform-style: preserve-3d → 3D 倾斜时子元素不跟随
## 修复
补上与 kpi-cards.vue 完全一致的 scoped 样式:
background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55))
backdrop-filter: blur(20px)
border: 1px solid rgba(255,255,255,0.6)
box-shadow: 0 4px 24px rgba(0,0,0,0.04) + inset 高光
transform-style: preserve-3d
含 .dark 暗色变体。
## 验证
构建产物 hr-stock-cards-B_mb2VJ8.css 已与 kpi-cards / biz-cards / alert-panel
同列出现 glass-tilt 定义,样式内容逐字一致。已部署生产。
| | |
| | | </Col> |
| | | </Row> |
| | | </template> |
| | | |
| | | <style scoped> |
| | | .glass-tilt { |
| | | background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55)); |
| | | backdrop-filter: blur(20px); |
| | | -webkit-backdrop-filter: blur(20px); |
| | | border: 1px solid rgba(255,255,255,0.6); |
| | | box-shadow: |
| | | 0 4px 24px rgba(0,0,0,0.04), |
| | | 0 1px 4px rgba(0,0,0,0.02), |
| | | inset 0 1px 0 rgba(255,255,255,0.8); |
| | | transform-style: preserve-3d; |
| | | } |
| | | |
| | | .dark .glass-tilt { |
| | | background: linear-gradient(135deg, rgba(30,30,55,0.75), rgba(20,20,40,0.5)); |
| | | border: 1px solid rgba(255,255,255,0.08); |
| | | box-shadow: |
| | | 0 4px 24px rgba(0,0,0,0.3), |
| | | 0 1px 4px rgba(0,0,0,0.2), |
| | | inset 0 1px 0 rgba(255,255,255,0.04); |
| | | } |
| | | </style> |