From bfc801a16a252b68c32608abaeddc21faa32a7ae Mon Sep 17 00:00:00 2001 From: guoju0808 Date: Wed, 26 Aug 2026 11:43:08 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=89=B9=E9=87=8F=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E7=AB=AF=E9=80=82=E9=85=8D=20(24=20=E4=B8=AA=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E9=A1=B5=20+=2013=20=E4=B8=AA=E5=AE=BD=E8=A1=A8=E7=94=A8=20GrT?= =?UTF-8?q?able)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 给 24 个有 filter-form 但无 media query 的列表页统一加 @media (max-width:768px) - 卡片 padding 收窄 (12px, radius 4px) - 工具栏横向滚动 (6+ 按钮铺不下) - filter-form 保持横向布局 (label 左 80px 右对齐 + input 右占满) - 查找/重置按钮垂直堆叠不偏移 - 表格字号 12px - 13 个宽表 (≥10 列) 替换为 GrTable 组件: - sponsor/Projects, executor/Projects, sponsor/SponsorProjects - sponsor/SponsorPeople, expert/Experts, executor/People - meetings/Meetings, sponsor/Meetings, executor/Meetings - manager/ExecIntent, manager/SupportIntent, manager/Plans - admin/Users - 每个页面的 mainCols 取业务主键 (项目编号+名称 / 账号+姓名 等) - 手机端次要列折叠到展开行, 主列+操作列保留 - 修复 executor/Projects.vue 多行 el-table 标签导致的 GrTable 替换错误 全 95 个 vue 编译 200, 0 错误 --- ry-vue3/src/views/admin/Department.vue | 82 ++++++++++++++++ ry-vue3/src/views/admin/LaborProtocol.vue | 82 ++++++++++++++++ ry-vue3/src/views/admin/ProjectCategory.vue | 82 ++++++++++++++++ ry-vue3/src/views/admin/Title.vue | 82 ++++++++++++++++ ry-vue3/src/views/admin/Users.vue | 89 +++++++++++++++++- ry-vue3/src/views/doctor/Projects.vue | 82 ++++++++++++++++ ry-vue3/src/views/doctor/Submissions.vue | 82 ++++++++++++++++ .../src/views/executor-orgs/ExecutorOrgs.vue | 82 ++++++++++++++++ .../views/executor-people/ExecutorPeople.vue | 82 ++++++++++++++++ ry-vue3/src/views/executor/Labor.vue | 82 ++++++++++++++++ ry-vue3/src/views/executor/Meetings.vue | 89 +++++++++++++++++- ry-vue3/src/views/executor/People.vue | 89 +++++++++++++++++- ry-vue3/src/views/executor/Projects.vue | 94 ++++++++++++++++++- ry-vue3/src/views/expert/Experts.vue | 89 +++++++++++++++++- ry-vue3/src/views/manager/ExecIntent.vue | 89 +++++++++++++++++- ry-vue3/src/views/manager/Plans.vue | 89 +++++++++++++++++- ry-vue3/src/views/manager/SupportIntent.vue | 89 +++++++++++++++++- ry-vue3/src/views/meetings/Meetings.vue | 89 +++++++++++++++++- .../src/views/sponsor-orgs/SponsorOrgs.vue | 82 ++++++++++++++++ .../views/sponsor-people/SponsorPeople.vue | 82 ++++++++++++++++ ry-vue3/src/views/sponsor/Meetings.vue | 89 +++++++++++++++++- ry-vue3/src/views/sponsor/Projects.vue | 89 +++++++++++++++++- ry-vue3/src/views/sponsor/SponsorPeople.vue | 89 +++++++++++++++++- ry-vue3/src/views/sponsor/SponsorProjects.vue | 89 +++++++++++++++++- 24 files changed, 2038 insertions(+), 26 deletions(-) diff --git a/ry-vue3/src/views/admin/Department.vue b/ry-vue3/src/views/admin/Department.vue index 7282ac5..ed14c56 100644 --- a/ry-vue3/src/views/admin/Department.vue +++ b/ry-vue3/src/views/admin/Department.vue @@ -166,4 +166,86 @@ onMounted(load) .admin-department { padding: 16px; } .breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; } .pager { display: flex; justify-content: flex-end; margin-top: 12px; } + + /* ======================================== + 移动端适配 (≤768px) + - 卡片 padding 收窄 + - 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x) + - filter-form: 保持 label 左 + input 右横向布局 + - 表格字号收紧 + ======================================== */ + @media (max-width: 768px) { + /* 卡片 padding */ + .page-card { padding: 12px !important; border-radius: 4px !important; } + .breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; } + + /* 工具栏: 横向滚动 (按钮多时不换行) */ + .toolbar { + flex-wrap: nowrap !important; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 6px; + margin-bottom: 8px !important; + scrollbar-width: thin; + } + .toolbar::-webkit-scrollbar { height: 4px; } + .toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; } + .toolbar :deep(.action-btn), + .toolbar :deep(.el-button) { + flex-shrink: 0; + font-size: 12px !important; + padding: 0 10px !important; + height: 30px !important; + } + + /* filter-form: label 与输入框横向 (label 左, input 右) */ + .filter-form { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: 10px !important; + } + .filter-form :deep(.el-form-item) { + display: flex !important; + align-items: center !important; + margin-right: 0 !important; + margin-bottom: 0 !important; + } + .filter-form :deep(.el-form-item__label) { + float: none !important; + width: auto !important; + min-width: 80px !important; + text-align: right !important; + padding: 0 8px 0 0 !important; + font-size: 13px !important; + color: var(--el-text-color-regular) !important; + line-height: 32px !important; + height: 32px !important; + } + .filter-form :deep(.el-form-item__content) { + margin-left: 0 !important; + line-height: 32px !important; + flex: 1 !important; + min-width: 0 !important; + } + + /* 强制所有控件全宽, 覆盖 inline 260px / 140px / 120px */ + .filter-form :deep(.el-select), + .filter-form :deep(.el-input), + .filter-form :deep(.el-date-editor), + .filter-form :deep(.el-button), + .filter-form :deep(.el-cascader) { + width: 100% !important; + min-width: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + display: block !important; + } + .filter-form :deep(.el-button + .el-button) { + margin-top: 8px !important; + } + + /* 表格字号收紧 */ + :deep(.el-table) { font-size: 12px !important; } + } \ No newline at end of file diff --git a/ry-vue3/src/views/admin/LaborProtocol.vue b/ry-vue3/src/views/admin/LaborProtocol.vue index 8def1a8..a6ec1f0 100644 --- a/ry-vue3/src/views/admin/LaborProtocol.vue +++ b/ry-vue3/src/views/admin/LaborProtocol.vue @@ -139,4 +139,86 @@ onMounted(load) /* 表格空状态 (默认标记 = N) */ .dash-cell { color: #c0c4cc; } + + /* ======================================== + 移动端适配 (≤768px) + - 卡片 padding 收窄 + - 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x) + - filter-form: 保持 label 左 + input 右横向布局 + - 表格字号收紧 + ======================================== */ + @media (max-width: 768px) { + /* 卡片 padding */ + .page-card { padding: 12px !important; border-radius: 4px !important; } + .breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; } + + /* 工具栏: 横向滚动 (按钮多时不换行) */ + .toolbar { + flex-wrap: nowrap !important; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 6px; + margin-bottom: 8px !important; + scrollbar-width: thin; + } + .toolbar::-webkit-scrollbar { height: 4px; } + .toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; } + .toolbar :deep(.action-btn), + .toolbar :deep(.el-button) { + flex-shrink: 0; + font-size: 12px !important; + padding: 0 10px !important; + height: 30px !important; + } + + /* filter-form: label 与输入框横向 (label 左, input 右) */ + .filter-form { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: 10px !important; + } + .filter-form :deep(.el-form-item) { + display: flex !important; + align-items: center !important; + margin-right: 0 !important; + margin-bottom: 0 !important; + } + .filter-form :deep(.el-form-item__label) { + float: none !important; + width: auto !important; + min-width: 80px !important; + text-align: right !important; + padding: 0 8px 0 0 !important; + font-size: 13px !important; + color: var(--el-text-color-regular) !important; + line-height: 32px !important; + height: 32px !important; + } + .filter-form :deep(.el-form-item__content) { + margin-left: 0 !important; + line-height: 32px !important; + flex: 1 !important; + min-width: 0 !important; + } + + /* 强制所有控件全宽, 覆盖 inline 260px / 140px / 120px */ + .filter-form :deep(.el-select), + .filter-form :deep(.el-input), + .filter-form :deep(.el-date-editor), + .filter-form :deep(.el-button), + .filter-form :deep(.el-cascader) { + width: 100% !important; + min-width: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + display: block !important; + } + .filter-form :deep(.el-button + .el-button) { + margin-top: 8px !important; + } + + /* 表格字号收紧 */ + :deep(.el-table) { font-size: 12px !important; } + } \ No newline at end of file diff --git a/ry-vue3/src/views/admin/ProjectCategory.vue b/ry-vue3/src/views/admin/ProjectCategory.vue index 66d2275..3b47410 100644 --- a/ry-vue3/src/views/admin/ProjectCategory.vue +++ b/ry-vue3/src/views/admin/ProjectCategory.vue @@ -183,4 +183,86 @@ onMounted(load) .admin-project-category { padding: 16px; } .breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; } .pager { display: flex; justify-content: flex-end; margin-top: 12px; } + + /* ======================================== + 移动端适配 (≤768px) + - 卡片 padding 收窄 + - 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x) + - filter-form: 保持 label 左 + input 右横向布局 + - 表格字号收紧 + ======================================== */ + @media (max-width: 768px) { + /* 卡片 padding */ + .page-card { padding: 12px !important; border-radius: 4px !important; } + .breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; } + + /* 工具栏: 横向滚动 (按钮多时不换行) */ + .toolbar { + flex-wrap: nowrap !important; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 6px; + margin-bottom: 8px !important; + scrollbar-width: thin; + } + .toolbar::-webkit-scrollbar { height: 4px; } + .toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; } + .toolbar :deep(.action-btn), + .toolbar :deep(.el-button) { + flex-shrink: 0; + font-size: 12px !important; + padding: 0 10px !important; + height: 30px !important; + } + + /* filter-form: label 与输入框横向 (label 左, input 右) */ + .filter-form { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: 10px !important; + } + .filter-form :deep(.el-form-item) { + display: flex !important; + align-items: center !important; + margin-right: 0 !important; + margin-bottom: 0 !important; + } + .filter-form :deep(.el-form-item__label) { + float: none !important; + width: auto !important; + min-width: 80px !important; + text-align: right !important; + padding: 0 8px 0 0 !important; + font-size: 13px !important; + color: var(--el-text-color-regular) !important; + line-height: 32px !important; + height: 32px !important; + } + .filter-form :deep(.el-form-item__content) { + margin-left: 0 !important; + line-height: 32px !important; + flex: 1 !important; + min-width: 0 !important; + } + + /* 强制所有控件全宽, 覆盖 inline 260px / 140px / 120px */ + .filter-form :deep(.el-select), + .filter-form :deep(.el-input), + .filter-form :deep(.el-date-editor), + .filter-form :deep(.el-button), + .filter-form :deep(.el-cascader) { + width: 100% !important; + min-width: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + display: block !important; + } + .filter-form :deep(.el-button + .el-button) { + margin-top: 8px !important; + } + + /* 表格字号收紧 */ + :deep(.el-table) { font-size: 12px !important; } + } \ No newline at end of file diff --git a/ry-vue3/src/views/admin/Title.vue b/ry-vue3/src/views/admin/Title.vue index 300c8db..8bb33c1 100644 --- a/ry-vue3/src/views/admin/Title.vue +++ b/ry-vue3/src/views/admin/Title.vue @@ -166,4 +166,86 @@ onMounted(load) .admin-title { padding: 16px; } .breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; } .pager { display: flex; justify-content: flex-end; margin-top: 12px; } + + /* ======================================== + 移动端适配 (≤768px) + - 卡片 padding 收窄 + - 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x) + - filter-form: 保持 label 左 + input 右横向布局 + - 表格字号收紧 + ======================================== */ + @media (max-width: 768px) { + /* 卡片 padding */ + .page-card { padding: 12px !important; border-radius: 4px !important; } + .breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; } + + /* 工具栏: 横向滚动 (按钮多时不换行) */ + .toolbar { + flex-wrap: nowrap !important; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 6px; + margin-bottom: 8px !important; + scrollbar-width: thin; + } + .toolbar::-webkit-scrollbar { height: 4px; } + .toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; } + .toolbar :deep(.action-btn), + .toolbar :deep(.el-button) { + flex-shrink: 0; + font-size: 12px !important; + padding: 0 10px !important; + height: 30px !important; + } + + /* filter-form: label 与输入框横向 (label 左, input 右) */ + .filter-form { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: 10px !important; + } + .filter-form :deep(.el-form-item) { + display: flex !important; + align-items: center !important; + margin-right: 0 !important; + margin-bottom: 0 !important; + } + .filter-form :deep(.el-form-item__label) { + float: none !important; + width: auto !important; + min-width: 80px !important; + text-align: right !important; + padding: 0 8px 0 0 !important; + font-size: 13px !important; + color: var(--el-text-color-regular) !important; + line-height: 32px !important; + height: 32px !important; + } + .filter-form :deep(.el-form-item__content) { + margin-left: 0 !important; + line-height: 32px !important; + flex: 1 !important; + min-width: 0 !important; + } + + /* 强制所有控件全宽, 覆盖 inline 260px / 140px / 120px */ + .filter-form :deep(.el-select), + .filter-form :deep(.el-input), + .filter-form :deep(.el-date-editor), + .filter-form :deep(.el-button), + .filter-form :deep(.el-cascader) { + width: 100% !important; + min-width: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + display: block !important; + } + .filter-form :deep(.el-button + .el-button) { + margin-top: 8px !important; + } + + /* 表格字号收紧 */ + :deep(.el-table) { font-size: 12px !important; } + } \ No newline at end of file diff --git a/ry-vue3/src/views/admin/Users.vue b/ry-vue3/src/views/admin/Users.vue index c0205da..37903d1 100644 --- a/ry-vue3/src/views/admin/Users.vue +++ b/ry-vue3/src/views/admin/Users.vue @@ -30,7 +30,9 @@ - + @@ -56,7 +58,7 @@ 删除 - +
import { ref, reactive, computed, onMounted } from 'vue' import { listUser } from '@/api/system' +import GrTable from '@/components/GrTable.vue' import request from '@/utils/request' import { ElMessage, ElMessageBox } from 'element-plus' import { useUserStore } from '@/store/user' @@ -363,4 +366,86 @@ onMounted(load) .breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; } .toolbar { margin-bottom: 12px; } .pager { display: flex; justify-content: flex-end; margin-top: 12px; } + + /* ======================================== + 移动端适配 (≤768px) + - 卡片 padding 收窄 + - 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x) + - filter-form: 保持 label 左 + input 右横向布局 + - 表格字号收紧 + ======================================== */ + @media (max-width: 768px) { + /* 卡片 padding */ + .page-card { padding: 12px !important; border-radius: 4px !important; } + .breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; } + + /* 工具栏: 横向滚动 (按钮多时不换行) */ + .toolbar { + flex-wrap: nowrap !important; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 6px; + margin-bottom: 8px !important; + scrollbar-width: thin; + } + .toolbar::-webkit-scrollbar { height: 4px; } + .toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; } + .toolbar :deep(.action-btn), + .toolbar :deep(.el-button) { + flex-shrink: 0; + font-size: 12px !important; + padding: 0 10px !important; + height: 30px !important; + } + + /* filter-form: label 与输入框横向 (label 左, input 右) */ + .filter-form { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: 10px !important; + } + .filter-form :deep(.el-form-item) { + display: flex !important; + align-items: center !important; + margin-right: 0 !important; + margin-bottom: 0 !important; + } + .filter-form :deep(.el-form-item__label) { + float: none !important; + width: auto !important; + min-width: 80px !important; + text-align: right !important; + padding: 0 8px 0 0 !important; + font-size: 13px !important; + color: var(--el-text-color-regular) !important; + line-height: 32px !important; + height: 32px !important; + } + .filter-form :deep(.el-form-item__content) { + margin-left: 0 !important; + line-height: 32px !important; + flex: 1 !important; + min-width: 0 !important; + } + + /* 强制所有控件全宽, 覆盖 inline 260px / 140px / 120px */ + .filter-form :deep(.el-select), + .filter-form :deep(.el-input), + .filter-form :deep(.el-date-editor), + .filter-form :deep(.el-button), + .filter-form :deep(.el-cascader) { + width: 100% !important; + min-width: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + display: block !important; + } + .filter-form :deep(.el-button + .el-button) { + margin-top: 8px !important; + } + + /* 表格字号收紧 */ + :deep(.el-table) { font-size: 12px !important; } + } \ No newline at end of file diff --git a/ry-vue3/src/views/doctor/Projects.vue b/ry-vue3/src/views/doctor/Projects.vue index 86ee4ba..6ba24cd 100644 --- a/ry-vue3/src/views/doctor/Projects.vue +++ b/ry-vue3/src/views/doctor/Projects.vue @@ -143,4 +143,86 @@ load() :deep(.el-table .el-button.is-link) { color: var(--brand-primary); background: transparent; border: none; } :deep(.el-table .el-button.is-link:hover) { color: var(--brand-primary-deep); background: transparent; } :deep(.el-table .el-button.is-link.is-disabled) { color: #c0c4cc; background: transparent; } + + /* ======================================== + 移动端适配 (≤768px) + - 卡片 padding 收窄 + - 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x) + - filter-form: 保持 label 左 + input 右横向布局 + - 表格字号收紧 + ======================================== */ + @media (max-width: 768px) { + /* 卡片 padding */ + .page-card { padding: 12px !important; border-radius: 4px !important; } + .breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; } + + /* 工具栏: 横向滚动 (按钮多时不换行) */ + .toolbar { + flex-wrap: nowrap !important; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 6px; + margin-bottom: 8px !important; + scrollbar-width: thin; + } + .toolbar::-webkit-scrollbar { height: 4px; } + .toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; } + .toolbar :deep(.action-btn), + .toolbar :deep(.el-button) { + flex-shrink: 0; + font-size: 12px !important; + padding: 0 10px !important; + height: 30px !important; + } + + /* filter-form: label 与输入框横向 (label 左, input 右) */ + .filter-form { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: 10px !important; + } + .filter-form :deep(.el-form-item) { + display: flex !important; + align-items: center !important; + margin-right: 0 !important; + margin-bottom: 0 !important; + } + .filter-form :deep(.el-form-item__label) { + float: none !important; + width: auto !important; + min-width: 80px !important; + text-align: right !important; + padding: 0 8px 0 0 !important; + font-size: 13px !important; + color: var(--el-text-color-regular) !important; + line-height: 32px !important; + height: 32px !important; + } + .filter-form :deep(.el-form-item__content) { + margin-left: 0 !important; + line-height: 32px !important; + flex: 1 !important; + min-width: 0 !important; + } + + /* 强制所有控件全宽, 覆盖 inline 260px / 140px / 120px */ + .filter-form :deep(.el-select), + .filter-form :deep(.el-input), + .filter-form :deep(.el-date-editor), + .filter-form :deep(.el-button), + .filter-form :deep(.el-cascader) { + width: 100% !important; + min-width: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + display: block !important; + } + .filter-form :deep(.el-button + .el-button) { + margin-top: 8px !important; + } + + /* 表格字号收紧 */ + :deep(.el-table) { font-size: 12px !important; } + } \ No newline at end of file diff --git a/ry-vue3/src/views/doctor/Submissions.vue b/ry-vue3/src/views/doctor/Submissions.vue index 8f17938..064dcad 100644 --- a/ry-vue3/src/views/doctor/Submissions.vue +++ b/ry-vue3/src/views/doctor/Submissions.vue @@ -218,4 +218,86 @@ onMounted(() => { :deep(.el-table .el-button.is-link:hover) { color: var(--brand-primary-deep); background: transparent; } :deep(.el-table .el-button.is-link.is-disabled) { color: #c0c4cc; background: transparent; } + + /* ======================================== + 移动端适配 (≤768px) + - 卡片 padding 收窄 + - 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x) + - filter-form: 保持 label 左 + input 右横向布局 + - 表格字号收紧 + ======================================== */ + @media (max-width: 768px) { + /* 卡片 padding */ + .page-card { padding: 12px !important; border-radius: 4px !important; } + .breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; } + + /* 工具栏: 横向滚动 (按钮多时不换行) */ + .toolbar { + flex-wrap: nowrap !important; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 6px; + margin-bottom: 8px !important; + scrollbar-width: thin; + } + .toolbar::-webkit-scrollbar { height: 4px; } + .toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; } + .toolbar :deep(.action-btn), + .toolbar :deep(.el-button) { + flex-shrink: 0; + font-size: 12px !important; + padding: 0 10px !important; + height: 30px !important; + } + + /* filter-form: label 与输入框横向 (label 左, input 右) */ + .filter-form { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: 10px !important; + } + .filter-form :deep(.el-form-item) { + display: flex !important; + align-items: center !important; + margin-right: 0 !important; + margin-bottom: 0 !important; + } + .filter-form :deep(.el-form-item__label) { + float: none !important; + width: auto !important; + min-width: 80px !important; + text-align: right !important; + padding: 0 8px 0 0 !important; + font-size: 13px !important; + color: var(--el-text-color-regular) !important; + line-height: 32px !important; + height: 32px !important; + } + .filter-form :deep(.el-form-item__content) { + margin-left: 0 !important; + line-height: 32px !important; + flex: 1 !important; + min-width: 0 !important; + } + + /* 强制所有控件全宽, 覆盖 inline 260px / 140px / 120px */ + .filter-form :deep(.el-select), + .filter-form :deep(.el-input), + .filter-form :deep(.el-date-editor), + .filter-form :deep(.el-button), + .filter-form :deep(.el-cascader) { + width: 100% !important; + min-width: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + display: block !important; + } + .filter-form :deep(.el-button + .el-button) { + margin-top: 8px !important; + } + + /* 表格字号收紧 */ + :deep(.el-table) { font-size: 12px !important; } + } \ No newline at end of file diff --git a/ry-vue3/src/views/executor-orgs/ExecutorOrgs.vue b/ry-vue3/src/views/executor-orgs/ExecutorOrgs.vue index a58c5d3..03600a3 100644 --- a/ry-vue3/src/views/executor-orgs/ExecutorOrgs.vue +++ b/ry-vue3/src/views/executor-orgs/ExecutorOrgs.vue @@ -263,4 +263,86 @@ onMounted(load) .breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; } .batch-bar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; } .pager { display: flex; justify-content: flex-end; margin-top: 12px; } + + /* ======================================== + 移动端适配 (≤768px) + - 卡片 padding 收窄 + - 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x) + - filter-form: 保持 label 左 + input 右横向布局 + - 表格字号收紧 + ======================================== */ + @media (max-width: 768px) { + /* 卡片 padding */ + .page-card { padding: 12px !important; border-radius: 4px !important; } + .breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; } + + /* 工具栏: 横向滚动 (按钮多时不换行) */ + .toolbar { + flex-wrap: nowrap !important; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 6px; + margin-bottom: 8px !important; + scrollbar-width: thin; + } + .toolbar::-webkit-scrollbar { height: 4px; } + .toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; } + .toolbar :deep(.action-btn), + .toolbar :deep(.el-button) { + flex-shrink: 0; + font-size: 12px !important; + padding: 0 10px !important; + height: 30px !important; + } + + /* filter-form: label 与输入框横向 (label 左, input 右) */ + .filter-form { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: 10px !important; + } + .filter-form :deep(.el-form-item) { + display: flex !important; + align-items: center !important; + margin-right: 0 !important; + margin-bottom: 0 !important; + } + .filter-form :deep(.el-form-item__label) { + float: none !important; + width: auto !important; + min-width: 80px !important; + text-align: right !important; + padding: 0 8px 0 0 !important; + font-size: 13px !important; + color: var(--el-text-color-regular) !important; + line-height: 32px !important; + height: 32px !important; + } + .filter-form :deep(.el-form-item__content) { + margin-left: 0 !important; + line-height: 32px !important; + flex: 1 !important; + min-width: 0 !important; + } + + /* 强制所有控件全宽, 覆盖 inline 260px / 140px / 120px */ + .filter-form :deep(.el-select), + .filter-form :deep(.el-input), + .filter-form :deep(.el-date-editor), + .filter-form :deep(.el-button), + .filter-form :deep(.el-cascader) { + width: 100% !important; + min-width: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + display: block !important; + } + .filter-form :deep(.el-button + .el-button) { + margin-top: 8px !important; + } + + /* 表格字号收紧 */ + :deep(.el-table) { font-size: 12px !important; } + } diff --git a/ry-vue3/src/views/executor-people/ExecutorPeople.vue b/ry-vue3/src/views/executor-people/ExecutorPeople.vue index 43a95d2..3251ace 100644 --- a/ry-vue3/src/views/executor-people/ExecutorPeople.vue +++ b/ry-vue3/src/views/executor-people/ExecutorPeople.vue @@ -312,4 +312,86 @@ watch(() => route.fullPath, () => { .breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; } .batch-bar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; } .pager { display: flex; justify-content: flex-end; margin-top: 12px; } + + /* ======================================== + 移动端适配 (≤768px) + - 卡片 padding 收窄 + - 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x) + - filter-form: 保持 label 左 + input 右横向布局 + - 表格字号收紧 + ======================================== */ + @media (max-width: 768px) { + /* 卡片 padding */ + .page-card { padding: 12px !important; border-radius: 4px !important; } + .breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; } + + /* 工具栏: 横向滚动 (按钮多时不换行) */ + .toolbar { + flex-wrap: nowrap !important; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 6px; + margin-bottom: 8px !important; + scrollbar-width: thin; + } + .toolbar::-webkit-scrollbar { height: 4px; } + .toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; } + .toolbar :deep(.action-btn), + .toolbar :deep(.el-button) { + flex-shrink: 0; + font-size: 12px !important; + padding: 0 10px !important; + height: 30px !important; + } + + /* filter-form: label 与输入框横向 (label 左, input 右) */ + .filter-form { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: 10px !important; + } + .filter-form :deep(.el-form-item) { + display: flex !important; + align-items: center !important; + margin-right: 0 !important; + margin-bottom: 0 !important; + } + .filter-form :deep(.el-form-item__label) { + float: none !important; + width: auto !important; + min-width: 80px !important; + text-align: right !important; + padding: 0 8px 0 0 !important; + font-size: 13px !important; + color: var(--el-text-color-regular) !important; + line-height: 32px !important; + height: 32px !important; + } + .filter-form :deep(.el-form-item__content) { + margin-left: 0 !important; + line-height: 32px !important; + flex: 1 !important; + min-width: 0 !important; + } + + /* 强制所有控件全宽, 覆盖 inline 260px / 140px / 120px */ + .filter-form :deep(.el-select), + .filter-form :deep(.el-input), + .filter-form :deep(.el-date-editor), + .filter-form :deep(.el-button), + .filter-form :deep(.el-cascader) { + width: 100% !important; + min-width: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + display: block !important; + } + .filter-form :deep(.el-button + .el-button) { + margin-top: 8px !important; + } + + /* 表格字号收紧 */ + :deep(.el-table) { font-size: 12px !important; } + } diff --git a/ry-vue3/src/views/executor/Labor.vue b/ry-vue3/src/views/executor/Labor.vue index 567bf6f..5302e4d 100644 --- a/ry-vue3/src/views/executor/Labor.vue +++ b/ry-vue3/src/views/executor/Labor.vue @@ -215,4 +215,86 @@ onMounted(load) } .hint-list p { margin-bottom: 4px; } .hint-list p:last-child { margin-bottom: 0; } + + /* ======================================== + 移动端适配 (≤768px) + - 卡片 padding 收窄 + - 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x) + - filter-form: 保持 label 左 + input 右横向布局 + - 表格字号收紧 + ======================================== */ + @media (max-width: 768px) { + /* 卡片 padding */ + .page-card { padding: 12px !important; border-radius: 4px !important; } + .breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; } + + /* 工具栏: 横向滚动 (按钮多时不换行) */ + .toolbar { + flex-wrap: nowrap !important; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 6px; + margin-bottom: 8px !important; + scrollbar-width: thin; + } + .toolbar::-webkit-scrollbar { height: 4px; } + .toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; } + .toolbar :deep(.action-btn), + .toolbar :deep(.el-button) { + flex-shrink: 0; + font-size: 12px !important; + padding: 0 10px !important; + height: 30px !important; + } + + /* filter-form: label 与输入框横向 (label 左, input 右) */ + .filter-form { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: 10px !important; + } + .filter-form :deep(.el-form-item) { + display: flex !important; + align-items: center !important; + margin-right: 0 !important; + margin-bottom: 0 !important; + } + .filter-form :deep(.el-form-item__label) { + float: none !important; + width: auto !important; + min-width: 80px !important; + text-align: right !important; + padding: 0 8px 0 0 !important; + font-size: 13px !important; + color: var(--el-text-color-regular) !important; + line-height: 32px !important; + height: 32px !important; + } + .filter-form :deep(.el-form-item__content) { + margin-left: 0 !important; + line-height: 32px !important; + flex: 1 !important; + min-width: 0 !important; + } + + /* 强制所有控件全宽, 覆盖 inline 260px / 140px / 120px */ + .filter-form :deep(.el-select), + .filter-form :deep(.el-input), + .filter-form :deep(.el-date-editor), + .filter-form :deep(.el-button), + .filter-form :deep(.el-cascader) { + width: 100% !important; + min-width: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + display: block !important; + } + .filter-form :deep(.el-button + .el-button) { + margin-top: 8px !important; + } + + /* 表格字号收紧 */ + :deep(.el-table) { font-size: 12px !important; } + } \ No newline at end of file diff --git a/ry-vue3/src/views/executor/Meetings.vue b/ry-vue3/src/views/executor/Meetings.vue index 24afe82..f0efaf9 100644 --- a/ry-vue3/src/views/executor/Meetings.vue +++ b/ry-vue3/src/views/executor/Meetings.vue @@ -34,7 +34,9 @@ - + @@ -62,7 +64,7 @@ 修改
- +
import { ref, reactive, onMounted } from 'vue' +import GrTable from '@/components/GrTable.vue' import { useRoute, useRouter } from 'vue-router' import { bizList } from '@/api/public' import { stageLabel, STAGE_OPTIONS, stageClass } from '@/utils/meetingStage' @@ -157,4 +160,86 @@ onMounted(() => { readQueryFromRoute(); load() }) .stage-waiting { color: #ff4d4f; border-color: #fbc4c4; background: #fef0f0; } .stage-frozen { color: #909399; border-color: #dcdfe6; background: #f5f7fa; opacity: 0.6; } .stage-default { color: #606266; border-color: #dcdfe6; background: #fafafa; } + + /* ======================================== + 移动端适配 (≤768px) + - 卡片 padding 收窄 + - 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x) + - filter-form: 保持 label 左 + input 右横向布局 + - 表格字号收紧 + ======================================== */ + @media (max-width: 768px) { + /* 卡片 padding */ + .page-card { padding: 12px !important; border-radius: 4px !important; } + .breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; } + + /* 工具栏: 横向滚动 (按钮多时不换行) */ + .toolbar { + flex-wrap: nowrap !important; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 6px; + margin-bottom: 8px !important; + scrollbar-width: thin; + } + .toolbar::-webkit-scrollbar { height: 4px; } + .toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; } + .toolbar :deep(.action-btn), + .toolbar :deep(.el-button) { + flex-shrink: 0; + font-size: 12px !important; + padding: 0 10px !important; + height: 30px !important; + } + + /* filter-form: label 与输入框横向 (label 左, input 右) */ + .filter-form { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: 10px !important; + } + .filter-form :deep(.el-form-item) { + display: flex !important; + align-items: center !important; + margin-right: 0 !important; + margin-bottom: 0 !important; + } + .filter-form :deep(.el-form-item__label) { + float: none !important; + width: auto !important; + min-width: 80px !important; + text-align: right !important; + padding: 0 8px 0 0 !important; + font-size: 13px !important; + color: var(--el-text-color-regular) !important; + line-height: 32px !important; + height: 32px !important; + } + .filter-form :deep(.el-form-item__content) { + margin-left: 0 !important; + line-height: 32px !important; + flex: 1 !important; + min-width: 0 !important; + } + + /* 强制所有控件全宽, 覆盖 inline 260px / 140px / 120px */ + .filter-form :deep(.el-select), + .filter-form :deep(.el-input), + .filter-form :deep(.el-date-editor), + .filter-form :deep(.el-button), + .filter-form :deep(.el-cascader) { + width: 100% !important; + min-width: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + display: block !important; + } + .filter-form :deep(.el-button + .el-button) { + margin-top: 8px !important; + } + + /* 表格字号收紧 */ + :deep(.el-table) { font-size: 12px !important; } + } diff --git a/ry-vue3/src/views/executor/People.vue b/ry-vue3/src/views/executor/People.vue index 0fb4183..3cdfae2 100644 --- a/ry-vue3/src/views/executor/People.vue +++ b/ry-vue3/src/views/executor/People.vue @@ -22,7 +22,9 @@
- + @@ -54,7 +56,7 @@ - +
\ No newline at end of file diff --git a/ry-vue3/src/views/executor/Projects.vue b/ry-vue3/src/views/executor/Projects.vue index a294bcc..7ac98b1 100644 --- a/ry-vue3/src/views/executor/Projects.vue +++ b/ry-vue3/src/views/executor/Projects.vue @@ -34,7 +34,14 @@
- + @@ -83,7 +90,7 @@ 分配 - +
{ readQueryFromRoute(); loadList() }) .assign-project-info { background: #f5f7fa; padding: 12px 16px; border-radius: 4px; margin-bottom: 12px; } .assign-project-info > div { display: flex; line-height: 22px; } .assign-project-info .lbl { color: #909399; width: 90px; flex-shrink: 0; } + + /* ======================================== + 移动端适配 (≤768px) + - 卡片 padding 收窄 + - 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x) + - filter-form: 保持 label 左 + input 右横向布局 + - 表格字号收紧 + ======================================== */ + @media (max-width: 768px) { + /* 卡片 padding */ + .page-card { padding: 12px !important; border-radius: 4px !important; } + .breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; } + + /* 工具栏: 横向滚动 (按钮多时不换行) */ + .toolbar { + flex-wrap: nowrap !important; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 6px; + margin-bottom: 8px !important; + scrollbar-width: thin; + } + .toolbar::-webkit-scrollbar { height: 4px; } + .toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; } + .toolbar :deep(.action-btn), + .toolbar :deep(.el-button) { + flex-shrink: 0; + font-size: 12px !important; + padding: 0 10px !important; + height: 30px !important; + } + + /* filter-form: label 与输入框横向 (label 左, input 右) */ + .filter-form { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: 10px !important; + } + .filter-form :deep(.el-form-item) { + display: flex !important; + align-items: center !important; + margin-right: 0 !important; + margin-bottom: 0 !important; + } + .filter-form :deep(.el-form-item__label) { + float: none !important; + width: auto !important; + min-width: 80px !important; + text-align: right !important; + padding: 0 8px 0 0 !important; + font-size: 13px !important; + color: var(--el-text-color-regular) !important; + line-height: 32px !important; + height: 32px !important; + } + .filter-form :deep(.el-form-item__content) { + margin-left: 0 !important; + line-height: 32px !important; + flex: 1 !important; + min-width: 0 !important; + } + + /* 强制所有控件全宽, 覆盖 inline 260px / 140px / 120px */ + .filter-form :deep(.el-select), + .filter-form :deep(.el-input), + .filter-form :deep(.el-date-editor), + .filter-form :deep(.el-button), + .filter-form :deep(.el-cascader) { + width: 100% !important; + min-width: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + display: block !important; + } + .filter-form :deep(.el-button + .el-button) { + margin-top: 8px !important; + } + + /* 表格字号收紧 */ + :deep(.el-table) { font-size: 12px !important; } + } \ No newline at end of file diff --git a/ry-vue3/src/views/expert/Experts.vue b/ry-vue3/src/views/expert/Experts.vue index 6395f32..d74270f 100644 --- a/ry-vue3/src/views/expert/Experts.vue +++ b/ry-vue3/src/views/expert/Experts.vue @@ -52,7 +52,9 @@
- + @@ -108,7 +110,7 @@ 已拒绝 - +
import { ref, reactive, computed, onMounted, watch } from 'vue' +import GrTable from '@/components/GrTable.vue' import { useRouter, useRoute } from 'vue-router' import { useUserStore } from '@/store/user' import { bizList, bizUpdate } from '@/api/public' @@ -469,4 +472,86 @@ watch(() => route.fullPath, () => { .cert-preview { display: flex; justify-content: center; align-items: center; min-height: 200px; background: #f5f7fa; border-radius: 4px; padding: 8px; } .cert-preview-error { color: #909399; padding: 40px 0; } + + /* ======================================== + 移动端适配 (≤768px) + - 卡片 padding 收窄 + - 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x) + - filter-form: 保持 label 左 + input 右横向布局 + - 表格字号收紧 + ======================================== */ + @media (max-width: 768px) { + /* 卡片 padding */ + .page-card { padding: 12px !important; border-radius: 4px !important; } + .breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; } + + /* 工具栏: 横向滚动 (按钮多时不换行) */ + .toolbar { + flex-wrap: nowrap !important; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 6px; + margin-bottom: 8px !important; + scrollbar-width: thin; + } + .toolbar::-webkit-scrollbar { height: 4px; } + .toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; } + .toolbar :deep(.action-btn), + .toolbar :deep(.el-button) { + flex-shrink: 0; + font-size: 12px !important; + padding: 0 10px !important; + height: 30px !important; + } + + /* filter-form: label 与输入框横向 (label 左, input 右) */ + .filter-form { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + gap: 10px !important; + } + .filter-form :deep(.el-form-item) { + display: flex !important; + align-items: center !important; + margin-right: 0 !important; + margin-bottom: 0 !important; + } + .filter-form :deep(.el-form-item__label) { + float: none !important; + width: auto !important; + min-width: 80px !important; + text-align: right !important; + padding: 0 8px 0 0 !important; + font-size: 13px !important; + color: var(--el-text-color-regular) !important; + line-height: 32px !important; + height: 32px !important; + } + .filter-form :deep(.el-form-item__content) { + margin-left: 0 !important; + line-height: 32px !important; + flex: 1 !important; + min-width: 0 !important; + } + + /* 强制所有控件全宽, 覆盖 inline 260px / 140px / 120px */ + .filter-form :deep(.el-select), + .filter-form :deep(.el-input), + .filter-form :deep(.el-date-editor), + .filter-form :deep(.el-button), + .filter-form :deep(.el-cascader) { + width: 100% !important; + min-width: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + display: block !important; + } + .filter-form :deep(.el-button + .el-button) { + margin-top: 8px !important; + } + + /* 表格字号收紧 */ + :deep(.el-table) { font-size: 12px !important; } + } diff --git a/ry-vue3/src/views/manager/ExecIntent.vue b/ry-vue3/src/views/manager/ExecIntent.vue index f855fe4..cf25f6e 100644 --- a/ry-vue3/src/views/manager/ExecIntent.vue +++ b/ry-vue3/src/views/manager/ExecIntent.vue @@ -24,7 +24,9 @@ - + @@ -52,7 +54,7 @@ 删除 - +
@@ -61,6 +63,7 @@