admin/guoju0808
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: manager/Projects 移动端适配 (工具栏横滚/筛选栏堆叠)

Browse Source
This commit is contained in:
guoju0808
2026-08-26 11:19:00 +00:00
parent e5d7d08ec1
commit 7cf8c5b660
1 changed files with 72 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ry-vue3/src/views/manager/Projects.vue
+72
View File
@@ -754,5 +754,77 @@ watch(() => route.path + (route.query._t || ''), () => load())
.assign-sessions-bar .hint { color: #909399; font-size: 12px; }
.assign-sessions-bar .sep { color: #dcdfe6; margin: 0 4px; }
/* ========================================
移动端适配 (≤768px)
- 卡片 padding 收窄
- 工具栏横向滚动 (6 个按钮铺不下, 用 overflow-x:auto 让用户滑动)
- filter-form 全宽垂直堆叠
- 表格字号缩小 (横向滚动靠 el-table 自带)
======================================== */
@media (max-width: 768px) {
/* 卡片 padding */
.page-card { padding: 12px !important; border-radius: 4px !important; }
.breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; }
/* 工具栏: 横向滚动, 不换行 (6 个按钮) */
.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) {
flex-shrink: 0;
font-size: 12px !important;
padding: 0 10px !important;
height: 30px !important;
}
/* filter-form: 强制单列堆叠 (覆盖 inline style="width:260px" 等) */
.filter-form {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.filter-form :deep(.el-form-item) {
display: block !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
}
.filter-form :deep(.el-form-item__label) {
float: none !important;
width: auto !important;
text-align: left !important;
padding: 0 0 4px !important;
font-size: 13px !important;
color: var(--el-text-color-secondary) !important;
line-height: 1.5 !important;
}
.filter-form :deep(.el-form-item__content) {
margin-left: 0 !important;
line-height: 1.6 !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) {
width: 100% !important;
min-width: 0 !important;
}
/* 项目时间区间: 横向保持 (日期 → 至 → 日期) */
.filter-form :deep(.el-date-editor) { max-width: none !important; }
/* 表格字号缩小, 横向滚动靠 el-table 自带 */
:deep(.el-table) { font-size: 12px !important; }
/* 操作列固定到右侧, 加上阴影区隔 */
:deep(.el-table .fixed-right) {
box-shadow: -2px 0 6px rgba(0, 0, 0, 0.04);
}
}
</style>