40 lines
966 B
Vue
40 lines
966 B
Vue
<template>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="mr-2 h-2.5 w-2.5 rounded-full"
|
|
:class="{
|
|
'bg-green-500': status.color === 'green',
|
|
'bg-red-500': status.color === 'red',
|
|
'bg-orange-500': status.color === 'orange',
|
|
'bg-blue-500': status.color === 'blue',
|
|
'bg-gray-500': status.color === 'gray'
|
|
}"
|
|
></div>
|
|
<span
|
|
class="text-sm"
|
|
:class="{
|
|
'text-green-700': status.color === 'green',
|
|
'text-red-700': status.color === 'red',
|
|
'text-orange-700': status.color === 'orange',
|
|
'text-blue-700': status.color === 'blue',
|
|
'text-gray-700': status.color === 'gray'
|
|
}"
|
|
>{{ status.label }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'StatusIndicator',
|
|
props: {
|
|
status: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({
|
|
label: '未知',
|
|
color: 'gray'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script> |