|
|
@@ -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}
|