mirror of
https://github.com/element-plus/element-plus.git
synced 2025-12-19 09:09:40 +08:00
3b8a590baf
* docs: improve examples layout for narrow screens * docs: style related * style: [statistic] use utilities * style: [input] remove deep * style: [transitions] change style * refactor: [date-picker-panel] narrow refactor
45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
<template>
|
|
<el-row :gutter="16">
|
|
<el-col :xs="24" :sm="12" :md="6" class="text-center mb-4">
|
|
<el-statistic title="Daily active users" :value="268500" />
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="6" class="text-center mb-4">
|
|
<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 :xs="24" :sm="12" :md="6" class="text-center mb-4">
|
|
<el-statistic title="Total Transactions" :value="outputValue" />
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="6" class="text-center mb-4">
|
|
<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 { ref } from 'vue'
|
|
import { useTransition } from '@vueuse/core'
|
|
import { ChatLineRound, Male } from '@element-plus/icons-vue'
|
|
|
|
const source = ref(0)
|
|
const outputValue = useTransition(source, {
|
|
duration: 1500,
|
|
})
|
|
source.value = 172000
|
|
</script>
|