You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.3 KiB
67 lines
1.3 KiB
3 years ago
|
<docs>
|
||
|
|
---
|
||
|
|
order: 2
|
||
|
|
title:
|
||
|
|
zh-CN: 在卡片中使用
|
||
|
|
en-US: In Card
|
||
|
|
---
|
||
|
|
|
||
|
|
## zh-CN
|
||
|
|
|
||
|
|
在卡片中展示统计数值。
|
||
|
|
|
||
|
|
## en-US
|
||
|
|
|
||
|
|
Display statistic data in Card.
|
||
|
|
|
||
|
|
</docs>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<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="%"
|
||
|
|
:value-style="{ color: '#3f8600' }"
|
||
|
|
style="margin-right: 50px"
|
||
|
|
>
|
||
|
|
<template #prefix>
|
||
|
|
<arrow-up-outlined />
|
||
|
|
</template>
|
||
|
|
</a-statistic>
|
||
|
|
</a-card>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="12">
|
||
|
|
<a-card>
|
||
|
|
<a-statistic
|
||
|
|
title="Idle"
|
||
|
|
:value="9.3"
|
||
|
|
:precision="2"
|
||
|
|
suffix="%"
|
||
|
|
class="demo-class"
|
||
|
|
:value-style="{ color: '#cf1322' }"
|
||
|
|
>
|
||
|
|
<template #prefix>
|
||
|
|
<arrow-down-outlined />
|
||
|
|
</template>
|
||
|
|
</a-statistic>
|
||
|
|
</a-card>
|
||
|
|
</a-col>
|
||
|
|
</a-row>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts">
|
||
|
|
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
|
||
|
|
import { defineComponent } from 'vue';
|
||
|
|
export default defineComponent({
|
||
|
|
components: {
|
||
|
|
ArrowUpOutlined,
|
||
|
|
ArrowDownOutlined,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|