Card 卡片
EwCard 是官网区块内容的容器。三种卡面风格对应不同的展示场景:tone 粉彩底适合功能亮点与作品展示, sticker 厚白描边营造轻快的贴纸质感,featured 深色渐变在浅色页面上天然成为视觉焦点。
粉彩与贴纸
tone 粉彩底 × sticker 厚白描边
cream / blue / mint / pink / lime 五种粉彩底;sticker 加 3px 白描边与轻投影。
灵感收集
奶油底 + 厚白描边
网页剪藏、随手速记
新功能热门
团队空间
淡蓝底贴纸卡
共享文档与评论协作
端到端加密
薄荷底 + 悬浮轻抬
vue
<EwCard tone="cream" sticker>…</EwCard>
<EwCard tone="mint" hoverable>…</EwCard>深色精选卡
featured
深色渐变 + 主色光晕,适合定价主推档与关键亮点;内部标题与正文自动切换浅色。
专业版
深色渐变卡面,在浅色页面上天然成为视觉焦点。
vue
<EwCard featured>…</EwCard>可点击卡片
tag="a" 渲染为链接卡;搭配 hoverable 即获得悬浮轻抬反馈。自定义底色用 custom-bg 覆写 tone。
API
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| tone | 粉彩底色 | 'plain' | 'soft' | 'cream' | 'blue' | 'mint' | 'pink' | 'lime' | 'plain' |
| sticker | 厚白描边贴纸风 | boolean | false |
| featured | 深色精选形态 | boolean | false |
| hoverable | 悬浮轻抬 | boolean | false |
| flat | 去边框与阴影(嵌入场景) | boolean | false |
| tag | 渲染标签(可传 'a') | string | 'div' |
| custom-bg | 自定义底色(覆盖 tone) | string | — |
插槽
| 插槽 | 说明 |
|---|---|
| default | 卡片内容 |