style: Material Design - 表格容器添加阴影和圆角

2026-02-27 10:43:35 +08:00
parent a062c7d715
commit e86150f84d
1 changed files with 12 additions and 3 deletions
--- a/ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
@@ -242,10 +242,19 @@ export default {
 .project-table-container {
  margin-top: 16px;

-  // 表格整体样式
+  // 表格整体样式 - Material Design 卡片式
  :deep(.el-table) {
-    border: 1px solid #eee;
-    border-radius: 4px;
+    // 移除边框，使用阴影
+    border: none;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+    // 悬停时卡片阴影加深
+    transition: box-shadow 0.3s ease;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }

    // 表头样式
    th {