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

<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>