<view class="page">
    <view class="page__hd">
        <view class="page__title">Card</view>
        <view class="page__desc">卡片</view>
    </view>
    <view class="page__bd">
        <view class="sub-title">Default</view>
        <wux-wing-blank size="default">
            <wux-card title="卡片标题" extra="额外内容">
                <view slot="body">卡片内容</view>
                <view slot="footer">尾部内容</view>
            </wux-card>
        </wux-wing-blank>
        <view class="sub-title">Thumb</view>
        <wux-wing-blank size="default">
            <wux-card title="卡片标题" extra="额外内容" thumb="http://cdn.skyvow.cn/logo.png">
                <view slot="body">卡片内容</view>
                <view slot="footer">尾部内容</view>
            </wux-card>
        </wux-wing-blank>
        <view class="sub-title">Custom thumb style</view>
        <wux-wing-blank size="default">
            <wux-card title="卡片标题" extra="额外内容" thumb="http://cdn.skyvow.cn/logo.png" thumb-style="border-radius: 50%;">
                <view slot="body">卡片内容</view>
                <view slot="footer">尾部内容</view>
            </wux-card>
        </wux-wing-blank>
        <view class="sub-title">No border</view>
        <wux-wing-blank size="default">
            <wux-card bordered="{{ false }}" title="卡片标题" extra="额外内容" thumb="http://cdn.skyvow.cn/logo.png">
                <view slot="body">卡片内容</view>
                <view slot="footer">尾部内容</view>
            </wux-card>
        </wux-wing-blank>
        <view class="sub-title">Full</view>
        <wux-card full title="卡片标题" extra="额外内容" thumb="http://cdn.skyvow.cn/logo.png">
            <view slot="body">卡片内容</view>
            <view slot="footer">尾部内容</view>
        </wux-card>
        <view class="sub-title">Actions</view>
        <wux-card full title="付款金额" extra="¥1024.00" actions="{{ actions }}" bind:action="onAction">
            <view slot="body">商品：电动打蛋机</view>
            <view slot="footer">状态：未支付</view>
        </wux-card>
    </view>
</view>