手册版本 V5.0

布局介绍

考虑实际开发场景，使用布局实现更方便修改，所以没有进行组件封装；

布局结构

<view class="gui-card-view gui-margin-top">
	<view class="gui-card-body gui-border-b gui-flex gui-rows gui-nowrap">
		<左侧图片>
		<view class="gui-card-desc">
			<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
				<text class="gui-card-name">昵称</text>
				<text class="gui-text-small gui-color-blue">补充信息</text>
			</view>
			<text class="gui-card-text gui-block-text" style="margin-top:10rpx;">地址</text> 
			<text class="gui-card-text gui-block-text">小文本描述</text>
		</view>
	</view>
	<view class="gui-card-footer gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
		<text class="gui-icons gui-card-footer-item gui-border-r">&#xe608; 店铺</text>
		<text class="gui-icons gui-card-footer-item gui-border-r">&#xe613; 设置</text>
		<text class="gui-icons gui-card-footer-item">&#xe61e; 链接</text>
	</view>
</view>

兼容平台

注意事项

//nvue 请通过 page.json 来设置背景颜色 :
{
	"path" : "pages/cardview/cardview",
	"style" :                                                                                    
	{
		"navigationBarTitleText": "GraceUI · 名片卡片",
		"backgroundColor":"#F8F8F8"
	}
	
}

演示代码