Card 卡片

用于展示业务信息、文章图文、媒体内容或功能区块的卡片容器，支持封面图、磨砂毛玻璃 (glass)、悬浮散焦阴影 (elevated) 及插槽扩充。

---

代码示例

1. 基础卡片 (Basic Card)

包含标题、副标题、右上角 Action 操作插槽及正文内容。

<template>
  <mu-card
    title="MuZhiYu UI 极奢设计系统"
    subtitle="Vue 3 + SCSS 打造的统一端交互规范"
    extra="查看详情"
    icon="star"
    hoverable
    @click="onCardClick"
  >
    <text>为移动端应用提供极度平滑的视效体验与微交互动效，包含 90+ 常用 UI 组件与完整暗黑模式。</text>
  </mu-card>
</template>

<script setup>
const onCardClick = () => {
  console.log('点击卡片')
}
</script>

---

2. 置顶封面图片卡片 (Cover Image)

设置 cover 指定顶置大图 URL，可配置 cover-tag 放置右上角标签。

<template>
  <mu-card
    cover="https://picsum.photos/600/300"
    cover-tag="视觉精选"
    title="全端极奢视效设计系统"
    subtitle="2026 最新设计潮流"
  >
    <text>针对现代智能终端的 OLED 纯黑高对比度场景进行了像素级匹配调优。</text>
  </mu-card>
</template>

---

3. 毛玻璃与悬浮模式 (Glass & Elevated)

通过 variant 切换外观模式：

• variant="glass": 磨砂毛玻璃半透明背景。
• variant="elevated": 柔和立体悬浮散焦阴影。

<template>
  <!-- 毛玻璃质感 -->
  <mu-card variant="glass" title="高质感毛玻璃" subtitle="Translucent Backdrop">
    <text>半透明磨砂质感，带来层次丰富的轻盈觉体验。</text>
  </mu-card>

  <!-- 悬浮散焦阴影 -->
  <mu-card variant="elevated" title="悬浮阴影卡片" subtitle="Elevated Shadow">
    <text>具有柔和立体散焦阴影，突出核心业务焦点。</text>
  </mu-card>
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
title	卡片标题	String	-	''
subtitle	卡片副标题	String	-	''
icon	标题旁矢量图标名称	String	-	''
iconColor	矢量图标颜色	String	-	''
iconBg	图标徽章背景色	String	-	''
extra	右上角扩展胶囊文案	String	-	''
cover	置顶封面大图链接	String	-	''
coverTag	封面大图右上角标签文案	String	-	''
coverHeight	封面大图高度	String	-	'320rpx'
variant	卡片样式变体	String	flat | elevated | glass | plain	'flat'
bodyPadding	主体 Padding 边距	String	-	'32rpx'
border	是否显示纤细外边框	Boolean	true | false	true
hoverable	是否开启触控缩放阻尼反馈	Boolean	true | false	false
radius	自定义卡片圆角大小（支持 rpx/px）	String	-	''
background	自定义卡片背景颜色	String	-	''
margin	卡片外边距（CSS margin 语法）	String	-	'0'

---

插槽说明 (Slots)

插槽名	说明
default	卡片主体内容
header	自定义卡片头部
icon	自定义图标区域
extra	自定义右上角扩展区域
footer	卡片底部脚部区域

---

事件说明 (Events)

事件名	说明	回调参数
click	点击卡片时触发	(event: TouchEvent)