style: 优化表格样式,匹配参考设计
This commit is contained in:
@@ -241,6 +241,53 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.project-table-container {
|
.project-table-container {
|
||||||
margin-top: 16px;
|
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 {
|
.project-info-cell {
|
||||||
@@ -285,4 +332,31 @@ export default {
|
|||||||
.text-bold {
|
.text-bold {
|
||||||
font-weight: 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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user