效果图:
父组件调用:
页面:
<CountListIndex :count-list="countList"/>
data数据:
countList: [
{
label: '测试1',
count:20,
},
{
label: '测试2',
count:20,
},
{
label: '测试3',
count:20,
},
],
(CountListIndex )子组件:
<template>
<div class="count-list-wrapper">
<el-row :gutter="48">
<el-col
v-for="(item, i) in countList"
:key="i"
:md="item.md || 8"
:sm="item.sm || 24"
>
<div :class="['count-item', 'count-item' + i]">
<span class="count-item-label">
<i class="el-icon-info anticon" />
{{ item.label }}
</span>
<span class="count-item-count">{{ item.count }}</span>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'CountListIndex',
props: {
countList: {
type: Array,
default() {
return [
{
label: '未填写案件总数',
count: 987,
},
{
label: '119案件总数',
count: 987,
},
{
label: '未填写报告总数',
count: 987,
},
]
},
},
},
}
</script>
<style lang="scss" scoped>
.count-list-wrapper {
margin-bottom: 20px;
.count-item {
padding: 8px 15px 8px;
display: flex;
justify-content: space-between;
span {
font-size: 14px;
color: #fff;
&.count-item-count {
font-weight: 600;
}
.anticon {
margin-right: 5px;
}
}
&.count-item0 {
background-color: rgba(82, 115, 246, 0.1);
border: 1px solid rgba(82, 115, 246, 0.3);
.count-item-count {
color: rgb(82, 115, 246);
}
.anticon {
color: rgb(82, 115, 246);
}
}
&.count-item1 {
background-color: rgba(82, 196, 26, 0.1);
border: 1px solid rgba(82, 196, 26, 0.3);
.count-item-count {
color: rgb(82, 196, 26);
}
.anticon {
color: rgb(82, 196, 26);
}
}
&.count-item2 {
background-color: rgba(19, 194, 194, 0.1);
border: 1px solid rgba(19, 194, 194, 0.3);
.count-item-count {
color: rgb(19, 194, 194);
}
.anticon {
color: rgb(19, 194, 194);
}
}
}
}
</style>