397 lines
9.8 KiB
CSS
397 lines
9.8 KiB
CSS
/* ===== 博海网络科技 · 全栈学习平台 — 全局响应式样式 ===== */
|
||
|
||
/* === Reset === */
|
||
*, *::before, *::after {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html, body, #app {
|
||
height: 100%;
|
||
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
/* === CSS 自定义属性（设计令牌） === */
|
||
:root {
|
||
/* 颜色系统 */
|
||
--bh-primary: #409eff;
|
||
--bh-primary-dark: #337ecc;
|
||
--bh-primary-light: #a0cfff;
|
||
--bh-success: #67c23a;
|
||
--bh-warning: #e6a23c;
|
||
--bh-danger: #f56c6c;
|
||
--bh-info: #909399;
|
||
|
||
--bh-bg-main: #f0f2f5;
|
||
--bh-bg-card: #ffffff;
|
||
--bh-bg-dark: #304156;
|
||
--bh-bg-dark-light: #3a4a5e;
|
||
|
||
--bh-text-primary: #303133;
|
||
--bh-text-regular: #606266;
|
||
--bh-text-secondary: #909399;
|
||
--bh-text-placeholder: #c0c4cc;
|
||
|
||
--bh-border: #e4e7ed;
|
||
--bh-border-light: #ebeef5;
|
||
|
||
/* 侧边栏暗色（永恒不变，无论明暗模式） */
|
||
--sidebar-bg: #304156;
|
||
--sidebar-bg-hover: #263445;
|
||
--sidebar-text: #bfcbd9;
|
||
--sidebar-text-active: #409eff;
|
||
--sidebar-logo-bg: #2b3a4a;
|
||
|
||
/* 间距系统 */
|
||
--bh-space-xs: 4px;
|
||
--bh-space-sm: 8px;
|
||
--bh-space-md: 12px;
|
||
--bh-space-lg: 16px;
|
||
--bh-space-xl: 20px;
|
||
--bh-space-2xl: 24px;
|
||
|
||
/* 圆角 */
|
||
--bh-radius-sm: 4px;
|
||
--bh-radius-md: 8px;
|
||
--bh-radius-lg: 12px;
|
||
|
||
/* 阴影 */
|
||
--bh-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
|
||
--bh-shadow-md: 0 2px 8px rgba(0,0,0,0.08);
|
||
|
||
/* 侧边栏宽度 */
|
||
--bh-sidebar-width: 220px;
|
||
--bh-sidebar-collapsed: 64px;
|
||
|
||
/* 顶栏高度 */
|
||
--bh-header-height: 60px;
|
||
|
||
/* 移动端底部导航高度 */
|
||
--bh-mobile-nav-height: 56px;
|
||
|
||
/* 断点变量（用于 JS） */
|
||
--bh-breakpoint-sm: 768px;
|
||
--bh-breakpoint-md: 992px;
|
||
--bh-breakpoint-lg: 1200px;
|
||
--bh-breakpoint-xl: 1920px;
|
||
|
||
/* BSC四层泳道标准色 */
|
||
--bsc-finance: #F56C6C;
|
||
--bsc-customer: #409EFF;
|
||
--bsc-process: #67C23A;
|
||
--bsc-learning: #E6A23C;
|
||
|
||
/* 统一字号 */
|
||
--text-sm: 12px;
|
||
--text-base: 14px;
|
||
--text-lg: 16px;
|
||
--text-xl: 18px;
|
||
--text-2xl: 24px;
|
||
}
|
||
|
||
/* 暗黑模式覆盖 — 只影响内容区，侧边栏保持不变 */
|
||
html.dark {
|
||
--bh-bg-main: #121212;
|
||
--bh-bg-card: #1e1e1e;
|
||
--bh-text-primary: #e0e0e0;
|
||
--bh-text-regular: #b0b0b0;
|
||
--bh-text-secondary: #808080;
|
||
--bh-border: #333333;
|
||
--bh-border-light: #2a2a2a;
|
||
|
||
/* Element Plus 暗黑变量覆盖 — 让 el-card 等卡片用我们的色值 */
|
||
--el-bg-color: #1e1e1e;
|
||
--el-bg-color-overlay: #1e1e1e;
|
||
--el-bg-color-page: #121212;
|
||
--el-text-color-primary: #e0e0e0;
|
||
--el-text-color-regular: #b0b0b0;
|
||
--el-text-color-secondary: #808080;
|
||
--el-border-color: #333333;
|
||
--el-border-color-light: #2a2a2a;
|
||
--el-fill-color: #252525;
|
||
--el-fill-color-light: #2a2a2a;
|
||
--el-fill-color-lighter: #303030;
|
||
--el-mask-color: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
/* === 侧边栏全局样式（不受暗黑影响） === */
|
||
.sidebar-dark {
|
||
background-color: var(--sidebar-bg) !important;
|
||
}
|
||
.sidebar-dark .el-menu {
|
||
background-color: var(--sidebar-bg) !important;
|
||
border-right: none;
|
||
}
|
||
.sidebar-dark .el-menu-item {
|
||
color: var(--sidebar-text) !important;
|
||
background-color: transparent !important;
|
||
}
|
||
.sidebar-dark .el-menu-item:hover {
|
||
background-color: var(--sidebar-bg-hover) !important;
|
||
}
|
||
.sidebar-dark .el-menu-item.is-active {
|
||
color: var(--sidebar-text-active) !important;
|
||
background-color: var(--sidebar-bg-hover) !important;
|
||
}
|
||
.sidebar-dark .el-menu-item * {
|
||
color: inherit !important;
|
||
}
|
||
|
||
/* === 响应式工具类 === */
|
||
.d-only { display: revert; }
|
||
.m-only { display: none !important; }
|
||
|
||
@media (max-width: 768px) {
|
||
.d-only { display: none !important; }
|
||
.m-only { display: revert; }
|
||
|
||
:root {
|
||
--bh-sidebar-width: 0px;
|
||
--bh-sidebar-collapsed: 0px;
|
||
--bh-header-height: 52px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
:root {
|
||
--bh-header-height: 48px;
|
||
}
|
||
}
|
||
|
||
/* === 通用响应式容器 === */
|
||
.bh-container {
|
||
width: 100%;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding-left: var(--bh-space-lg);
|
||
padding-right: var(--bh-space-lg);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.bh-container {
|
||
padding-left: var(--bh-space-md);
|
||
padding-right: var(--bh-space-md);
|
||
}
|
||
}
|
||
|
||
/* === 滚动条美化 === */
|
||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||
::-webkit-scrollbar-track { background: transparent; }
|
||
::-webkit-scrollbar-thumb { background: #c0c4cc; border-radius: 3px; }
|
||
::-webkit-scrollbar-thumb:hover { background: #909399; }
|
||
|
||
/* 暗黑模式滚动条 */
|
||
html.dark ::-webkit-scrollbar-thumb { background: #555; }
|
||
html.dark ::-webkit-scrollbar-thumb:hover { background: #777; }
|
||
|
||
/* === Element Plus 全局覆盖 === */
|
||
.el-main {
|
||
background: var(--bh-bg-main);
|
||
min-height: calc(100vh - var(--bh-header-height));
|
||
}
|
||
|
||
/* el-card 暗黑适配 */
|
||
html.dark .el-card {
|
||
background-color: var(--bh-bg-card);
|
||
border-color: var(--bh-border);
|
||
}
|
||
html.dark .el-card__header {
|
||
border-bottom-color: var(--bh-border);
|
||
}
|
||
|
||
/* el-table 暗黑适配 */
|
||
html.dark .el-table {
|
||
--el-table-bg-color: var(--bh-bg-card);
|
||
--el-table-tr-bg-color: var(--bh-bg-card);
|
||
--el-table-header-bg-color: var(--bh-bg-dark);
|
||
--el-table-row-hover-bg-color: #2a2a2a;
|
||
border-color: var(--bh-border);
|
||
}
|
||
html.dark .el-table th.el-table__cell {
|
||
background-color: var(--bh-bg-dark);
|
||
color: var(--sidebar-text);
|
||
}
|
||
html.dark .el-table__inner-wrapper::before,
|
||
html.dark .el-table__border-left-patch {
|
||
background-color: var(--bh-border);
|
||
}
|
||
html.dark .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||
background: #555;
|
||
}
|
||
|
||
/* el-tabs 暗黑适配 */
|
||
html.dark .el-tabs__header {
|
||
border-bottom-color: var(--bh-border);
|
||
}
|
||
html.dark .el-tabs__item {
|
||
color: var(--bh-text-regular);
|
||
}
|
||
html.dark .el-tabs__item.is-active {
|
||
color: var(--bh-primary);
|
||
}
|
||
|
||
/* el-progress 暗黑适配 */
|
||
html.dark .el-progress__text {
|
||
color: var(--bh-text-secondary);
|
||
}
|
||
|
||
/* el-collapse 暗黑适配 */
|
||
html.dark .el-collapse {
|
||
border-top-color: var(--bh-border);
|
||
border-bottom-color: var(--bh-border);
|
||
}
|
||
html.dark .el-collapse-item__header {
|
||
background-color: var(--bh-bg-card);
|
||
color: var(--bh-text-primary);
|
||
border-bottom-color: var(--bh-border);
|
||
}
|
||
html.dark .el-collapse-item__wrap {
|
||
background-color: var(--bh-bg-card);
|
||
}
|
||
html.dark .el-collapse-item__content {
|
||
color: var(--bh-text-regular);
|
||
}
|
||
|
||
/* el-dialog 暗黑适配 */
|
||
html.dark .el-dialog {
|
||
background-color: var(--bh-bg-card);
|
||
}
|
||
html.dark .el-dialog__title {
|
||
color: var(--bh-text-primary);
|
||
}
|
||
html.dark .el-dialog__body {
|
||
color: var(--bh-text-regular);
|
||
}
|
||
|
||
/* el-empty 暗黑适配 */
|
||
html.dark .el-empty__description p {
|
||
color: var(--bh-text-secondary);
|
||
}
|
||
|
||
/* el-alert 暗黑适配（info 类型保持原样） */
|
||
html.dark .el-alert--info {
|
||
background-color: #1a1a2e;
|
||
}
|
||
|
||
/* el-tag 暗黑适配 */
|
||
html.dark .el-tag.el-tag--success {
|
||
--el-tag-bg-color: #1a3a1a;
|
||
--el-tag-text-color: #67c23a;
|
||
--el-tag-border-color: #2a5a2a;
|
||
}
|
||
html.dark .el-tag.el-tag--danger {
|
||
--el-tag-bg-color: #3a1a1a;
|
||
--el-tag-text-color: #f56c6c;
|
||
--el-tag-border-color: #5a2a2a;
|
||
}
|
||
|
||
/* el-form 暗黑适配 */
|
||
html.dark .el-form-item__label {
|
||
color: var(--bh-text-regular);
|
||
}
|
||
|
||
/* el-timeline 暗黑适配 */
|
||
html.dark .el-timeline-item__timestamp {
|
||
color: var(--bh-text-secondary);
|
||
}
|
||
|
||
/* el-dropdown 暗黑适配 */
|
||
html.dark .el-dropdown-menu {
|
||
background-color: var(--bh-bg-card);
|
||
border-color: var(--bh-border);
|
||
}
|
||
html.dark .el-dropdown-menu__item {
|
||
color: var(--bh-text-regular);
|
||
}
|
||
html.dark .el-dropdown-menu__item:hover {
|
||
background-color: var(--bh-fill-color, #252525);
|
||
}
|
||
|
||
/* el-drawer 暗黑适配 */
|
||
html.dark .el-drawer {
|
||
background-color: var(--bh-bg-card);
|
||
}
|
||
html.dark .el-drawer__header {
|
||
color: var(--bh-text-primary);
|
||
}
|
||
|
||
/* 表格在小屏横向滚动 */
|
||
.el-table {
|
||
@media (max-width: 768px) {
|
||
width: 100% !important;
|
||
overflow-x: auto;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
/* el-card 间距在手机上缩小 */
|
||
@media (max-width: 768px) {
|
||
.el-card { margin-bottom: 12px !important; }
|
||
.el-card__body { padding: 14px !important; }
|
||
}
|
||
|
||
/* 表单在小屏上 label 置顶 */
|
||
@media (max-width: 576px) {
|
||
.el-form--label-top .el-form-item__label {
|
||
padding-bottom: 0;
|
||
}
|
||
}
|
||
|
||
/* el-overlay 全局修复 — 确保弹窗可见 */
|
||
.el-overlay { z-index: 2000 !important; }
|
||
.el-overlay-dialog { z-index: 2001 !important; position: fixed !important; }
|
||
.el-message-box__wrapper { z-index: 2002 !important; }
|
||
/* 消息提示：置顶居中显示，避开左侧菜单与顶栏（顶栏60px+间距）；必须高于弹窗 */
|
||
.el-message {
|
||
position: fixed !important;
|
||
top: 70px !important;
|
||
left: 50% !important;
|
||
right: auto !important;
|
||
transform: translateX(-50%) !important;
|
||
z-index: 3000 !important;
|
||
max-width: calc(100vw - 40px) !important;
|
||
}
|
||
/* el-message-box 保持默认居中（margin:15vh auto），勿清margin否则会靠左重叠菜单 */
|
||
.el-dialog { --el-dialog-margin-top: 1vh !important; }
|
||
|
||
/* 过渡动画 — 明暗切换平滑过渡 */
|
||
.page-view { padding: 16px; }
|
||
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
|
||
.page-title { font-size:18px; font-weight:600; margin:0; }
|
||
.page-title h3 { margin:0; }
|
||
|
||
/* 卡片统计数字 */
|
||
.stat-number { font-size:24px; font-weight:600; }
|
||
.stat-label { font-size:12px; color:#909399; margin-top:4px; }
|
||
|
||
/* 通用flex布局 */
|
||
.flex-row { display:flex; align-items:center; gap:8px; }
|
||
.flex-wrap { flex-wrap:wrap; }
|
||
.flex-between { display:flex; justify-content:space-between; align-items:center; }
|
||
.section-gap { margin-bottom:16px; }
|
||
|
||
/* 过渡动画 — 明暗切换平滑过渡 */
|
||
html.dark,
|
||
html,
|
||
html *,
|
||
html *::before,
|
||
html *::after {
|
||
transition: background-color 0.3s ease,
|
||
color 0.3s ease,
|
||
border-color 0.3s ease,
|
||
box-shadow 0.3s ease;
|
||
}
|
||
|
||
/* 路由过渡动画 — fade */
|
||
.fade-enter-active,
|
||
.fade-leave-active {
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
.fade-enter-from,
|
||
.fade-leave-to {
|
||
opacity: 0;
|
||
}
|