---
url: /components/pricing-card.md
---
# PricingCard 定价卡

`EvPricingCard` 是转化链路的核心区块，把产品定价卡的全部要素组件化：右上促销徽章、划线原价、
橙色促销注记、蓝色勾选特性列表与胶囊 CTA。`featured` 深色形态用于主推档位。

## 基础用法

```vue
<EvPricingCard
  title="专业版"
  price="¥12"
  original-price="¥18"
  offer-note="新用户首年 7 折"
  badge="最受欢迎"
  :features="['无限空间', '离线同步']"
  action-text="立即订阅"
  @action="subscribe()"
/>
```

## 深色主推卡

```vue
<EvPricingCard featured title="团队版" price="¥28" action-text="联系销售" />
```

::: tip 与 EvComparisonTable 搭配
档位差异多时，定价卡只保留亮点，完整功能差异交给 [EvComparisonTable](./comparison-table)。
:::

## API

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title / description | 标题与描述 | string | — |
| price | 价格文案 | string | — |
| original-price | 划线原价 | string | — |
| offer-note | 橙色促销注记 | string | — |
| badge | 右上角徽章文案 | string | — |
| features | 勾选特性列表 | string\[] | `[]` |
| featured | 深色主推形态 | boolean | `false` |
| action-text | 动作按钮文案 | string | — |
| pill | 动作按钮胶囊形态 | boolean | `true` |
| glass | 磨砂玻璃质感（featured 主推卡不参与）；缺省跟随全局（ConfigProvider glass） | boolean | — |
| blur | 磨砂强度（px），内联覆盖 `--ev-glass-blur` | string / number | — |
| saturate | 磨砂饱和度（倍数），内联覆盖 `--ev-glass-saturate` | string / number | — |
| tint | 磨砂底色浓度（%），内联覆盖 `--ev-glass-bg` | string / number | — |

### 插槽

| 插槽 | 说明 |
| --- | --- |
| badge / title / description / price / note | 各要素覆写 |
| features | 特性列表覆写 |
| action | 动作按钮覆写 |
| footer | 底部追加内容 |

### 事件

| 事件 | 说明 |
| --- | --- |
| action | 点击动作按钮时派发 |