refactor(ui): 优化多页面表单布局及样式统一

- 统一用 section-card 组件替换原有分段结构,简化模板结构
- 调整表单列宽为 6 栅格,提高响应式适配效果
- 修改标题类名,采用一致的 archive-page-form__title
- 精简并合并样式,移除各页面冗余标题和分段样式声明
- 全站业务状态标签改为普通文字,不显示背景和圆点,字体颜色统一
- 优化 element-ui.scss 中表格操作列的 el-link 样式,兼容多层 DOM 结构
- 增加表格操作列 el-tooltip 单元格自动宽度,防止内容裁切
- 调整正式结算列表操作列宽度,提升显示空间
- 简化部分页面表单控件宽度样式,统一控件宽度及间距
- 删除多处无用样式,减少样式冗余,提高代码可维护性
This commit is contained in:
2026-08-25 11:23:42 +08:00
parent 8955ef16c7
commit 01c3bb5b57
14 changed files with 256 additions and 423 deletions
+12 -17
View File
@@ -898,7 +898,10 @@
}
// 全站统一:手写表格操作列中的文字链接保持间距并支持自动换行
.el-table .el-table__body .cell:not(.avue-crud__menu):has(> .el-link) {
// 用后代选择器 :has(.el-link) 而非直接子元素 :has(> .el-link)
// 以兼容「el-link 被 div 包裹」的手写操作列(如 pre-settlement 的 .pre-settlement-page__links),
// 让无论是否包了一层 div 的操作列按钮都统一居中。
.el-table .el-table__body .cell:not(.avue-crud__menu):has(.el-link) {
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -929,7 +932,7 @@
// 全站统一:去除操作列 el-link 默认 margin,避免与 8px gap 叠加导致文字间距过宽
.avue-crud .avue-crud__menu .el-link,
.el-table .el-table__body .cell:not(.avue-crud__menu):has(> .el-link) .el-link {
.el-table .el-table__body .cell:not(.avue-crud__menu):has(.el-link) .el-link {
margin: 0;
}
@@ -948,7 +951,7 @@
// 操作列单元格会被加上 .el-tooltip 类并写死宽度,导致内部 el-link 换行后被裁切。
// 此处豁免操作列单元格:让 Avue 行菜单与手写表格操作列保持原有 flex 自动换行,不被固定宽度裁切。
.el-table .cell.avue-crud__menu,
.el-table .el-table__body .cell.el-tooltip:has(> .el-link) {
.el-table .el-table__body .cell.el-tooltip:has(.el-link) {
width: auto !important;
overflow: visible;
text-overflow: clip;
@@ -1027,27 +1030,19 @@
// margin-bottom: 15px !important;
//}
// ============ 业务状态标签:全站统一为「文字 + 颜色」样式 ============
// 去掉 el-tag 默认背景边框,仅保留彩色文字,并前置一个状态圆点(颜色同文字)
// ============ 业务状态标签:全站统一为普通文字 ============
// 去掉 el-tag 默认背景边框、颜色圆点,仅保留文本本身,颜色与正文一致
// 适用于所有业务状态展示:调度状态 / 运单状态 / 审批状态等。
.el-tag.status-text {
background-color: transparent !important;
border-color: transparent !important;
color: var(--el-text-color-regular) !important;
padding: 0;
margin-left: 8px;
font-weight: 500;
margin: 0;
font-weight: normal !important;
line-height: inherit;
&::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: currentColor;
margin-right: 6px;
vertical-align: middle;
position: relative;
top: -1px;
display: none;
}
}