feat(工作台): 优化入口布局与连接安全状态
This commit is contained in:
Cheng Zhou
@@ -1377,3 +1377,309 @@ body.is-desktop-runtime .msgbox-fade-leave-to .el-message-box {
|
||||
color: #ffffff !important;
|
||||
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Responsive layout foundation
|
||||
*
|
||||
* 页面组件来自多个业务模块，统一在这里处理“可收缩容器”和常见
|
||||
* 操作栏的换行；具体页面仍可针对自身信息密度补充局部规则。
|
||||
* ============================================================ */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
img,
|
||||
svg,
|
||||
video,
|
||||
canvas {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.page,
|
||||
.page-inner,
|
||||
.page-body,
|
||||
.page-header,
|
||||
.ctms-page,
|
||||
.ctms-page-shell,
|
||||
.ctms-route-shell,
|
||||
.desktop-route-shell,
|
||||
.main-content,
|
||||
.main-content-card,
|
||||
.main-content-flat,
|
||||
.table-card,
|
||||
.unified-shell,
|
||||
.content-area,
|
||||
.module-content {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.page > *,
|
||||
.page-inner > *,
|
||||
.page-body > *,
|
||||
.ctms-page > *,
|
||||
.ctms-page-shell > *,
|
||||
.table-card > *,
|
||||
.unified-shell > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.table-card-toolbar,
|
||||
.ctms-page-header,
|
||||
.ctms-page-header-row,
|
||||
.page-header,
|
||||
.section-card-header,
|
||||
.section-card-title-row,
|
||||
.hero-top,
|
||||
.toolbar-left,
|
||||
.toolbar-right,
|
||||
.filter-form,
|
||||
.filter-container,
|
||||
.ctms-filter-row,
|
||||
.ctms-page-actions,
|
||||
.ctms-section-actions {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.el-table,
|
||||
.el-table__inner-wrapper,
|
||||
.el-table__header-wrapper,
|
||||
.el-table__body-wrapper,
|
||||
.el-table__footer-wrapper {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.el-table__header-wrapper,
|
||||
.el-table__body-wrapper,
|
||||
.el-table__footer-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.el-form,
|
||||
.el-form-item,
|
||||
.el-form-item__content,
|
||||
.el-input,
|
||||
.el-select,
|
||||
.el-date-editor,
|
||||
.el-cascader,
|
||||
.el-tree-select {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.table-card-toolbar,
|
||||
.ctms-page-header,
|
||||
.ctms-page-header-row,
|
||||
.page-header,
|
||||
.section-card-header,
|
||||
.hero-top {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-form,
|
||||
.ctms-filter-row {
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-item,
|
||||
.ctms-filter-item {
|
||||
flex: 1 1 168px;
|
||||
min-width: min(168px, 100%);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.filter-input,
|
||||
.filter-select,
|
||||
.filter-item .el-input,
|
||||
.filter-item .el-select,
|
||||
.ctms-filter-item .el-input,
|
||||
.ctms-filter-item .el-select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.hero-stats,
|
||||
.stats-grid,
|
||||
.overview-grid,
|
||||
.kpi-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
max-width: calc(100vw - 32px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.page,
|
||||
.ctms-page,
|
||||
.ctms-page-shell {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.table-card-toolbar,
|
||||
.ctms-page-header,
|
||||
.ctms-page-header-row,
|
||||
.page-header,
|
||||
.section-card-header,
|
||||
.hero-top {
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.table-card-toolbar > .toolbar-filters,
|
||||
.table-card-toolbar > .toolbar-right,
|
||||
.ctms-page-header > .ctms-page-actions,
|
||||
.ctms-page-header-row > .ctms-page-actions,
|
||||
.page-header > .actions,
|
||||
.page-header > .page-actions {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.toolbar-filters,
|
||||
.filter-form,
|
||||
.ctms-filter-row,
|
||||
.ctms-page-actions,
|
||||
.ctms-section-actions,
|
||||
.filter-actions,
|
||||
.toolbar-right {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-item,
|
||||
.ctms-filter-item,
|
||||
.filter-input,
|
||||
.filter-select,
|
||||
.filter-item .el-input,
|
||||
.filter-item .el-select,
|
||||
.ctms-filter-item .el-input,
|
||||
.ctms-filter-item .el-select {
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ctms-filter-spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ctms-page-actions,
|
||||
.ctms-section-actions,
|
||||
.toolbar-right,
|
||||
.filter-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.ctms-page-actions .el-button,
|
||||
.ctms-section-actions .el-button,
|
||||
.toolbar-right .el-button,
|
||||
.filter-actions .el-button {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.hero-stats,
|
||||
.stats-grid,
|
||||
.overview-grid,
|
||||
.kpi-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
|
||||
}
|
||||
|
||||
.section-card-header,
|
||||
.section-card-title-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.el-drawer {
|
||||
width: min(620px, calc(100vw - 16px)) !important;
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
padding-right: 14px;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
width: calc(100vw - 24px) !important;
|
||||
max-width: calc(100vw - 24px) !important;
|
||||
margin: 12px auto !important;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
max-height: calc(100dvh - 148px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
max-width: 100%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
row-gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.page-title,
|
||||
.ctms-page-title {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.page-subtitle,
|
||||
.ctms-page-subtitle {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.hero-stats,
|
||||
.stats-grid,
|
||||
.overview-grid,
|
||||
.kpi-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏内容密度：统计卡片与概览网格随可用宽度舒展。 */
|
||||
@media (min-width: 1440px) {
|
||||
.hero-stats,
|
||||
.stats-grid,
|
||||
.overview-grid,
|
||||
.kpi-grid {
|
||||
gap: 16px !important;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
|
||||
}
|
||||
|
||||
.ctms-page-content-grid {
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.hero-stats,
|
||||
.stats-grid,
|
||||
.overview-grid,
|
||||
.kpi-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user