<template>
	<span class="sc-state-text" :class="['sc-state-bg--' + type]">{{ text }}</span>
</template>

<script>
export default {
	props: {
		type: { type: String, default: 'primary' },
		text: { type: String, default: '无' }
	}
}
</script>

<style scoped>
.sc-state-text {
	display: inline-block;
	padding: 12px 8px;
	border-radius: 15px;
	vertical-align: middle;
}

.sc-state-bg--primary {
	background: var(--el-color-primary);
}
.sc-state-bg--success {
	background: var(--el-color-success);
}
.sc-state-bg--warning {
	background: var(--el-color-warning);
}
.sc-state-bg--danger {
	background: var(--el-color-danger);
}
.sc-state-bg--info {
	background: var(--el-color-info);
}
</style>
