<template>
|
<div
|
class="data-board-data-info-item"
|
:style="{
|
backgroundImage: `url(${backgroundImage})`,
|
}"
|
>
|
<div class="data-board-data-info-item-label">{{ label }}</div>
|
<div class="data-board-data-info-item-value">
|
<el-statistic :value="_value" />
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { useTransition } from '@vueuse/core';
|
|
defineOptions({
|
name: 'DataBoardDataInfoItem',
|
});
|
|
type Props = {
|
backgroundImage: string;
|
label: string;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
const value = defineModel<number>('value');
|
|
const _value = useTransition(value, {
|
duration: 500,
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.data-board-data-info-item {
|
display: flex;
|
justify-content: center;
|
text-align: left;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
flex-direction: column;
|
|
.data-board-data-info-item-label {
|
margin-bottom: 4px;
|
margin-left: 86px;
|
font-size: 13px;
|
color: #ffffff;
|
}
|
|
.data-board-data-info-item-value {
|
margin-left: 86px;
|
font-size: 16px;
|
font-family: YouSheBiaoTiHei Regular;
|
background: linear-gradient(to bottom, #ffffff, #6fcdff);
|
-webkit-background-clip: text;
|
line-height: 19px;
|
-webkit-text-fill-color: transparent;
|
}
|
}
|
</style>
|
