卡片组件一般用于多个列表条目，且风格统一的场景。
#平台差异说明
#基本使用
组件的头部信息可以通过参数配置，其他主体和底部的信息，需要通过slot传入。
<template>
<u-card :title="title" :sub-title="subTitle" :thumb="thumb">
<view class="" slot="body">
<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
<view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view>
<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image>
</view>
<view class="u-body-item u-flex u-row-between u-p-b-0">
<view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放</view>
<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
</view>
</view>
<view class="" slot="foot"><u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon></view>
</u-card>
</template>
<script>
export default {
data() {
return {
title: '素胚勾勒出青花，笔锋浓转淡',
subTitle: '2020-05-15',
thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
};
}
};
</script>
<style scoped lang="scss">
.u-card-wrap {
background-color: $u-bg-color;
padding: 1px;
}
.u-body-item {
font-size: 32rpx;
color: #333;
padding: 20rpx 10rpx;
}
.u-body-item image {
width: 120rpx;
flex: 0 0 120rpx;
height: 120rpx;
border-radius: 8rpx;
margin-left: 12rpx;
}
</style>
#配置卡片间距
可以通过margin参数配置卡片与屏幕左右的边距，以及上下卡片之间的距离，如: 20rpx 30rpx、20rpx 30rpx 30rpx 20rpx。
注意：当设置full参数为true的时候，也就是卡片占据屏幕总宽度的时候，通过margin配置的左右边距会失效。
<u-card margin="30rpx"></u-card>
#配置卡片左上角的缩略图
这个缩略图是可选的，显示在卡片的左上角位置，如果配置了thumb参数(图片路径)，就会显示图片。
thumb缩略图路径thumb-width缩略图宽度，高等于宽
<u-card thumb="xxx.jpg" thumb-width="60"></u-card>
#配置卡片边框
这里说的边框，有3个：
border配置是否显示整个卡片的外边框head-border-bottom配置是否显示卡片内部头部的下边框
foot-border-top配置是否显示卡片内部底部的上边框
<u-card :border="false" :foot-border-top="false"></u-card>
#设置内边距
默认下，卡片内部的头部，主体，底部都有一个内边距，可以通过配置padding参数去覆盖：
<u-card padding="30"></u-card>
#API
#Props
#Slot
#Event
