优化桌面端界面布局
This commit is contained in:
Cheng Zhou
@@ -654,10 +654,34 @@ body {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell.page,
|
||||
.desktop-workbench .desktop-route-shell.ctms-page,
|
||||
.desktop-workbench .desktop-route-shell.ctms-page-shell,
|
||||
.desktop-workbench .desktop-route-shell.module-page,
|
||||
.desktop-workbench .desktop-route-shell.medical-consult-page {
|
||||
min-width: 0;
|
||||
gap: 8px;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .page,
|
||||
.desktop-workbench .desktop-route-shell .ctms-page {
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
.desktop-workbench .desktop-route-shell .ctms-page,
|
||||
.desktop-workbench .desktop-route-shell .ctms-page-shell,
|
||||
.desktop-workbench .desktop-route-shell .page-body,
|
||||
.desktop-workbench .desktop-route-shell .page-inner,
|
||||
.desktop-workbench .desktop-route-shell .main-content,
|
||||
.desktop-workbench .desktop-route-shell .main-content-card,
|
||||
.desktop-workbench .desktop-route-shell .main-content-flat,
|
||||
.desktop-workbench .desktop-route-shell .study-home-container,
|
||||
.desktop-workbench .desktop-route-shell .overview,
|
||||
.desktop-workbench .desktop-route-shell .overview-grid,
|
||||
.desktop-workbench .desktop-route-shell .content-area {
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .el-card,
|
||||
@@ -675,6 +699,25 @@ body {
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 6px !important;
|
||||
background: #ffffff;
|
||||
margin: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* page--flush 场景：表格铺满全屏，不需要圆角（desktop-route-shell 与 page--flush 在同一元素上）*/
|
||||
.desktop-workbench .desktop-route-shell.page--flush > .unified-shell,
|
||||
.desktop-workbench .desktop-route-shell.page--flush > .ctms-table-card {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* 药品流向管理页面桌面端：table-card 铺满，去圆角 */
|
||||
.desktop-workbench .desktop-route-shell .shipment-page--desktop .table-card {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* 设备管理页面桌面端：table-card 铺满，去圆角 */
|
||||
.desktop-workbench .desktop-route-shell .equipment-page--desktop .table-card {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
@@ -700,7 +743,7 @@ body {
|
||||
.desktop-workbench .desktop-route-shell .hero-top,
|
||||
.desktop-workbench .desktop-route-shell .hero-content,
|
||||
.desktop-workbench .desktop-route-shell .hero-body {
|
||||
margin-bottom: 10px !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .hero-title,
|
||||
@@ -737,6 +780,26 @@ body {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .ctms-table-card,
|
||||
.desktop-workbench .desktop-route-shell .ctms-section-card,
|
||||
.desktop-workbench .desktop-route-shell .detail-card,
|
||||
.desktop-workbench .desktop-route-shell .section-card,
|
||||
.desktop-workbench .desktop-route-shell .form-card,
|
||||
.desktop-workbench .desktop-route-shell .stats-card,
|
||||
.desktop-workbench .desktop-route-shell .notifications-card,
|
||||
.desktop-workbench .desktop-route-shell .es-detail-card,
|
||||
.desktop-workbench .desktop-route-shell .kpi-enterprise {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .ctms-table-card + .ctms-table-card,
|
||||
.desktop-workbench .desktop-route-shell .ctms-section-card + .ctms-section-card,
|
||||
.desktop-workbench .desktop-route-shell .detail-card + .section-card,
|
||||
.desktop-workbench .desktop-route-shell .section-card + .section-card,
|
||||
.desktop-workbench .desktop-route-shell .form-card + .form-card {
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .toolbar-filters,
|
||||
.desktop-workbench .desktop-route-shell .toolbar-right,
|
||||
.desktop-workbench .desktop-route-shell .ctms-page-actions,
|
||||
@@ -795,6 +858,49 @@ body {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .page-bg-dots,
|
||||
.desktop-workbench .desktop-route-shell .decorative-bg,
|
||||
.desktop-workbench .desktop-route-shell .hero-decoration {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .unified-action-bar,
|
||||
.desktop-workbench .desktop-route-shell .module-header {
|
||||
min-height: 0;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid #d9e2ec;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .module-title {
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .module-subtitle {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .module-content,
|
||||
.desktop-workbench .desktop-route-shell .unified-section {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .module-placeholder-surface {
|
||||
min-height: 118px;
|
||||
border: 1px dashed #cbd7e5;
|
||||
border-radius: 6px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .module-placeholder-main {
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .el-table th.el-table__cell {
|
||||
height: 34px;
|
||||
padding: 8px 10px;
|
||||
@@ -817,6 +923,19 @@ body {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .el-pagination {
|
||||
--el-pagination-button-height: 26px;
|
||||
--el-pagination-button-width: 26px;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .el-radio-button__inner {
|
||||
min-height: 26px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.desktop-workbench .desktop-route-shell .el-drawer__header {
|
||||
margin-bottom: 0;
|
||||
padding: 14px 18px 8px;
|
||||
@@ -856,10 +975,17 @@ body {
|
||||
:root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .table-card-toolbar,
|
||||
:root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .ctms-page-header,
|
||||
:root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .ctms-section-header,
|
||||
:root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .unified-action-bar,
|
||||
:root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .module-header,
|
||||
:root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .el-drawer__footer {
|
||||
border-color: #26364a;
|
||||
}
|
||||
|
||||
:root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .module-placeholder-surface {
|
||||
border-color: #31435b;
|
||||
background: #111827;
|
||||
}
|
||||
|
||||
:root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .el-table th.el-table__cell {
|
||||
border-bottom-color: #26364a !important;
|
||||
background: #111827;
|
||||
@@ -885,3 +1011,208 @@ body {
|
||||
.el-overlay {
|
||||
left: var(--ctms-sidebar-width, 0px) !important;
|
||||
}
|
||||
|
||||
/* Desktop runtime modal surfaces */
|
||||
body.is-desktop-runtime .el-message {
|
||||
left: 50% !important;
|
||||
min-height: 32px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.32);
|
||||
border-radius: 8px;
|
||||
background: rgba(248, 250, 252, 0.96);
|
||||
box-shadow: 0 16px 42px rgba(15, 23, 42, 0.16);
|
||||
backdrop-filter: blur(16px) saturate(140%);
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-overlay {
|
||||
left: 0 !important;
|
||||
background: rgba(15, 23, 42, 0.22);
|
||||
backdrop-filter: blur(12px) saturate(135%);
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-overlay-dialog,
|
||||
body.is-desktop-runtime .el-overlay-message-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 52px 32px 32px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-dialog,
|
||||
body.is-desktop-runtime .el-message-box {
|
||||
overflow: hidden;
|
||||
margin: 0 auto !important;
|
||||
border: 1px solid rgba(148, 163, 184, 0.42);
|
||||
border-radius: 12px;
|
||||
background: rgba(248, 250, 252, 0.98);
|
||||
box-shadow:
|
||||
0 28px 84px rgba(15, 23, 42, 0.26),
|
||||
0 1px 0 rgba(255, 255, 255, 0.82) inset;
|
||||
backdrop-filter: blur(18px) saturate(145%);
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-dialog {
|
||||
max-width: min(calc(100vw - 72px), var(--el-dialog-width, 960px));
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-message-box {
|
||||
width: min(420px, calc(100vw - 72px));
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-dialog__header,
|
||||
body.is-desktop-runtime .el-message-box__header {
|
||||
min-height: 38px;
|
||||
margin: 0;
|
||||
padding: 10px 42px 9px 14px;
|
||||
border-bottom: 1px solid rgba(203, 213, 225, 0.82);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.92));
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-dialog__title,
|
||||
body.is-desktop-runtime .el-message-box__title {
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-dialog__headerbtn,
|
||||
body.is-desktop-runtime .el-message-box__headerbtn {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-dialog__headerbtn .el-dialog__close,
|
||||
body.is-desktop-runtime .el-message-box__headerbtn .el-message-box__close {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-dialog__body {
|
||||
padding: 14px;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .desktop-preferences-dialog {
|
||||
background: #f2f4f7;
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .desktop-preferences-dialog .el-dialog__body {
|
||||
padding: 0;
|
||||
background: #f2f4f7;
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-dialog__footer,
|
||||
body.is-desktop-runtime .el-message-box__btns {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 10px 14px 12px;
|
||||
border-top: 1px solid rgba(226, 232, 240, 0.92);
|
||||
background: rgba(241, 245, 249, 0.76);
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-message-box__content {
|
||||
padding: 16px 14px 14px;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-message-box__message {
|
||||
color: #334155;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-message-box__status {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-message-box__input {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .el-dialog__footer .el-button,
|
||||
body.is-desktop-runtime .el-message-box__btns .el-button {
|
||||
min-height: 28px;
|
||||
padding: 0 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .dialog-fade-enter-active .el-dialog,
|
||||
body.is-desktop-runtime .dialog-fade-leave-active .el-dialog,
|
||||
body.is-desktop-runtime .msgbox-fade-enter-active .el-message-box,
|
||||
body.is-desktop-runtime .msgbox-fade-leave-active .el-message-box {
|
||||
transition: opacity 130ms ease, transform 150ms ease;
|
||||
}
|
||||
|
||||
body.is-desktop-runtime .dialog-fade-enter-from .el-dialog,
|
||||
body.is-desktop-runtime .dialog-fade-leave-to .el-dialog,
|
||||
body.is-desktop-runtime .msgbox-fade-enter-from .el-message-box,
|
||||
body.is-desktop-runtime .msgbox-fade-leave-to .el-message-box {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px) scale(0.985);
|
||||
}
|
||||
|
||||
:root[data-ctms-theme="dark"] body.is-desktop-runtime .el-message {
|
||||
border-color: rgba(71, 85, 105, 0.7);
|
||||
background: rgba(17, 24, 39, 0.94);
|
||||
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36);
|
||||
}
|
||||
|
||||
:root[data-ctms-theme="dark"] body.is-desktop-runtime .el-overlay {
|
||||
background: rgba(2, 6, 23, 0.42);
|
||||
}
|
||||
|
||||
:root[data-ctms-theme="dark"] body.is-desktop-runtime .el-dialog,
|
||||
:root[data-ctms-theme="dark"] body.is-desktop-runtime .el-message-box {
|
||||
border-color: rgba(51, 65, 85, 0.92);
|
||||
background: rgba(17, 24, 39, 0.98);
|
||||
box-shadow:
|
||||
0 28px 84px rgba(0, 0, 0, 0.42),
|
||||
0 1px 0 rgba(148, 163, 184, 0.12) inset;
|
||||
color: #e5edf7;
|
||||
}
|
||||
|
||||
:root[data-ctms-theme="dark"] body.is-desktop-runtime .desktop-preferences-dialog,
|
||||
:root[data-ctms-theme="dark"] body.is-desktop-runtime .desktop-preferences-dialog .el-dialog__body {
|
||||
background: #0f1721;
|
||||
}
|
||||
|
||||
:root[data-ctms-theme="dark"] body.is-desktop-runtime .el-dialog__header,
|
||||
:root[data-ctms-theme="dark"] body.is-desktop-runtime .el-message-box__header {
|
||||
border-bottom-color: rgba(51, 65, 85, 0.92);
|
||||
background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(17, 24, 39, 0.94));
|
||||
}
|
||||
|
||||
:root[data-ctms-theme="dark"] body.is-desktop-runtime .el-dialog__title,
|
||||
:root[data-ctms-theme="dark"] body.is-desktop-runtime .el-message-box__title {
|
||||
color: #e5edf7;
|
||||
}
|
||||
|
||||
:root[data-ctms-theme="dark"] body.is-desktop-runtime .el-dialog__body,
|
||||
:root[data-ctms-theme="dark"] body.is-desktop-runtime .el-message-box__content,
|
||||
:root[data-ctms-theme="dark"] body.is-desktop-runtime .el-message-box__message {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
:root[data-ctms-theme="dark"] body.is-desktop-runtime .el-dialog__footer,
|
||||
:root[data-ctms-theme="dark"] body.is-desktop-runtime .el-message-box__btns {
|
||||
border-top-color: rgba(51, 65, 85, 0.92);
|
||||
background: rgba(15, 23, 42, 0.78);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
body.is-desktop-runtime .dialog-fade-enter-active .el-dialog,
|
||||
body.is-desktop-runtime .dialog-fade-leave-active .el-dialog,
|
||||
body.is-desktop-runtime .msgbox-fade-enter-active .el-message-box,
|
||||
body.is-desktop-runtime .msgbox-fade-leave-active .el-message-box {
|
||||
transition-duration: 1ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user