<template>
|
<div class="count">
|
<div class="count_item" v-for="(item,index) in countList" :key="index">
|
<div class="square" :style="{background: setBgColor(item.type)}"></div>
|
<span>{{item.title}}</span>
|
<span class="count_num">{{item.count}}</span>
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { defineProps, computed } from 'vue'
|
const props = defineProps({
|
countData: {
|
type: Array,
|
required: true
|
}
|
})
|
const countList: Record<any, any> = computed(() => props.countData)
|
//设置背景
|
const setBgColor = (type: number): string => {
|
let color = ''
|
switch (type) {
|
case 0:
|
color = '#A2A2A2';
|
break;
|
case 1:
|
color = '#F18201';
|
break;
|
case 2:
|
color = '#2BA6FF';
|
break;
|
case 3:
|
color = '#FFFF00';
|
|
break;
|
case 4:
|
color = '#FF0000';
|
break;
|
}
|
return color;
|
}
|
|
</script>
|
<style lang="less" scoped>
|
.count {
|
width: 100%;
|
display: flex;
|
box-sizing: border-box;
|
justify-content: flex-start;
|
margin-bottom: 10px;
|
font-size: 15px;
|
flex-wrap: wrap;
|
.count_item {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
margin-right: 20px;
|
margin-bottom: 10px;
|
.square {
|
width: 20px;
|
height: 20px;
|
border-radius: 4px;
|
margin-right: 10px;
|
}
|
|
.count_num {
|
margin-left: 10px;
|
font-weight: bold;
|
font-size: 16px;
|
}
|
}
|
}
|
</style>
|
