feat(loading-manage): 实现线路编辑起/经/终圆点分色功能
- 根据用户反馈,给线路编辑的「起/经/终」圆形徽标分别赋予蓝、橙、绿三种颜色 - 修改 src/views/business/loading-manage.vue,新增 routeTypeClass 和 routeChangeTypeClass 方法区分起始类型 - 模板中应用动态 class,实现不同类型圆点颜色差异 - 调整 scoped 样式,去掉硬编码背景色,添加三个 modifier 分别对应三种颜色 - 将原 route-type 样式多行化,便于嵌套颜色修饰符 - 变更运输路线弹窗与主弹窗样式保持一致,保证全站统一 - 已通过 dev server HMR 验证,刷新后新增/编辑弹窗正常显示颜色区别
This commit is contained in:
@@ -110,3 +110,15 @@
|
||||
- 改动:
|
||||
1. `src/option/business/contract-manage.js`:该文件 option 在 `createCrudOption([...])` 之后本就用 `option.xxx = ...` 顶层赋值(span/dialogWidth/dialogTop 等),故在末尾追加 `option.dialogCustomClass = 'contract-manage-dialog';`(无需改结构,与文件既有写法一致)。
|
||||
2. `src/styles/element-ui.scss`:新增 `.contract-manage-dialog` 四条规则,复刻 waybill-manage 方案——`height/max-height: calc(100vh - 40px) !important` 压过库内置 `.avue-dialog` 的 200px 上限;`.el-dialog__header { flex:none }`、`.el-dialog__body { flex:1 1 auto; min-height:0; max-height:none !important; overflow-y:auto }` 解开全局 avue-crud 200px body 限制;`.avue-dialog__footer { position:sticky; bottom:0; margin-top:0 !important; background:#fff }` 抵消全局 footer 的 -30px 上移。
|
||||
|
||||
## loading-manage 线路编辑「起/经/终」圆点分色
|
||||
|
||||
- 需求:用户反馈 `/business/loading-manage` 弹窗中"线路编辑"区域的「起/经/终」圆形徽标要区分颜色:起蓝、经橙、终绿。
|
||||
- 改文件:`src/views/business/loading-manage.vue`。
|
||||
- 涉及两处:① 主弹窗 `loading-manage-dialog__route-type`;② 变更运输路线弹窗 `loading-route-change-dialog__route-type`(保持全站一致)。
|
||||
- 实现方式(最小侵入、不破坏现有结构):
|
||||
1. methods 各加一个 `routeTypeClass(index)` / `routeChangeTypeClass(index)`,返回 `'start' | 'middle' | 'end'`。
|
||||
2. 模板里 span 改用 `:class="['...route-type', '...route-type--' + ${xxxClass(index)}]"` 动态 class。
|
||||
3. scoped 样式 `__route-type` 规则去掉硬编码 `background`,改用 `&--start/#409eff` + `&--middle/#e6a23c` + `&--end/#67c23a` 三个 modifier(颜色取 Element Plus 语义色:蓝主色 / 橙 warning / 绿 success),`color: #fff` 保留。
|
||||
- 关键 trick:变更弹窗原 `route-type` 样式是单行压缩写法,本次顺手把它多行化(保持其他子规则不变),以便嵌套 `&--xxx` 修饰符。
|
||||
- dev server(2889) HMR 自动生效,刷新后开新增/编辑弹窗向下滚到"线路编辑"分组即可见。
|
||||
|
||||
Reference in New Issue
Block a user