feat: 全局移动端适配 AdminLayout 汉堡抽屉 + 67 页通用规则
This commit is contained in:
guoju0808
@@ -266,4 +266,139 @@ h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; color: var(--el-text-color
|
||||
text-align: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
全局移动端适配 (≤768px) — 一次定义, 67 个页面生效
|
||||
- 列表页 (el-table / el-pagination / filter-form)
|
||||
- 详情/编辑 (el-dialog / el-form)
|
||||
- 业务页 (el-card / el-tabs / el-descriptions / el-table)
|
||||
============================================= */
|
||||
@media (max-width: 768px) {
|
||||
/* —— filter-form 已在前面定义, 这里再覆盖一次以防页面局部 scoped 抢占 —— */
|
||||
.filter-form {
|
||||
flex-direction: column !important;
|
||||
align-items: stretch !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
.filter-form .el-form-item {
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
.filter-form .el-input,
|
||||
.filter-form .el-select,
|
||||
.filter-form .el-date-editor,
|
||||
.filter-form .el-cascader,
|
||||
.filter-form > .el-button,
|
||||
.filter-form > button {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
.filter-form .filter-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.filter-form .filter-actions .el-button { flex: 1; }
|
||||
|
||||
/* —— el-pagination 移动端: 全宽, 紧凑 —— */
|
||||
.el-pagination {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 0 !important;
|
||||
}
|
||||
.el-pagination .el-pagination__sizes,
|
||||
.el-pagination .el-pagination__jump { display: none !important; }
|
||||
.el-pagination .el-pagination__total { font-size: 12px !important; }
|
||||
.el-pagination .btn-prev,
|
||||
.el-pagination .btn-next,
|
||||
.el-pagination .el-pager li { min-width: 28px !important; height: 28px !important; line-height: 28px !important; font-size: 12px !important; }
|
||||
|
||||
/* —— el-card 移动端: 减小内边距 —— */
|
||||
.el-card {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
.el-card__header {
|
||||
padding: 12px 14px !important;
|
||||
}
|
||||
.el-card__body {
|
||||
padding: 14px !important;
|
||||
}
|
||||
|
||||
/* —— el-dialog 移动端: 全屏化 —— */
|
||||
.el-dialog {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
position: fixed !important;
|
||||
inset: 0 !important;
|
||||
height: 100% !important;
|
||||
max-height: 100% !important;
|
||||
}
|
||||
.el-dialog__header {
|
||||
padding: 14px 16px !important;
|
||||
}
|
||||
.el-dialog__title { font-size: 15px !important; }
|
||||
.el-dialog__body {
|
||||
padding: 14px 16px !important;
|
||||
max-height: calc(100vh - 110px) !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
.el-dialog__footer {
|
||||
padding: 12px 16px !important;
|
||||
}
|
||||
/* dialog 关闭按钮稍大, 便于手指点击 */
|
||||
.el-dialog__headerbtn { font-size: 18px !important; width: 32px !important; height: 32px !important; }
|
||||
|
||||
/* —— el-form-item 移动端: label 上方对齐 —— */
|
||||
.el-form-item .el-form-item__label {
|
||||
line-height: 1.5 !important;
|
||||
padding-bottom: 4px !important;
|
||||
}
|
||||
.el-form.el-form--label-top .el-form-item__label {
|
||||
padding: 0 0 4px !important;
|
||||
}
|
||||
|
||||
/* —— el-table 移动端: 字号收紧 + 滚动提示 —— */
|
||||
.el-table {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.el-table th.el-table__cell { font-size: 12px !important; padding: 6px 4px !important; }
|
||||
.el-table td.el-table__cell { padding: 6px 4px !important; }
|
||||
|
||||
/* —— el-tabs 移动端: 滚动 + 字号 —— */
|
||||
.el-tabs__nav-wrap--scrollable .el-tabs__nav-scroll { padding: 0 4px !important; }
|
||||
.el-tabs__item { padding: 0 12px !important; font-size: 13px !important; height: 36px !important; line-height: 36px !important; }
|
||||
|
||||
/* —— el-descriptions 移动端: 单列堆叠 —— */
|
||||
.el-descriptions {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
.el-descriptions__label,
|
||||
.el-descriptions__content {
|
||||
padding: 10px 8px !important;
|
||||
word-break: break-word;
|
||||
}
|
||||
.el-descriptions-item__label.is-cell { font-size: 12px !important; }
|
||||
|
||||
/* —— el-page-header / 通用业务页 header —— */
|
||||
.app-page-header,
|
||||
.page-header {
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 8px !important;
|
||||
padding: 12px 0 !important;
|
||||
}
|
||||
.app-page-header h2,
|
||||
.page-header h2 { font-size: 17px !important; }
|
||||
|
||||
/* —— 通用容器/卡片 padding 收紧 —— */
|
||||
.app-container,
|
||||
.page-container { padding: 0 !important; }
|
||||
|
||||
/* —— 操作列 el-link 仍行内不折行 —— */
|
||||
.table-actions { flex-wrap: nowrap !important; }
|
||||
}
|
||||
Reference in New Issue
Block a user