# 卡片-耗材卡片
用于表达进度，样式可根据设计规范拓展。
# 示例
<template>
<div class="wrapper">
<dof-minibar title="5.8卡片-耗材卡片"></dof-minibar>
<div style="padding: 32px;">
<dof-card>
<div class="showItem">
<div class="circleItem">
<midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson1 }">
</midea-circle-progress-view>
<text class="contentText">智能杯贴</text>
<text class="contentTip">再饮200ml达标</text>
</div>
<div class="circleItem">
<midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson2 }">
</midea-circle-progress-view>
<text class="contentText">智能杯贴</text>
<text class="contentTip">已达标</text>
</div>
<div class="circleItem">
<midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson3 }">
</midea-circle-progress-view>
<text class="contentText">智能杯贴</text>
<text class="contentTip">再饮800ml达标</text>
</div>
</div>
</dof-card>
<dof-card class="m-t-16">
<div class="showItem">
<div class="circleItem">
<midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson4 }">
</midea-circle-progress-view>
<text class="contentText">滤芯1</text>
</div>
<div class="circleItem">
<midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson5 }">
</midea-circle-progress-view>
<text class="contentText">滤芯2</text>
</div>
<div class="circleItem">
<midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson6 }">
</midea-circle-progress-view>
<text class="contentText">滤芯3</text>
</div>
</div>
</dof-card>
</div>
</div>
</template>
<style scoped>
.wrapper {
background-color: #f9f9f9;
}
.m-t-16 {
margin-top: 16px;
}
.showItem {
/* width: 600px; */
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
overflow: hidden;
}
.circle {
width: 118px;
height: 118px;
}
.circleItem {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 248px;
}
.contentText {
font-family: PingFangSC-Medium;
font-size: 28px;
color: #ffffff;
text-align: center;
font-weight: 500;
margin-top: 20px;
margin-bottom: 8px;
}
.contentTip {
font-family: PingFangSC-Regular;
font-size: 24px;
color: #71717a;
font-weight: 400;
margin-bottom: 28px;
}
@media screen and (weex-theme: colmo) {
.wrapper {
background-color: #151617;
}
}
</style>
<script>
import { DofMinibar, DofCard } from 'dolphin-weex-ui'
export default {
components: { DofMinibar, DofCard },
data: () => ({
common: {
completedColor: '#FFFFFF', //已完成后的颜色默认#FFFFFF
backgroundColor: '#1a1a1c', //背景色 默认为#000000
backCircleColor: '#434345', //进度背景色，默认为#3d3d3f
lineWidth: 2, //线宽 默认为2
textFont: 14 //字体大小，默认为14
},
chartJson1: {
progress: 0.85, // 进度 0 -1
text: '85%', //文本 默认为空
textColor: '#ffffff' //文本颜色，默认#FFFFFF
},
chartJson2: {
progress: 1, // 进度 0 -1
text: '100天', //文本 默认为空
textColor: '#ffffff' //文本颜色，默认#FFFFFF
},
chartJson3: {
progress: 0.05, // 进度 0 -1
text: '5%', //文本 默认为空
textColor: '#ffffff' //文本颜色，默认#FFFFFF
},
chartJson4: {
progress: 0.85, // 进度 0 -1
text: '85%', //文本 默认为空
textColor: '#ffffff' //文本颜色，默认#FFFFFF
},
chartJson5: {
progress: 0, // 进度 0 -1
text: '已过期', //文本 默认为空
textColor: '#B35336', //文本颜色，默认#FFFFFF
textFont: 12
},
chartJson6: {
progress: 0.05, // 进度 0 -1
text: '5%', //文本 默认为空
textColor: '#ffffff' //文本颜色，默认#FFFFFF
}
}),
computed: {},
created() {},
methods: {}
}
</script>
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
data | Object | Y | {} | 配置参数 |
# 参数详情： data （注 1）
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
progress | number | N | 0 | 进度 0-1 |
text | string | N | `` | 圆环中间文本 默认为空 |
textColor | string | N | #ffffff | 文本颜色，默认#FFFFFF |
completedColor | string | N | #ffffff | 已完成后的颜色默认#FFFFFF |
backgroundColor | string | N | #000000 | 背景色 默认为#000000 |
backCircleColor | string | N | #434345 | 进度背景色，默认为#3d3d3f |
lineWidth | number | N | 2 | 线宽 默认为2 |
textFont | number | N | 14 | 字体大小，默认为14 |
点我扫二维码 查看demo