2022-12-12 10:42:48 +08:00
|
|
|
<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">
|
2023-12-26 19:25:00 +08:00
|
|
|
<el-statistic title="Total Transactions" :value="outputValue" />
|
2022-12-12 10:42:48 +08:00
|
|
|
</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>
|
2023-12-26 19:25:00 +08:00
|
|
|
import { ref } from 'vue'
|
|
|
|
import { useTransition } from '@vueuse/core'
|
2022-12-12 10:42:48 +08:00
|
|
|
import { ChatLineRound, Male } from '@element-plus/icons-vue'
|
2023-12-26 19:25:00 +08:00
|
|
|
|
|
|
|
const source = ref(0)
|
|
|
|
const outputValue = useTransition(source, {
|
|
|
|
duration: 1500,
|
|
|
|
})
|
|
|
|
source.value = 172000
|
2022-12-12 10:42:48 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
.el-col {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
</style>
|