1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<template>
<div :class="cls">
<div v-if="title" class="numberInfoTitle">
{{ title }}
</div>
<div v-if="subTitle" class="numberInfoSubTitle">
{{ subTitle }}
</div>
<div class="numberInfoValue" :style="{ 'margin-top:gap': gap }">
<span>
{{ total }}
<em v-if="suffix" class="suffix">{{ suffix }}</em>
</span>
<span v-if="status || subTotal" class="subTotal">
{{ subTotal }}
<a-icon v-if="status" :type="`caret-${status}`" />}
</span>
</div>
</div>
</template>
<script>
import { Icon } from "ant-design-vue";
import classNames from "classnames";
export default {
props: [
"theme",
"title",
"subTitle",
"total",
"subTotal",
"status",
"suffix",
"gap",
],
components: {
AIcon: Icon,
},
computed: {
cls() {
const { theme } = this;
return classNames("numberInfo", {
["numberInfo" + theme]: theme,
});
},
},
};
</script>