fix: update class bindings for Tag component styles

Author: Ayideyia

frontend/src/components/Tag/index.vue

@@ -25,7 +25,7 @@ const handleClose = () => {
 <template>
   <div
     v-if="show"
-    :class="[color, size]"
+    :class="['color-' + color, 'size-' + size]"
     class="gui-tag px-8 mx-4 rounded-6 inline-block text-12 whitespace-nowrap inline-flex items-center"
   >
     <slot></slot>
@@ -40,33 +40,33 @@ const handleClose = () => {
 </template>
 
 <style lang="less" scoped>
-.cyan {
+.color-cyan {
   color: #22a3a7;
   background-color: #e6fffb;
   border: 1px solid #22a3a7;
 }
-.green {
+.color-green {
   color: #389e0d;
   background-color: #f6ffed;
   border: 1px solid #389e0d;
 }
-.red {
+.color-red {
   color: #d52e3b;
   background-color: #fff1f0;
   border: 1px solid #d52e3b;
 }
-.default {
+.color-default {
   color: #3d3d3d;
   background-color: #ffffff;
   border: 1px solid #898989;
 }
-.primary {
+.color-primary {
   color: var(--btn-primary-color);
   background-color: var(--primary-color);
   border: 1px solid var(--secondary-color);
 }
 
-.small {
+.size-small {
   padding: 0 4px;
   margin: 0 2px;
   font-size: 10px;