## **案例類卡片**
#### 示例
:-: 
#### **xxx.wxml**
```
<view class="cu-card case {{isCard?'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>
```
#### **xxx.wxss**
```
無
```
#### **xxx.JS**
```
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
},
isCard(e) {
this.setData({
isCard: e.detail.value
})
},
});
```
## **動態類卡片**
#### 示例
:-: 
#### **xxx.wxml**
```
<view class="cu-card dynamic {{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>
<view class="grid flex-sub padding-lr {{isCard?'col-3 grid-square':'col-1'}}">
<view class="bg-img {{isCard?'':'only-img'}}" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);" wx:for="{{isCard?9:1}}" wx: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 class="cu-item">
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></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-appreciate text-gray"></text>
<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
```
## **文章類卡片**
#### 示例
:-: 
#### **xxx.wxml**
```
<view class="cu-card article {{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>
```
