Card 卡片

内容卡片。三段式结构（头部 / 主体 / 底部），两种视觉变体。

基础用法

卡片标题

卡片主体内容。适合放一段描述、一组表单，或一张图表。

<SrCard title="卡片标题">
  卡片主体内容。
</SrCard>

与 Panel 的分工

两者都是容器，区别在语义与默认外观：

	SrCard	SrPanel
定位	独立的实体	页面区块
默认变体	default（实底）	glass（玻璃）
可悬停	✅ hoverable	❌
头部分隔线	✅ 有	❌ 无

一句话：一张卡片是「一个东西」，一个面板是「一块区域」。 卡片内部再放面板是合理的（区域里摆几张卡），反过来则别扭。

头部操作区

extra 插槽放在标题右侧，通常放一个按钮或一段次要信息。

本月数据

主体内容

<SrCard title="本月数据">
  <template #extra>
    <SrButton size="sm" variant="ghost">刷新</SrButton>
  </template>
  主体内容
</SrCard>

底部操作区

确认操作

删除后不可恢复。

<SrCard title="确认操作">
  删除后不可恢复。
  <template #footer>
    <SrSpace justify="end">
      <SrButton size="sm">取消</SrButton>
      <SrButton size="sm" variant="danger">删除</SrButton>
    </SrSpace>
  </template>
</SrCard>

玻璃变体

variant="glass" 使用玻璃配方（半透明底色 + 背景模糊）， 适合叠在渐变或图片背景之上。

玻璃卡片

背景内容会透过卡片隐约可见。

<SrCard variant="glass" title="玻璃卡片">
  背景内容会透过卡片隐约可见。
</SrCard>

玻璃变体的适用条件

backdrop-filter 需要背后真的有内容才看得出效果。 叠在纯色背景上时它与实底几乎没有区别，却多付了一次合成开销。

可悬停

hoverable 让卡片在悬停时上浮并加深阴影，用于「整张卡片可点击」的场景。

点我

鼠标移上来看看

<SrCard hoverable title="点我">鼠标移上来看看</SrCard>

悬停反馈包在 @media (hover: hover) 内——触摸设备上不会出现 「点完样式卡住」的假反馈。

内边距

padding="none"，内边距自己控制

大内边距

padding="lg"

<SrCard padding="none">…</SrCard>
<SrCard padding="lg">…</SrCard>

Props

名称	类型	默认值	说明
title	string	—	标题，也可用 header 插槽自定义
variant	'default' | 'glass'	'default'	视觉变体
hoverable	boolean	false	悬停时上浮
bordered	boolean	true	是否显示描边
padding	'none' | 'sm' | 'md' | 'lg'	'md'	主体区内边距

插槽

名称	说明
default	主体内容
header	自定义头部，覆盖 title
extra	头部右侧操作区
footer	底部区域