Card 卡片

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

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

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

极简卡片

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

<script setup lang="ts">
import { Card as ElCard } from '@szhn/dh-design-pc'

</script>

<template>
  <el-card class="card-demo-card" shadow="never">
    <p class="card-demo-text">这是一段内容文案</p>
    <p class="card-demo-text">
      这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的内容文案
    </p>
  </el-card>
</template>

<style scoped>
.card-demo-card {
  width: 400px;
  max-width: 100%;
}

.card-demo-text {
  margin: 0;
  color: var(--dh-color-text-primary);
  font-size: 14px;
  line-height: 22px;
}

.card-demo-text + .card-demo-text {
  margin-top: 8px;
}
</style>

带标题卡片

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

<script setup lang="ts">
import { Card as ElCard, Link as ElLink } from '@szhn/dh-design-pc'

</script>

<template>
  <el-card class="card-demo-card" shadow="never">
    <template #header>
      <div class="card-demo-header">
        <span class="card-demo-title">标题</span>
        <el-link type="primary" :underline="false">操作</el-link>
      </div>
    </template>
    <p class="card-demo-text">这是一段内容文案</p>
    <p class="card-demo-text">
      这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的内容文案
    </p>
  </el-card>
</template>

<style scoped>
.card-demo-card {
  width: 400px;
  max-width: 100%;
}

.card-demo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.card-demo-title {
  color: var(--dh-color-text-primary);
  font-size: 16px;
  line-height: 24px;
}

.card-demo-text {
  margin: 0;
  color: var(--dh-color-text-primary);
  font-size: 14px;
  line-height: 22px;
}

.card-demo-text + .card-demo-text {
  margin-top: 8px;
}
</style>

带副标题和描述

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

<script setup lang="ts">
import { Card as ElCard, Link as ElLink } from '@szhn/dh-design-pc'

</script>

<template>
  <el-card class="card-demo-card" shadow="never">
    <template #header>
      <div class="card-demo-header">
        <div class="card-demo-heading">
          <div class="card-demo-title-row">
            <span class="card-demo-title">标题</span>
            <span class="card-demo-subtitle">副标题</span>
          </div>
          <p class="card-demo-description">很长很长很长很长描述内容</p>
        </div>
        <el-link type="primary" :underline="false">操作</el-link>
      </div>
    </template>
    <p class="card-demo-text">这是一段内容文案</p>
    <p class="card-demo-text">
      这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的内容文案
    </p>
  </el-card>
</template>

<style scoped>
.card-demo-card {
  width: 400px;
  max-width: 100%;
}

.card-demo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.card-demo-heading {
  min-width: 0;
}

.card-demo-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-demo-title {
  color: var(--dh-color-text-primary);
  font-size: 16px;
  line-height: 24px;
}

.card-demo-subtitle {
  color: var(--dh-color-text-secondary);
  font-size: 14px;
  line-height: 22px;
}

.card-demo-description {
  margin: 4px 0 0;
  color: var(--dh-color-text-placeholder);
  font-size: 14px;
  line-height: 22px;
}

.card-demo-text {
  margin: 0;
  color: var(--dh-color-text-primary);
  font-size: 14px;
  line-height: 22px;
}

.card-demo-text + .card-demo-text {
  margin-top: 8px;
}
</style>

头部分割线

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

<script setup lang="ts">
import { Card as ElCard, Link as ElLink } from '@szhn/dh-design-pc'

</script>

<template>
  <el-card class="card-demo-card" header-border shadow="never">
    <template #header>
      <div class="card-demo-header">
        <span class="card-demo-title">标题</span>
        <el-link type="primary" :underline="false">操作</el-link>
      </div>
    </template>
    <p class="card-demo-text">这是一段内容文案</p>
    <p class="card-demo-text">
      这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的内容文案
    </p>
  </el-card>
</template>

<style scoped>
.card-demo-card {
  width: 400px;
  max-width: 100%;
}

.card-demo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.card-demo-title {
  color: var(--dh-color-text-primary);
  font-size: 16px;
  line-height: 24px;
}

.card-demo-text {
  margin: 0;
  color: var(--dh-color-text-primary);
  font-size: 14px;
  line-height: 22px;
}

.card-demo-text + .card-demo-text {
  margin-top: 8px;
}
</style>

图文卡片

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

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

<script setup lang="ts">
import { withBase } from 'vitepress'
import { Card as ElCard, Link as ElLink } from '@szhn/dh-design-pc'

const coverImage = withBase('/images/design/core/tech-language-3d.png')

</script>

<template>
  <el-card
    class="card-demo-card card-demo-image-card"
    header-border
    :body-style="{ padding: '0' }"
    shadow="never"
  >
    <template #header>
      <div class="card-demo-header">
        <span class="card-demo-title">标题</span>
        <el-link type="primary" :underline="false">操作</el-link>
      </div>
    </template>
    <div class="card-demo-cover">
      <img :src="coverImage" alt="" aria-hidden="true">
    </div>
    <div class="card-demo-content">
      <p class="card-demo-text">这是一段内容文案</p>
      <p class="card-demo-text">
        这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的内容文案
      </p>
    </div>
  </el-card>
</template>

<style scoped>
.card-demo-card {
  width: 400px;
  max-width: 100%;
}

.card-demo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.card-demo-title {
  color: var(--dh-color-text-primary);
  font-size: 16px;
  line-height: 24px;
}

.card-demo-cover {
  position: relative;
  height: 225px;
  overflow: hidden;
  background: #0542B3;
}

.card-demo-cover::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 32% 40%, rgba(255, 198, 44, 0.72), transparent 10%),
    radial-gradient(circle at 42% 44%, rgba(239, 83, 80, 0.56), transparent 10%),
    radial-gradient(circle at 64% 58%, rgba(0, 184, 255, 0.44), transparent 18%),
    linear-gradient(180deg, rgba(5, 66, 179, 0.2), rgba(5, 66, 179, 0.66));
  content: "";
}

.card-demo-cover img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 620px;
  height: 226px;
  object-fit: cover;
  object-position: 8% center;
  opacity: 0.5;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(1.12);
}

.card-demo-content {
  padding: 16px 24px;
}

.card-demo-text {
  margin: 0;
  color: var(--dh-color-text-primary);
  font-size: 14px;
  line-height: 22px;
}

.card-demo-text + .card-demo-text {
  margin-top: 8px;
}
</style>

带底部区域

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

<script setup lang="ts">
import { Card as ElCard, Link as ElLink } from '@szhn/dh-design-pc'

</script>

<template>
  <el-card class="card-demo-card" header-border shadow="never">
    <template #header>
      <div class="card-demo-header">
        <span class="card-demo-title">标题</span>
        <el-link type="primary" :underline="false">操作</el-link>
      </div>
    </template>
    <p class="card-demo-text">这是一段内容文案</p>
    <p class="card-demo-text">
      这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很的内容文案
    </p>
    <template #footer>
      <div class="card-demo-footer">
        <span>底部内容</span>
        <el-link type="primary" :underline="false">操作</el-link>
      </div>
    </template>
  </el-card>
</template>

<style scoped>
.card-demo-card {
  width: 400px;
  max-width: 100%;
}

.card-demo-header,
.card-demo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.card-demo-title {
  color: var(--dh-color-text-primary);
  font-size: 16px;
  line-height: 24px;
}

.card-demo-footer {
  color: var(--dh-color-text-secondary);
  font-size: 14px;
  line-height: 22px;
}

.card-demo-text {
  margin: 0;
  color: var(--dh-color-text-primary);
  font-size: 14px;
  line-height: 22px;
}

.card-demo-text + .card-demo-text {
  margin-top: 8px;
}
</style>

圆角

使用 radius 属性指定卡片圆角档位，支持 2、4、6、8、12、16 和全圆角。

<template>
  <div class="card-radius-demo">
    <el-card
      v-for="item in radiusItems"
      :key="item.label"
      :radius="item.value"
      shadow="never"
    >
      <strong>{{ item.label }}</strong>
      <p>用于展示卡片圆角档位。</p>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { Card as ElCard } from '@szhn/dh-design-pc'

const radiusItems = [
  { label: '2px', value: 2 },
  { label: '4px', value: 4 },
  { label: '6px', value: 6 },
  { label: '8px', value: 8 },
  { label: '12px', value: 12 },
  { label: '16px', value: 16 },
  { label: '全圆角', value: 'full' },
] as const
</script>

<style scoped>
.card-radius-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.card-radius-demo strong {
  display: block;
  margin-bottom: 8px;
  font-weight: var(--dh-font-weight-semibold);
}

.card-radius-demo p {
  margin: 0;
  color: var(--dh-color-text-secondary);
}
</style>

阴影效果

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

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

<script setup lang="ts">
import { Card as ElCard } from '@szhn/dh-design-pc'

</script>

<template>
  <div class="card-shadow-demo">
    <el-card class="card-shadow-demo__item" shadow="always">始终显示阴影</el-card>
    <el-card class="card-shadow-demo__item" shadow="hover">悬停显示阴影</el-card>
    <el-card class="card-shadow-demo__item" shadow="never">不显示阴影</el-card>
  </div>
</template>

<style scoped>
.card-shadow-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card-shadow-demo__item {
  width: 240px;
  max-width: 100%;
}
</style>

API

Attributes

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

Slots

插槽名	说明
default	自定义默认内容
header	卡片标题内容
footer	卡片页脚内容

Card 卡片 ​

极简卡片 ​

带标题卡片 ​

带副标题和描述 ​

头部分割线 ​

图文卡片 ​

带底部区域 ​

圆角 ​

阴影效果 ​

API ​

Attributes ​

Slots ​