From 92921431668181fb6d3387368c751ccc40aba8cf Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期五, 28 十一月 2025 17:14:32 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev-dataBoard'
---
src/views/DataBoard/components/DataBoardCenterDataItem.vue | 84 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 84 insertions(+), 0 deletions(-)
diff --git a/src/views/DataBoard/components/DataBoardCenterDataItem.vue b/src/views/DataBoard/components/DataBoardCenterDataItem.vue
new file mode 100644
index 0000000..2634059
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardCenterDataItem.vue
@@ -0,0 +1,84 @@
+<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>
--
Gitblit v1.9.1