style: 优化表格样式,匹配参考设计

This commit is contained in:
wkc
2026-02-27 09:57:22 +08:00
parent 46f6d912a7
commit 5ede05913e

View File

@@ -241,6 +241,53 @@ export default {
<style lang="scss" scoped>
.project-table-container {
margin-top: 16px;
// 表格整体样式
:deep(.el-table) {
border: 1px solid #eee;
border-radius: 4px;
// 表头样式
th {
background-color: #f5f5f5;
color: #333;
font-weight: 600;
font-size: 14px;
height: 48px;
padding: 12px;
}
// 数据行样式
td {
color: #333;
font-size: 14px;
height: 50px;
padding: 12px;
border-bottom: 1px solid #f0f0f0;
}
// 移除列分隔线
.el-table__body-wrapper {
.cell {
border-right: none;
}
}
// 悬停效果
.el-table__row:hover > td {
background-color: #f5f5f5 !important;
transition: background-color 0.3s;
}
// 表格内容无额外边框
&::before {
height: 0;
}
&::after {
width: 0;
}
}
}
.project-info-cell {
@@ -285,4 +332,31 @@ export default {
.text-bold {
font-weight: bold;
}
// 操作按钮样式
:deep(.el-button--text) {
color: #1890ff;
padding: 0 8px;
&:hover {
color: #096dd9;
text-decoration: underline;
}
&:first-child {
padding-left: 0;
}
}
// 分页样式优化
:deep(.el-pagination) {
margin-top: 16px;
text-align: right;
.el-pagination__total,
.el-pagination__sizes,
.el-pagination__jump {
color: #606266;
}
}
</style>