mjz update

2023-06-08 23:46:44 +08:00
parent 75314726b8
commit 8321ac99a9
1 changed files with 137 additions and 5 deletions
--- 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
+<view class="cu-card case no-card">
+	<view class="cu-item shadow">
+		<view class="image">
+			<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
+			 mode="widthFix"></image>
+			<view class="cu-tag bg-blue">史诗</view>
+			<view class="cu-bar bg-shadeBottom"> <text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text></view>
+		</view>
+		<view class="cu-list menu-avatar">
+			<view class="cu-item">
+				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
+				<view class="content flex-sub">
+					<view class="text-grey">正义天使 凯尔</view>
+					<view class="text-gray text-sm flex justify-between">
+						十天前
+						<view class="text-gray text-sm">
+							<text class="cuIcon-attentionfill margin-lr-xs"></text> 10
+							<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
+							<text class="cuIcon-messagefill margin-lr-xs"></text> 30
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</view>
 ```
-:::
+
+## 动态类卡片
+
+1. 该样式类似于 QQ 动态，由 `cu-card` 和 `dynamic` 结合，再配合子元素 `cu-item` 编写而成
+2. 动态下方的评论需要添加类名 `comment`
+3. 内部其他样式可以根据其他类名自行设置，`cu-item` 自带 `margin:30px`，可以通过类名 `no-card` 去除
+4. **动态图片内容**，官网给出两种样式，第一就是等高 `grid` 宫格图片，第二就是一张图片
+
+```html
+<view class="cu-card dynamic" :class="isCard?'no-card':''">
+	<view class="cu-item shadow">
+		<view class="cu-list menu-avatar">
+			<view class="cu-item">
+				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
+				<view class="content flex-sub">
+					<view>凯尔</view>
+					<view class="text-gray text-sm flex justify-between">
+						2019年12月3日
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="text-content">
+			折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！
+		</view>
+        <!-- 官网给出两种样式，第一就是等高 grid ，第二就是一张图片，自行复制查看 -->
+		<view class="grid flex-sub padding-lr" :class="isCard?'col-3 grid-square':'col-1'">
+			<view class="bg-img " :class="isCard?'':'only-img'" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"
+			 v-for="(item,index) in isCard?9:1" :key="index">
+			</view>
+		</view>
+		<view class="text-gray text-sm text-right padding">
+			<text class="cuIcon-attentionfill margin-lr-xs"></text> 10
+			<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
+			<text class="cuIcon-messagefill margin-lr-xs"></text> 30
+		</view>
+ 
+		<view class="cu-list menu-avatar comment solids-top">
+			<view class="cu-item">
+				<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
+				<view class="content">
+					<view class="text-grey">莫甘娜</view>
+					<view class="text-gray text-content text-df">
+						凯尔，你被自己的光芒变的盲目。
+					</view>
+					<view class="bg-grey padding-sm radius margin-top-sm  text-sm">
+						<view class="flex">
+							<view>凯尔：</view>
+							<view class="flex-sub">妹妹，你在帮他们给黑暗找借口吗?</view>
+						</view>
+					</view>
+					<view class="margin-top-sm flex justify-between">
+						<view class="text-gray text-df">2018年12月4日</view>
+						<view>
+							<text class="cuIcon-appreciatefill text-red"></text>
+							<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
+						</view>
+					</view>
+				</view>
+			</view>
+        </view>
+    </view>
+</view>
+```
+
+## 文章类卡片
+
+1. 该卡片由 `cu-card` 和 `article` 结合，再配合子元素 `cu-item`
+2. `cu-item` 自带 `margin:30px`，可以通过类名 `no-card` 去除
+3. 卡片里面内容分为 `title` 和 `content`，两个内容皆可自定义
+
+
+```html
+<view class="cu-card article" :class="isCard?'no-card':''">
+	<view class="cu-item shadow">
+		<view class="title"><view class="text-cut">无意者 烈火焚身;以正义的烈火拔出黑暗。我有自己的正义，见证至高的烈火吧。</view></view>
+		<view class="content">
+			<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
+			 mode="aspectFill"></image>
+			<view class="desc">
+				<view class="text-content"> 折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！真正的恩典因不完整而美丽，因情感而真诚，因脆弱而自由！</view>
+				<view>
+					<view class="cu-tag bg-red light sm round">正义天使</view>
+					<view class="cu-tag bg-green light sm round">史诗</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</view>
+```
+
+## 卡片相关class 
+
+|class|	说明	|
+| ---- | ---- | ---- |
+|cu-card|	卡片必选值	|
+|case	|案例类卡片	|
+|dynamic|	动态类卡片	|
+|article|	文章类卡片	|
+|comment|	评论	|
+|no-card|	配合cu-card，去除子元素cu-item的margin和border	|
+|desc	|纵向的flex布局	|