50 lines
1.6 KiB
Vue
50 lines
1.6 KiB
Vue
<script setup>
|
|
import AppPanel from "../../../Components/AppPanel.vue";
|
|
import {NNumberAnimation, NStatistic} from "naive-ui";
|
|
|
|
const props = defineProps({
|
|
counter: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
isDoubleCounter: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
counterSuffix: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
percent: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<AppPanel class="min-w-[120px] min-h-[100px] max-h-[102px] h-full"
|
|
style="--n-padding-top: 0; --n-padding-bottom: 0; --n-padding-left: 8px; --n-padding-right: 8px;">
|
|
<div class="w-full h-full flex flex items-center justify-center">
|
|
<NStatistic class="text-center">
|
|
<template #label>
|
|
<slot />
|
|
</template>
|
|
<template v-if="isDoubleCounter">
|
|
<NNumberAnimation :from="0" :to="counter" />
|
|
<span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
|
|
<span style="color: var(--n-close-icon-color)"> / </span>
|
|
<NNumberAnimation :from="0" :to="counterSuffix" />
|
|
<span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
|
|
</template>
|
|
<NNumberAnimation v-else :from="0" :to="counter" />
|
|
<span v-if="percent" style="color: var(--n-close-icon-color)">%</span>
|
|
</NStatistic>
|
|
</div>
|
|
</AppPanel>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|