card添加padding 效果

src/views/home/index.vue

@@ -1,6 +1,6 @@
 <template>
     <el-row>
-        <el-col :sm="12" :md="12">
+        <el-col :sm="12" :md="12" style="padding: 0 6px;">
             <el-card shadow="hover" header-bordered>
                 <template #header>
 					<div style="display: flex; justify-content: space-between">
@@ -42,7 +42,7 @@
                 </div>
             </el-card>
         </el-col>
-        <el-col :sm="12" :md="12">
+        <el-col :sm="12" :md="12" style="padding: 0 6px;">
             <el-card shadow="hover" header-bordered>
                 <template #header>
 					<div style="display: flex; justify-content: space-between">
@@ -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>