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:
@@ -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-cascader(checkStrictly)样式:隐藏 ○/● 单选圆圈 ============
|
||||
// 当 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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user