witDataCard 数据卡片组件

witDataCard是一个用于展示关键数据指标的数据卡片组件，采用卡片式设计，支持显示标题、副标题、数值和增长率等信息，具有美观的背景图片和渐变文字效果。

用法实例

<template>
  <div>
    <!-- 基础用法 -->
    <witDataCard title="销售额" subtitle="本月" :num="1258000" :rate="12.5" />
    
    <!-- 自定义单位 -->
    <witDataCard title="用户数" subtitle="新增" :num="8500" :rate="-3.2" unit="人" />
    
    <!-- 完整配置 -->
    <witDataCard title="订单量" subtitle="今日" :num="328" :rate="8.9" :over="1000" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
</script>

API

属性名	类型	默认值	描述
title	[String]	'标题'	卡片标题
subtitle	[String]	'副标题'	卡片副标题
num	[String, Number]	0	显示的数值
rate	[String, Number]	0	增长率，以百分比形式显示
unit	[String]	'%'	数值单位
over	[Number]	0	超额数值（当前版本未在UI中直接显示）

功能特性

• 数据展示：支持同时展示标题、副标题、核心数值和增长率
• 视觉设计：采用卡片式布局，搭配背景图片和渐变文字效果，增强视觉吸引力
• 动态样式：增长率根据正负值自动显示不同颜色（正值红色，负值绿色）
• 单位自定义：支持设置任意数据单位，满足不同业务场景需求
• 响应式设计：自适应容器宽度，保持良好的显示效果

实现原理

1. 布局结构：采用相对定位容器，包含背景层和内容层
2. 背景效果：使用背景图片实现卡片的视觉效果
3. 文字样式：
   • 核心数值采用渐变文字效果，增强视觉突出度
   • 增长率根据数值正负自动应用不同颜色
4. 数据处理：
   • 自动将数值转换为数字类型进行比较
   • 增长率自动添加箭头指示（正值向上箭头，负值向下箭头）
5. 样式隔离：使用 scoped 样式确保组件样式不影响其他元素

TIP

• 增长率为正值时显示红色向上箭头，负值时显示绿色向下箭头
• 核心数值采用渐变文字效果，使用 background-clip: text 实现
• 组件高度固定为 81px，宽度自适应父容器
• 建议 num 属性使用整数或保留1-2位小数的数值，以获得最佳显示效果
• 组件依赖背景图片 /@/assets/proCodeReportViewer/card_bg.png，请确保该资源存在