/* ============================================================ * skin-shadcn v15 = v14 + bk 实际 aside 类名 + header 对齐 main * * v14 的错误: CSS 用了 v9 源码的 .user-center-aside / .aside-logo / .nav-item * 但 bk 的实际类是 .ba-user-layouts / .userinfo / .user-menu-item * 所以 v14 的 aside CSS 完全没有生效 * * v15 修正: * 1. aside 改用 bk 实际类名 (CSS 选择器覆盖) * 2. aside 改 fixed top-left, 260px, full height * 3. header 推到右边对齐 main * 4. aside 内容样式完全照 v9 aside-logo / aside-nav * ============================================================ */ /* ============ :root --secu-* 变量定义 ============ */ :root { --secu-bg: #ffffff; --secu-bg-page: #fff; --secu-bg-overlay: #ffffff; --secu-bg-subtle: #f6f6f6; --secu-bg-muted: #eeeeee; --secu-fg: #303133; --secu-fg-muted: #606266; --secu-fg-subtle: #909399; --secu-fg-disabled: #c0c4cc; --secu-border: #ebeef5; --secu-border-strong: #dcdfe6; --secu-input: #dcdfe6; --secu-ring: #3f6ad8; --secu-primary: #3f6ad8; --secu-primary-hover: #3458b8; --secu-primary-active: #2a4a9c; --secu-primary-fg: #ffffff; --secu-primary-soft: #ecf1fb; --secu-primary-softer: #f3f6fc; --secu-success: #67c23a; --secu-success-soft: #f0f9eb; --secu-warning: #e6a23c; --secu-warning-soft: #fdf6ec; --secu-danger: #f56c6c; --secu-danger-soft: #fef0f0; --secu-info: #909399; --secu-info-soft: #f4f4f5; --secu-radius-sm: 6px; --secu-radius: 8px; --secu-radius-lg: 10px; --ba-bg-color: #fff; --el-fill-color-blank: #fff; } /* ============ v12 的 7 项 CSS (字符级保留) ============ */ /* 1. 取消所有 user-avatar / header-user-avatar */ img.header-user-avatar, img.icon-header-user-avatar, .user-avatar img, img.new-user-avatar { display: none !important; } .user-avatar, .user-avatar-icons { display: none !important; } /* 2. .el-col-23 全屏 */ .el-col-23 { max-width: 100% !important; flex: 0 0 100% !important; } /* 3. footer 恢复 - 仅隐藏两个特定 selector (恢复其他位置 footer) */ section.el-container > footer.el-footer { display: none !important; } div.el-scrollbar__view > footer.el-footer { display: none !important; } /* 4. .bubble 背景图 */ .bubble[data-v-d2a5dd0b] { background: none !important; background-image: none !important; background-repeat: no-repeat !important; } /* 5. aside height: 100% */ aside.el-aside, .el-aside { height: 100% !important; } /* 6. el-divider margin */ .el-divider--horizontal { margin: 6px 0 !important; } /* 7. /user 排版按 v9 - 见下方 */ /* ============ v9 源码 default.vue layout CSS (v14 保留) ============ */ .is-user-center { min-height: 100vh !important; } .frontend-footer-brother { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; } .user-layouts { display: flex !important; padding: 0 !important; margin: 0 !important; max-width: 100% !important; flex: 0 0 100% !important; } @media screen and (max-width: 768px) { .user-layouts { flex-direction: column !important; } } /* ============ v15 新增: header 对齐 main + aside 顶到顶部 ============ * * bk 的真实结构: * el-container.is-vertical (flex column) * ├── el-header.header ← 顶栏 (full-width) * ├── el-scrollbar * │ └── el-row.frontend-footer-brother * │ └── el-col.user-layouts (flex row, span:23) * │ ├── el-aside.ba-user-layouts ← aside * │ └── el-main.layout-main ← main * └── el-footer (removed) * * 目标布局: * ┌──────────┬──────────────────────────┐ * │ │ el-header.header │ ← 对齐 main * │ ASIDE ├──────────────────────────┤ * │ 260px │ │ * │ fixed │ main.layout-main │ * │ left:0 │ (router-view) │ * │ top:0 │ │ * │ full-h │ │ * └──────────┴──────────────────────────┘ */ /* aside: fixed top-left, 260px wide, full height */ .ba-user-layouts { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 260px !important; margin: 0 !important; padding: 0 !important; background-color: var(--secu-bg-overlay) !important; border-right: 1px solid var(--secu-border) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; z-index: 100 !important; flex-shrink: 0 !important; } /* header: 推到右边对齐 main */ .el-container.is-vertical > .header.el-header, .el-container.is-vertical > header.el-header.header, header.el-header.header { margin-left: 275px !important; padding-left: 0 !important; margin-bottom: 13px !important; border-bottom: 1px solid var(--secu-border) !important; } /* main 内容区: 推到右边对齐 header */ .el-container.is-vertical > .el-scrollbar { margin-left: 260px !important; } /* row.user-layouts: 不要 center, 撑满 */ .el-row.frontend-footer-brother { justify-content: flex-start !important; } .el-col.user-layouts.el-col-23 { max-width: 100% !important; flex: 1 1 auto !important; } /* ============ v16 新增: header-logo 移到 aside 顶部 ============ */ /* bk 的 .header-logo 是 header 内的 logo (在 el-header.header 里) * 用户要求: div.header-logo 视觉上放到