<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);
|
//设置背景 正常 = 1, 封存 = 2, 禁出 = 3, 禁入 = 4, 锁定 = 5
|
const setBgColor = (type: number): string => {
|
let color = '';
|
switch (type) {
|
case 1:
|
color = '#F18201'; //橘色 正常
|
break;
|
case 2:
|
color = '#2BA6FF'; //蓝色 封存
|
break;
|
case 3:
|
color = '#FFFF00'; //黄色 禁出
|
break;
|
|
case 4:
|
color = '#A2A2A2'; //灰色 禁入
|
break;
|
|
case 5:
|
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>
|
