From 6c6cd35b2be095760544d3f706f6f95b1d4aa627 Mon Sep 17 00:00:00 2001
From: hrx <18603305412@163.com>
Date: Fri, 23 Jan 2026 10:30:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=89=8D=E7=AB=AF=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 f/web-kboss/src/utils/data-manager.js         | 400 +++++++++++++++++-
 .../bigScreen/Newscreen/ScreenCenter/Map.vue  |  97 +++--
 2 files changed, 457 insertions(+), 40 deletions(-)

diff --git a/f/web-kboss/src/utils/data-manager.js b/f/web-kboss/src/utils/data-manager.js
index a02b44e..90a3a97 100644
--- a/f/web-kboss/src/utils/data-manager.js
+++ b/f/web-kboss/src/utils/data-manager.js
@@ -54,7 +54,7 @@ const clusterData = {
       userConsumption: [
         { rank: 1, name: '用户A', amount: 520000 },
         { rank: 2, name: '用户B', amount: 450000 },
-        { rank: 3, name: '用户B', amount: 186000 },
+        { rank: 3, name: '用户C', amount: 186000 },
         { rank: 4, name: '用户D', amount: 120000 },
         { rank: 5, name: '用户E', amount: 56000 },
         { rank: 6, name: '用户F', amount: 43000 },
@@ -169,6 +169,404 @@ const clusterData = {
         { name: '在线数量', value: 0 }
       ]
     }
+  },
+  // 内蒙
+  neimeng: {
+    header: {
+      demandPower: Math.floor(1500 * 0.294),
+      supplyPower: Math.floor(35320 * 0.294),
+      clusterCount: 1,
+      customerCount: Math.floor(352 * 0.294),
+      chipCount: Math.floor(75368 * 0.294),
+      modelCount: Math.floor(75 * 0.294)
+    },
+
+    left: {
+      chipScale: {
+        NVIDIA: Math.floor(33000 * 0.294),
+        ascend: Math.floor(5000 * 0.294),
+        supercomputer: Math.floor(8000 * 0.294),
+        total: Math.floor(5100 * 0.294)
+      },
+
+      runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450].map(num => Math.floor(num * 0.294)),
+
+      modelUsage: [
+        { name: 'deepseek', value: Math.floor(105 * 0.294) },
+        { name: '通义千问', value: Math.floor(78 * 0.294) },
+        { name: 'kimi', value: Math.floor(70 * 0.294) },
+        { name: '豆包', value: Math.floor(120 * 0.294) },
+        { name: '文心一言', value: Math.floor(60 * 0.294) },
+        { name: '元宝', value: Math.floor(85 * 0.294) }
+      ],
+
+      tokenUsage: [
+        { name: '千问3-max', value: Math.floor(5000 * 0.294) },
+        { name: 'kimi', value: Math.floor(4300 * 0.294) },
+        { name: '豆包', value: Math.floor(3500 * 0.294) },
+        { name: 'deepseek', value: Math.floor(3200 * 0.294) },
+        { name: '千帆', value: Math.floor(2800 * 0.294) }
+      ]
+    },
+
+    right: {
+      appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'],
+
+      userConsumption: [
+        { rank: 1, name: '用户A', amount: Math.floor(520000 * 0.294) },
+        { rank: 2, name: '用户B', amount: Math.floor(450000 * 0.294) },
+        { rank: 3, name: '用户C', amount: Math.floor(186000 * 0.294) },
+        { rank: 4, name: '用户D', amount: Math.floor(120000 * 0.294) },
+        { rank: 5, name: '用户E', amount: Math.floor(56000 * 0.294) },
+        { rank: 6, name: '用户F', amount: Math.floor(43000 * 0.294) },
+        { rank: 7, name: '用户G', amount: Math.floor(35000 * 0.294) },
+        { rank: 8, name: '用户H', amount: Math.floor(28000 * 0.294) }
+      ],
+
+      powerUsage: [12300, 11500, 11500, 13400, 12900, 13500, 13200].map(num => Math.floor(num * 0.294))
+    },
+
+    overview: {
+      supply: [
+        { name: 'CPU', value: Math.floor(2350 * 0.294) },
+        { name: 'GPU', value: Math.floor(5500 * 0.294) },
+        { name: '进程数量', value: 0 },
+        { name: '资源统计', value: 0 },
+        { name: '运行中', value: '30%' },
+        { name: '关机中', value: '70%' },
+        { name: '故障数量', value: 0 },
+        { name: '在线数量', value: 0 }
+      ],
+      demand: [
+        { name: 'CPU', value: 0 },
+        { name: 'GPU', value: 0 },
+        { name: '进程数量', value: 0 },
+        { name: '资源统计', value: 0 },
+        { name: '运行中', value: 0 },
+        { name: '关机中', value: 0 },
+        { name: '故障数量', value: 0 },
+        { name: '在线数量', value: 0 }
+      ]
+    }
+  },
+  // 新疆集群数据 (全国数据 × 0.156)
+  xinjiang: {
+    header: {
+      demandPower: Math.floor(1500 * 0.156),
+      supplyPower: Math.floor(35320 * 0.156),
+      clusterCount: 1,
+      customerCount: Math.floor(352 * 0.156),
+      chipCount: Math.floor(75368 * 0.156),
+      modelCount: Math.floor(75 * 0.156)
+    },
+
+    left: {
+      chipScale: {
+        NVIDIA: Math.floor(33000 * 0.156),
+        ascend: Math.floor(5000 * 0.156),
+        supercomputer: Math.floor(8000 * 0.156),
+        total: Math.floor(5100 * 0.156)
+      },
+
+      runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450].map(num => Math.floor(num * 0.156)),
+
+      modelUsage: [
+        { name: 'deepseek', value: Math.floor(105 * 0.156) },
+        { name: '通义千问', value: Math.floor(78 * 0.156) },
+        { name: 'kimi', value: Math.floor(70 * 0.156) },
+        { name: '豆包', value: Math.floor(120 * 0.156) },
+        { name: '文心一言', value: Math.floor(60 * 0.156) },
+        { name: '元宝', value: Math.floor(85 * 0.156) }
+      ],
+
+      tokenUsage: [
+        { name: '千问3-max', value: Math.floor(5000 * 0.156) },
+        { name: 'kimi', value: Math.floor(4300 * 0.156) },
+        { name: '豆包', value: Math.floor(3500 * 0.156) },
+        { name: 'deepseek', value: Math.floor(3200 * 0.156) },
+        { name: '千帆', value: Math.floor(2800 * 0.156) }
+      ]
+    },
+
+    right: {
+      appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'],
+
+      userConsumption: [
+        { rank: 1, name: '用户A', amount: Math.floor(520000 * 0.156) },
+        { rank: 2, name: '用户B', amount: Math.floor(450000 * 0.156) },
+        { rank: 3, name: '用户C', amount: Math.floor(186000 * 0.156) },
+        { rank: 4, name: '用户D', amount: Math.floor(120000 * 0.156) },
+        { rank: 5, name: '用户E', amount: Math.floor(56000 * 0.156) },
+        { rank: 6, name: '用户F', amount: Math.floor(43000 * 0.156) },
+        { rank: 7, name: '用户G', amount: Math.floor(35000 * 0.156) },
+        { rank: 8, name: '用户H', amount: Math.floor(28000 * 0.156) }
+      ],
+
+      powerUsage: [12300, 11500, 11500, 13400, 12900, 13500, 13200].map(num => Math.floor(num * 0.156))
+    },
+
+    overview: {
+      supply: [
+        { name: 'CPU', value: Math.floor(2350 * 0.156) },
+        { name: 'GPU', value: Math.floor(5500 * 0.156) },
+        { name: '进程数量', value: 0 },
+        { name: '资源统计', value: 0 },
+        { name: '运行中', value: '30%' },
+        { name: '关机中', value: '70%' },
+        { name: '故障数量', value: 0 },
+        { name: '在线数量', value: 0 }
+      ],
+      demand: [
+        { name: 'CPU', value: 0 },
+        { name: 'GPU', value: 0 },
+        { name: '进程数量', value: 0 },
+        { name: '资源统计', value: 0 },
+        { name: '运行中', value: 0 },
+        { name: '关机中', value: 0 },
+        { name: '故障数量', value: 0 },
+        { name: '在线数量', value: 0 }
+      ]
+    }
+  },
+
+  // 长三角集群数据 (全国数据 × 0.098)
+  changsanjiao: {
+    header: {
+      demandPower: Math.floor(1500 * 0.098),
+      supplyPower: Math.floor(35320 * 0.098),
+      clusterCount: 1,
+      customerCount: Math.floor(352 * 0.098),
+      chipCount: Math.floor(75368 * 0.098),
+      modelCount: Math.floor(75 * 0.098)
+    },
+
+    left: {
+      chipScale: {
+        NVIDIA: Math.floor(33000 * 0.098),
+        ascend: Math.floor(5000 * 0.098),
+        supercomputer: Math.floor(8000 * 0.098),
+        total: Math.floor(5100 * 0.098)
+      },
+
+      runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450].map(num => Math.floor(num * 0.098)),
+
+      modelUsage: [
+        { name: 'deepseek', value: Math.floor(105 * 0.098) },
+        { name: '通义千问', value: Math.floor(78 * 0.098) },
+        { name: 'kimi', value: Math.floor(70 * 0.098) },
+        { name: '豆包', value: Math.floor(120 * 0.098) },
+        { name: '文心一言', value: Math.floor(60 * 0.098) },
+        { name: '元宝', value: Math.floor(85 * 0.098) }
+      ],
+
+      tokenUsage: [
+        { name: '千问3-max', value: Math.floor(5000 * 0.098) },
+        { name: 'kimi', value: Math.floor(4300 * 0.098) },
+        { name: '豆包', value: Math.floor(3500 * 0.098) },
+        { name: 'deepseek', value: Math.floor(3200 * 0.098) },
+        { name: '千帆', value: Math.floor(2800 * 0.098) }
+      ]
+    },
+
+    right: {
+      appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'],
+
+      userConsumption: [
+        { rank: 1, name: '用户A', amount: Math.floor(520000 * 0.098) },
+        { rank: 2, name: '用户B', amount: Math.floor(450000 * 0.098) },
+        { rank: 3, name: '用户C', amount: Math.floor(186000 * 0.098) },
+        { rank: 4, name: '用户D', amount: Math.floor(120000 * 0.098) },
+        { rank: 5, name: '用户E', amount: Math.floor(56000 * 0.098) },
+        { rank: 6, name: '用户F', amount: Math.floor(43000 * 0.098) },
+        { rank: 7, name: '用户G', amount: Math.floor(35000 * 0.098) },
+        { rank: 8, name: '用户H', amount: Math.floor(28000 * 0.098) }
+      ],
+
+      powerUsage: [12300, 11500, 11500, 13400, 12900, 13500, 13200].map(num => Math.floor(num * 0.098))
+    },
+
+    overview: {
+      supply: [
+        { name: 'CPU', value: Math.floor(2350 * 0.098) },
+        { name: 'GPU', value: Math.floor(5500 * 0.098) },
+        { name: '进程数量', value: 0 },
+        { name: '资源统计', value: 0 },
+        { name: '运行中', value: '30%' },
+        { name: '关机中', value: '70%' },
+        { name: '故障数量', value: 0 },
+        { name: '在线数量', value: 0 }
+      ],
+      demand: [
+        { name: 'CPU', value: 0 },
+        { name: 'GPU', value: 0 },
+        { name: '进程数量', value: 0 },
+        { name: '资源统计', value: 0 },
+        { name: '运行中', value: 0 },
+        { name: '关机中', value: 0 },
+        { name: '故障数量', value: 0 },
+        { name: '在线数量', value: 0 }
+      ]
+    }
+  },
+
+  // 珠三角集群数据 (全国数据 × 0.117)
+  zhusanjiao: {
+    header: {
+      demandPower: Math.floor(1500 * 0.117),
+      supplyPower: Math.floor(35320 * 0.117),
+      clusterCount: 1,
+      customerCount: Math.floor(352 * 0.117),
+      chipCount: Math.floor(75368 * 0.117),
+      modelCount: Math.floor(75 * 0.117)
+    },
+
+    left: {
+      chipScale: {
+        NVIDIA: Math.floor(33000 * 0.117),
+        ascend: Math.floor(5000 * 0.117),
+        supercomputer: Math.floor(8000 * 0.117),
+        total: Math.floor(5100 * 0.117)
+      },
+
+      runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450].map(num => Math.floor(num * 0.117)),
+
+      modelUsage: [
+        { name: 'deepseek', value: Math.floor(105 * 0.117) },
+        { name: '通义千问', value: Math.floor(78 * 0.117) },
+        { name: 'kimi', value: Math.floor(70 * 0.117) },
+        { name: '豆包', value: Math.floor(120 * 0.117) },
+        { name: '文心一言', value: Math.floor(60 * 0.117) },
+        { name: '元宝', value: Math.floor(85 * 0.117) }
+      ],
+
+      tokenUsage: [
+        { name: '千问3-max', value: Math.floor(5000 * 0.117) },
+        { name: 'kimi', value: Math.floor(4300 * 0.117) },
+        { name: '豆包', value: Math.floor(3500 * 0.117) },
+        { name: 'deepseek', value: Math.floor(3200 * 0.117) },
+        { name: '千帆', value: Math.floor(2800 * 0.117) }
+      ]
+    },
+
+    right: {
+      appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'],
+
+      userConsumption: [
+        { rank: 1, name: '用户A', amount: Math.floor(520000 * 0.117) },
+        { rank: 2, name: '用户B', amount: Math.floor(450000 * 0.117) },
+        { rank: 3, name: '用户C', amount: Math.floor(186000 * 0.117) },
+        { rank: 4, name: '用户D', amount: Math.floor(120000 * 0.117) },
+        { rank: 5, name: '用户E', amount: Math.floor(56000 * 0.117) },
+        { rank: 6, name: '用户F', amount: Math.floor(43000 * 0.117) },
+        { rank: 7, name: '用户G', amount: Math.floor(35000 * 0.117) },
+        { rank: 8, name: '用户H', amount: Math.floor(28000 * 0.117) }
+      ],
+
+      powerUsage: [12300, 11500, 11500, 13400, 12900, 13500, 13200].map(num => Math.floor(num * 0.117))
+    },
+
+    overview: {
+      supply: [
+        { name: 'CPU', value: Math.floor(2350 * 0.117) },
+        { name: 'GPU', value: Math.floor(5500 * 0.117) },
+        { name: '进程数量', value: 0 },
+        { name: '资源统计', value: 0 },
+        { name: '运行中', value: '30%' },
+        { name: '关机中', value: '70%' },
+        { name: '故障数量', value: 0 },
+        { name: '在线数量', value: 0 }
+      ],
+      demand: [
+        { name: 'CPU', value: 0 },
+        { name: 'GPU', value: 0 },
+        { name: '进程数量', value: 0 },
+        { name: '资源统计', value: 0 },
+        { name: '运行中', value: 0 },
+        { name: '关机中', value: 0 },
+        { name: '故障数量', value: 0 },
+        { name: '在线数量', value: 0 }
+      ]
+    }
+  },
+
+  // 川渝集群数据 (全国数据 × 0.156)
+  chuanyu: {
+    header: {
+      demandPower: Math.floor(1500 * 0.156),
+      supplyPower: Math.floor(35320 * 0.156),
+      clusterCount: 1,
+      customerCount: Math.floor(352 * 0.156),
+      chipCount: Math.floor(75368 * 0.156),
+      modelCount: Math.floor(75 * 0.156)
+    },
+
+    left: {
+      chipScale: {
+        NVIDIA: Math.floor(33000 * 0.156),
+        ascend: Math.floor(5000 * 0.156),
+        supercomputer: Math.floor(8000 * 0.156),
+        total: Math.floor(5100 * 0.156)
+      },
+
+      runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450].map(num => Math.floor(num * 0.156)),
+
+      modelUsage: [
+        { name: 'deepseek', value: Math.floor(105 * 0.156) },
+        { name: '通义千问', value: Math.floor(78 * 0.156) },
+        { name: 'kimi', value: Math.floor(70 * 0.156) },
+        { name: '豆包', value: Math.floor(120 * 0.156) },
+        { name: '文心一言', value: Math.floor(60 * 0.156) },
+        { name: '元宝', value: Math.floor(85 * 0.156) }
+      ],
+
+      tokenUsage: [
+        { name: '千问3-max', value: Math.floor(5000 * 0.156) },
+        { name: 'kimi', value: Math.floor(4300 * 0.156) },
+        { name: '豆包', value: Math.floor(3500 * 0.156) },
+        { name: 'deepseek', value: Math.floor(3200 * 0.156) },
+        { name: '千帆', value: Math.floor(2800 * 0.156) }
+      ]
+    },
+
+    right: {
+      appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'],
+
+      userConsumption: [
+        { rank: 1, name: '用户A', amount: Math.floor(520000 * 0.156) },
+        { rank: 2, name: '用户B', amount: Math.floor(450000 * 0.156) },
+        { rank: 3, name: '用户C', amount: Math.floor(186000 * 0.156) },
+        { rank: 4, name: '用户D', amount: Math.floor(120000 * 0.156) },
+        { rank: 5, name: '用户E', amount: Math.floor(56000 * 0.156) },
+        { rank: 6, name: '用户F', amount: Math.floor(43000 * 0.156) },
+        { rank: 7, name: '用户G', amount: Math.floor(35000 * 0.156) },
+        { rank: 8, name: '用户H', amount: Math.floor(28000 * 0.156) }
+      ],
+
+      powerUsage: [12300, 11500, 11500, 13400, 12900, 13500, 13200].map(num => Math.floor(num * 0.156))
+    },
+
+    overview: {
+      supply: [
+        { name: 'CPU', value: Math.floor(2350 * 0.156) },
+        { name: 'GPU', value: Math.floor(5500 * 0.156) },
+        { name: '进程数量', value: 0 },
+        { name: '资源统计', value: 0 },
+        { name: '运行中', value: '30%' },
+        { name: '关机中', value: '70%' },
+        { name: '故障数量', value: 0 },
+        { name: '在线数量', value: 0 }
+      ],
+      demand: [
+        { name: 'CPU', value: 0 },
+        { name: 'GPU', value: 0 },
+        { name: '进程数量', value: 0 },
+        { name: '资源统计', value: 0 },
+        { name: '运行中', value: 0 },
+        { name: '关机中', value: 0 },
+        { name: '故障数量', value: 0 },
+        { name: '在线数量', value: 0 }
+      ]
+    }
   }
 };
 
diff --git a/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenCenter/Map.vue b/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenCenter/Map.vue
index 4c08a2b..0d2c09d 100644
--- a/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenCenter/Map.vue
+++ b/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenCenter/Map.vue
@@ -41,6 +41,7 @@
     </div>
     <!-- 添加返回按钮 -->
     <div v-if="currentCluster !== 'default'" class="reset-container">
+      <div class="current-cluster-text">当前为 {{ getChineseClusterName(currentCluster) }}</div>
       <div class="reset-btn" @click="resetToDefault">
         <span>返回全国视图</span>
       </div>
@@ -124,7 +125,26 @@ export default {
           labelPosition: [99.06, 21.8],
           position: { top: '69.2%', left: '24%' }
         }
-      ]
+      ],
+      // 集群名称到data-manager中key的映射
+      CLUSTER_MAPPING: {
+        '北京集群': 'beijing',
+        '内蒙集群': 'neimeng',
+        '新疆集群': 'xinjiang',
+        '长三角集群': 'changsanjiao',
+        '珠三角集群': 'zhusanjiao',
+        '川渝集群': 'chuanyu'
+      },
+      // 反向映射：英文key到中文名称
+      REVERSE_CLUSTER_MAPPING: {
+        'beijing': '北京集群',
+        'neimeng': '内蒙集群',
+        'xinjiang': '新疆集群',
+        'changsanjiao': '长三角集群',
+        'zhusanjiao': '珠三角集群',
+        'chuanyu': '川渝集群',
+        'default': '全国集群'
+      }
     };
   },
   computed: {
@@ -177,6 +197,11 @@ export default {
       return position ? { position: 'absolute', ...position, zIndex: 10 } : {};
     },
 
+    // 获取中文集群名称
+    getChineseClusterName(clusterKey) {
+      return this.REVERSE_CLUSTER_MAPPING[clusterKey] || '全国集群';
+    },
+
     initChart() {
       const chartDom = this.$refs.myEchart;
       if (!chartDom) return;
@@ -309,43 +334,28 @@ export default {
       }));
     },
 
-    // 修改：只有北京集群有反应，其他集群暂时无反应
+    // 修改后的enterCluster方法，支持所有集群
     enterCluster(cluster) {
       console.log('点击集群:', cluster.name);
 
-      // 只有北京集群有反应
-      if (cluster.name === '北京集群') {
-        console.log('进入集群:', cluster.name);
+      // 根据集群名称获取对应的数据key
+      const clusterKey = this.CLUSTER_MAPPING[cluster.name] || 'default';
 
-        // 触发集群点击事件到父组件
-        this.$emit('cluster-selected', cluster.name);
+      console.log('进入集群:', cluster.name, '数据key:', clusterKey);
 
-        // 根据集群名称设置数据
-        let clusterKey = 'default';
-        switch (cluster.name) {
-          case '北京集群':
-            clusterKey = 'beijing';
-            break;
-          default:
-            clusterKey = 'default';
-        }
+      // 触发集群点击事件到父组件
+      this.$emit('cluster-selected', cluster.name);
 
-        // 通过数据管理器切换数据
-        dataManager.setCluster(clusterKey);
-        this.currentCluster = clusterKey;
+      // 通过数据管理器切换数据
+      dataManager.setCluster(clusterKey);
+      this.currentCluster = clusterKey;
 
-        // 同时触发地图隐藏事件
-        this.$emit('update:showMap', false);
-        this.$emit('area-click', {
-          name: cluster.cityName,
-          cluster: cluster.name
-        });
-      } else {
-        // 其他集群暂时无反应，可以在这里添加提示或保持静默
-        console.log(`当前只支持北京集群，${cluster.name}功能暂未开放`);
-        // 可以选择给用户一个提示
-        // this.$message.warning(`当前只支持北京集群，${cluster.name}功能暂未开放`);
-      }
+      // 触发地图隐藏事件
+      this.$emit('update:showMap', false);
+      this.$emit('area-click', {
+        name: cluster.cityName,
+        cluster: cluster.name
+      });
     },
 
     // 修改原有的handleAreaClick方法
@@ -496,12 +506,6 @@ export default {
   box-shadow: 0 0 10px rgba(253, 189, 0, 0.5);
 }
 
-/* 非北京集群的按钮样式，可以添加一个特殊样式表示不可用 */
-.item .btn.disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
 .item .right {
   text-align: center;
   width: 20px;
@@ -517,14 +521,29 @@ export default {
 
 .reset-container {
   position: absolute;
-  top: 10%;
+  top: 6%;
   left: 50%;
   transform: translateX(-50%);
   z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.current-cluster-text {
+  color: white;
+  font-size: 18px;
+  font-weight: bold;
+  text-align: center;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+  padding: 8px 16px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 8px;
+  min-width: 200px;
 }
 
 .reset-btn {
-  /* 渐变色 */
   background: #0A2463 ;
   color: white;
   padding: 10px 20px;