Skip to content

Latest commit

 

History

History
49 lines (45 loc) · 1.63 KB

README.md

File metadata and controls

49 lines (45 loc) · 1.63 KB
Raw

Card 卡片

使用指南

在 app.wxss 中引入组件库所有样式

@import "path/to/zanui-weapp/dist/index.wxss";

代码演示

基础用法

卡片可以用于左侧图片，右侧描述信息的展示。 zan-card 由 zan-card__thumb 和 zan-card__detail 组成。分别负责左侧图片展示和右侧内容区域展示 如下，是一个商品信息的展示：

<view class="zan-card">
  <!-- 卡片左侧商品图片 -->
  <view class="zan-card__thumb">
    <image class="zan-card__img"
      src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
      mode="aspectFit"
    ></image>
  </view>
  <!-- 卡片右侧详情描述 -->
  <view class="zan-card__detail">
    <!-- 商品标题行 -->
    <!-- 每行可以使用 zan-card__detail-row 来控制展示区域 -->
    <!-- 每行里面可以用 zan-card__left-col zan-card__right-col 来控制左右展示 -->
    <view class="zan-card__detail-row">
      <view class="zan-card__right-col">¥ 999.99</view>
      <view class="zan-card__left-col zan-ellipsis--l2">
         红烧牛肉【虚拟商品】【有库存】【有sku】
      </view>
    </view>
    <!-- 商品附属信息展示行 -->
    <view class="zan-card__detail-row zan-c-gray-darker">
      <view class="zan-card__right-col">x2</view>
      <view class="zan-card__left-col">
        3000克 50%
      </view>
    </view>
    <!-- 商品操作按钮相关 -->
    <view class="zan-card__detail-row zan-c-gray-darker">
      <view class="zan-card__left-col zan-c-red">已发货</view>
    </view>
  </view>
</view>