witTitleOne 标题数字组件

witTitleOne是一个用于展示带图标的标题和关键数字的组件，采用左侧图标标题、右侧数字单位的布局设计，支持自定义图片、高度、标题、副标题、数字和单位，适用于各类需要突出关键指标的场景。

用法实例

<template>
  <div>
    <!-- 基础用法 -->
    <witTitleOne 
      title="门诊量"
      num="12,000"
    />
    
    <!-- 带副标题 -->
    <witTitleOne 
      title="门诊量"
      subtitle="本月统计"
      num="12,000"
    />
    
    <!-- 自定义单位 -->
    <witTitleOne 
      title="销售额"
      num="500,000"
      unit="元"
    />
    
    <!-- 自定义高度 -->
    <witTitleOne 
      title="就诊人数"
      height="70px"
      num="8,500"
    />
    
    <!-- 使用数字类型 -->
    <witTitleOne 
      title="预约人数"
      num="3456"
    />
    
    <!-- 自定义图片 -->
    <witTitleOne 
      title="住院人数"
      imgUrl="/path/to/your/image.png"
      num="230"
    />
  </div>
</template>

<script lang="ts" setup>
// 组件无需额外导入，直接使用即可
</script>

API

属性名	类型	默认值	描述
imgUrl	[String]	门诊图标	左侧显示的图标图片URL
title	[String]	''	主标题文本
height	[String]	'62px'	组件高度
subtitle	[String]	''	副标题文本，为空时不显示
num	[String, Number]	'12,000'	显示的数字值，支持字符串或数字类型
unit	[String]	'人'	数字单位文本

功能特性

• 图文结合：左侧图标与标题结合，右侧显示关键数字，信息层次清晰
• 灵活配置：支持自定义图片、标题、副标题、数字、单位和高度
• 视觉效果：右侧数字和单位采用渐变文字效果，增强视觉吸引力
• 字体优化：使用特定字体显示关键信息，提升整体美观度
• 背景装饰：包含光条背景和左侧蓝色边框，增强视觉层次感
• 自适应布局：采用flex布局，确保在不同宽度下都能良好显示

实现原理

1. 布局结构：采用左右两栏flex布局，左侧包含图标和文本，右侧显示数字和单位
2. 动态样式：利用Vue 3的v-bind语法实现CSS属性的动态绑定，支持自定义高度
3. 渐变文字：通过CSS的background-image和-webkit-background-clip实现文字渐变效果
4. 条件渲染：根据subtitle属性的存在与否，条件渲染副标题元素
5. 类型支持：num属性同时支持字符串和数字类型，增强使用灵活性

TIP

• 默认图片使用了门诊图标，可根据实际需求替换为其他图标
• 数字值支持格式化字符串（如"12,000"）或纯数字（如12000）
• 副标题为可选属性，为空时不会占用布局空间
• 渐变文字效果在部分浏览器中可能需要前缀支持
• 背景图片路径使用了项目内的绝对路径，使用时注意路径配置