From 38239a23cde7790651710f7eb176fec8719be59d Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Mon, 9 Mar 2026 13:45:46 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96dashboard=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/index.vue | 219 +++++++++++++++++++++++++++++++++------
 1 file changed, 186 insertions(+), 33 deletions(-)

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index af1b516..4b015ca 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-row>
+    <el-row :gutter="8">
         <el-col :sm="12" :md="12">
             <el-card shadow="hover" header-bordered>
                 <template #header>
@@ -450,74 +450,227 @@ onUnmounted(() => {
     align-items: center;
     justify-content: center;
 }
+
 .redTitle {
     color: #ee2416;
     font-size: 20px;
-    font-weight: 500;
+    font-weight: 600;
     cursor: pointer;
+    position: relative;
+    padding-left: 15px;
+    transition: all 0.3s ease;
+}
+
+.redTitle::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 4px;
+    height: 20px;
+    background: linear-gradient(to bottom, #ee2416, #ff6b6b);
+    border-radius: 2px;
+}
+
+.redTitle:hover {
+    color: #ff6b6b;
+    transform: translateX(5px);
+}
+
+/* 卡片样式优化 */
+:deep(.el-card) {
+    border: none;
+    border-radius: 12px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    margin-bottom: 24px;
+}
+
+:deep(.el-card:hover) {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(238, 36, 22, 0.15);
+}
+
+:deep(.el-card__header) {
+    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
+    border-bottom: 2px solid rgba(238, 36, 22, 0.1);
+    padding: 20px 24px;
+}
+
+:deep(.el-card__body) {
+    padding: 24px;
 }
 
 /* 表格容器样式 */
 .table-container {
-  margin-top: 20px;
-  background-color: #f5f5f5;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    margin-top: 28px;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    border: 1px solid rgba(238, 36, 22, 0.1);
 }
 
 /* 原生表格样式 */
 .score-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 14px;
 }
 
 /* 表头样式 */
 .score-table thead {
-  background-color: #f7f6f6;
+    background: linear-gradient(135deg, #ee2416 0%, #ff6b6b 100%);
 }
 
 .score-table th {
-  /* color: #fff; */
-  color: black;
-  font-weight: bold;
-  padding: 12px 16px;
-  text-align: center;
-  border-bottom: 2px solid #555;
+    color: #fff;
+    font-weight: 600;
+    padding: 14px 16px;
+    text-align: center;
+    border-bottom: none;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-size: 13px;
 }
 
 /* 表格行样式 */
 .score-table tbody tr {
-  transition: all 0.3s ease;
-  background-color: white;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background-color: white;
 }
 
 .score-table td {
-  padding: 12px 16px;
-  text-align: center;
-  border-bottom: 1px solid #e0e0e0;
-  color: #333;
-  font-weight: 500;
+    padding: 14px 16px;
+    text-align: center;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    color: #333;
+    font-weight: 500;
 }
 
 /* 当前行高亮样式 */
 .current-row {
-  transform: scale(1.02);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  position: relative;
-  z-index: 1;
+    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%) !important;
+    transform: scale(1.01);
+    box-shadow: 0 4px 16px rgba(238, 36, 22, 0.15);
+    position: relative;
+    z-index: 1;
+    border-left: 4px solid #ee2416;
 }
 
 .current-row td {
-  font-weight: bold;
-  color: #000;
+    font-weight: 600;
+    color: #ee2416;
 }
 
 /* 鼠标悬停效果 */
 .score-table tbody tr:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  z-index: 2;
+    background: linear-gradient(135deg, #fff9f9 0%, #ffffff 100%);
+    transform: translateY(-2px) scale(1.005);
+    box-shadow: 0 6px 20px rgba(238, 36, 22, 0.12);
+    z-index: 2;
+}
+
+/* 按钮样式优化 */
+:deep(.el-button) {
+    border-radius: 6px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    padding: 10px 20px;
+}
+
+:deep(.el-button--primary) {
+    background: linear-gradient(135deg, #ee2416 0%, #ff6b6b 100%);
+    border: none;
+    box-shadow: 0 2px 8px rgba(238, 36, 22, 0.3);
+    color: #ffffff !important;
+}
+
+:deep(.el-button--primary:hover) {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(238, 36, 22, 0.4);
+    background: linear-gradient(135deg, #ff6b6b 0%, #ee2416 100%);
+}
+
+:deep(.el-button--default) {
+    border-color: rgba(238, 36, 22, 0.3);
+    color: #ee2416;
+    background-color: #ffffff;
+}
+
+:deep(.el-button--default:hover) {
+    background-color: rgba(238, 36, 22, 0.1);
+    border-color: #ee2416;
+}
+
+/* 对话框样式优化 */
+:deep(.el-dialog) {
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+:deep(.el-dialog__header) {
+    background: linear-gradient(135deg, #ee2416 0%, #ff6b6b 100%);
+    padding: 20px;
+    margin: 0;
+}
+
+:deep(.el-dialog__title) {
+    color: #fff;
+    font-weight: 600;
+}
+
+:deep(.el-dialog__body) {
+    padding: 24px;
+}
+
+:deep(.el-dialog__headerbtn .el-dialog__close) {
+    color: #fff;
+    font-size: 18px;
+}
+
+/* 指标说明内容样式 */
+:deep(.el-dialog__body > div) {
+    margin-bottom: 20px;
+    padding: 16px;
+    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
+    border-radius: 8px;
+    border-left: 4px solid #ee2416;
+    transition: all 0.3s ease;
+}
+
+:deep(.el-dialog__body > div:hover) {
+    transform: translateX(5px);
+    box-shadow: 0 4px 12px rgba(238, 36, 22, 0.1);
+}
+
+:deep(.el-dialog__body > div > div:first-child) {
+    color: #ee2416;
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+:deep(.el-dialog__body > div > div:last-child) {
+    color: #666;
+    line-height: 1.6;
+    font-size: 14px;
+}
+
+/* 图表容器动画 */
+:deep(.xt-chart) {
+    animation: fadeIn 0.6s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 </style>
\ No newline at end of file