From 8321ac99a9ddaf626128d7c1ed77a3fe4f1bc2aa Mon Sep 17 00:00:00 2001 From: mjz <2286101414@qq.com> Date: Thu, 8 Jun 2023 23:46:44 +0800 Subject: [PATCH] mjz update --- docs/10.文档/30.交互组件/40.卡片.md | 142 +++++++++++++++++++- 1 file changed, 137 insertions(+), 5 deletions(-) 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 + + + + + 史诗 + 我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。 + + + + + + 正义天使 凯尔 + + 十天前 + + 10 + 20 + 30 + + + + + + + ``` -::: \ 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 + + + + + + + 凯尔 + + 2019年12月3日 + + + + + + 折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！ + + + + + + + + 10 + 20 + 30 + + + + + + + 莫甘娜 + + 凯尔，你被自己的光芒变的盲目。 + + + + 凯尔： + 妹妹，你在帮他们给黑暗找借口吗? + + + + 2018年12月4日 + + + + + + + + + + +``` + +## 文章类卡片 + +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