mirror of
https://github.com/youzan/vant.git
synced 2025-10-19 01:54:48 +00:00
docs build
This commit is contained in:
24
docs/examples-dist/card.vue
Normal file
24
docs/examples-dist/card.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template><section class="demo-card"><h1 class="demo-title">card</h1><example-block title="基础用法">
|
||||
<zan-card title="商品名称是什么,两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</zan-card>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<zan-card title="商品名称是什么,两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余" desc="商品SKU1,商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么,两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余两行显示状态如效果图,多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
Reference in New Issue
Block a user