SunlightBasicCard 基础卡片

组件介绍

SunlightBasicCard 是一个轻量级的统计卡片组件，用于展示关键数据和指标。它支持图标、标题、数值、描述等内容的展示，并内置了数字滚动动画效果，使数据展示更加生动。

基本用法

示例

本月新增订单数量

本周注册新用户

本月销售总金额 (元)

用户满意度百分比

<template>
  <div class="demo-container">
     <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" v-for="card in statsCards" :key="card.id" style="margin-bottom: 20px;">
        <SunlightBasicCard
          :icon="card.icon"
          :count="card.count"
          :description="card.description"
          :iconSize="card.iconSize"
          :iconColor="card.iconColor"
          :iconBgColor="card.iconBgColor"
          :showArrow="card.showArrow"
        />
      </el-col>
    </el-row>

  </div>
</template>

<script setup>
import { SunlightBasicCard } from 'sunlight-ui';
import { ElRow, ElCol } from 'element-plus';
import { ShoppingCart, User, Money, ChatDotRound } from '@element-plus/icons-vue';
const statsCards = [
  {
    id: 1,
    title: '总订单数',
    count: 3285,
    description: '本月新增订单数量',
    icon: ShoppingCart,
    iconColor: '#fff',
    iconSize: 18,
    iconBgColor: '#409EFF',
    textColor: '#409EFF',
    backgroundColor: '#F0F6FF',
    showArrow: false
  },
  {
    id: 2,
    title: '新用户数',
    count: 1568,
    description: '本周注册新用户',
    icon: User,
    iconColor: '#fff',
    iconSize: 18,
    iconBgColor: '#67C23A',
    textColor: '#67C23A',
    backgroundColor: '#F0F9EB',
    showArrow: false
  },
  {
    id: 3,
    title: '销售总额',
    count: 896500,
    description: '本月销售总金额 (元)',
    icon: Money,
    iconColor: '#fff',
    iconSize: 18,
    iconBgColor: '#E6A23C',
    textColor: '#E6A23C',
    backgroundColor: '#FDF6EC',
    showArrow: false
  },
  {
    id: 4,
    title: '满意度',
    count: 96.5,
    description: '用户满意度百分比',
    icon: ChatDotRound,
    iconColor: '#fff',
    iconSize: 18,
    iconBgColor: '#909399',
    textColor: '#909399',
    backgroundColor: '#F5F7FA',
    showArrow: false
  }
]
</script>

<style scoped>
.demo-container {
  padding: 20px;
  background-color: #F6F8FC;
  border-radius: 8px;
  margin-bottom: 20px;
}

</style>

隐藏源代码

自定义样式

示例

总订单数

本月新增订单数量

新用户数

本周注册新用户

销售总额

本月销售总金额 (元)

客户留存率

本月客户留存百分比

<template>
  <div class="demo-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" v-for="card in statsCards" :key="card.id" style="margin-bottom: 20px;">
        <SunlightBasicCard
          :icon="card.icon"
          :title="card.title"
          :description="card.description"
          :iconColor="card.iconColor"
          :textColor="card.textColor"
          :backgroundColor="card.backgroundColor"
          :showArrow="card.showArrow"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { SunlightBasicCard } from 'sunlight-ui';
import { ShoppingCart, User, Money, ChatDotRound } from '@element-plus/icons-vue';
const statsCards = [
  {
    id: 1,
    title: '总订单数',
    count: 4528,
    description: '本月新增订单数量',
    icon: ShoppingCart,
    iconColor: '#409EFF',
    iconSize: 18,
    iconBgColor: '#409EFF',
    textColor: '#409EFF',
    backgroundColor: '#E6F1FF',
    showArrow: false
  },
  {
    id: 2,
    title: '新用户数',
    count: 2845,
    description: '本周注册新用户',
    icon: User,
    iconColor: '#67C23A',
    iconSize: 18,
    iconBgColor: '#67C23A',
    textColor: '#67C23A',
    backgroundColor: '#E8F5E9',
    showArrow: false
  },
  {
    id: 3,
    title: '销售总额',
    count: 1258600,
    description: '本月销售总金额 (元)',
    icon: Money,
    iconColor: '#E6A23C',
    iconSize: 18,
    iconBgColor: '#E6A23C',
    textColor: '#E6A23C',
    backgroundColor: '#FFF8E1',
    showArrow: false
  },
  {
    id: 4,
    title: '客户留存率',
    count: 82.3,
    description: '本月客户留存百分比',
    icon: ChatDotRound,
    iconColor: '#909399',
    iconSize: 18,
    iconBgColor: '#909399',
    textColor: '#909399',
    backgroundColor: '#ECEFF1',
    showArrow: false
  }
]
</script>

<style scoped>
.demo-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
}

</style>

隐藏源代码

配置说明

通过设置不同的颜色属性，可以自定义卡片的样式，包括图标颜色、图标背景颜色、文本颜色和卡片背景颜色。

数字滚动动画

SunlightBasicCard 组件内置了数字滚动动画效果，当组件挂载时，数值会从 0 平滑滚动到目标值。

实现原理

组件使用了 animate 函数来实现数字滚动动画：

1. 当组件挂载时，调用 animate 函数
2. 动画从 0 开始，到目标值结束
3. 持续时间为 1000 毫秒
4. 使用 requestAnimationFrame API 实现平滑的动画效果

组件属性

属性名	类型	默认值	说明
icon	Component	null	图标组件
title	string	''	卡片标题
count	number	null	统计数值
description	string	''	描述文本
iconColor	string	'#409EFF'	图标颜色
iconBgColor	string	''	图标背景颜色
iconBgRadius	number	50	图标背景圆角大小
iconSize	number	30	图标大小
textColor	string	'#333333'	文本颜色
backgroundColor	string	'#fff'	卡片背景颜色
showArrow	boolean	false	是否显示箭头