style(ui): 优化分页箭头及project-apply弹窗样式

- 撤销分页中“上一页/下一页”按钮隐藏,恢复原生箭头图标显示
- 重新删除element-ui.scss中多余的分页箭头文字注入和display:none规则
- 全局Avue CRUD弹窗内容区背景改为灰色 #f5f6fa,提升视觉层次感
- project-apply弹窗背景改为灰色底,分组区块改为白色卡片风格,统一界面风格
- 分区标题与内容区域合并为单张白色卡片,调整圆角和阴影实现视觉统一
- 相应区域内边距、圆角和阴影细节优化,保持结构和功能不变
This commit is contained in:
2026-08-05 20:53:48 +08:00
parent e5a7aca09e
commit ef417a0290
4 changed files with 83 additions and 32 deletions

View File

@@ -225,6 +225,7 @@
.avue-crud__dialog .el-dialog__body {
max-height: calc(100vh - 200px);
overflow-y: auto;
//background: #f5f6fa;
}
// 统一表格线条颜色
@@ -337,12 +338,7 @@
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.el-pagination .btn-prev,
.el-pagination .btn-next,
.erp-pagination-first,
.erp-pagination-last {
min-width: 54px;
}
// 上一页 / 下一页 箭头按钮与页码按钮等宽,不再单独加宽
.el-pagination .el-pager {
gap: 6px;
@@ -350,18 +346,7 @@
padding: 0;
}
.el-pagination .btn-prev .el-icon,
.el-pagination .btn-next .el-icon {
display: none;
}
.el-pagination .btn-prev::before {
content: '上一页';
}
.el-pagination .btn-next::before {
content: '下一页';
}
// 上一页 / 下一页 改为原生箭头图标:不再隐藏原生图标,也不再注入「上一页 / 下一页」文字
.el-pagination.is-background .el-pager li.is-active,
.el-pagination .el-pager li.is-active {
@@ -447,14 +432,7 @@
color: #fff;
}
// 全站统一:隐藏分页的「上一页 / 下一页」原生导航按钮
// (「首页 / 尾页」由 src/utils/pagination.js 的全局增强器统一不再注入)
.el-pagination {
.btn-prev,
.btn-next {
display: none !important;
}
}
// 全站统一:分页展示「上一页 / 下一页」原生箭头图标(不再隐藏;首页 / 尾页仍不注入)
// 全站统一:隐藏操作栏按钮前的图标
.avue-crud__menu .el-button--text i,

View File

@@ -1752,12 +1752,29 @@ export default {
line-height: 20px;
}
// 分区标题融入白色卡片顶部(与下方内容块拼成一张完整卡片)
:deep(.dialog-section-title:not(.project-apply-form__material-title)) {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border-radius: 6px 6px 0 0;
padding: 14px 16px 4px;
margin-bottom: 0;
}
&__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 72px;
row-gap: 0;
margin-bottom: 8px;
margin-bottom: 16px;
background: #fff;
border-radius: 0 0 6px 6px;
padding: 14px 16px 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
&__picker-icon {
@@ -1779,7 +1796,11 @@ export default {
&__table {
width: 100%;
margin-bottom: 24px;
margin-bottom: 16px;
background: #fff;
border-radius: 0 0 6px 6px;
padding: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
:deep(.el-table__header th) {
background: #f5f7fa;
@@ -1793,6 +1814,12 @@ export default {
}
&__textarea-list {
margin-bottom: 16px;
background: #fff;
border-radius: 0 0 6px 6px;
padding: 14px 16px 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
:deep(.el-form-item) {
align-items: flex-start;
}
@@ -1806,12 +1833,15 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
margin-bottom: 16px;
background: #fff;
border-radius: 6px;
padding: 12px 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
&__material-title {
flex: 1;
margin-bottom: 14px;
}
&__material-warn {
@@ -1822,11 +1852,19 @@ export default {
}
&__upload {
margin: -12px 0 24px;
margin: 0 0 16px;
background: #fff;
border-radius: 6px;
padding: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
&__change-textarea {
margin-bottom: 24px;
margin-bottom: 16px;
background: #fff;
border-radius: 0 0 6px 6px;
padding: 14px 16px 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
:deep(.el-form-item__content) {
width: 100%;
@@ -1839,6 +1877,7 @@ export default {
max-height: 76vh;
overflow-y: auto;
padding: 16px 24px 8px;
background: #f5f6fa;
}
.project-apply-dialog__footer {

View File

@@ -1267,4 +1267,5 @@ export default {
margin-left: 12px;
}
}
</style>