style(transportCapacity): 优化船舶表单布局和标签样式

- 船舶表单“安放龙骨日期/建造完工日期”label宽度收窄至88px并支持换行
- 船舶证书信息两块表单调整为4列布局,字段span由8改为6
- contract-manage和track-tracking页签名标签最大宽度限制为96px,防止过宽
- project-apply业务部门选择组件改用el-tree-select支持树形选择,辅助函数新增
- 全局样式调整el-tree-select及el-cascader去除圆圈,改用箭头和文字高亮展示
- 控制节点展开箭头、选中状态和悬浮效果统一视觉风格
This commit is contained in:
2026-08-27 16:40:38 +08:00
parent 9342e674c5
commit fc70aeb2af
6 changed files with 165 additions and 40 deletions
+89
View File
@@ -1104,3 +1104,92 @@
.el-select__wrapper:not(.is-disabled) .el-select__selected-item {
color: #606266 !important;
}
// ============ 全局 el-tree-select 样式:隐藏圆圈/复选框,统一为树形 ▶ 箭头展开风格 ============
// 目标:将所有带 ○/●/☑ 圆圈的 tree-select 下拉改为纯树形展开(▶ 箭头 + 选中蓝字),与截图2一致。
.el-tree-select {
// 隐藏下拉面板内的 checkbox / radio 圆圈
.el-tree-node__content > .el-checkbox {
display: none;
}
// 展开箭头始终可见(即使叶子节点也保留占位,保证对齐)
.el-tree-node__expand-icon {
font-size: 12px;
color: #c0c4cc;
&.is-leaf {
// 叶子节点:透明占位符,保持缩进对齐
color: transparent;
&::before {
display: none;
}
}
&:not(.is-leaf) {
// 可展开节点:hover 加深
&:hover {
color: #909399;
}
}
}
// 选中节点:蓝色文字高亮(替代原来的 ● 实心圆)
.el-tree-node.is-current > .el-tree-node__content {
color: var(--el-color-primary, #409eff);
font-weight: 600;
}
// hover 态
.el-tree-node__content:hover {
background-color: var(--el-fill-color-light, #f5f7fa);
}
// 节点标签文字
.el-tree-node__label {
font-size: 14px;
color: #333333;
}
// 选中节点的标签颜色继承 is-current 的蓝色
.el-tree-node.is-current > .el-tree-node__content > .el-tree-node__label {
color: inherit;
}
}
// ============ 全局 el-cascadercheckStrictly)样式:隐藏 ○/● 单选圆圈 ============
// 当 el-cascader 配置 checkStrictly:true 时,面板内每项前显示 el-radio 圆圈。
// 全局隐藏这些圆圈,改为纯文字选中高亮风格,与 tree-select 统一。
.el-cascader-panel {
// 隐藏级联面板内的 radio 单选圆圈
.el-cascader-node__prefix {
.el-radio {
display: none;
}
}
// 选中项:蓝色文字 + 加粗(替代原来的 ● 实心圆)
.el-cascader-node.is-active {
.el-cascader-node__label {
color: var(--el-color-primary, #409eff);
font-weight: 600;
}
}
// hover 态
.el-cascader-node:hover {
background-color: var(--el-fill-color-light, #f5f7fa);
}
// 节点标签默认颜色
.el-cascader-node__label {
font-size: 14px;
color: #333333;
}
// 禁用态
.el-cascader-node.is-disabled {
color: var(--el-text-color-placeholder, #c0c4cc);
cursor: not-allowed;
}
}