2023-06-07 10:48:30 +00:00
|
|
|
<!--
|
|
|
|
|
* @Descripttion: 统计数值组件演示
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<el-main>
|
|
|
|
|
<el-alert title="一个非常简单的组件, 目的就是省去重复写样式, 支持千分符/前后缀等." type="success" style="margin-bottom:20px;"></el-alert>
|
|
|
|
|
<el-row :gutter="15">
|
|
|
|
|
<el-col :lg="8">
|
|
|
|
|
<el-card shadow="never">
|
2023-07-10 16:41:24 +00:00
|
|
|
<x-statistic title="Title" value="112893" description="Description" tips="Tips" groupSeparator></x-statistic>
|
2023-06-07 10:48:30 +00:00
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :lg="8">
|
|
|
|
|
<el-card shadow="never">
|
2023-07-10 16:41:24 +00:00
|
|
|
<x-statistic title="今日净利润" value="112893.00" prefix="¥" groupSeparator>
|
|
|
|
|
<x-trend v-model="trendValue1"></x-trend>
|
|
|
|
|
</x-statistic>
|
2023-06-07 10:48:30 +00:00
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :lg="8">
|
|
|
|
|
<el-card shadow="never">
|
2023-07-10 16:41:24 +00:00
|
|
|
<x-statistic title="留言" value="112893" suffix="条" groupSeparator>
|
|
|
|
|
<x-trend v-model="trendValue2"></x-trend>
|
|
|
|
|
</x-statistic>
|
2023-06-07 10:48:30 +00:00
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-main>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
2023-07-10 16:41:24 +00:00
|
|
|
import xStatistic from '@/components/xStatistic';
|
2023-06-07 10:48:30 +00:00
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'statistic',
|
|
|
|
|
components: {
|
2023-07-10 16:41:24 +00:00
|
|
|
xStatistic
|
2023-06-07 10:48:30 +00:00
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
trendValue1: 7.7,
|
|
|
|
|
trendValue2: -18.9
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.el-card {margin-bottom: 15px;}
|
|
|
|
|
.up {color: #F56C6C;margin-left: 5px;}
|
|
|
|
|
.down {color: #67C23A;margin-left: 5px;}
|
|
|
|
|
</style>
|
