refactor(ui): 优化多页面表单布局及样式统一
- 统一用 section-card 组件替换原有分段结构,简化模板结构 - 调整表单列宽为 6 栅格,提高响应式适配效果 - 修改标题类名,采用一致的 archive-page-form__title - 精简并合并样式,移除各页面冗余标题和分段样式声明 - 全站业务状态标签改为普通文字,不显示背景和圆点,字体颜色统一 - 优化 element-ui.scss 中表格操作列的 el-link 样式,兼容多层 DOM 结构 - 增加表格操作列 el-tooltip 单元格自动宽度,防止内容裁切 - 调整正式结算列表操作列宽度,提升显示空间 - 简化部分页面表单控件宽度样式,统一控件宽度及间距 - 删除多处无用样式,减少样式冗余,提高代码可维护性
This commit is contained in:
+12
-17
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user