Przeglądaj źródła

💄 style(dashboard): 优化大屏仪表盘视觉样式

- 修改进度条背景色从灰色700改为灰色200,提升对比度
- 更新信息卡片背景为半透明白色(90%不透明度)并添加阴影效果
- 调整标题文本颜色为灰色700并增加中等字重
- 将数值文本颜色从白色改为灰色900,增强可读性
yourname 7 miesięcy temu
rodzic
commit
cefaba2c1f
1 zmienionych plików z 18 dodań i 18 usunięć
  1. 18 18
      src/client/admin/pages/BigScreenDashboard.tsx

+ 18 - 18
src/client/admin/pages/BigScreenDashboard.tsx

@@ -251,36 +251,36 @@ const BigScreenDashboard: React.FC = () => {
 
   // 自定义进度条组件
   const ProgressBar = ({ value, color }: { value: number; color: string }) => (
-    <div className="w-full bg-gray-700 rounded-full h-2">
-      <div 
-        className={`h-2 rounded-full transition-all duration-300`} 
-        style={{ 
+    <div className="w-full bg-gray-200 rounded-full h-2">
+      <div
+        className={`h-2 rounded-full transition-all duration-300`}
+        style={{
           width: `${value}%`,
-          backgroundColor: color 
+          backgroundColor: color
         }}
       />
     </div>
   );
 
   // 信息卡片组件
-  const InfoCard = ({ 
-    title, 
-    value, 
-    icon, 
-    iconColor, 
-    progress 
-  }: { 
-    title: string; 
-    value: string | number; 
-    icon: React.ReactNode; 
+  const InfoCard = ({
+    title,
+    value,
+    icon,
+    iconColor,
+    progress
+  }: {
+    title: string;
+    value: string | number;
+    icon: React.ReactNode;
     iconColor: string;
     progress?: { value: number; color: string };
   }) => (
-    <div className="bg-white bg-opacity-10 border-0 backdrop-blur-sm rounded-lg p-4">
+    <div className="bg-white/90 border-0 backdrop-blur-sm rounded-lg p-4 shadow-lg">
       <div className="flex items-center justify-between">
         <div>
-          <h4 className="text-white text-sm">{title}</h4>
-          <div className="text-2xl font-bold text-white">{value}</div>
+          <h4 className="text-gray-700 text-sm font-medium">{title}</h4>
+          <div className="text-2xl font-bold text-gray-900">{value}</div>
         </div>
         <div className={`text-4xl ${iconColor}`}>
           {icon}