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

zhengyiming

8 天以前 92921431668181fb6d3387368c751ccc40aba8cf

 src/views/DataBoard/components/DataBoardDataInfoItem.vue

New file
@@ -0,0 +1,64 @@
<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>