60 lines
1.7 KiB
Vue
60 lines
1.7 KiB
Vue
<script setup>
|
|
import AppPanel from "../../../Components/AppPanel.vue";
|
|
import {NNumberAnimation, NStatistic} from "naive-ui";
|
|
const props = defineProps({
|
|
label: String,
|
|
counter: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
isDoubleCounter: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
counterSuffix: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
percent: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
counterClass: {
|
|
type: String
|
|
},
|
|
counterSuffixClass: {
|
|
type: String
|
|
}
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<AppPanel no-padding>
|
|
<div class="flex flex-col items-center justify-center text-center py-2">
|
|
<NStatistic :label="label">
|
|
<template v-if="isDoubleCounter">
|
|
<span :class="counterClass">
|
|
<NNumberAnimation :from="0" :to="counter" />
|
|
<span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
|
|
</span>
|
|
<span style="color: var(--n-close-icon-color)"> / </span>
|
|
<span :class="counterSuffixClass">
|
|
<NNumberAnimation :from="0" :to="counterSuffix" />
|
|
<span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
|
|
</span>
|
|
</template>
|
|
<span v-else :class="counterClass">
|
|
<NNumberAnimation :from="0" :to="counter" />
|
|
<span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
|
|
</span>
|
|
</NStatistic>
|
|
</div>
|
|
</AppPanel>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|