213 lines
9.3 KiB
CSS
213 lines
9.3 KiB
CSS
:root {
|
|
--admin-sidebar: #f8fbfe;
|
|
--admin-sidebar-deep: #edf3f9;
|
|
--admin-sidebar-text: #536a81;
|
|
--admin-primary: #4f78a5;
|
|
--admin-primary-strong: #2f5d8b;
|
|
--admin-primary-soft: #e7f0f8;
|
|
--admin-bg: #f4f7fb;
|
|
--admin-border: #d8e3ee;
|
|
--admin-text: #24384d;
|
|
--admin-muted: #5b6f83;
|
|
font-family: Inter, "SF Pro Display", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
|
|
/* Element Plus 主题对齐 admin.html 蓝白浅色皮肤（EP_ALIGN/241 单源，勿单独改色值） */
|
|
--el-color-primary: #4f78a5;
|
|
--el-color-primary-light-3: #7d9abf;
|
|
--el-color-primary-light-5: #a5bad2;
|
|
--el-color-primary-light-7: #cddbe6;
|
|
--el-color-primary-light-8: #e1e9f0;
|
|
--el-color-primary-light-9: #f0f4f8;
|
|
--el-color-primary-dark-2: #3f628a;
|
|
--el-color-success: #4e806d;
|
|
--el-color-warning: #a8793e;
|
|
--el-color-danger: #b35f6a;
|
|
--el-color-success-light-9: #eef5f0;
|
|
--el-color-warning-light-9: #fbf4ea;
|
|
--el-color-danger-light-9: #faf0f1;
|
|
--el-border-color: #d8e3ee;
|
|
--el-border-color-base: #d8e3ee;
|
|
--el-border-radius-base: 9px;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body, #app { margin: 0; min-height: 100%; height: 100%; }
|
|
body {
|
|
color: var(--admin-text);
|
|
background:
|
|
radial-gradient(circle at 12% -16%, rgba(178, 205, 229, 0.3), transparent 34rem),
|
|
radial-gradient(circle at 100% 0%, rgba(214, 226, 239, 0.28), transparent 28rem),
|
|
var(--admin-bg);
|
|
}
|
|
button, input, textarea, select { font: inherit; }
|
|
|
|
/* ===== 蓝白浅色壳层（对齐 admin.html 末层皮肤） ===== */
|
|
.admin-shell { display: flex; min-height: 100vh; background: var(--admin-bg); }
|
|
.admin-sidebar {
|
|
display: flex; flex: 0 0 252px; flex-direction: column;
|
|
background: linear-gradient(180deg, var(--admin-sidebar) 0%, var(--admin-sidebar-deep) 100%);
|
|
color: var(--admin-sidebar-text);
|
|
border-right: 1px solid #d4e0eb;
|
|
box-shadow: 14px 0 34px -28px rgba(39, 67, 94, 0.34);
|
|
transition: flex-basis .2s ease;
|
|
}
|
|
.admin-shell.is-collapsed .admin-sidebar { flex-basis: 64px; }
|
|
.admin-brand {
|
|
display: flex; align-items: center; gap: 12px;
|
|
min-height: 76px; padding: 20px 18px;
|
|
border-bottom: 1px solid #d4e0eb;
|
|
}
|
|
.admin-brand-logo {
|
|
width: 36px; height: 36px; border-radius: 11px;
|
|
object-fit: cover; background: #fff;
|
|
box-shadow: 0 8px 20px rgba(79, 120, 165, 0.24);
|
|
}
|
|
.admin-brand-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
|
|
.admin-brand-copy strong { color: var(--admin-text); font-size: 15px; font-weight: 600; letter-spacing: .5px; white-space: nowrap; }
|
|
.admin-brand-copy span { color: #77899b; font-size: 11px; white-space: nowrap; }
|
|
|
|
.admin-menu-scroll { flex: 1; padding: 12px 10px; }
|
|
.admin-menu { border-right: 0; background: transparent; }
|
|
.admin-menu .el-sub-menu__title,
|
|
.admin-menu .el-menu-item {
|
|
height: 42px; line-height: 42px; margin: 3px 0; padding: 0 12px;
|
|
border-radius: 8px; color: #2f4a63;
|
|
}
|
|
.admin-menu .el-sub-menu__title:hover,
|
|
.admin-menu .el-menu-item:hover { color: #1e3b57; background: rgba(47, 93, 139, 0.16); }
|
|
.admin-menu .el-menu-item.is-active {
|
|
color: var(--admin-primary-strong); font-weight: 600;
|
|
background: linear-gradient(90deg, #dce9f5, #edf4fa);
|
|
border-color: #b6cbe0;
|
|
box-shadow: inset 3px 0 0 #5f85ad, 0 8px 18px -16px rgba(79, 120, 165, 0.55);
|
|
}
|
|
.admin-menu .el-menu { background: transparent; }
|
|
.admin-menu .el-sub-menu .el-sub-menu__icon-arrow { color: #405b73; }
|
|
.menu-group-title { font-size: 15px; font-weight: 600; letter-spacing: .4px; color: #405b73; }
|
|
.menu-group-title:hover { color: #2f4a63; }
|
|
|
|
.skip-link { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
|
|
.skip-link:focus {
|
|
position: fixed; left: 16px; top: 16px; z-index: 2000; width: auto; height: auto;
|
|
padding: 10px 14px; background: #fff; color: var(--admin-primary-strong);
|
|
border-radius: 8px; box-shadow: 0 4px 16px rgba(39, 67, 94, 0.2); text-decoration: none;
|
|
}
|
|
|
|
.admin-main { display: flex; min-width: 0; flex: 1; flex-direction: column; }
|
|
.admin-topbar {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 24px;
|
|
min-height: 76px; padding: 0 32px;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
border-bottom: 1px solid var(--admin-border);
|
|
box-shadow: 0 10px 28px -28px rgba(39, 67, 94, 0.42);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.admin-kicker { color: #70859a; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; }
|
|
.admin-topbar h1 { margin: 6px 0 0; font-size: 18px; font-weight: 650; color: var(--admin-text); }
|
|
.admin-user { display: flex; align-items: center; gap: 14px; }
|
|
.admin-user-meta { display: flex; align-items: flex-end; flex-direction: column; }
|
|
.admin-user-meta strong { font-size: 13px; font-weight: 600; color: var(--admin-text); }
|
|
.admin-user-role {
|
|
display: inline-flex; align-items: center;
|
|
padding: 2px 10px; border-radius: 999px; font-size: 12px; line-height: 1.7;
|
|
color: var(--admin-primary-strong); background: #e6f0f8; border: 1px solid #bfd1e2;
|
|
}
|
|
.admin-user-logout.el-button {
|
|
color: var(--admin-muted); background: #fff; border-color: #cbd9e6;
|
|
}
|
|
.admin-user-logout.el-button:hover { color: var(--admin-primary-strong); border-color: #95b1cb; background: #edf5fb; }
|
|
|
|
.admin-content { flex: 1; min-width: 0; padding: 30px 32px 56px; overflow: auto; }
|
|
.page-stack { display: flex; flex-direction: column; gap: 18px; }
|
|
/* 表格操作按钮工具栏：置于表格卡片顶部、右对齐（新增/删除/导入/导出等贴近表格行操作）。 */
|
|
.table-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
|
|
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
|
|
.page-heading h2 { margin: 0; font-size: 20px; color: var(--admin-text); }
|
|
.page-heading p { margin: 7px 0 0; color: var(--admin-muted); font-size: 13px; }
|
|
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; color: var(--admin-muted); font-size: 13px; }
|
|
.el-card { border-color: var(--admin-border); border-radius: 14px; box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28); }
|
|
.page-loading, .page-error { padding: 48px 20px; text-align: center; }
|
|
.page-loading { color: var(--admin-muted); }
|
|
.page-error { color: var(--el-color-danger); }
|
|
.not-found { padding: 56px 20px; }
|
|
.global-error-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
|
|
.admin-breadcrumb { margin-bottom: 14px; }
|
|
|
|
/* ===== module13 全局组件观感对齐（admin.html 表格/输入/分页语义） ===== */
|
|
.el-table {
|
|
--el-table-header-bg-color: #edf4fa;
|
|
--el-table-header-text-color: #4e6479;
|
|
--el-table-border-color: #e0e8ef;
|
|
--el-table-row-hover-bg-color: #f1f7fb;
|
|
}
|
|
.el-table th.el-table__cell {
|
|
background-color: #edf4fa;
|
|
color: #4e6479;
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
letter-spacing: .4px;
|
|
}
|
|
.el-table .el-table__row:hover > td.el-table__cell { background-color: #f1f7fb; }
|
|
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { background: #f9fbfd; }
|
|
.el-input__wrapper, .el-textarea__inner { border-radius: 9px; }
|
|
.el-input__wrapper.is-focus,
|
|
.el-select__wrapper.is-focused { box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16); }
|
|
.el-pagination { --el-pagination-button-color: var(--admin-text); --el-pagination-hover-color: var(--admin-primary-strong); }
|
|
/* 分页按钮样式加强：background 模式下每粒按钮带边框、当前页深蓝高亮，浅色主题下清晰可见。 */
|
|
.el-pagination.is-background .btn-prev,
|
|
.el-pagination.is-background .btn-next,
|
|
.el-pagination.is-background .el-pager li {
|
|
background: #fff;
|
|
border: 1px solid var(--admin-border);
|
|
border-radius: 7px;
|
|
min-width: 30px;
|
|
height: 30px;
|
|
line-height: 28px;
|
|
color: var(--admin-text);
|
|
font-weight: 600;
|
|
}
|
|
.el-pagination.is-background .el-pager li.is-active {
|
|
background: var(--admin-primary-strong);
|
|
border-color: var(--admin-primary-strong);
|
|
color: #fff;
|
|
}
|
|
.el-pagination.is-background .btn-prev:hover,
|
|
.el-pagination.is-background .btn-next:hover,
|
|
.el-pagination.is-background .el-pager li:not(.is-active):hover {
|
|
border-color: var(--admin-primary);
|
|
color: var(--admin-primary-strong);
|
|
}
|
|
.el-dialog { border-radius: 14px; }
|
|
.el-dialog__header { padding-bottom: 12px; }
|
|
.el-dialog__title { font-size: 16px; font-weight: 600; color: var(--admin-text); }
|
|
.el-dialog__body { color: var(--admin-text); }
|
|
.el-tag { border-radius: 6px; }
|
|
.el-button { border-radius: 9px; }
|
|
.el-message-box { border-radius: 14px; }
|
|
|
|
/* 分组筛选下拉（可模糊搜索）：对齐旧版控件观感（42px/9px/浅底/focus ring）。 */
|
|
.el-select.admin-filter {
|
|
width: 100%;
|
|
}
|
|
.el-select.admin-filter .el-select__wrapper {
|
|
min-height: 42px;
|
|
border-radius: 9px;
|
|
background: #f8fbfd;
|
|
box-shadow: 0 0 0 1px #cbd9e6 inset;
|
|
}
|
|
.el-select.admin-filter .el-select__wrapper:hover {
|
|
box-shadow: 0 0 0 1px #9fb7cd inset;
|
|
}
|
|
.el-select.admin-filter.is-focused .el-select__wrapper {
|
|
background: #ffffff;
|
|
box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.admin-sidebar { flex-basis: 64px; }
|
|
.admin-brand-copy, .admin-menu .el-sub-menu__title span, .admin-menu .el-menu-item { display: none; }
|
|
.admin-topbar { align-items: flex-start; flex-direction: column; padding: 12px 18px; }
|
|
.admin-user { width: 100%; justify-content: space-between; }
|
|
.admin-user-meta { align-items: flex-start; }
|
|
.admin-content { padding: 18px 16px 40px; }
|
|
}
|