<template>
|
<div class="data-board-center-data-item">
|
<div class="data-board-data-info-item-icon">
|
<img :src="image" alt="" />
|
</div>
|
<div class="data-board-data-info-item-content">
|
<div class="data-board-data-info-item-value">
|
<el-statistic :value="_value" :precision="precision" />
|
</div>
|
<div class="data-board-data-info-item-label">{{ label }}</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { useTransition } from '@vueuse/core';
|
|
defineOptions({
|
name: 'DataBoardCenterDataItem',
|
});
|
|
type Props = {
|
image: string;
|
label: string;
|
precision?: number;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
precision: 2,
|
});
|
|
const value = defineModel<number>('value');
|
|
const _value = useTransition(value, {
|
duration: 500,
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.data-board-center-data-item {
|
display: flex;
|
padding: 8px 12px;
|
background: rgba(0, 5, 18, 0.27);
|
|
.data-board-data-info-item-icon {
|
width: 64px;
|
height: 64px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.data-board-data-info-item-content {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: flex-start;
|
margin-left: 10px;
|
|
.data-board-data-info-item-value {
|
margin-bottom: 5px;
|
font-size: 22px;
|
font-family: DrukWide-Bold;
|
line-height: 30px;
|
|
:deep() {
|
.el-statistic__content {
|
color: #ffffff;
|
}
|
}
|
}
|
|
.data-board-data-info-item-label {
|
font-size: 16px;
|
line-height: 22px;
|
color: #ffffff;
|
}
|
}
|
}
|
</style>
|
