style: Material Design - 扁平化分页组件

2026-02-27 10:52:38 +08:00
parent bdc5463b6d
commit 0e1c247f0e
1 changed files with 21 additions and 3 deletions
--- a/ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
@@ -368,15 +368,33 @@ export default {
  }
 }

-// 分页样式优化
+// 分页样式优化 - Material Design 风格
 :deep(.el-pagination) {
-  margin-top: 16px;
+  margin-top: 24px;
  text-align: right;

+  // 扁平化按钮
+  .btn-prev,
+  .btn-next,
+  .el-pager li {
+    border: none;
+    background-color: transparent;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+  }
+
+  .el-pager li.active {
+    background-color: #1890ff;
+    color: white;
+    border-radius: 4px;
+  }
+
  .el-pagination__total,
  .el-pagination__sizes,
  .el-pagination__jump {
-    color: #606266;
+    color: #666;
  }
 }
 </style>