xiaoyi
9 天以前 ae3ab0d376959cd8560e45dce24b6a8b1b39d162
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 定义,样式内容逐字一致。已部署生产。
已修改1个文件
23 ■■■■■ 文件已修改
src/views/dashboard/analytics/modules/hr-stock-cards.vue 23 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/dashboard/analytics/modules/hr-stock-cards.vue
@@ -320,3 +320,26 @@
    </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>