style: 优化表格样式,匹配参考设计
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user