/** * UI06 全局视觉对齐层(admin-preview-2026-09-22 示例基准) * 冲突时以示例为准(方案 §0);本文件只做浅色主题覆盖,深色主题保持可用不重设计。 * 示例 token 对照:docs/designs/admin-preview-2026-09-22/styles.css `:root` */ /* ── 浅色主题变量对齐 ── */ :root { /* 工作区背景 #F5F7FA(示例 --bg) */ --default-bg-color: #f5f7fa; /* 边框 #E5EAF1(示例 --line) */ --art-card-border: #e5eaf1; --default-border: #e5eaf1; --default-border-dashed: #e5eaf1; /* Element 基准字号/圆角(示例正文 12–13px、控件 8px) */ --el-font-size-base: 13px; --el-border-radius-base: 8px; } /* ── 字体(示例:系统无衬线栈,Windows 中文优先 Microsoft YaHei) ── */ body { font: 13px/1.55 system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; } /* ── 卡片:白底 + 1px 边框 + 12px 圆角,无重阴影(示例 .card) ── */ .el-card { --el-card-border-color: #e5eaf1; --el-card-border-radius: 12px; border-radius: 12px; border: 1px solid #e5eaf1; box-shadow: none; &.is-always-shadow, &.is-hover-shadow:hover { box-shadow: none; } } /* ── 按钮:38px 高、8px 圆角(示例 .btn) ── */ .el-button { min-height: 38px; border-radius: 8px; font-weight: 550; &--small { min-height: 30px; } } /* ── 输入/选择器:38px 高(示例 .input) ── */ .el-input__wrapper, .el-select__wrapper, .el-textarea__inner { border-radius: 8px; } .el-input .el-input__inner { height: 38px; } /* ── 表格:浅底表头 + 轻分隔(示例 .data-table) ── */ .el-table { --el-table-header-bg-color: #f7f9fc; --el-table-header-text-color: #8291a6; --el-table-row-hover-bg-color: #f5f8fd; --el-table-border-color: #eef1f5; th.el-table__cell { font-size: 11px; font-weight: 500; } .el-table__cell { padding: 13px 0; } } /* ── 对话框:16px 圆角(示例 .dialog) ── */ .el-dialog { --el-dialog-border-radius: 16px; } /* ── 标签(状态 pill 基调:10–11px、6px 圆角) ── */ .el-tag { border-radius: 6px; font-size: 11px; } /* ── 分段(示例 .seg:#edf1f7 轨道、选中白底蓝字) ── */ .el-segmented { --el-border-radius-base: 8px; background-color: #edf1f7; padding: 3px; .el-segmented__item-selected { background-color: #ffffff; color: var(--el-color-primary); } } /* ── 页面标题层级(示例:页面 27px / 卡片 17px) ── */ .el-breadcrumb { font-size: 12px; } /* ── 焦点可见(示例 focus-visible 3px 蓝框) ── */ .el-button:focus-visible, .el-input__inner:focus-visible, .el-select__wrapper:focus-visible { outline: 3px solid #9fc7ff; outline-offset: 2px; } /* ══════════ 治理页通用(示例 .workspace / .page-heading / .stats / .stat / .info-strip) ══════════ */ .ui06-page { max-width: 1660px; padding: 28px 30px 44px; margin: auto; } .ui06-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; h1 { font-size: 27px; letter-spacing: -0.7px; line-height: 1.4; } > div > p { margin-top: 6px; font-size: 12px; color: #7b899f; } .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } } /* 三列统计卡(示例 .stats / .stat) */ .ui06-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; .ui06-stat { padding: 21px; background: #ffffff; border: 1px solid #e5eaf1; border-radius: 12px; p { font-size: 11px; color: #8797ac; } strong { display: block; margin: 9px 0 4px; font-size: 27px; font-weight: 650; letter-spacing: -0.6px; .unit { font-size: 17px; font-weight: 600; } } small { font-size: 10px; color: #97a4b5; } } } /* 提示条(示例 .info-strip) */ .ui06-info-strip { display: flex; gap: 9px; align-items: center; padding: 12px 16px; margin-bottom: 20px; font-size: 12px; color: #6480a8; background: #edf4fe; border: 1px solid #e2edfc; border-radius: 9px; } @media (max-width: 900px) { .ui06-stats { grid-template-columns: 1fr; gap: 10px; } .ui06-page { padding: 20px 14px 40px; } .ui06-page-heading { flex-direction: column; align-items: flex-start; gap: 12px; } } /* 卡片头标题(示例 .card-head h2 17px) */ .ui06-card-title { font-size: 17px; font-weight: 600; line-height: 1.4; }