类型标签样式调整

packages/web/projects/vgpu/views/poll/admin/index.vue

@@ -13,7 +13,7 @@
         <div class="left">
           <div style="display: flex;align-items: center;">
             <b class="title" style="margin-right: 10px;">{{ poolName }}</b>
-            <el-tag disable-transitions :type="typeColorMap[poolType]">
+            <el-tag disable-transitions :class="getPoolTypeClass(poolType)">
               {{ ['单机单卡', '单机多卡', '多机多卡'][poolType] || '未知类型' }}
             </el-tag>
           </div>
@@ -125,11 +125,6 @@ import useParentAction from '~/vgpu/hooks/useParentAction';
 
 const { sendRouteChange } = useParentAction();
 
-const typeColorMap = {
-  0: 'success', // 绿色 - 单机单卡
-  1: 'warning', // 橙色 - 单机多卡
-  2: ''  //  蓝色 - 多机多卡
-}
 
 // 数据列表相关
 const list = ref([])
@@ -151,6 +146,14 @@ const btnLoading = ref(false)
 const nodeList = ref([])
 const nodeSelect = ref([])
 
+const getPoolTypeClass = (type) => {
+  return {
+    'tag-single-single': type === 0,
+    'tag-single-multi': type === 1,
+    'tag-multi-multi': type === 2
+  };
+}
+
 // 计算分页后的数据
 const paginatedList = computed(() => {
   const start = (currentPage.value - 1) * pageSize.value
@@ -320,6 +323,27 @@ onMounted(async () => {
   color: #3D4F62;
   font-size: 18px;
 }
+.tag-single-single {
+  background: rgba(50,229,143,0.2);
+  border-radius: 4px;
+  border: 1px solid #82EAC1;
+  color: #1AB274;
+  font-size: 14px;
+}
+.tag-single-multi {
+  background: rgba(229,149,50,0.1);
+  border-radius: 4px;
+  border: 1px solid #F5D6BA;
+  color: #F38824;
+  font-size: 14px;
+}
+.tag-multi-multi {
+  background: rgba(113,195,252,0.2);
+  border-radius: 4px;
+  border: 1px solid #BBC8EE;
+  color: #406EE2;
+  font-size: 14px;
+}
 
 .tags {
   display: flex;