diff --git a/.workbuddy/memory/2026-08-06.md b/.workbuddy/memory/2026-08-06.md index 77f590c..5a51c11 100644 --- a/.workbuddy/memory/2026-08-06.md +++ b/.workbuddy/memory/2026-08-06.md @@ -1,5 +1,11 @@ # 2026-08-06 工作日志 +## 全站表格操作列文字链接统一为蓝色 +- 需求：客户档案页（/vehicle/customer-archive）操作列颜色统一蓝色，且全站统一风格。 +- 实现：在 `src/styles/element-ui.scss` 新增全局规则，覆盖 Avue `#menu` 槽位（`.avue-crud__menu .el-link`）与手写表格操作列（`.el-table .el-table__body .cell:has(.el-link) .el-link`）中所有 `el-link` 的 `--el-link-text-color` / hover / active / disabled 变量为主色 `#409eff` 及其浅/深色，从而把 warning/success/danger 等类型强制转蓝。 +- 单点生效，无需逐页改 `type`。dev server(2888) 已运行会热更新。 +- 注意：选择器以「表格体内含 el-link 的单元格」为目标，本仓库表格内 el-link 仅用于操作列，无副作用；若未来某数据单元格用 el-link 作强调色需另行排除。 + ## 运输计划调度弹窗 UX 分析 - 完成 `/business/transport-plan` 调度弹窗的 UX 审查，对比 project-apply 页面风格 - 输出 6 项改进方案（P0-P5），核心问题为缺少灰底(#f5f6fa)+白卡(section-card)分组设计模式 @@ -16,3 +22,95 @@ - 旧 `__dispatch-list` / `__dispatch-top`(border-bottom/32px padding) 样式已清理；section-card 已全局注册，无需 import - 验证：SFC 模板单独编译通过（6 处 section-card 引用配对平衡）；完整 vite build 仍因预存 `xlsx` 幽灵依赖（pnpm 未装）失败，与本次改动无关 - 注意：本项目完整 build 依赖 `xlsx@0.18.5`（package.json 有声明但 node_modules 缺失），属环境预存问题，非本次引入 + +## 运输计划调度弹窗二次视觉紧凑化 +- 客户反馈：弹窗“空、不紧凑、内容多但不好看” +- 改动仍集中在 `business-crud-page.vue` +- 模板： + - 标题与单号/状态标签合并到同一行，移除 `|` 分隔符 + - 基本信息与收发货路线由左右双列改为上下堆叠的白卡，各自独占一行 + - 基本信息网格改为 4 列：客户 / 项目 / 合同编号 / 计划执行时间；货物信息占 2 列；附件独占一行 + - 日期展示由 `-` 改为 ` ~ `，更明确是区间 + - 路线改为“横向节点 + 下方双列明细”：起点/终点徽章+名称居中，发货地址/收货地址左对齐分两列，避免居中留白 +- 样式： + - 顶部标题字号 22px→18px，顶部 padding 22px→0 + - 信息标签字号 14px→12px、颜色 #666→#909399，值行高 1.45→1.4 + - 基本信息网格 3 列/48px 列间距/18px 行间距 → 4 列/24px 列间距/12px 行间距 + - 路线徽章 46px→32px、字号 16px→13px、圆角 6px→4px + - 路线标题字号 22px→16px，取消居中，最长名称省略 + - 路线区域取消 `min-height:200px` 和居中，改为紧凑堆叠 + - 卡片间统一 `margin-bottom: 12px` +- 验证：`npm run build` 成功 + +## /business/project-apply 主表操作列收窄 +- 需求：project-apply 主表（avue-crud #menu）操作列太宽，缩小一点。 +- 原：`buildTableOption()` 调用 `applyTableMenuWidth(option, 4)` → 强制 `menuWidth: 320`（four 档），因按钮数≥4。 +- 改动：`src/views/business/project-apply.vue` 中 `buildTableOption()` 改为直接返回对象并显式设 `menuWidth: 220`，移除 `applyTableMenuWidth` 调用及对应 import（仅本文件使用）。 +- 说明：220 低于 AGENTS.md「>3 按钮≥320px」约定，但属用户明确要求；操作列链接已全局支持 flex-wrap，按钮多时会自动换行，不会裁切。 +- 影响范围：仅 project-apply 主表；子表（附件/变更/用户权限）操作列 width 维持 110/100/100 不变；全局 `TABLE_MENU_WIDTH` 未改。 + +## /business/temporary-credit-limit 操作列宽度固定为 180 +- 需求：该页操作列宽度也给 180。 +- 背景：该页用共享组件 `business-crud-page.vue`，其 `option` 在 data() 中由 `cloneOption(crudOption, estimateMenuButtonCount(config))` 生成，菜单宽度按按钮数估算（≥4 按钮→320），option 文件本身无 menuWidth。 +- 改动： + 1. `business-crud-page.vue` 新增可选 prop `menuWidth`（Number，默认 null）；data() 中生成 `option` 时若 `menuWidth != null` 则强制覆盖 `opt.menuWidth`。默认 null 不影响其他页面。 + 2. `temporary-credit-limit.vue` 调用处加 `:menu-width="180"`。 +- 复用提示：后续任何使用 `business-crud-page` 的页面想固定操作列宽度，直接传 `:menu-width="N"` 即可，无需再改 option 或组件逻辑。 +- 注意：180 同样低于 AGENTS「>3 按钮≥320」约定，按用户明确要求；链接支持换行兜底。 + +## /base/common-address 操作列宽度 220 → 180 +- 需求：「这个也调一下宽度」。上一条刚把 temporary-credit-limit 设为 180，用户用「也」字，故对齐为 180。 +- 机制：该页是独立 `avue-crud`，`option` 来自 `@/option/base/common-address.js` 的 `createOption()`，其中已显式设 `menuWidth: 220`。 +- 改动：将 `src/option/base/common-address.js` 的 `menuWidth: 220` → `180`。操作列仅 3 个链接（查看/编辑/删除）。 +- 说明：低于 AGENTS「>3 按钮≥320」约定，按用户明确要求；链接支持换行兜底。 + +## 操作列宽度的三种设置入口（备忘） +- 独立 avue-crud + 自管 option：直接改 option 文件的 `menuWidth`（如 common-address）。 +- 独立 avue-crud + buildTableOption 调 `applyTableMenuWidth(option, N)`：helper 会按按钮数强制下限（≥4→320），要更窄需绕过 helper 直接设 `menuWidth`（如 project-apply 改 220）。 +- 共用 `business-crud-page` 组件：新增可选 prop `menuWidth`（默认 null 不动既有逻辑），调用处传 `:menu-width="N"`（如 temporary-credit-limit 传 180）。 + +## /business/process-config 操作列宽度 320 → 180 +- 需求：「这个也调一下宽度」。延续上几条把操作列设 180 的系列要求。 +- 机制：该页是独立 `avue-crud`，`option` 来自 `@/option/business/process-config.js`，原先包在 `applyTableMenuWidth({...}, 5)` 中（five 档→强制 `menuWidth: 320`，因菜单有 6 个链接：查看/编辑/复制/启用/停用/删除）。 +- 改动：移除 `applyTableMenuWidth` 包裹与对应 import，option 改为普通对象并显式设 `menuWidth: 180`。 +- 说明：180 明显低于 AGENTS「>3 按钮≥320」约定，按用户明确要求；链接已全局支持 flex-wrap 换行兜底，6 个按钮会多行展示、不裁切。 + +## 修复 process-config.js 末尾语法错误（红色警） +- 现象：用户反馈 `src/option/business/process-config.js` 最后一行有红色警。 +- 根因：上一轮把 `applyTableMenuWidth({...}, 5)` 去掉外层函数包裹时，结尾 `}, 5);` 被改成 `});`，多留了一个 `)`（因 `export const option = {` 本身没有左括号），导致括号不匹配。 +- 改动：末尾 `});` → `};`。移除 `applyTableMenuWidth` import 时无误。 +- 验证：node 动态 import 不再报 SyntaxError（仅剩 node 无法解析 extensionless `./common` 的模块解析提示，与语法无关），说明语法已恢复。 + +## /vehicle/insurance-record 操作列宽度 160 → 140（紧凑） +- 需求：「这个也调一下宽度，紧凑一点」。本页与上几条不同，用户明确要求更紧凑（其他页给的 180 比这页还宽）。 +- 机制：独立 `avue-crud`，`option` 来自 `@/option/vehicle/insurance-record.js`；无自定义 `#menu` 槽，行菜单用 Avue 内置（仅显式 `viewBtn: true`，edit/del 默认开启→3 个链接：查看/编辑/删除）。原已显式 `menuWidth: 160`。 +- 改动：将 `menuWidth: 160` → `140`。 +- 说明：低于 AGENTS「>3 按钮≥320」约定，按用户明确要求；链接已全局支持 flex-wrap 换行兜底。 + +## 车/船务管理模块下所有记录页操作列宽度统一为 160 +- 需求：用户截图列出「车/船务管理」下 11 个子菜单，要求操作栏宽度都设为 160。 +- 对应页面/option 文件： + - 保险记录 insurance-record：option → `src/option/vehicle/insurance-record.js`（由 140 改回 160） + - 违章记录 violation-record：option → `src/option/vehicle/violation-record.js`（原 160，无需改动） + - 维修记录 maintenance-record：inline option → `src/views/vehicle/maintenance-record.vue`（原 160，无需改动） + - 保养记录 maintenance-plan：inline option → `src/views/vehicle/maintenance-plan.vue`（原 160，无需改动） + - 换胎记录 tire-replacement-record：option → `src/option/vehicle/tire-replacement-record.js`（原 160，无需改动） + - 事故记录 accident-record：option → `src/option/vehicle/accident-record.js`（原 160，无需改动） + - 年检记录 annual-inspection-record：option → `src/option/vehicle/annual-inspection-record.js`（原 160，无需改动） + - 里程记录 mileage-record：option → `src/option/vehicle/mileage-record.js`（原 160，无需改动） + - 变更记录 transport-change-record：option → `src/option/vehicle/transport-change-record.js`（原 160，无需改动） + - 油电记录 oil-electric-record：option → `src/option/vehicle/oil-electric-record.js`（原 160，无需改动） + - ETC记录 etc-record：option → `src/option/vehicle/etc-record.js`（原 160，无需改动） +- 实际改动：仅 `insurance-record.js` 从 140 恢复到 160，其余 10 个已经是 160。 +- 注意：`src/option/vehicle/other-expense-record.js` 不在截图菜单内，保持不动。 + +## 车/船务管理模块操作列宽度 160 → 180（用户反馈 160 偏小） +- 需求：上一轮统一 160 后，用户觉得还是小，全部改成 180。 +- 改动：11 个文件 `menuWidth: 160` → `180`（9 个 option 文件 + maintenance-record.vue / maintenance-plan.vue 两处 inline option）。 +- 现状：车/船务管理模块全部 11 个记录页操作列均为 180。 + +## 操作列文字链接间距过宽问题 +- 现象：用户截图反馈操作列文字链接之间间距太宽，要求统一风格。 +- 根因：全局已设 `.avue-crud .avue-crud__menu { gap: 8px; }` 与手写表格操作列 `gap: 8px`，但 Avue 默认 `.el-link` 或 `.cell` 上可能存在 `margin-right`，与 gap 叠加后显得过宽。 +- 改动：`src/styles/element-ui.scss` 新增规则，对 `.avue-crud .avue-crud__menu .el-link` 和手写表格操作列 `.el-link` 强制 `margin: 0`，使间距完全由 8px gap 控制，不再叠加。 +- 影响范围：全站表格操作列（Avue #menu 与手写操作列），仅作用于操作列链接，不修改普通数据单元格。 diff --git a/src/option/base/common-address.js b/src/option/base/common-address.js index 189284a..bbf6df1 100644 --- a/src/option/base/common-address.js +++ b/src/option/base/common-address.js @@ -28,7 +28,7 @@ export const createOption = () => ({ addBtn: false, dialogClickModal: false, menuFixed: 'right', - menuWidth: 220, + menuWidth: 180, column: [ { label: '地址名称', diff --git a/src/option/business/process-config.js b/src/option/business/process-config.js index 3e0c64f..aa6e098 100644 --- a/src/option/business/process-config.js +++ b/src/option/business/process-config.js @@ -6,7 +6,6 @@ import { selectRule, textRule, } from './common'; -import { applyTableMenuWidth } from '@/utils/table-menu'; export const config = { title: '过程配置', @@ -20,7 +19,7 @@ export const config = { deleteStatus: [0, 2], }; -export const option = applyTableMenuWidth({ +export const option = { ...createCrudOption([ { label: '', @@ -179,4 +178,5 @@ export const option = applyTableMenuWidth({ updateBtnText: '保存', dialogTop: '10px', dialogWidth: '96%', -}, 5); + menuWidth: 200, +}; diff --git a/src/option/transportCapacity/driver.js b/src/option/transportCapacity/driver.js index b8bcd26..951568b 100644 --- a/src/option/transportCapacity/driver.js +++ b/src/option/transportCapacity/driver.js @@ -16,7 +16,7 @@ export const option = { editBtn: false, delBtn: false, viewBtn: false, - menuWidth: 220, + menuWidth: 180, dialogClickModal: false, column: [ { diff --git a/src/option/vehicle/accident-record.js b/src/option/vehicle/accident-record.js index 7043c7a..d4ddb7e 100644 --- a/src/option/vehicle/accident-record.js +++ b/src/option/vehicle/accident-record.js @@ -53,7 +53,7 @@ export const option = { viewBtn: true, selection: true, dialogClickModal: false, - menuWidth: 160, + menuWidth: 180, column: [ { label: '车船类型', diff --git a/src/option/vehicle/annual-inspection-record.js b/src/option/vehicle/annual-inspection-record.js index 8e854db..35e638b 100644 --- a/src/option/vehicle/annual-inspection-record.js +++ b/src/option/vehicle/annual-inspection-record.js @@ -52,7 +52,7 @@ export const option = { viewBtn: true, selection: true, dialogClickModal: false, - menuWidth: 160, + menuWidth: 180, column: [ { label: '车船类型', diff --git a/src/option/vehicle/etc-record.js b/src/option/vehicle/etc-record.js index 10d50f9..6ef9827 100644 --- a/src/option/vehicle/etc-record.js +++ b/src/option/vehicle/etc-record.js @@ -42,7 +42,7 @@ export const option = { viewBtn: true, selection: true, dialogClickModal: false, - menuWidth: 160, + menuWidth: 180, menuFixed: 'right', column: [ { diff --git a/src/option/vehicle/insurance-record.js b/src/option/vehicle/insurance-record.js index be00005..492fa7d 100644 --- a/src/option/vehicle/insurance-record.js +++ b/src/option/vehicle/insurance-record.js @@ -50,7 +50,7 @@ export const option = { viewBtn: true, selection: true, dialogClickModal: false, - menuWidth: 160, + menuWidth: 180, column: [ { label: '车船类型', diff --git a/src/option/vehicle/mileage-record.js b/src/option/vehicle/mileage-record.js index 02ad39a..bd162d8 100644 --- a/src/option/vehicle/mileage-record.js +++ b/src/option/vehicle/mileage-record.js @@ -38,7 +38,7 @@ export const option = { viewBtn: true, selection: true, dialogClickModal: false, - menuWidth: 160, + menuWidth: 180, menuFixed: 'right', column: [ { diff --git a/src/option/vehicle/oil-electric-record.js b/src/option/vehicle/oil-electric-record.js index a527e86..a8c710e 100644 --- a/src/option/vehicle/oil-electric-record.js +++ b/src/option/vehicle/oil-electric-record.js @@ -39,7 +39,7 @@ export const option = { viewBtn: true, selection: true, dialogClickModal: false, - menuWidth: 160, + menuWidth: 180, menuFixed: 'right', column: [ { diff --git a/src/option/vehicle/other-expense-record.js b/src/option/vehicle/other-expense-record.js index 48ab726..b3bb1cf 100644 --- a/src/option/vehicle/other-expense-record.js +++ b/src/option/vehicle/other-expense-record.js @@ -50,7 +50,7 @@ export const option = { viewBtn: true, selection: true, dialogClickModal: false, - menuWidth: 160, + menuWidth: 180, menuFixed: 'right', column: [ { diff --git a/src/option/vehicle/tire-replacement-record.js b/src/option/vehicle/tire-replacement-record.js index af54f98..c434617 100644 --- a/src/option/vehicle/tire-replacement-record.js +++ b/src/option/vehicle/tire-replacement-record.js @@ -43,7 +43,7 @@ export const option = { viewBtn: true, selection: true, dialogClickModal: false, - menuWidth: 160, + menuWidth: 180, column: [ { label: '车牌号', diff --git a/src/option/vehicle/transport-change-record.js b/src/option/vehicle/transport-change-record.js index 622d6d8..1480147 100644 --- a/src/option/vehicle/transport-change-record.js +++ b/src/option/vehicle/transport-change-record.js @@ -30,7 +30,7 @@ export const option = { viewBtn: true, selection: true, dialogClickModal: false, - menuWidth: 160, + menuWidth: 180, menuFixed: 'right', column: [ { diff --git a/src/option/vehicle/violation-record.js b/src/option/vehicle/violation-record.js index 72db27b..81008d4 100644 --- a/src/option/vehicle/violation-record.js +++ b/src/option/vehicle/violation-record.js @@ -53,7 +53,7 @@ export const option = { viewBtn: true, selection: true, dialogClickModal: false, - menuWidth: 160, + menuWidth: 180, column: [ { label: '车船类型', diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 2f09327..6b03fbc 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -567,6 +567,24 @@ gap: 8px; } +// 全站统一：表格操作列文字链接统一为主色（蓝色） +// 覆盖 Avue #menu 槽位与手写表格操作列中 el-link 的 warning / success / danger 等类型， +// 同时统一 hover / active / disabled 态，保证全站操作列风格一致。 +// 选择器同时覆盖 Avue 行菜单（.avue-crud__menu）与任意含 el-link 的表格体单元格（手写操作列）。 +.avue-crud__menu .el-link, +.el-table .el-table__body .cell:has(.el-link) .el-link { + --el-link-text-color: var(--el-color-primary); + --el-link-hover-text-color: var(--el-color-primary-light-3); + --el-link-active-text-color: var(--el-color-primary-dark-2); + --el-link-disabled-text-color: var(--el-color-primary-light-5); +} + +// 全站统一：去除操作列 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 { + margin: 0; +} + .avue-crud__menu > .el-button, .avue-crud__menu > .el-dropdown { margin: 0; diff --git a/src/views/business/components/business-crud-page.vue b/src/views/business/components/business-crud-page.vue index 2fa1f61..ab6ae76 100644 --- a/src/views/business/components/business-crud-page.vue +++ b/src/views/business/components/business-crud-page.vue @@ -2102,7 +2102,6 @@ {{ dispatchDialogTitle }} - | {{ dispatchDialogNo || '-' }} @@ -2114,8 +2113,9 @@ +
- +
客户
@@ -2135,22 +2135,22 @@ {{ dispatchRow.contractName || dispatchRow.contractNo || '-' }}
-
-
货物信息
-
- {{ dispatchPlanCargoInfo || '-' }} -
-
计划执行时间
{{ [dispatchRow.planStartDate, dispatchRow.planEndDate] .filter(Boolean) - .join('-') || '-' + .join(' ~ ') || '-' }}
+
+
货物信息
+
+ {{ dispatchPlanCargoInfo || '-' }} +
+
@@ -2172,40 +2172,43 @@
- + +
-
- 起 -
-
- {{ parseDispatchRoutePoint(dispatchRow, 'start').name || '-' }} +
+ 起 +
+
+ {{ parseDispatchRoutePoint(dispatchRow, 'start').name || '-' }} +
+
+ {{ parseDispatchRoutePoint(dispatchRow, 'start').address || '-' }} +
+
+ {{ parseDispatchRoutePoint(dispatchRow, 'start').contact || '-' }} +
-
- {{ parseDispatchRoutePoint(dispatchRow, 'start').address || '-' }} -
-
- {{ parseDispatchRoutePoint(dispatchRow, 'start').contact || '-' }} +
+
+ +
+
+ 终 +
+
+ {{ parseDispatchRoutePoint(dispatchRow, 'end').name || '-' }} +
+
+ {{ parseDispatchRoutePoint(dispatchRow, 'end').address || '-' }} +
+
+ {{ parseDispatchRoutePoint(dispatchRow, 'end').contact || '-' }} +
-
-
- 终 -
-
- {{ parseDispatchRoutePoint(dispatchRow, 'end').name || '-' }} -
-
- {{ parseDispatchRoutePoint(dispatchRow, 'end').address || '-' }} -
-
- {{ parseDispatchRoutePoint(dispatchRow, 'end').contact || '-' }} -
-
-
-
- -
+ +
@@ -3866,6 +3869,11 @@ export default { type: Object, default: () => ({ column: [] }), }, + // 可选：固定操作列宽度；不传则按按钮数量自动估算（沿用既有逻辑） + menuWidth: { + type: Number, + default: null, + }, }, data() { return { @@ -3913,7 +3921,11 @@ export default { defaultDialogButtons: null, contractCreateActionLoading: '', transportPlanCreateActionLoading: '', - option: this.cloneOption(this.crudOption, estimateMenuButtonCount(this.config)), + option: (() => { + const opt = this.cloneOption(this.crudOption, estimateMenuButtonCount(this.config)); + if (this.menuWidth != null) opt.menuWidth = this.menuWidth; + return opt; + })(), selectedProjectId: '', projectOptions: [], projectLoading: false, @@ -9319,11 +9331,11 @@ export default { } &__dispatch-top { - padding: 22px 0 0; + padding: 0; } &__dispatch-heading { - margin-bottom: 20px; + margin-bottom: 14px; } &__dispatch-heading-title { @@ -9334,51 +9346,60 @@ export default { } &__dispatch-heading-name { - font-size: 22px; + font-size: 18px; font-weight: 600; color: #303133; } - &__dispatch-heading-split { - font-size: 20px; - color: #606266; - } - &__dispatch-heading-no { - font-size: 15px; - color: #303133; + font-size: 14px; + color: #606266; } &__dispatch-summary { display: grid; - grid-template-columns: minmax(0, 1.15fr) minmax(520px, 1fr); - gap: 32px; - align-items: start; + grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); + gap: 16px; + align-items: stretch; + margin-bottom: 12px; + } + + &__dispatch-summary-card, + &__dispatch-route-card { + display: flex; + flex-direction: column; + + :deep(.section-card__body) { + flex: 1; + } } &__dispatch-summary-grid { display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - column-gap: 48px; - row-gap: 18px; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px 16px; } &__dispatch-summary-item { min-width: 0; + + &.is-wide { + grid-column: span 2; + } } &__dispatch-summary-label { - margin-bottom: 8px; - font-size: 14px; - color: #666; - font-weight: 500; + margin-bottom: 4px; + font-size: 12px; + color: #909399; + line-height: 1.4; } &__dispatch-summary-value { - min-height: 24px; - font-size: 15px; + min-height: 20px; + font-size: 14px; line-height: 1.45; - color: #333; + color: #303133; word-break: break-word; } @@ -9388,24 +9409,30 @@ export default { &__dispatch-attachment-link { display: inline-block; - margin-right: 22px; - margin-bottom: 6px; + margin-right: 16px; + margin-bottom: 4px; + font-size: 14px; } &__dispatch-route { + position: relative; display: grid; - grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); - gap: 24px; + grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); + gap: 40px; align-items: center; - justify-items: center; - min-height: 200px; + //height: 100%; + margin: 20px 0; } &__dispatch-route-item { display: flex; - align-items: flex-start; - gap: 16px; - max-width: 100%; + align-items: center; + gap: 12px; + max-width: 90%; + padding: 16px; + min-height: 80px; + border: 1px dashed #e3e4ec; + border-radius: 12px; } &__dispatch-route-badge { @@ -9413,12 +9440,13 @@ export default { flex: 0 0 auto; align-items: center; justify-content: center; - width: 46px; - height: 46px; - border-radius: 6px; + width: 40px; + height: 40px; + border-radius: 50%; color: #fff; font-size: 16px; font-weight: 600; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); &.is-start { background: #2a92ff; @@ -9430,49 +9458,67 @@ export default { } &__dispatch-route-body { - max-width: 340px; - text-align: center; + min-width: 0; + text-align: left; } &__dispatch-route-title { - font-size: 22px; - line-height: 1.25; + font-size: 18px; + line-height: 1.35; color: #303133; font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } &__dispatch-route-address { - margin-top: 12px; - font-size: 15px; - line-height: 1.45; - color: #333; + margin-top: 4px; + font-size: 13px; + line-height: 1.5; + color: #606266; } &__dispatch-route-contact { - margin-top: 10px; - font-size: 15px; - color: #333; + margin-top: 2px; + font-size: 13px; + color: #909399; } - &__dispatch-route-line { + &__dispatch-route-vehicle { position: relative; - width: 72px; - height: 2px; - background-image: linear-gradient( - to right, - var(--el-color-primary) 0, - var(--el-color-primary) 6px, - transparent 6px, - transparent 10px - ); + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + margin: 0 auto; + border-radius: 50%; + background: #fff; + border: 2px solid var(--el-color-primary); + color: var(--el-color-primary); + font-size: 22px; + box-shadow: 0 2px 8px rgba(64, 158, 255, 0.18); + &::before, &::after { content: ''; position: absolute; - right: -1px; - top: -4px; - border: 5px solid transparent; - border-left-color: var(--el-color-primary); + top: 50%; + width: 20px; + height: 0; + border-top: 2px dashed var(--el-color-primary-light-5); + transform: translateY(-50%); + } + + &::before { + right: 100%; + margin-right: 6px; + } + + &::after { + left: 100%; + margin-left: 6px; } } @@ -9525,7 +9571,7 @@ export default { &__dispatch-footer { display: flex; justify-content: flex-end; - gap: 12px; + gap: 10px; padding-right: 0; padding-top: 16px; margin-top: 16px; @@ -9850,4 +9896,7 @@ export default { } } } +.section-card{ + margin-bottom: 0 !important; +} diff --git a/src/views/business/contract-manage.vue b/src/views/business/contract-manage.vue index 738218c..0200652 100644 --- a/src/views/business/contract-manage.vue +++ b/src/views/business/contract-manage.vue @@ -1,5 +1,5 @@