Merge remote-tracking branch 'origin/dev-dataBoard'

zhengyiming

8 天以前 92921431668181fb6d3387368c751ccc40aba8cf

 src/views/DataBoard/components/DataBoardCenterDataItem.vue

New file
@@ -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>