You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
1.6 KiB
88 lines
1.6 KiB
<template> |
|
<div class="statistic"> |
|
<div class="statistic-number"> |
|
{{ isDecimal ? parseFloat(outputValue.toFixed(2)) : parseInt(outputValue) }}{{ valueUnit }} |
|
</div> |
|
<div class="statistic-title" :title="tooltip">{{ title }}</div> |
|
</div> |
|
</template> |
|
<script setup> |
|
import {useTransition} from "@vueuse/core"; |
|
|
|
const props = defineProps({ |
|
tooltip: { |
|
type: String, |
|
default: '', |
|
}, |
|
title: { |
|
type: String |
|
}, |
|
value: { |
|
type: Number, |
|
default: 0, |
|
}, |
|
valueUnit: { |
|
type: String, |
|
}, |
|
// 是否是小数 |
|
isDecimal: { |
|
type: Boolean, |
|
default: false |
|
} |
|
}); |
|
|
|
const value = ref(props.value); |
|
console.log( |
|
value |
|
) |
|
watch(() => props.value, (val) => { |
|
value.value = val || 0; |
|
|
|
}) |
|
const outputValue = useTransition(value, { |
|
duration: 1500, |
|
}); |
|
</script> |
|
<style lang="scss" scoped> |
|
.statistic { |
|
text-align: center; |
|
cursor: pointer; |
|
.statistic-number { |
|
font-size: 39px; |
|
font-weight: 700; |
|
height: 64px; |
|
line-height: 64px; |
|
background: linear-gradient( |
|
270deg, |
|
rgba(3, 11, 57, 0) 0%, |
|
#00117d 49%, |
|
rgba(3, 11, 57, 0) 100% |
|
); |
|
margin-bottom: 14px; |
|
|
|
&::before, |
|
&::after { |
|
display: block; |
|
content: ""; |
|
height: 4px; |
|
width: 85%; |
|
margin: auto; |
|
background: linear-gradient( |
|
270deg, |
|
rgba(1, 7, 94, 0) 0%, |
|
#213ffb 49%, |
|
rgba(1, 7, 93, 0) 100% |
|
); |
|
} |
|
} |
|
|
|
.statistic-title { |
|
font-size: 27px; |
|
white-space: break-spaces; |
|
} |
|
|
|
.statistic-footer { |
|
font-size: 27px; |
|
} |
|
} |
|
</style>
|
|
|