feat ui设计稿

src/components/StatusTag.vue

@@ -14,12 +14,13 @@ withDefaults(defineProps<Props>(), { variant: 'info' })
 </template>
 
 <style lang="less" scoped>
+// 设计稿（项目中心 09 付款计划徽标）：约 57×22 设计px、圆角 4 设计px、11px 字、浅底彩色字
 .status-tag {
   display: inline-block;
-  padding: 2px @spacing-sm;
+  padding: 3px 10px;
   border-radius: @radius-sm;
-  font-size: @font-size-sm;
-  line-height: 1.5;
+  font-size: 11px;
+  line-height: 16px;
   white-space: nowrap;
 
   &--primary {
@@ -28,13 +29,13 @@ withDefaults(defineProps<Props>(), { variant: 'info' })
   }
 
   &--success {
-    background: fade(@success-color, 12%);
+    background: @tag-success-bg;
     color: @success-color;
   }
 
   &--warning {
-    background: fade(@warning-color, 12%);
-    color: @warning-color;
+    background: @tag-warning-bg;
+    color: @tag-warning-text;
   }
 
   &--danger {
@@ -43,7 +44,7 @@ withDefaults(defineProps<Props>(), { variant: 'info' })
   }
 
   &--info {
-    background: @bg-color;
+    background: @tag-info-bg;
     color: @text-color-secondary;
   }
 }