From ef417a02908566f998354c2db600cb0f5430d207 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Wed, 5 Aug 2026 20:53:48 +0800 Subject: [PATCH] =?UTF-8?q?style(ui):=20=E4=BC=98=E5=8C=96=E5=88=86?= =?UTF-8?q?=E9=A1=B5=E7=AE=AD=E5=A4=B4=E5=8F=8Aproject-apply=E5=BC=B9?= =?UTF-8?q?=E7=AA=97=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 撤销分页中“上一页/下一页”按钮隐藏，恢复原生箭头图标显示 - 重新删除element-ui.scss中多余的分页箭头文字注入和display:none规则 - 全局Avue CRUD弹窗内容区背景改为灰色 #f5f6fa，提升视觉层次感 - project-apply弹窗背景改为灰色底，分组区块改为白色卡片风格，统一界面风格 - 分区标题与内容区域合并为单张白色卡片，调整圆角和阴影实现视觉统一 - 相应区域内边距、圆角和阴影细节优化，保持结构和功能不变 --- .workbuddy/memory/2026-08-05.md | 33 ++++++++++++ src/styles/element-ui.scss | 30 ++--------- src/views/business/project-apply.vue | 51 ++++++++++++++++--- .../vehicle/credit-score-quantification.vue | 1 + 4 files changed, 83 insertions(+), 32 deletions(-) diff --git a/.workbuddy/memory/2026-08-05.md b/.workbuddy/memory/2026-08-05.md index 01544fd..6a13f74 100644 --- a/.workbuddy/memory/2026-08-05.md +++ b/.workbuddy/memory/2026-08-05.md @@ -28,3 +28,36 @@ - 样式：新增 `.archive-form__group`（#fafafa 背景、8px 圆角、16px/20px 内边距、组间距 16px），子标题复用 `.dialog-section-title`（14px/500）。 - 校验：@vue/compiler-sfc 解析 0 错误；标签闭合平衡。 - 注：此前讨论中提及的「Tab 内容加内边距」「材料区标题竖条」未纳入本次（材料区已用 dialog-section-title）；如需可后续追加。 + +## 排查：分页「上一页/下一页原生箭头」样式被还原 + +- 现象：昨日（08-04）已对 `src/styles/element-ui.scss` 三处历史遗留规则做删除（隐藏 `.el-icon` 箭头、用 `::before` 注入「上一页/下一页」文字、整体 `display:none` 隐藏 `.btn-prev/.btn-next`），今早用户反馈效果被覆盖。 +- 排查：重新 Grep 确认 `element-ui.scss` 三处原隐藏规则全部恢复成原始状态；而 `src/utils/pagination.js` 的注释（"统一展示为原生箭头图标"）未被还原，说明只有该样式文件被外部覆盖（疑似 git 还原 / 重新拉取 / 某生成流程），并非逻辑层问题。 +- 已重新逐条应用三处删除（单条提交，避开并行编辑的缓存冲突），并验证无遗留 `display:none`/`content:'上一页'`；`pagination.js` 无需再改。 +- 提醒：`element-ui.scss` 若处于版本控制或生成流程中，可能被再次还原；如需长期生效，建议把该改动提交入 git，或排查是否有自动覆盖该文件的脚本。 + +## UI 调整：Avue CRUD 弹窗内容区背景改为灰色 #f5f6fa + +- 文件：`src/styles/element-ui.scss` 第 225 行附近 `.avue-crud__dialog .el-dialog__body` +- 改动：在原 `max-height`/`overflow-y` 规则中新增 `background: #f5f6fa;` +- 范围：**全局生效**（所有 Avue CRUD 弹窗的内容区都会变灰）。起因是用户想在货物类型（cargo-type）新增弹窗用灰底衬托。 +- 注意：弹窗默认 `append-to-body`，scoped 样式选不到；如需仅货物类型单页变灰，需给 option 加 `dialogCustomClass` 再单独写选择器。用户未要求收窄，暂保持全局。 + +## UI 改造：project-apply 弹窗灰底+白卡片布局 + +- 文件：`src/views/business/project-apply.vue` +- 需求：弹窗背景色 `#f5f6fa`，每个分组区域用白色卡片 +- 改动： + - 弹窗 body（global 选择器）：加 `background: #f5f6fa` + - `__grid`、`__table`、`__textarea-list`、`__material-head`、`__upload`、`__change-textarea` 统一加白底 + 6px 圆角 + 极淡阴影 + 内边距 +- 效果：灰蓝底弹窗上浮白色分组卡片，与客商档案弹窗的「灰色分组块+白色内层卡片」方案一致 + +## 二次优化：project-apply 分区标题也包进白色卡片 + +- 文件：`src/views/business/project-apply.vue` +- 需求：把「项目基本信息」这类分区标题也装进白色卡片内（标题+内容合一张白卡） +- 改动： + - `.dialog-section-title`（排除 material 标题）加白底 + 上圆角 `6px 6px 0 0` + `z-index:1`，紧接内容块 + - `__grid`/`__table`/`__textarea-list`/`__change-textarea` 圆角改为下圆角 `0 0 6px 6px`，与标题拼接成完整白卡 + - 材料区（`__material-head`/`__upload`）标题与按钮本就在白卡内，不受影响 +- 纯 CSS 改动，未动模板结构；用 `:not()` 排除材料标题避免破坏既有布局 diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 4b46cab..dd2dbae 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -225,6 +225,7 @@ .avue-crud__dialog .el-dialog__body { max-height: calc(100vh - 200px); overflow-y: auto; + //background: #f5f6fa; } // 统一表格线条颜色 @@ -337,12 +338,7 @@ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } -.el-pagination .btn-prev, -.el-pagination .btn-next, -.erp-pagination-first, -.erp-pagination-last { - min-width: 54px; -} +// 上一页 / 下一页 箭头按钮与页码按钮等宽，不再单独加宽 .el-pagination .el-pager { gap: 6px; @@ -350,18 +346,7 @@ padding: 0; } -.el-pagination .btn-prev .el-icon, -.el-pagination .btn-next .el-icon { - display: none; -} - -.el-pagination .btn-prev::before { - content: '上一页'; -} - -.el-pagination .btn-next::before { - content: '下一页'; -} +// 上一页 / 下一页 改为原生箭头图标：不再隐藏原生图标，也不再注入「上一页 / 下一页」文字 .el-pagination.is-background .el-pager li.is-active, .el-pagination .el-pager li.is-active { @@ -447,14 +432,7 @@ color: #fff; } -// 全站统一：隐藏分页的「上一页 / 下一页」原生导航按钮 -// （「首页 / 尾页」由 src/utils/pagination.js 的全局增强器统一不再注入） -.el-pagination { - .btn-prev, - .btn-next { - display: none !important; - } -} +// 全站统一：分页展示「上一页 / 下一页」原生箭头图标（不再隐藏；首页 / 尾页仍不注入） // 全站统一：隐藏操作栏按钮前的图标 .avue-crud__menu .el-button--text i, diff --git a/src/views/business/project-apply.vue b/src/views/business/project-apply.vue index a5c8806..3cb4563 100644 --- a/src/views/business/project-apply.vue +++ b/src/views/business/project-apply.vue @@ -1752,12 +1752,29 @@ export default { line-height: 20px; } + // 分区标题融入白色卡片顶部（与下方内容块拼成一张完整卡片） + :deep(.dialog-section-title:not(.project-apply-form__material-title)) { + position: relative; + z-index: 1; + display: flex; + align-items: center; + gap: 8px; + background: #fff; + border-radius: 6px 6px 0 0; + padding: 14px 16px 4px; + margin-bottom: 0; + } + &__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; row-gap: 0; - margin-bottom: 8px; + margin-bottom: 16px; + background: #fff; + border-radius: 0 0 6px 6px; + padding: 14px 16px 4px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } &__picker-icon { @@ -1779,7 +1796,11 @@ export default { &__table { width: 100%; - margin-bottom: 24px; + margin-bottom: 16px; + background: #fff; + border-radius: 0 0 6px 6px; + padding: 12px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); :deep(.el-table__header th) { background: #f5f7fa; @@ -1793,6 +1814,12 @@ export default { } &__textarea-list { + margin-bottom: 16px; + background: #fff; + border-radius: 0 0 6px 6px; + padding: 14px 16px 4px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); + :deep(.el-form-item) { align-items: flex-start; } @@ -1806,12 +1833,15 @@ export default { display: flex; align-items: center; justify-content: space-between; - margin-top: 8px; + margin-bottom: 16px; + background: #fff; + border-radius: 6px; + padding: 12px 16px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } &__material-title { flex: 1; - margin-bottom: 14px; } &__material-warn { @@ -1822,11 +1852,19 @@ export default { } &__upload { - margin: -12px 0 24px; + margin: 0 0 16px; + background: #fff; + border-radius: 6px; + padding: 12px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } &__change-textarea { - margin-bottom: 24px; + margin-bottom: 16px; + background: #fff; + border-radius: 0 0 6px 6px; + padding: 14px 16px 4px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); :deep(.el-form-item__content) { width: 100%; @@ -1839,6 +1877,7 @@ export default { max-height: 76vh; overflow-y: auto; padding: 16px 24px 8px; + background: #f5f6fa; } .project-apply-dialog__footer { diff --git a/src/views/vehicle/credit-score-quantification.vue b/src/views/vehicle/credit-score-quantification.vue index 4da8b66..7c51f1b 100644 --- a/src/views/vehicle/credit-score-quantification.vue +++ b/src/views/vehicle/credit-score-quantification.vue @@ -1267,4 +1267,5 @@ export default { margin-left: 12px; } } +