/** * CTMS 全局样式系统 * 参考 shadcn-admin 的轻量、中性、分层风格 */ :root { /* 品牌色 - 低饱和蓝灰 */ --ctms-primary: #3f5d75; --ctms-primary-hover: #365067; --ctms-primary-active: #2b4356; --ctms-primary-light: #e6edf2; --ctms-brand-900: #13243a; --ctms-brand-700: #24496f; /* 语义色 */ --ctms-success: #3f8f6b; --ctms-warning: #c58b2a; --ctms-danger: #c24b4b; --ctms-info: #64748b; /* 文字颜色 - 高层级到低层级 */ --ctms-text-main: #0f172a; --ctms-text-regular: #334155; --ctms-text-secondary: #64748b; --ctms-text-disabled: #94a3b8; /* 中性色 & 背景 */ --ctms-bg-base: #f9fafb; --ctms-bg-card: #ffffff; --ctms-bg-muted: #f3f4f6; --ctms-neutral-100: #f5f7fa; --ctms-neutral-300: #d5dce5; --ctms-border-color: #e5e7eb; --ctms-border-color-hover: #cbd5e1; /* 间距 - 8px 网格 */ --ctms-spacing-xs: 4px; --ctms-spacing-sm: 8px; --ctms-spacing-md: 16px; --ctms-spacing-lg: 24px; --ctms-spacing-xl: 32px; /* 圆角 & 阴影 */ --ctms-radius-sm: 6px; --ctms-radius: 10px; --ctms-radius-lg: 12px; --ctms-radius-round: 50%; --ctms-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --ctms-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); --ctms-shadow-md: 0 12px 26px rgba(15, 23, 42, 0.08); --ctms-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.1); /* 动画 */ --ctms-transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1); --ctms-focus-ring: 0 0 0 3px rgba(36, 73, 111, 0.2); /* Element Plus 主色适配 */ --el-color-primary: var(--ctms-primary); --el-color-primary-light-3: #9bb1c2; --el-color-primary-light-5: #c0cdd7; --el-color-primary-light-7: #dde5ec; --el-color-primary-light-8: #eef2f6; --el-color-primary-dark-2: #2b4356; --el-border-radius-base: var(--ctms-radius); --el-border-color: var(--ctms-border-color); --el-text-color-primary: var(--ctms-text-main); --el-text-color-regular: var(--ctms-text-regular); } :root[data-ctms-theme="dark"] { --ctms-primary: #8fb7d4; --ctms-primary-hover: #a7c9df; --ctms-primary-active: #c3dced; --ctms-primary-light: #203145; --ctms-brand-900: #d8e7f4; --ctms-brand-700: #b4d0e5; --ctms-success: #7dd3a8; --ctms-warning: #f1c271; --ctms-danger: #f28b8b; --ctms-info: #a6b4c5; --ctms-text-main: #f8fafc; --ctms-text-regular: #dbe5f1; --ctms-text-secondary: #9aaabd; --ctms-text-disabled: #66788d; --ctms-bg-base: #0f172a; --ctms-bg-card: #172033; --ctms-bg-muted: #111827; --ctms-neutral-100: #182337; --ctms-neutral-300: #334155; --ctms-border-color: #26364a; --ctms-border-color-hover: #3d5068; --ctms-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24); --ctms-shadow: 0 8px 20px rgba(0, 0, 0, 0.32); --ctms-shadow-md: 0 12px 26px rgba(0, 0, 0, 0.36); --ctms-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.42); --el-color-primary: var(--ctms-primary); --el-color-primary-light-3: #567894; --el-color-primary-light-5: #3c5871; --el-color-primary-light-7: #283c50; --el-color-primary-light-8: #203145; --el-color-primary-dark-2: #c3dced; --el-border-color: var(--ctms-border-color); --el-text-color-primary: var(--ctms-text-main); --el-text-color-regular: var(--ctms-text-regular); --el-bg-color: var(--ctms-bg-card); --el-bg-color-overlay: #172033; --el-fill-color-blank: #172033; --el-fill-color-light: #111827; --el-fill-color-lighter: #0f172a; --el-mask-color: rgba(0, 0, 0, 0.62); } /* 全局重置 */ html, body, #app { min-height: 100%; background: var(--ctms-bg-base); } body { margin: 0; font-family: "Manrope", "Segoe UI", sans-serif; background: var(--ctms-bg-base); color: var(--ctms-text-main); -webkit-font-smoothing: antialiased; } :root[data-ctms-theme="dark"] body { background: var(--ctms-bg-base); color: var(--ctms-text-main); } :root[data-ctms-theme="dark"] .el-button--default { background-color: #172033; border-color: #334155; color: var(--ctms-text-regular); } :root[data-ctms-theme="dark"] .el-button--default:hover { border-color: #4b6580; background-color: #1f2d3d; color: var(--ctms-text-main); } :root[data-ctms-theme="dark"] .el-card, :root[data-ctms-theme="dark"] .el-alert, :root[data-ctms-theme="dark"] .el-popper, :root[data-ctms-theme="dark"] .el-dropdown-menu, :root[data-ctms-theme="dark"] .el-popover.el-popper, :root[data-ctms-theme="dark"] .el-dialog { border-color: var(--ctms-border-color); background-color: var(--ctms-bg-card); color: var(--ctms-text-regular); } :root[data-ctms-theme="dark"] .el-card__header { border-bottom-color: var(--ctms-border-color); color: var(--ctms-text-main); } :root[data-ctms-theme="dark"] .el-input__wrapper, :root[data-ctms-theme="dark"] .el-select .el-input__wrapper { background-color: #172033; box-shadow: 0 0 0 1px #334155 inset; } :root[data-ctms-theme="dark"] .el-input__inner { color: var(--ctms-text-main); } :root[data-ctms-theme="dark"] .el-input__inner::placeholder { color: var(--ctms-text-disabled); } :root[data-ctms-theme="dark"] .el-table { background-color: transparent; color: var(--ctms-text-regular); } :root[data-ctms-theme="dark"] .el-table th.el-table__cell { background-color: #111827; color: var(--ctms-text-main); } :root[data-ctms-theme="dark"] .el-table tr, :root[data-ctms-theme="dark"] .el-table td.el-table__cell { background-color: #172033; border-bottom-color: var(--ctms-border-color); } :root[data-ctms-theme="dark"] .el-table--enable-row-hover .el-table__row:hover>td.el-table__cell { background-color: #1f2d3d; } :root[data-ctms-theme="dark"] .el-dropdown-menu__item { color: var(--ctms-text-regular); } :root[data-ctms-theme="dark"] .el-dropdown-menu__item:not(.is-disabled):focus, :root[data-ctms-theme="dark"] .el-dropdown-menu__item:not(.is-disabled):hover { background-color: #1f2d3d; color: var(--ctms-text-main); } :root[data-ctms-theme="dark"] .ctms-state, :root[data-ctms-theme="dark"] .ctms-table-card, :root[data-ctms-theme="dark"] .ctms-section-card { border-color: var(--ctms-border-color); background: var(--ctms-bg-card); } /* Element Plus 全局覆盖 */ /* 按钮美化 */ .el-button { border-radius: var(--ctms-radius); font-weight: 600; transition: var(--ctms-transition); } .el-button--primary:not(.is-plain):not(.is-link):not(.is-text) { background-color: var(--ctms-primary); border-color: var(--ctms-primary); } .el-button--primary:not(.is-plain):not(.is-link):not(.is-text):hover { background-color: var(--ctms-primary-hover); border-color: var(--ctms-primary-hover); } .el-button--default { background-color: #fff; border-color: var(--ctms-border-color); color: var(--ctms-text-regular); } .el-button--default:hover { border-color: var(--ctms-border-color-hover); color: var(--ctms-text-main); } .el-button--danger.is-plain { color: var(--ctms-danger); border-color: rgba(194, 75, 75, 0.4); background-color: rgba(194, 75, 75, 0.04); } .el-button--default, .el-button--primary, .el-button--danger, .el-button--success, .el-button--warning { height: 34px; padding: 0 14px; font-size: 13px; } .el-button--small { height: 28px; padding: 0 10px; font-size: 12px; } .el-button--large { height: 40px; padding: 0 18px; font-size: 14px; } /* 卡片美化 */ .el-card { border: 1px solid var(--ctms-border-color); box-shadow: none !important; border-radius: var(--ctms-radius-lg); margin-bottom: var(--ctms-spacing-md); } .el-card__header { padding: var(--ctms-spacing-md) var(--ctms-spacing-lg); border-bottom: 1px solid var(--ctms-border-color); font-weight: 600; color: var(--ctms-text-main); } .el-card__body { padding: var(--ctms-spacing-lg); } /* 表格美化 */ .el-table { color: var(--ctms-text-regular); width: 100%; max-width: 100%; } .el-table th.el-table__cell { background-color: #f6f7f9; color: var(--ctms-text-main); font-weight: 600; height: 44px; } .el-table td.el-table__cell { padding: 10px 0; } .el-table--enable-row-hover .el-table__row:hover>td.el-table__cell { background-color: #f2f5f8; } /* 表单美化 */ .el-form-item__label { font-weight: 500; color: var(--ctms-text-regular); } .el-input__inner { border-radius: var(--ctms-radius); } .el-input__wrapper { border-radius: var(--ctms-radius); background-color: #ffffff; min-height: 34px; } .el-select .el-input__wrapper { background-color: #ffffff; } .el-input--small .el-input__wrapper, .el-select--small .el-input__wrapper { min-height: 30px; } .el-input--large .el-input__wrapper, .el-select--large .el-input__wrapper { min-height: 40px; } .el-form-item { margin-bottom: 16px; } .ctms-form--dense .el-form-item { margin-bottom: 12px; } .el-form-item__error { color: #b45309; font-size: 12px; } /* 标签美化 */ .el-tag { border-radius: 999px; border: none; } .el-tag--info { background-color: #f5f5f5; color: var(--ctms-text-secondary); } .el-tag--success { background-color: rgba(63, 143, 107, 0.12); color: var(--ctms-success); border: 1px solid rgba(63, 143, 107, 0.2); } .el-tag--warning { background-color: rgba(197, 139, 42, 0.12); color: var(--ctms-warning); border: 1px solid rgba(197, 139, 42, 0.2); } .el-tag--danger { background-color: rgba(194, 75, 75, 0.12); color: var(--ctms-danger); border: 1px solid rgba(194, 75, 75, 0.2); } .el-alert { border: 1px solid var(--ctms-border-color); background-color: #ffffff; } .el-alert__title { font-size: 13px; color: var(--ctms-text-regular); } .el-alert--warning .el-alert__icon { color: var(--ctms-warning); } .el-alert--success .el-alert__icon { color: var(--ctms-success); } .el-alert--error .el-alert__icon { color: var(--ctms-danger); } .el-button.is-disabled, .el-input.is-disabled .el-input__wrapper, .el-select.is-disabled .el-input__wrapper { opacity: 0.6; } .el-empty__description { color: var(--ctms-text-secondary); } .el-skeleton__item { background: linear-gradient(90deg, #f2f3f5 25%, #eceef1 37%, #f2f3f5 63%); } /* 页面结构与筛选区域 */ .ctms-page { display: flex; flex-direction: column; gap: var(--ctms-spacing-lg); } .ctms-page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; } .ctms-page-title { font-size: 22px; font-weight: 600; color: var(--ctms-text-main); margin: 0; } .ctms-page-title, .ctms-page-subtitle, .page-title, .page-subtitle { display: none; } .ctms-page-actions { display: flex; align-items: center; gap: 12px; } .ctms-filter-card { margin-bottom: 0; } .ctms-filter-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .ctms-filter-item { display: flex; flex-direction: column; gap: 4px; min-width: 144px; } .ctms-filter-label { font-size: 12px; font-weight: 600; color: var(--ctms-text-regular); } .ctms-filter-spacer { flex: 1; } .ctms-table-card { margin-bottom: 0; border: 0; border-radius: 0; box-shadow: none !important; background: transparent; } .ctms-table-card>.el-card__body { padding: 0; } .ctms-table .el-table__row { cursor: pointer; } .ctms-pagination { margin-top: 10px; display: flex; justify-content: flex-end; } .ctms-section-card { border: 1px solid var(--ctms-border-color); } .ctms-section-title { font-size: 15px; font-weight: 600; color: var(--ctms-text-main); } .ctms-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .ctms-section-actions { display: flex; gap: 8px; } .ctms-section-card { margin-bottom: 16px; } .ctms-page-subtitle { margin: 6px 0 0; font-size: 13px; color: var(--ctms-text-secondary); } .ctms-descriptions { margin-top: 0; } .ctms-descriptions .el-descriptions__label { font-weight: 500; color: var(--ctms-text-regular); background-color: #f8fafc; } .ctms-tabs .el-tabs__nav-wrap::after { height: 1px; background-color: var(--ctms-border-color); } .ctms-tabs .el-tabs__item { font-weight: 500; color: var(--ctms-text-regular); } .ctms-tabs .el-tabs__item.is-active { color: var(--ctms-primary); font-weight: 600; } /* Unified loading / empty / error states */ .ctms-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 16px; text-align: center; border: 1px solid var(--ctms-border-color); border-radius: var(--ctms-radius); background: #ffffff; } .ctms-state-icon { font-size: 34px; } .ctms-state-title { margin: 0; font-size: 15px; font-weight: 600; } .ctms-state-desc { margin: 0; font-size: 13px; color: var(--ctms-text-secondary); } .ctms-state-action { margin-top: 4px; } .ctms-state-loading .ctms-state-skeleton { width: min(560px, 100%); margin-top: 4px; } /* Tool classes */ .text-main { color: var(--ctms-text-main); } .text-secondary { color: var(--ctms-text-secondary); } .text-danger { color: var(--ctms-danger); } .text-primary { color: var(--ctms-primary); } .font-medium { font-weight: 500; } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .text-xs { font-size: 12px; } .text-sm { font-size: 13px; } /* Desktop workbench density */ .desktop-workbench { --ctms-radius-sm: 5px; --ctms-radius: 6px; --ctms-radius-lg: 8px; --ctms-shadow-sm: none; --ctms-shadow: none; --ctms-shadow-md: none; --ctms-shadow-lg: none; } .desktop-workbench .desktop-route-shell { color: var(--ctms-text-regular); 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, .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, .desktop-workbench .desktop-route-shell .unified-shell, .desktop-workbench .desktop-route-shell .ctms-state, .desktop-workbench .desktop-route-shell .ctms-section-card, .desktop-workbench .desktop-route-shell .ctms-table-card, .desktop-workbench .desktop-route-shell .table-card, .desktop-workbench .desktop-route-shell .detail-card, .desktop-workbench .desktop-route-shell .stats-card, .desktop-workbench .desktop-route-shell .notifications-card, .desktop-workbench .desktop-route-shell .hero-card, .desktop-workbench .desktop-route-shell .hero-banner, .desktop-workbench .desktop-route-shell .faq-hero { 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; } .desktop-workbench .desktop-route-shell .hero-banner, .desktop-workbench .desktop-route-shell .hero-card, .desktop-workbench .desktop-route-shell .faq-hero { min-height: 0; padding: 12px 14px !important; overflow: hidden; } .desktop-workbench .desktop-route-shell .hero-banner::before, .desktop-workbench .desktop-route-shell .hero-banner::after, .desktop-workbench .desktop-route-shell .hero-card::before, .desktop-workbench .desktop-route-shell .hero-card::after, .desktop-workbench .desktop-route-shell .faq-hero::before, .desktop-workbench .desktop-route-shell .faq-hero::after, .desktop-workbench .desktop-route-shell .hero-bg-pattern, .desktop-workbench .desktop-route-shell .hero-accent { display: none !important; } .desktop-workbench .desktop-route-shell .hero-top, .desktop-workbench .desktop-route-shell .hero-content, .desktop-workbench .desktop-route-shell .hero-body { margin-bottom: 8px !important; } .desktop-workbench .desktop-route-shell .hero-title, .desktop-workbench .desktop-route-shell .faq-hero h1 { color: var(--ctms-text-main) !important; font-size: 16px !important; font-weight: 750 !important; line-height: 1.35; } .desktop-workbench .desktop-route-shell .hero-stats, .desktop-workbench .desktop-route-shell .hero-meta, .desktop-workbench .desktop-route-shell .hero-status-row { gap: 6px !important; } .desktop-workbench .desktop-route-shell .hero-stat, .desktop-workbench .desktop-route-shell .hero-status-item { min-height: 0; padding: 8px 10px !important; border: 1px solid #e1e8f0; border-radius: 6px !important; background: #f8fafc !important; box-shadow: none !important; transform: none !important; } .desktop-workbench .desktop-route-shell .table-card-toolbar, .desktop-workbench .desktop-route-shell .ctms-page-header, .desktop-workbench .desktop-route-shell .ctms-section-header { min-height: 0; padding: 9px 12px; border-bottom-color: #d9e2ec; 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, .desktop-workbench .desktop-route-shell .ctms-section-actions { gap: 8px; } .desktop-workbench .desktop-route-shell .el-card__header { padding: 10px 12px; } .desktop-workbench .desktop-route-shell .el-card__body { padding: 12px; } .desktop-workbench .desktop-route-shell .el-button { min-height: 28px; border-radius: 6px; } .desktop-workbench .desktop-route-shell .el-button--small { min-height: 26px; padding: 0 8px; } .desktop-workbench .desktop-route-shell .el-input__wrapper, .desktop-workbench .desktop-route-shell .el-select .el-input__wrapper, .desktop-workbench .desktop-route-shell .el-textarea__inner { border-radius: 6px; min-height: 30px; } .desktop-workbench .desktop-route-shell .el-form-item { margin-bottom: 12px; } .desktop-workbench .desktop-route-shell .el-form-item__label, .desktop-workbench .desktop-route-shell .filter-label, .desktop-workbench .desktop-route-shell .ctms-filter-label { font-size: 11px; font-weight: 700; } .desktop-workbench .desktop-route-shell .form-section { padding-bottom: 4px; } .desktop-workbench .desktop-route-shell .form-section + .form-section { margin-top: 14px; padding-top: 14px; } .desktop-workbench .desktop-route-shell .form-section-title, .desktop-workbench .desktop-route-shell .ctms-section-title { margin-bottom: 10px; 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; border-bottom: 1px solid #d9e2ec !important; background: #f4f7fa; font-size: 11px; } .desktop-workbench .desktop-route-shell .el-table td.el-table__cell { padding: 7px 10px; border-bottom-color: #edf1f5; font-size: 13px; } .desktop-workbench .desktop-route-shell .el-table--enable-row-hover .el-table__row:hover > td.el-table__cell { background-color: #eef4fa; } .desktop-workbench .desktop-route-shell .el-descriptions__cell { 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; } .desktop-workbench .desktop-route-shell .el-drawer__body { padding: 0 18px 4px; } .desktop-workbench .desktop-route-shell .el-drawer__footer { padding: 10px 18px 14px; border-top: 1px solid #d9e2ec; } :root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .el-card, :root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .unified-shell, :root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .ctms-state, :root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .ctms-section-card, :root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .ctms-table-card, :root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .table-card, :root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .detail-card, :root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .stats-card, :root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .notifications-card, :root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .hero-card, :root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .hero-banner, :root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .faq-hero { border-color: #26364a; background: #172033; } :root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .hero-stat, :root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .hero-status-item { border-color: #26364a; background: #111827 !important; } :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; } :root[data-ctms-theme="dark"] .desktop-workbench .desktop-route-shell .el-table td.el-table__cell { border-bottom-color: #26364a; } /* Web workbench edge alignment * Keep page-level spacing consistent with the desktop shell: the route owns * the full main-content canvas while cards and sections own their inner * padding. This also replaces page-specific negative-margin workarounds. */ @media (min-width: 768px) { .web-layout-container .ctms-route-shell { width: 100%; height: 100%; min-height: 0; box-sizing: border-box; } .web-layout-container .ctms-route-shell > * { width: 100%; min-width: 0; min-height: 100%; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; } .web-layout-container .ctms-route-shell > .page, .web-layout-container .ctms-route-shell > .ctms-page, .web-layout-container .ctms-route-shell > .ctms-page-shell, .web-layout-container .ctms-route-shell > .module-page, .web-layout-container .ctms-route-shell > .medical-consult-page { gap: 8px; } .web-layout-container .ctms-route-shell .page-inner, .web-layout-container .ctms-route-shell .page-body, .web-layout-container .ctms-route-shell .main-content, .web-layout-container .ctms-route-shell .main-content-card, .web-layout-container .ctms-route-shell .main-content-flat, .web-layout-container .ctms-route-shell .study-home-container, .web-layout-container .ctms-route-shell .overview, .web-layout-container .ctms-route-shell .content-area { min-width: 0; max-width: none; width: 100%; margin-right: 0 !important; margin-left: 0 !important; padding-right: 0 !important; padding-left: 0 !important; } .web-layout-container .ctms-route-shell > .page > .table-card, .web-layout-container .ctms-route-shell > .page > .page-inner > .table-card, .web-layout-container .ctms-route-shell > .page.page--flush > .unified-shell, .web-layout-container .ctms-route-shell > .ctms-page-shell.page--flush > .unified-shell { width: 100%; margin: 0 !important; border-radius: 0 !important; } } /* ============================================================ * 全局弹窗定位修复:弹窗仅显示在主内容区域,不覆盖左侧菜单栏 * --ctms-sidebar-width 由 Layout.vue 在 body 上动态设置 * ============================================================ */ /* ElMessage 提示消息:按“主内容区域”居中(而非全窗口/左上角) */ .el-message { left: calc((100% + var(--ctms-sidebar-width, 0px)) / 2) !important; margin-left: 0 !important; transform: translateX(-50%) !important; } /* ElMessageBox / ElDialog 遮罩层:左侧偏移侧边栏宽度,只覆盖主内容区域 */ .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 :where(.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 :where(.el-dialog) { max-width: min(calc(100vw - 72px), var(--el-dialog-width, 960px)); } /* 这些对话框的内容区已具备独立结构,移除桌面端通用的外层卡片外壳。 */ body.is-desktop-runtime .profile-settings-dialog, body.is-desktop-runtime .desktop-preferences-dialog, body.is-desktop-runtime .user-form-dialog, body.is-desktop-runtime .reset-password-dialog, body.is-desktop-runtime .project-form-dialog, body.is-desktop-runtime .pdf-preview-dialog--flush { overflow: visible !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; } body.is-desktop-runtime .pdf-preview-dialog--flush { padding: 0 !important; } body.is-desktop-runtime .pdf-preview-dialog--flush .el-dialog__body { height: 100%; padding: 0 !important; background: transparent !important; } body.is-desktop-runtime .pdf-preview-dialog--flush .pdf-viewer { box-sizing: border-box; overflow: hidden; border: 1px solid rgba(148, 163, 184, 0.42); border-radius: 12px; box-shadow: 0 28px 84px rgba(15, 23, 42, 0.26), 0 1px 0 rgba(255, 255, 255, 0.82) inset; } 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 :where(.el-dialog__body) { padding: 14px; color: #334155; font-size: 13px; } /* 账号表单去掉外框后,内容区仍需作为标题与底栏之间的连续面板。 */ body.is-desktop-runtime .user-form-dialog .el-dialog__body, body.is-desktop-runtime .reset-password-dialog .el-dialog__body, body.is-desktop-runtime .project-form-dialog .el-dialog__body { background: rgba(248, 250, 252, 0.98); } /* 账号操作弹窗保留单层面板:以小圆角和细边框明确边界,关闭按钮置于标题栏内。 */ body.is-desktop-runtime .user-form-dialog, body.is-desktop-runtime .reset-password-dialog, body.is-desktop-runtime .project-form-dialog { padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(148, 163, 184, 0.5) !important; border-radius: 8px !important; } body.is-desktop-runtime .user-form-dialog .el-dialog__headerbtn, body.is-desktop-runtime .reset-password-dialog .el-dialog__headerbtn, body.is-desktop-runtime .project-form-dialog .el-dialog__headerbtn { top: 5px; right: 7px; width: 28px; height: 28px; } body.is-desktop-runtime .desktop-preferences-dialog { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } body.is-desktop-runtime .desktop-preferences-dialog .el-dialog__body { height: 700px; max-height: calc(100vh - 96px); padding: 0; background: transparent !important; } 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 .user-form-dialog, :root[data-ctms-theme="dark"] body.is-desktop-runtime .reset-password-dialog, :root[data-ctms-theme="dark"] body.is-desktop-runtime .project-form-dialog, :root[data-ctms-theme="dark"] body.is-desktop-runtime .desktop-preferences-dialog .el-dialog__body { background: transparent !important; } :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 .user-form-dialog .el-dialog__body, :root[data-ctms-theme="dark"] body.is-desktop-runtime .reset-password-dialog .el-dialog__body, :root[data-ctms-theme="dark"] body.is-desktop-runtime .project-form-dialog .el-dialog__body { background: rgba(17, 24, 39, 0.98); } :root[data-ctms-theme="dark"] body.is-desktop-runtime .user-form-dialog, :root[data-ctms-theme="dark"] body.is-desktop-runtime .reset-password-dialog, :root[data-ctms-theme="dark"] body.is-desktop-runtime .project-form-dialog { border-color: rgba(71, 85, 105, 0.9) !important; } :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; } } .ctms-updated-at { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 12px !important; color: #64748b !important; font-weight: 400 !important; line-height: 1.5 !important; white-space: nowrap !important; } :root[data-ctms-theme="dark"] .ctms-updated-at { color: #94a3b8 !important; } /* 触发弹窗/新视窗的专属物理按钮动效 */ .ctms-btn-dialog { transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease !important; font-weight: 550 !important; } .ctms-btn-dialog:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.12) !important; } .ctms-btn-dialog.primary-dialog:hover { box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25) !important; } .ctms-btn-dialog:active { transform: translateY(1px) !important; box-shadow: none !important; } .ctms-btn-link-dialog { font-weight: 600 !important; transition: color 0.15s ease, opacity 0.15s ease !important; } .ctms-btn-link-dialog:hover { opacity: 0.85 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* 专属物理按钮圆角胶囊与渐变色方案 */ /* 1. 危险/高危胶囊(查看异常分析) */ .ctms-btn-capsule-danger { background: #fff5f5 !important; color: #e11d48 !important; border: 1px solid #fee2e2 !important; border-radius: 999px !important; font-size: 11px !important; height: 24px !important; padding: 0 10px !important; } .ctms-btn-capsule-danger:hover { background: #ffe4e6 !important; border-color: #fecdd3 !important; color: #be123c !important; } /* 2. 统计/排行胶囊(IP访问排行) */ .ctms-btn-capsule-info { background: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #dbeafe !important; border-radius: 999px !important; } .ctms-btn-capsule-info:hover { background: #dbeafe !important; border-color: #bfdbfe !important; color: #1e40af !important; } /* 3. 靛紫渐变胶囊(安全日志) */ .ctms-btn-gradient-indigo { background: linear-gradient(135deg, #4f46e5, #6366f1) !important; color: #ffffff !important; border: none !important; border-radius: 999px !important; box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15) !important; } .ctms-btn-gradient-indigo:hover { background: linear-gradient(135deg, #4338ca, #4f46e5) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important; } /* 4. 蓝绿双向渐变胶囊(访问日志) */ .ctms-btn-gradient-blue { background: linear-gradient(135deg, #0284c7, #0369a1) !important; color: #ffffff !important; border: none !important; border-radius: 999px !important; box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15) !important; } .ctms-btn-gradient-blue:hover { background: linear-gradient(135deg, #0369a1, #075985) !important; 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; } }