witDataCardTwo 数据卡片组件

witDataCardTwo是一个用于展示关键数据指标的数据卡片组件，采用垂直布局，支持显示数值、单位和标题，提供默认和红色两种主题样式，具有美观的背景图片和渐变文字效果。

用法实例

<template>
  <div>
    <!-- 基础用法 -->
    <witDataCardTwo title="完成率" :rate="85.6" unit="%" />
    
    <!-- 红色主题 -->
    <witDataCardTwo title="增长率" :rate="12.8" unit="%" theme="red" />
    
    <!-- 自定义高度 -->
    <witDataCardTwo title="用户数" :rate="12500" unit="人" height="160px" />
  </div>
</template>

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

API

属性名	类型	默认值	描述
title	[String]	'标题'	卡片标题
rate	[String, Number]	0	显示的数值
unit	[String]	'%'	数值单位
height	[String]	'138px'	卡片高度
theme	[String]	''	主题样式，可选值：'red'（红色主题）

功能特性

• 数据展示：支持同时展示数值、单位和标题
• 双主题支持：提供默认和红色两种主题样式，满足不同场景需求
• 视觉设计：采用垂直布局，搭配背景图片和渐变文字效果，增强视觉吸引力
• 高度自定义：支持自定义卡片高度，适应不同布局需求
• 响应式设计：自适应容器宽度，保持良好的显示效果

实现原理

1. 布局结构：采用相对定位容器，包含背景层和内容层
2. 主题切换：
   • 默认主题：使用默认背景图片，文字为白色
   • red主题：使用红色背景图片，文字使用白色到红色的渐变效果
3. 文字样式：
   • 数值和单位使用不同字体大小，形成视觉层次
   • 单位与数值紧密排列，通过负外边距调整间距
4. 样式隔离：使用 scoped 样式确保组件样式不影响其他元素

TIP

• 组件支持两种背景图片：
  • 默认主题：/@/assets/proCodeReportViewer/card_two_bg.png
  • red主题：/@/assets/proCodeReportViewer/card_two_red_bg.png
  • 请确保这些资源文件存在于项目中
• 数值文字在red主题下使用渐变效果，通过 background-clip: text 实现
• 单位文字默认紧跟在数值之后，通过负外边距调整位置，可根据实际需要调整样式
• 卡片宽度自适应父容器，高度可通过height属性自定义