Card 卡片

卡片用于将一类信息集中化展示，增强区块感与可扫描性，解决零散信息缺乏归属、阅读节奏混乱的问题。卡片按内容复杂度提供四档：极简卡片、带标题卡片、带副标题卡片、带副标题描述文案卡片，从极简信息单元到完整内容模块，逐级扩展信息承载量。

import { createApp } from 'vue'
import { ElCard } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElCard)

极简卡片

卡片可以只有内容区域，用于承载最轻量的信息。

通过 header 插槽放置标题和操作入口，提升模块归属感。

标题区可以补充副标题和说明文字，承载更多上下文信息。

需要更强区隔时，可通过 header-border 打开头部分割线。

可使用图片与内容组合，承载更完整的信息模块。

配置 body-style 属性来自定义 body 部分的样式。

底部区域用于承载补充信息或次要操作。

你可以定义什么时候展示卡片的阴影效果。

通过 shadow 属性设置卡片阴影出现的时机。该属性的值可以是：always、hover 或 never。

属性名	说明	类型	默认值
header	卡片的标题你既可以通过设置 header 来修改标题，也可以通过 `slot#header` 传入 DOM 节点	string	—
footer	卡片页脚。你既可以通过设置 footer 来修改卡片底部内容，也可以通过 `slot#footer` 传入 DOM 节点	string	—
header-border	是否显示头部分割线	boolean	false
radius	卡片圆角档位，支持 2 / 4 / 6 / 8 / 12 / 16 / full	enum	—
body-style	body 的 CSS 样式	object	—
header-class	card header 的自定义类名	string	—
body-class	body 的自定义类名	string	—
footer-class	footer 的自定义类名	string	—
shadow	卡片阴影显示时机	enum	always