手册版本 V5.0

组件介绍

GraceUI 以样式形式提供了卡片列表布局，因为卡片列表布局在实际项目中变化较多，样式方式更灵活，请您看一下相关样式说明，应用时可以在页面上复写相关样式，达到修改的目的。

样式说明

/* 卡片宽度 = 外层宽度 （690 / 一行数量 2） - 间距 */
/* 实际使用过程中请跟据项目要求进行宽度修改实现一行多列 */
.gui-card-item{width:330rpx; margin-bottom:30rpx;}
/* 图片宽度、高度修饰 */
.gui-card-img{width:330rpx; height:191rpx; overflow:hidden; position:relative;}
/* 标题顶部间距 */
.gui-card-title{margin-top:3px;}
/* 描述顶部间距 */
.gui-card-desc{margin-top:3px;}
/* 定位标签样式 */
.gui-card-tip{width:68rpx; height:40rpx; line-height:40rpx; text-align:center;}
/* 定位于图片上方的标题修饰 */
.gui-card-mask-title{line-height:40rpx; padding:10rpx; width:330rpx;}

兼容平台

布局结构

<view class="gui-card-list gui-flex gui-rows gui-wrap gui-space-between gui-margin-top">
	<view class="gui-card-item" hover-class="gui-tap">
		<view class="gui-card-img">图片元素</view>
		<text class="gui-card-title gui-block-text gui-text gui-primary-color">标题</text>
		<text class="gui-block-text gui-text-small gui-color-gray">描述小文本</text>
	</view>
</view>

演示代码