467 lines
10 KiB
HTML
467 lines
10 KiB
HTML
<!-- 左侧导航菜单 -->
|
|
<div class="sidebar-container">
|
|
<!-- 系统标题 -->
|
|
<div class="sidebar-header">
|
|
<div class="logo-container">
|
|
<i class="ri-file-search-line text-primary"></i>
|
|
<h1>AI审核系统</h1>
|
|
</div>
|
|
<button class="sidebar-toggle" id="sidebar-toggle">
|
|
<i class="ri-menu-fold-line"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 用户信息 -->
|
|
<div class="user-profile">
|
|
<div class="avatar">
|
|
<span>管理</span>
|
|
</div>
|
|
<div class="user-info">
|
|
<p class="user-name">系统管理员</p>
|
|
<p class="user-role">超级管理员</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 导航菜单 -->
|
|
<nav class="sidebar-menu">
|
|
<ul class="menu-list">
|
|
<!-- 首页 -->
|
|
<li class="menu-item">
|
|
<a href="/" class="menu-link">
|
|
<i class="ri-home-line"></i>
|
|
<span>首页</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- 文件管理 -->
|
|
<li class="menu-item menu-has-children open">
|
|
<div class="menu-link">
|
|
<i class="ri-folder-line"></i>
|
|
<span>文件管理</span>
|
|
<i class="ri-arrow-down-s-line menu-arrow"></i>
|
|
</div>
|
|
<ul class="submenu">
|
|
<li class="submenu-item">
|
|
<a href="待审核文件上传.html" class="submenu-link">
|
|
<i class="ri-upload-cloud-line"></i>
|
|
<span>文件上传</span>
|
|
</a>
|
|
</li>
|
|
<li class="submenu-item">
|
|
<a href="评查文件列表.html" class="submenu-link">
|
|
<i class="ri-file-list-3-line"></i>
|
|
<span>文件列表</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<!-- 评查规则库 -->
|
|
<li class="menu-item menu-has-children open">
|
|
<div class="menu-link">
|
|
<i class="ri-book-3-line"></i>
|
|
<span>评查规则库</span>
|
|
<i class="ri-arrow-down-s-line menu-arrow"></i>
|
|
</div>
|
|
<ul class="submenu">
|
|
<li class="submenu-item">
|
|
<a href="评查点分组列表.html" class="submenu-link">
|
|
<i class="ri-folder-open-line"></i>
|
|
<span>评查点分组</span>
|
|
</a>
|
|
</li>
|
|
<li class="submenu-item">
|
|
<a href="评查点列表.html" class="submenu-link">
|
|
<i class="ri-list-check-3"></i>
|
|
<span>评查点列表</span>
|
|
</a>
|
|
</li>
|
|
<li class="submenu-item">
|
|
<a href="新增评查点.html" class="submenu-link">
|
|
<i class="ri-add-circle-line"></i>
|
|
<span>新增评查点</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<!-- 评查结果 -->
|
|
<li class="menu-item menu-has-children open">
|
|
<div class="menu-link">
|
|
<i class="ri-bar-chart-box-line"></i>
|
|
<span>评查结果</span>
|
|
<i class="ri-arrow-down-s-line menu-arrow"></i>
|
|
</div>
|
|
<ul class="submenu">
|
|
<li class="submenu-item">
|
|
<a href="评查详情页面.html" class="submenu-link">
|
|
<i class="ri-file-chart-line"></i>
|
|
<span>评查详情</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<!-- 系统设置 -->
|
|
<li class="menu-item menu-has-children open">
|
|
<div class="menu-link">
|
|
<i class="ri-settings-4-line"></i>
|
|
<span>系统设置</span>
|
|
<i class="ri-arrow-down-s-line menu-arrow"></i>
|
|
</div>
|
|
<ul class="submenu">
|
|
<li class="submenu-item">
|
|
<a href="评查点基础设置.html" class="submenu-link">
|
|
<i class="ri-equalizer-line"></i>
|
|
<span>基础设置</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<style>
|
|
/* 侧边栏整体样式 */
|
|
.sidebar-container {
|
|
width: 280px;
|
|
height: 100vh;
|
|
background-color: #fff;
|
|
border-right: 1px solid #f0f0f0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: all 0.3s ease;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 100;
|
|
overflow-y: auto;
|
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* 侧边栏头部 */
|
|
.sidebar-header {
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.logo-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo-container i {
|
|
font-size: 24px;
|
|
margin-right: 12px;
|
|
color: var(--primary-color, #00684A);
|
|
}
|
|
|
|
.logo-container h1 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin: 0;
|
|
}
|
|
|
|
.sidebar-toggle {
|
|
background: none;
|
|
border: none;
|
|
font-size: 20px;
|
|
color: #8c8c8c;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.sidebar-toggle:hover {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* 用户信息 */
|
|
.user-profile {
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background-color: var(--primary-color, #00684A);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 500;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.user-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin: 0 0 4px 0;
|
|
}
|
|
|
|
.user-role {
|
|
font-size: 12px;
|
|
color: #8c8c8c;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 菜单样式 */
|
|
.sidebar-menu {
|
|
flex: 1;
|
|
padding: 16px 12px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.menu-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.menu-item {
|
|
margin-bottom: 8px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.menu-link {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
color: #333;
|
|
text-decoration: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.menu-link i {
|
|
font-size: 16px;
|
|
width: 24px;
|
|
text-align: center;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.menu-link span {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.menu-arrow {
|
|
font-size: 16px;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.menu-has-children.open > .menu-link .menu-arrow {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.menu-link:hover {
|
|
background-color: rgba(0, 104, 74, 0.05);
|
|
}
|
|
|
|
.menu-item.active > .menu-link {
|
|
background-color: rgba(0, 104, 74, 0.1);
|
|
color: var(--primary-color, #00684A);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 子菜单样式 */
|
|
.submenu {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 8px 0 0 36px;
|
|
overflow: hidden;
|
|
max-height: 0;
|
|
transition: max-height 0.3s ease;
|
|
}
|
|
|
|
.menu-has-children.open .submenu {
|
|
max-height: 500px;
|
|
}
|
|
|
|
.submenu-item {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.submenu-link {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
color: #666;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.submenu-link i {
|
|
font-size: 14px;
|
|
width: 20px;
|
|
text-align: center;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.submenu-link span {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.submenu-link:hover {
|
|
background-color: rgba(0, 104, 74, 0.05);
|
|
color: var(--primary-color, #00684A);
|
|
}
|
|
|
|
.submenu-item.active .submenu-link {
|
|
color: var(--primary-color, #00684A);
|
|
font-weight: 500;
|
|
background-color: rgba(0, 104, 74, 0.08);
|
|
}
|
|
|
|
/* 折叠状态 */
|
|
.sidebar-container.collapsed {
|
|
width: 80px;
|
|
}
|
|
|
|
.sidebar-container.collapsed .logo-container h1,
|
|
.sidebar-container.collapsed .menu-link span,
|
|
.sidebar-container.collapsed .user-info,
|
|
.sidebar-container.collapsed .menu-arrow,
|
|
.sidebar-container.collapsed .submenu {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar-container.collapsed .menu-link {
|
|
justify-content: center;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.sidebar-container.collapsed .menu-link i {
|
|
margin-right: 0;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.sidebar-container.collapsed .sidebar-toggle i {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* 暗色模式 */
|
|
@media (prefers-color-scheme: dark) {
|
|
.sidebar-container {
|
|
background-color: #1f1f1f;
|
|
border-right-color: #2a2a2a;
|
|
}
|
|
|
|
.sidebar-header,
|
|
.user-profile {
|
|
border-bottom-color: #2a2a2a;
|
|
}
|
|
|
|
.logo-container h1,
|
|
.user-name {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.menu-link {
|
|
color: #d0d0d0;
|
|
}
|
|
|
|
.menu-link:hover {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.menu-item.active > .menu-link {
|
|
background-color: rgba(0, 104, 74, 0.2);
|
|
}
|
|
|
|
.submenu-link {
|
|
color: #a0a0a0;
|
|
}
|
|
|
|
.submenu-link:hover {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 侧边栏折叠/展开功能
|
|
const sidebarToggle = document.getElementById('sidebar-toggle');
|
|
const sidebarContainer = document.querySelector('.sidebar-container');
|
|
|
|
if (sidebarToggle) {
|
|
sidebarToggle.addEventListener('click', function() {
|
|
sidebarContainer.classList.toggle('collapsed');
|
|
|
|
// 更新图标
|
|
const icon = this.querySelector('i');
|
|
if (sidebarContainer.classList.contains('collapsed')) {
|
|
icon.classList.remove('ri-menu-fold-line');
|
|
icon.classList.add('ri-menu-unfold-line');
|
|
} else {
|
|
icon.classList.remove('ri-menu-unfold-line');
|
|
icon.classList.add('ri-menu-fold-line');
|
|
}
|
|
});
|
|
}
|
|
|
|
// 菜单展开/折叠功能
|
|
const menuHasChildren = document.querySelectorAll('.menu-has-children > .menu-link');
|
|
|
|
menuHasChildren.forEach(function(menuLink) {
|
|
menuLink.addEventListener('click', function() {
|
|
const parent = this.parentElement;
|
|
parent.classList.toggle('open');
|
|
});
|
|
});
|
|
|
|
// 激活当前页面对应的菜单项
|
|
function setActiveMenuItem() {
|
|
const currentPath = window.location.pathname;
|
|
const filename = currentPath.substring(currentPath.lastIndexOf('/') + 1);
|
|
|
|
// 查找匹配的菜单项并设置为激活状态
|
|
const menuLinks = document.querySelectorAll('.sidebar-menu a');
|
|
|
|
menuLinks.forEach(function(link) {
|
|
const href = link.getAttribute('href');
|
|
if (href === filename || href.includes(filename)) {
|
|
// 设置菜单项激活状态
|
|
if (link.classList.contains('submenu-link')) {
|
|
link.parentElement.classList.add('active');
|
|
// 确保父菜单展开
|
|
const parentMenu = link.closest('.menu-has-children');
|
|
if (parentMenu) {
|
|
parentMenu.classList.add('open');
|
|
}
|
|
} else {
|
|
link.parentElement.classList.add('active');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 设置默认展开状态
|
|
document.querySelectorAll('.menu-has-children').forEach(function(menuItem) {
|
|
menuItem.classList.add('open');
|
|
});
|
|
|
|
// 激活当前页面对应的菜单项
|
|
setActiveMenuItem();
|
|
});
|
|
</script> |