You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
740 B
51 lines
740 B
<script lang="ts" setup>
|
|
const props = defineProps({
|
|
status: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="wrap">
|
|
<div
|
|
:class="{
|
|
'point-green': props.status === 3,
|
|
'point-orange': props.status === 2 || props.status === 1,
|
|
'point-red': props.status === 5,
|
|
}" class="point"
|
|
/>{{ props.label }}
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.point{
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
|
|
&-green{
|
|
background: #02c984;
|
|
}
|
|
|
|
&-orange{
|
|
background: #fe9800;
|
|
}
|
|
|
|
&-red{
|
|
background: #FF4E4F;
|
|
}
|
|
}
|
|
</style>
|