财务后台系统

页面功能说明

这个财务统计页面包含以下主要组件：

1. 顶部标题栏：

   • 使用渐变文字效果增强视觉吸引力

2. 数据概览卡片：

   • 总收入、总支出、净利润、账户余额四个关键指标

   • 每个卡片有独特的图标和背景色

   • 显示较上月的增长率（使用颜色区分正负）

3. 图表展示区：

   • 柱状图：展示月度收入与支出对比，双柱分组显示

   • 饼图：展示费用类别分布，清晰显示各项支出占比

   • 折线图：展示利润趋势分析，带填充效果

   • 环形图：展示收入来源占比，中间留空设计

4. 数据表格：

   • 月度财务明细数据表格

   • 行悬停效果增强交互体验

   • 增长率使用颜色区分正负

5. 响应式设计：

   • 适配不同屏幕尺寸

   • 在小屏幕上自动调整布局

设计特点

1. 深色主题：采用深蓝渐变背景，营造专业财务仪表盘氛围

2. 卡片式布局：每个模块都有清晰的边界和悬停效果

3. 毛玻璃效果：使用backdrop-filter实现半透明模糊效果

4. 数据可视化：多种图表类型展示不同维度的财务数据

5. 交互元素：图表操作按钮、行悬停效果、卡片悬停动画

6. 响应式布局：适配从手机到桌面的各种屏幕尺寸

这个页面使用了Chart.js库来实现各种图表类型，整体设计美观且功能全面，适合企业财务统计和分析使用。