ant-design-vue/components/statistic/demo/card.md

51 lines
1.1 KiB
Markdown
Raw Normal View History

2019-05-25 09:18:04 +00:00
<cn>
#### 在卡片中使用
在卡片中展示统计数值。
</cn>
<us>
#### In Card
Display statistic data in Card.
</us>
```html
<template>
2019-05-28 03:10:38 +00:00
<div style="background: #ECECEC; padding: 30px">
<a-row :gutter="16">
<a-col :span="12">
<a-card>
<a-statistic
title="Feedback"
:value="11.28"
:precision="2"
suffix="%"
:valueStyle="{color: '#3f8600'}"
style="margin-right: 50px"
>
<template v-slot:prefix>
<a-icon type="arrow-up" />
</template>
</a-statistic>
</a-card>
</a-col>
<a-col :span="12">
<a-card>
<a-statistic
title="Idle"
:value="9.3"
:precision="2"
suffix="%"
valueClass="demo-class"
:valueStyle="{ color: '#cf1322' }"
>
<template v-slot:prefix>
<a-icon type="arrow-down" />
</template>
</a-statistic>
</a-card>
</a-col>
</a-row>
2019-05-25 09:18:04 +00:00
</div>
</template>
```