mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-05 04:37:47 +08:00
04f7ea8105
* refactor(components): [statistic] * fix: type error * docs: fix style * chore: use rAF * chore: update docs
43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
Vue
<template>
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<el-statistic title="Daily active users" :value="268500" />
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-statistic :value="138">
|
|
<template #title>
|
|
<div style="display: inline-flex; align-items: center">
|
|
Ratio of men to women
|
|
<el-icon style="margin-left: 4px" :size="12">
|
|
<Male />
|
|
</el-icon>
|
|
</div>
|
|
</template>
|
|
<template #suffix>/100</template>
|
|
</el-statistic>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-statistic title="Total Transactions" :value="172000" />
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-statistic title="Feedback number" :value="562">
|
|
<template #suffix>
|
|
<el-icon style="vertical-align: -0.125em">
|
|
<ChatLineRound />
|
|
</el-icon>
|
|
</template>
|
|
</el-statistic>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ChatLineRound, Male } from '@element-plus/icons-vue'
|
|
</script>
|
|
|
|
<style scoped>
|
|
.el-col {
|
|
text-align: center;
|
|
}
|
|
</style>
|