diff --git a/docs/10.文档/30.交互组件/40.卡片.md b/docs/10.文档/30.交互组件/40.卡片.md
index 140e8fa..898161c 100644
--- a/docs/10.文档/30.交互组件/40.卡片.md
+++ b/docs/10.文档/30.交互组件/40.卡片.md
@@ -5,10 +5,142 @@ permalink: /pages/component/card
article: false
---
-## 操作条
+`cu-card` 卡片必选值
-::: details 点此查看页面源代码
-页面位置：`/pages/component/card`
-```vue
+## 案例类卡片
+
+1. `cu-card` 和 `case` 结合，在配合子元素的 `cu-item` 类名，写出案例类的样式
+2. 内部其他样式可以根据其他类名自行设置，`cu-item` 自带 `margin:30px`，可以通过类名 `no-card` 去除
+3. 卡片上面是图片展示，右上角是标签，文字悬浮于图片上
+4. 卡片下面就是一个消息列表
+
+```html
+
+
+
+
+ 史诗
+ 我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
+
+
+
+
```
-:::
\ No newline at end of file
+
+## 动态类卡片
+
+1. 该样式类似于 QQ 动态，由 `cu-card` 和 `dynamic` 结合，再配合子元素 `cu-item` 编写而成
+2. 动态下方的评论需要添加类名 `comment`
+3. 内部其他样式可以根据其他类名自行设置，`cu-item` 自带 `margin:30px`，可以通过类名 `no-card` 去除
+4. **动态图片内容**，官网给出两种样式，第一就是等高 `grid` 宫格图片，第二就是一张图片
+
+```html
+
+
+
+
+ 折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！
+
+
+
+
+
+
+
+ 10
+ 20
+ 30
+
+
+
+
+
+```
+
+## 文章类卡片
+
+1. 该卡片由 `cu-card` 和 `article` 结合，再配合子元素 `cu-item`
+2. `cu-item` 自带 `margin:30px`，可以通过类名 `no-card` 去除
+3. 卡片里面内容分为 `title` 和 `content`，两个内容皆可自定义
+
+
+```html
+
+
+ 无意者 烈火焚身;以正义的烈火拔出黑暗。我有自己的正义，见证至高的烈火吧。
+
+
+
+ 折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！真正的恩典因不完整而美丽，因情感而真诚，因脆弱而自由！
+
+ 正义天使
+ 史诗
+
+
+
+
+
+```
+
+## 卡片相关class
+
+|class| 说明 |
+| ---- | ---- | ---- |
+|cu-card| 卡片必选值 |
+|case |案例类卡片 |
+|dynamic| 动态类卡片 |
+|article| 文章类卡片 |
+|comment| 评论 |
+|no-card| 配合cu-card，去除子元素cu-item的margin和border |
+|desc |纵向的flex布局 |
\ No newline at end of file