:root { --color-brand: #2b1f99; --color-brand-strong: #1d166b; --color-brand-muted: #33269f; --color-brand-soft: #eceaf8; --color-accent: #3ad4d8; --color-accent-strong: #17a9ad; --color-accent-soft: #e5fbfc; --color-accent-alpha: rgba(58, 212, 216, 0.1); --color-accent-focus: rgba(58, 212, 216, 0.22); --color-bg: #f5f8fa; --color-surface: #ffffff; --color-surface-subtle: #f8fafc; --color-surface-muted: #f3f6f9; --color-surface-elevated: #ffffff; --color-border: #dfe7ee; --color-border-soft: #edf2f6; --color-text: #18212f; --color-text-secondary: #5f6b7a; --color-text-muted: #8a97a8; --color-success: #2e9d65; --color-warning: #c98219; --color-danger: #c94a4a; --color-info: #4c6f91; --color-grade-s: #0d7a5f; --color-grade-a: #2e9d65; --color-grade-b: #4c6f91; --color-grade-c: #c94a4a; --color-medical: #1a6b7a; --color-surface-tint-brand: #f4f3fb; --color-surface-tint-success: #f0f7f3; --color-surface-tint-warning: #faf6ee; --color-surface-tint-danger: #faf2f2; --color-surface-tint-info: #edf8f9; --color-white: #ffffff; --color-sidebar-end: #120d4a; --color-sidebar-text: rgba(255, 255, 255, 0.72); --color-sidebar-muted: rgba(255, 255, 255, 0.5); --color-sidebar-border: rgba(255, 255, 255, 0.1); --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 24px; --font-size-3xl: 32px; --shadow-panel: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-popover: 0 12px 28px rgba(15, 23, 42, 0.12); --layout-sidebar: 220px; --layout-topbar: 52px; /* 间距阶梯(8 的倍数) */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; --spacing-2xl: 32px; /* 过渡 */ --transition-fast: 0.2s ease; --el-color-primary: var(--color-brand); --el-color-primary-light-3: #5544b8; --el-color-primary-light-5: #7a6bc9; --el-color-primary-light-7: #a096dc; --el-color-primary-light-8: #c5beea; --el-color-primary-light-9: #e2def6; --el-color-primary-dark-2: var(--color-brand-strong); --el-border-radius-base: var(--radius-sm); /* ===== v2 增量 token(信息架构重构,只增不改)===== */ /* 数据表格系统 */ --table-row-height: 40px; --table-row-height-compact: 32px; --table-header-bg: var(--color-surface-subtle, #f8fafc); --table-row-hover: var(--color-surface-muted, #f3f6f9); --table-row-group-bg: var(--color-surface-tint-brand, rgba(43, 31, 153, 0.03)); --table-border: var(--color-border-soft, #edf2f6); /* 工具栏顶栏(替代 page-hero)*/ --toolbar-height: 48px; --toolbar-bg: var(--color-surface-subtle, #f8fafc); --toolbar-border: var(--color-border, #dfe7ee); /* 状态色点(替代 effect="dark" round tag)*/ --dot-size: 6px; /* 区段色带标题 */ --section-band-bg: var(--color-surface-tint-info, rgba(58, 212, 216, 0.08)); --section-band-color: var(--color-medical, #0d7a5f); --section-band-font-size: 11px; --section-band-letter-spacing: 0.3px; /* 大写小字标签(表头/字段名)*/ --label-uppercase: uppercase; --label-letter-spacing: 0.5px; --label-font-size: 10px; /* 侧边栏 v2 加深 */ --color-sidebar-bg: #1d166b; /* 登录页品牌区渐变 */ --color-login-brand-from: #1d166b; --color-login-brand-to: #120d4a; /* ===== v3 手术观测台壳层 token ===== */ --shell-rail-width: 64px; --shell-context-width: 176px; --shell-status-height: 36px; --page-context-height: 64px; --workspace-bg: #f5f8fa; --workspace-surface: #ffffff; --shell-bg-deep: #120d4a; --shell-bg: #1d166b; --motion-fast: 160ms ease; } /* ===== 手术观测台字体 ===== */ /* WOFF2 文件需从官方发行包提取并放入 src/assets/fonts/ */ /* Source Han Sans SC: https://github.com/adobe-fonts/source-han-sans */ /* IBM Plex Sans: https://github.com/IBM/plex */ @font-face { font-family: 'Source Han Sans SC'; src: local('Source Han Sans SC'), local('Noto Sans CJK SC'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Han Sans SC'; src: local('Source Han Sans SC Medium'), local('Noto Sans CJK SC Medium'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: local('IBM Plex Sans'); font-weight: 400; font-style: normal; font-display: swap; } * { box-sizing: border-box; } html, body, #app { min-height: 100%; } body { margin: 0; color: var(--color-text); background: var(--color-bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; } button, input, textarea, select { font: inherit; } a { color: inherit; }