shanxia2.0/miniprogram/components/db-ui/db-tag.vue

<template>
  <text class="db-tag" :class="'db-tag--' + type">
    <slot />
  </text>
</template>

<script setup>
defineProps({
  type: { type: String, default: 'default' }
})
</script>

<style scoped>
.db-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid transparent;
}
.db-tag--default {
  color: #323233;
  background: #f2f3f5;
}
.db-tag--primary {
  color: #52b788;
  background: rgba(82, 183, 136, 0.12);
  border-color: #52b788;
}
.db-tag--success {
  color: #07c160;
  background: rgba(7, 193, 96, 0.1);
  border-color: #07c160;
}
.db-tag--warning {
  color: #ff976a;
  background: rgba(255, 151, 106, 0.12);
  border-color: #ff976a;
}
.db-tag--danger {
  color: #ee0a24;
  background: rgba(238, 10, 36, 0.1);
  border-color: #ee0a24;
}
</style>