mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
50 lines
1.6 KiB
Markdown
50 lines
1.6 KiB
Markdown
## Card 卡片
|
|
|
|
### 使用指南
|
|
在 app.wxss 中引入组件库所有样式
|
|
```css
|
|
@import "path/to/zanui-weapp/dist/index.wxss";
|
|
```
|
|
|
|
### 代码演示
|
|
|
|
#### 基础用法
|
|
卡片可以用于左侧图片，右侧描述信息的展示。
|
|
`zan-card` 由 `zan-card__thumb` 和 `zan-card__detail` 组成。分别负责左侧图片展示和右侧内容区域展示
|
|
如下，是一个商品信息的展示：
|
|
```html
|
|
<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>
|
|
```
|
|
|