SunlightProgressCard
轻量级进度卡片组件，用于展示任务完成度、目标达成率等进度信息。
基本用法
0%
Q1销售目标
0%
产品开发进度
0%
品牌推广活动
0%
客户满意度
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="12" v-for="card in progressCards" :key="card.id" style="margin-bottom: 20px;">
<SunlightProgressCard
:percentage="card.percentage"
:title="card.title"
:color="card.color"
/>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { SunlightProgressCard } from 'sunlight-ui';
import { ElRow, ElCol } from 'element-plus';
const progressCards = [
{
id: 1,
title: 'Q1销售目标',
percentage: 87,
color: '#52c41a'
},
{
id: 2,
title: '产品开发进度',
percentage: 65,
color: '#1890ff'
},
{
id: 3,
title: '品牌推广活动',
percentage: 78,
color: '#ff4d4f'
},
{
id: 4,
title: '客户满意度',
percentage: 92,
color: '#722ed1'
}
]
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #F6F8FC;
border-radius: 8px;
margin-bottom: 20px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
隐藏源代码
自定义样式
0%
Q1销售目标
0%
产品开发进度
0%
品牌推广活动
0%
客户满意度
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="12" v-for="card in progressCards" :key="card.id" style="margin-bottom: 20px;">
<SunlightProgressCard
:percentage="card.percentage"
:title="card.title"
:color="card.color"
:icon="card.icon"
:iconColor="card.iconColor"
:iconSize="card.iconSize"
:iconBgColor="card.iconBgColor"
:iconBgRadius="8"
/>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { SunlightProgressCard } from 'sunlight-ui';
import { ElRow, ElCol } from 'element-plus';
import { Check, Monitor, MilkTea, Ticket } from '@element-plus/icons-vue';
const progressCards = [
{
id: 1,
title: 'Q1销售目标',
percentage: 87,
color: '#52c41a',
icon: Check,
iconColor: '#52c41a',
iconSize: 20,
iconBgColor: '#E6F0FF'
},
{
id: 2,
title: '产品开发进度',
percentage: 65,
color: '#1890ff',
icon: Monitor,
iconColor: '#1890ff',
iconSize: 20,
iconBgColor: '#e6f7ff'
},
{
id: 3,
title: '品牌推广活动',
percentage: 78,
color: '#ff4d4f',
icon: MilkTea,
iconColor: '#ff4d4f',
iconSize: 20,
iconBgColor: '#fff1f0'
},
{
id: 4,
title: '客户满意度',
percentage: 92,
color: '#722ed1',
icon: Ticket,
iconColor: '#722ed1',
iconSize: 20,
iconBgColor: '#f9f0ff'
}
]
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #F6F8FC;
border-radius: 8px;
margin-bottom: 20px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
隐藏源代码
组件属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
percentage | number | 0 | 进度百分比，范围0-100 |
title | string | '' | 卡片标题 |
color | string | '' | 进度条颜色 |
icon | string | '' | 图标组件 |
iconColor | string | '' | 图标颜色 |
iconSize | `string | number` | '' |
iconBgColor | string | '' | 图标背景颜色 |
iconBgRadius | number | 8 | 图标背景圆角 |
strokeWidth | number | 5 | 进度条宽度 |
组件说明
SunlightProgressCard 是一个轻量级的进度卡片组件，用于展示任务完成度、目标达成率等进度信息。它支持自定义进度条颜色、图标、标题等内容，并内置了平滑的进度动画效果，使进度展示更加生动。