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.
45 lines
850 B
45 lines
850 B
2 years ago
|
<template>
|
||
|
|
<span :class="['wkb-tag', type]">
|
||
|
|
<slot />
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { useStore } from "vuex";
|
||
|
2 years ago
|
import { reactive, onMounted, ref } from "vue";
|
||
|
2 years ago
|
|
||
|
|
const { state, commit, dispatch } = useStore();
|
||
|
|
const prop = defineProps({
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default: 'primary'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
onMounted(() => { });
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.wkb-tag {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 18px;
|
||
|
|
line-height: 24px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
padding: 2px 10px;
|
||
|
|
border-radius: 10.5px;
|
||
|
|
|
||
|
|
&.primary {
|
||
|
|
color: #387dff;
|
||
|
|
background-color: rgba(#387dff, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.success {
|
||
|
|
color: #23b899;
|
||
|
|
background-color: rgba(#23b899, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.danger {
|
||
|
|
color: #fe7c4b;
|
||
|
|
background-color: rgba(#fe7c4b, 0.2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|