huangzd1997
ba12e04d1e
AdminLayout 增加 role=navigation 侧边栏地标、aria-expanded/aria-label 折叠按钮、 #admin-content 主区锚点与“跳到主内容”skip-link；main.css 提供 :focus-visible 焦点环 与 skip-link 聚焦样式；e2e 8 用例用键盘回车切换折叠并断言 ARIA 语义。
72 lines
4.6 KiB
CSS
72 lines
4.6 KiB
CSS
:root {
|
|
--admin-sidebar: #192132;
|
|
--admin-sidebar-deep: #121827;
|
|
--admin-primary: #6366f1;
|
|
--admin-primary-soft: #eef0ff;
|
|
--admin-bg: #f3f5f9;
|
|
--admin-border: #e5e7ef;
|
|
--admin-text: #1f2937;
|
|
--admin-muted: #7b8495;
|
|
font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body, #app { margin: 0; min-height: 100%; height: 100%; }
|
|
body { background: var(--admin-bg); color: var(--admin-text); }
|
|
button, input, textarea, select { font: inherit; }
|
|
|
|
.admin-shell { display: flex; min-height: 100vh; background: var(--admin-bg); }
|
|
.admin-sidebar { display: flex; flex: 0 0 248px; flex-direction: column; background: linear-gradient(180deg, var(--admin-sidebar) 0%, var(--admin-sidebar-deep) 100%); color: #b9c2d5; 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: 72px; padding: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
|
|
.admin-brand-logo { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; background: white; }
|
|
.admin-brand-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
|
|
.admin-brand-copy strong { color: #fff; font-size: 16px; }
|
|
.admin-brand-copy span { color: #929db4; font-size: 11px; white-space: nowrap; }
|
|
.admin-menu-scroll { flex: 1; padding: 14px 10px; }
|
|
.admin-menu { border-right: 0; background: transparent; }
|
|
.admin-menu .el-sub-menu__title, .admin-menu .el-menu-item { height: 42px; line-height: 42px; border-radius: 8px; margin: 3px 0; color: #aeb8cc; }
|
|
.admin-menu .el-sub-menu__title:hover, .admin-menu .el-menu-item:hover { background: rgba(255,255,255,.08); color: #fff; }
|
|
.admin-menu .el-menu-item.is-active { background: linear-gradient(90deg, rgba(99,102,241,.95), rgba(99,102,241,.62)); color: #fff; }
|
|
.admin-menu .el-menu { background: transparent; }
|
|
.menu-group-title { font-weight: 600; }
|
|
.sidebar-collapse { margin: 12px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #aeb8cc; background: transparent; cursor: pointer; }
|
|
.sidebar-collapse:hover { color: #fff; border-color: rgba(255,255,255,.3); }
|
|
.sidebar-collapse:focus-visible { outline: 2px solid var(--admin-primary); outline-offset: 2px; }
|
|
.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);
|
|
border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 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: 84px; padding: 18px 28px; background: #fff; border-bottom: 1px solid var(--admin-border); }
|
|
.admin-kicker { color: var(--admin-primary); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
|
|
.admin-topbar h1 { margin: 5px 0 0; font-size: 22px; }
|
|
.admin-user { display: flex; align-items: center; gap: 18px; }
|
|
.admin-user-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
|
|
.admin-user-meta strong { font-size: 14px; }
|
|
.admin-user-meta span { color: var(--admin-muted); font-size: 12px; }
|
|
.admin-content { flex: 1; min-width: 0; padding: 26px 28px; overflow: auto; }
|
|
.page-stack { display: flex; flex-direction: column; gap: 18px; }
|
|
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
|
|
.page-heading h2 { margin: 0; font-size: 22px; }
|
|
.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: 12px; }
|
|
.page-loading, .page-error { padding: 48px 20px; text-align: center; }
|
|
.page-loading { color: var(--admin-muted); }
|
|
.page-error { color: #b91c1c; }
|
|
.not-found { padding: 56px 20px; }
|
|
.global-error-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
|
|
.admin-breadcrumb { margin-bottom: 14px; }
|
|
|
|
@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; }
|
|
.admin-user { width: 100%; justify-content: space-between; }
|
|
.admin-user-meta { align-items: flex-start; }
|
|
.admin-content { padding: 18px; }
|
|
}
|