/* ============================================================
modern-layout.css — 头部 + 侧栏现代化皮肤
依赖：element-ui, font-awesome, iconfont
============================================================ */
/* ----------------------------------------------------------
1. 通用重置
---------------------------------------------------------- */
[v-cloak] { display: none; }
/* ----------------------------------------------------------
2. 顶部头部 .advanced-header
---------------------------------------------------------- */
.advanced-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 0;
height: 70px;
width: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
position: relative;
overflow: visible;
}
/* 动态点阵背景 */
.advanced-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
background-size: 20px 20px;
animation: headerBgMove 20s linear infinite;
pointer-events: none;
}
@keyframes headerBgMove {
0% { transform: translate(0, 0); }
100% { transform: translate(20px, 20px); }
}
/* 左侧标题 */
.header-title {
display: flex;
align-items: center;
padding-left: 24px;
z-index: 1;
}
.header-title h1 {
color: #ffffff;
font-size: 26px;
margin: 0;
font-weight: 900;
text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
font-family: 'Impact', 'Oswald', 'Arial Black', sans-serif;
letter-spacing: 3px;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
/* 右侧操作区 */
.header-actions {
display: flex;
align-items: center;
gap: 6px;
padding-right: 24px;
z-index: 1;
}
/* 实时时间 */
.header-time {
display: flex;
flex-direction: column;
align-items: center;
color: white;
padding: 6px 14px;
background: rgba(255,255,255,0.1);
border-radius: 10px;
backdrop-filter: blur(10px);
min-width: 72px;
}
.header-time .time-value {
font-size: 15px;
font-weight: 600;
font-family: 'Courier New', monospace;
line-height: 1.2;
}
.header-time .date-value {
font-size: 11px;
opacity: 0.9;
margin-top: 2px;
}
/* 通知铃铛 */
.notification-btn {
position: relative;
width: 42px;
height: 42px;
background: rgba(255,255,255,0.15);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid rgba(255,255,255,0.2);
}
.notification-btn:hover {
background: rgba(255,255,255,0.25);
transform: scale(1.05);
}
.notification-btn > .fa {
font-size: 18px;
color: white;
}
/* 兼容原 Bootstrap dropdown，防止触发时位移 */
.notification-btn.dropdown.open > .dropdown-toggle {
background: transparent;
box-shadow: none;
}
.notification-badge {
position: absolute;
top: -5px;
right: -5px;
background: #ff4444;
color: white;
font-size: 10px;
padding: 2px 5px;
border-radius: 10px;
font-weight: 600;
box-shadow: 0 2px 6px rgba(255,68,68,0.5);
animation: badgePulse 2s infinite;
min-width: 16px;
text-align: center;
line-height: 1.4;
}
.notification-badge:empty { display: none; }
@keyframes badgePulse {
0% { transform: scale(1); }
50% { transform: scale(1.12); }
100% { transform: scale(1); }
}
/* 通知下拉列表 */
.advanced-header .agile-notification {
min-width: 340px;
max-width: 420px;
left: auto;
right: 0;
top: 48px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
padding: 4px 0;
}
.advanced-header .agile-notification .notification_desc p {
white-space: normal;
word-break: break-word;
}
/* 用户胶囊 */
.user-menu {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.15);
padding: 7px 14px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid rgba(255,255,255,0.2);
}
.user-menu:hover {
background: rgba(255,255,255,0.25);
transform: translateY(-1px);
}
.header-user-avatar {
width: 34px;
height: 34px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid rgba(255,255,255,0.4);
flex-shrink: 0;
}
.header-user-avatar i {
font-size: 17px;
color: white;
}
.user-info { display: flex; flex-direction: column; }
#headerApp .user-name {
color: white;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
}
#headerApp .user-role {
color: rgba(255,255,255,0.8);
font-size: 11px;
line-height: 1.3;
}
#headerApp .user-dropdown-icon {
color: white;
font-size: 12px;
margin-left: 4px;
}
/* el-dropdown-menu 悬浮渐变 */
.el-dropdown-menu__item:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: white !important;
}
/* ----------------------------------------------------------
3. 侧栏 .modern-sidebar
---------------------------------------------------------- */
.modern-sidebar {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 180px;
background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
box-shadow: 2px 0 10px rgba(0,0,0,0.12);
display: flex;
flex-direction: column;
z-index: 1000;
transition: width 0.3s;
}
/* Logo 区 */
.sidebar-logo {
width: 100%;
height: 70px;
background: rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
padding: 0 15px;
box-sizing: border-box;
border-bottom: 1px solid rgba(255,255,255,0.08);
flex-shrink: 0;
}
.sidebar-logo h2 {
color: #fff;
font-size: 16px;
margin: 0;
font-weight: 600;
white-space: nowrap;
}
/* 菜单滚动容器 */
.sidebar-menu {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 8px 0;
-webkit-overflow-scrolling: touch;
}
.sidebar-menu::-webkit-scrollbar { width: 4px; }
.sidebar-menu::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; }
/* ----------------------------------------------------------
4. 后端 ${menu} HTML → 深蓝菜单外观映射
后端结构：
（无子菜单）
---------------------------------------------------------- */
/* 重置 ul/li */
.modern-sidebar .sidebar-list {
list-style: none;
margin: 0;
padding: 0;
background: transparent;
}
.modern-sidebar .sidebar-list > li {
float: none !important;
width: 100%;
clear: both;
display: block;
color: rgba(255,255,255,0.8);
}
/* 一级行 */
.modern-sidebar .sidebar-list-title {
height: 46px;
line-height: 46px;
padding: 0 20px;
cursor: pointer;
transition: background 0.25s, color 0.25s;
display: flex;
align-items: center;
user-select: none;
}
.modern-sidebar .sidebar-list-title:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
/* 图标 */
.modern-sidebar .sidebar-list-ico {
float: none !important;
margin-right: 10px;
width: 20px;
text-align: center;
flex-shrink: 0;
color: rgba(255,255,255,0.75);
}
.modern-sidebar .sidebar-list-ico i,
.modern-sidebar .sidebar-list-ico span {
font-size: 16px;
}
/* 文字区（一级） */
.modern-sidebar .sidebar-list-txt {
float: none !important;
flex: 1;
font-size: 14px;
color: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 无子菜单时，a 继承颜色，去下划线 */
.modern-sidebar .sidebar-list-txt a {
color: inherit;
text-decoration: none;
font-size: 14px;
}
.modern-sidebar .sidebar-list-txt a:hover { color: #fff; }
/* 无子菜单的一级入口：链接覆盖标题整行，图标和空白区域也可直接跳转。 */
.modern-sidebar .sidebar-list > li:not(.menu-slide) > .sidebar-list-title {
position: relative;
}
.modern-sidebar .sidebar-list > li:not(.menu-slide) > .sidebar-list-title .sidebar-list-txt a::before {
content: '';
position: absolute;
inset: 0;
}
/* 折叠箭头 */
.modern-sidebar .sidebar-list-title .more {
margin-left: auto;
font-size: 12px;
color: rgba(255,255,255,0.45);
transition: transform 0.3s;
}
/* 展开时箭头旋转 —— js 在 menu-slide 加 active */
.modern-sidebar .menu-slide.active > .sidebar-list-title .more {
transform: rotate(90deg);
}
/* 子菜单容器 */
.modern-sidebar .sidebar-list-slide {
width: 100%;
box-sizing: border-box;
background: rgba(0,0,0,0.12);
overflow: hidden;
}
.modern-sidebar .sidebar-list-slide p {
margin: 0;
}
.modern-sidebar .sidebar-list-slide a {
display: block;
width: 100%;
box-sizing: border-box;
height: 40px;
line-height: 40px;
padding-left: 50px;
font-size: 13px;
color: rgba(255,255,255,0.75);
text-decoration: none;
transition: background 0.2s, color 0.2s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modern-sidebar .sidebar-list-slide a:hover {
background: rgba(255,255,255,0.07);
color: #fff;
}
/* 高亮：active 类打在 上（由 Vue sidebarApp._initActiveState 控制 li#xxx） */
.modern-sidebar .sidebar-list-slide li.active > a,
.modern-sidebar .sidebar-list-slide a.active {
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
color: #fff;
position: relative;
}
.modern-sidebar .sidebar-list-slide a.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #fff;
}
/* 一级菜单高亮（无子菜单，active 类在 li 上） */
.modern-sidebar .sidebar-list > li.active > .sidebar-list-title {
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
color: #fff;
}
/* 展开的父菜单高亮 title */
.modern-sidebar .sidebar-list > li.active:not(.menu-slide) > .sidebar-list-title,
.modern-sidebar .sidebar-list > li.open > .sidebar-list-title {
color: #fff;
}
/* ----------------------------------------------------------
5. 底部操作栏
---------------------------------------------------------- */
.sidebar-footer {
padding: 10px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
justify-content: space-around;
flex-shrink: 0;
}
.sidebar-action {
color: rgba(255,255,255,0.55);
font-size: 18px;
cursor: pointer;
padding: 8px;
border-radius: 4px;
transition: all 0.25s;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.sidebar-action:hover {
color: #fff;
background: rgba(255,255,255,0.1);
}
.sidebar-action.logout { color: #f56c6c; }
.sidebar-action.logout:hover { background: rgba(245,108,108,0.18); }
/* 隐藏旧的退出按钮区 */
.modern-sidebar .sidebar-shut-down { display: none !important; }
/* ----------------------------------------------------------
6. 主内容区偏移（给侧栏 180px 让位）
---------------------------------------------------------- */
.wrapper.scrollable {
margin-left: 190px !important;
padding-left: 0 !important;
transition: margin-left 0.3s;
}
/* 确保头部全宽 */
.wrapper.scrollable .title-bar {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* iframe 内嵌页：隐藏重复侧栏，主区铺满 */
html.app-embedded .modern-sidebar {
display: none !important;
}
html.app-embedded .wrapper.scrollable {
margin-left: 0 !important;
width: 100% !important;
min-height: 100vh;
box-sizing: border-box;
}
/* iframe 内隐藏顶栏（顶栏只在外壳保留一份，不随内容区刷新） */
html.app-embedded .title-bar {
display: none !important;
}
/* 主站外壳：顶栏 + iframe */
.app-shell .wrapper.scrollable.shell-frame-wrap {
height: 100vh;
overflow: visible;
display: flex;
flex-direction: column;
}
.app-shell .shell-frame-wrap > .title-bar {
flex-shrink: 0;
position: relative;
z-index: 10050;
}
.app-shell .main-content-frame {
flex: 1;
width: 100%;
min-height: 0;
border: 0;
display: block;
}
/* ----------------------------------------------------------
7. 响应式（≤768px）
---------------------------------------------------------- */
@media (max-width: 768px) {
.modern-sidebar {
transform: translateX(-100%);
transition: transform 0.3s ease;
width: 240px;
z-index: 1001;
}
.modern-sidebar.show {
transform: translateX(0);
}
.wrapper.scrollable {
margin-left: 0 !important;
padding-top: 60px !important;
}
.header-time { display: none; }
#headerApp .user-role { display: none; }
.header-title h1 { font-size: 18px; letter-spacing: 1px; }
}