处理首页响应式布局

admin/dashboard/templates/index.html

@@ -748,6 +748,16 @@
         margin-bottom: 18px;
     }
 
+    .dashboard-page .el-row {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+
+    .dashboard-page .el-row > .el-col {
+        padding-left: 8px !important;
+        padding-right: 8px !important;
+    }
+
     .dashboard-title-actions {
         display: flex;
         align-items: center;
@@ -1040,5 +1050,156 @@
     .hero-empty i {
         font-size: 24px;
     }
+
+    @media (max-width: 1200px) {
+        .hero-row > .el-col,
+        .stats-highlight-row > .el-col,
+        .chart-row > .el-col {
+            width: 100% !important;
+        }
+
+        .metric-grid > .el-col {
+            width: 50% !important;
+        }
+    }
+
+    @media (max-width: 900px) {
+        .dashboard-title {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        .hero-row,
+        .stats-highlight-row,
+        .chart-row {
+            margin-bottom: 12px;
+        }
+
+        .hero-profile-top {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        .hero-profile-meta {
+            grid-template-columns: 1fr;
+        }
+
+        .chart-card-header,
+        .chart-card-header--split,
+        .section-heading {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        .chart-toolbar {
+            width: 100%;
+        }
+
+        .chart-toolbar .el-select {
+            width: 100% !important;
+        }
+
+        .metric-grid > .el-col {
+            width: 100% !important;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .dashboard-page {
+            overflow-x: hidden;
+        }
+
+        .dashboard-title {
+            margin-bottom: 14px;
+        }
+
+        .page-title-main h1,
+        .page-title-main h2 {
+            font-size: 22px;
+        }
+
+        .page-title-main p {
+            font-size: 13px;
+        }
+
+        .live-badge {
+            width: 100%;
+            justify-content: center;
+        }
+
+        .hero-card,
+        .chart-card,
+        .insight-card,
+        .metric-card {
+            min-height: auto;
+        }
+
+        .hero-card--profile .el-card__body,
+        .metric-card .el-card__body {
+            padding: 16px !important;
+        }
+
+        .hero-avatar-wrap {
+            width: 64px;
+            height: 64px;
+        }
+
+        .hero-profile-copy h2 {
+            font-size: 20px;
+        }
+
+        .metric-value {
+            font-size: 24px;
+        }
+
+        .chart-container--large,
+        .chart-container--panel {
+            height: 260px;
+        }
+
+        .rank-cell {
+            align-items: flex-start;
+        }
+
+        .rank-title,
+        .rank-subtitle {
+            white-space: normal;
+        }
+
+        .el-table {
+            font-size: 12px;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .dashboard-page .el-row > .el-col {
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+        }
+
+        .hero-row,
+        .stats-highlight-row,
+        .chart-row {
+            margin-bottom: 10px;
+        }
+
+        .hero-card--profile .el-card__body,
+        .metric-card .el-card__body,
+        .insight-card .el-card__body {
+            padding: 14px !important;
+        }
+
+        .metric-label,
+        .metric-footnote,
+        .section-heading p,
+        .chart-card-header p {
+            font-size: 12px;
+        }
+
+        .chart-container--large,
+        .chart-container--panel {
+            height: 220px;
+        }
+    }
 </style>
 {% endblock %}