431 lines
12 KiB
HTML
431 lines
12 KiB
HTML
<!--#
|
|
layout("/layouts/v4/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
.sub-app-container {
|
|
/*max-width: 80%;*/
|
|
margin: 0 auto;
|
|
background: #fff;
|
|
/*border-radius: 8px;*/
|
|
/*box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);*/
|
|
display: flex;
|
|
overflow: hidden;
|
|
min-height: calc(100vh - 64px);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sidebar-menu {
|
|
width: 250px;
|
|
background: rgb(64 109 157);
|
|
color: #fff;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.menu-header {
|
|
padding: 20px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.menu-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.menu-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.menu-item {
|
|
position: relative;
|
|
}
|
|
|
|
.menu-link {
|
|
padding: 12px 20px;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
border-left: 3px solid transparent;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.menu-link > span {
|
|
white-space: nowrap; /* 禁止换行 */
|
|
overflow: hidden; /* 隐藏超出部分 */
|
|
text-overflow: ellipsis; /* 显示省略号 */
|
|
flex: 1; /* 让文字部分占据剩余空间 */
|
|
}
|
|
|
|
.menu-link:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-left-color: #fff;
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.menu-link.active {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-left-color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.menu-icon {
|
|
margin-right: 10px;
|
|
vertical-align: middle;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.submenu {
|
|
list-style: none;
|
|
padding: 0;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease;
|
|
}
|
|
|
|
.submenu.active {
|
|
max-height: 500px;
|
|
}
|
|
|
|
.submenu .menu-link {
|
|
padding-left: 50px;
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.submenu .menu-link:hover {
|
|
padding-left: 55px;
|
|
}
|
|
|
|
.submenu .submenu .menu-link {
|
|
padding-left: 70px;
|
|
}
|
|
|
|
.submenu .submenu .menu-link:hover {
|
|
padding-left: 75px;
|
|
}
|
|
|
|
.menu-toggle {
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
transition: transform 0.3s ease;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.menu-toggle.active {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
padding: 30px;
|
|
background: #fff;
|
|
}
|
|
|
|
.content-header {
|
|
margin-bottom: 30px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.content-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
margin: 0;
|
|
}
|
|
|
|
.content-subtitle {
|
|
color: #7f8c8d;
|
|
margin-top: 5px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.content-body {
|
|
min-height: 400px;
|
|
}
|
|
|
|
/* 悬浮菜单按钮样式 */
|
|
.menu-toggle-btn {
|
|
display: none;
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background-color: rgb(64 109 157);
|
|
color: white;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
font-size: 24px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
|
z-index: 1000;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.menu-toggle-btn:hover {
|
|
background-color: rgb(54 99 147);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.menu-toggle-btn.active {
|
|
background-color: #d9534f;
|
|
}
|
|
|
|
/* 菜单遮罩层样式 */
|
|
.menu-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 998;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
/*.sub-app-container {*/
|
|
/* !* flex-direction: column; *!*/
|
|
/*}*/
|
|
|
|
.sidebar-menu {
|
|
position: fixed;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 80%;
|
|
height: 100vh;
|
|
z-index: 999;
|
|
transition: left 0.3s ease;
|
|
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.sidebar-menu.show {
|
|
left: 0;
|
|
}
|
|
|
|
.menu-toggle-btn {
|
|
display: block;
|
|
}
|
|
|
|
.menu-overlay.show {
|
|
display: block;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 20px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="sub-app-container" id="sub-app-container">
|
|
<!-- 菜单遮罩层 -->
|
|
<div class="menu-overlay" id="menu-overlay"></div>
|
|
|
|
<!-- 左侧菜单区域 -->
|
|
<nav class="sidebar-menu">
|
|
<div class="menu-header">
|
|
<h2 class="menu-title">福利管理系统</h2>
|
|
</div>
|
|
|
|
<!--# if(!isEmpty(menus)) { #-->
|
|
<ul class="menu-list">
|
|
<!--# for(menu in menus){ #-->
|
|
<li class="menu-item" data-id="${menu.id}">
|
|
<!--# if(!isEmpty(menu.children)) { #-->
|
|
<a href="${menu.href!}" class="menu-link">
|
|
<!--# if(!isEmpty(menu.icon)) { #-->
|
|
<i class="fa fa-file menu-icon"></i>
|
|
<!--# } else {#-->
|
|
<i class="fa fa-file menu-icon"></i>
|
|
<!--# } #-->
|
|
<span>${menu.name}</span>
|
|
<i class="menu-toggle fa fa-chevron-down"></i>
|
|
</a>
|
|
<ul class="submenu">
|
|
<!--# for(child in menu.children){ #-->
|
|
<li class="menu-item" data-id="${child.id}">
|
|
<a href="${child.href!}" data-pjax class="menu-link">
|
|
<!--# if(!isEmpty(child.icon)) { #-->
|
|
<i class="fa fa-file menu-icon"></i>
|
|
<!--# } else {#-->
|
|
<i class="fa fa-file menu-icon"></i>
|
|
<!--# } #-->
|
|
<span>${child.name}</span>
|
|
</a>
|
|
</li>
|
|
<!--# } #-->
|
|
</ul>
|
|
<!--# } else { #-->
|
|
<a href="${menu.href!}" data-pjax class="menu-link">
|
|
<!--# if(!isEmpty(menu.icon)) { #-->
|
|
<i class="fa fa-file menu-icon"></i>
|
|
<!--# } else {#-->
|
|
<i class="fa fa-file menu-icon"></i>
|
|
<!--# } #-->
|
|
<span>${menu.name}</span>
|
|
</a>
|
|
<!--# } #-->
|
|
</li>
|
|
<!--# } #-->
|
|
</ul>
|
|
<!--# } #-->
|
|
</nav>
|
|
|
|
<!-- 悬浮菜单按钮 -->
|
|
<div class="menu-toggle-btn" id="menu-toggle-btn">
|
|
<i class="fa fa-bars"></i>
|
|
</div>
|
|
|
|
<!-- 右侧主体区域 -->
|
|
<main class="main-content">
|
|
<header class="content-header">
|
|
<h1 class="content-title">福利项目管理</h1>
|
|
<!-- <p class="content-subtitle"></p>-->
|
|
</header>
|
|
|
|
<div class="content-body" id="sub-app-container-main-content">${layoutContent!}</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const menuLinks = document.querySelectorAll(".menu-link")
|
|
const contentTitle = document.querySelector(".content-title")
|
|
const menuToggleBtn = document.getElementById("menu-toggle-btn")
|
|
const sidebarMenu = document.querySelector(".sidebar-menu")
|
|
const menuOverlay = document.getElementById("menu-overlay")
|
|
const isMobile = window.innerWidth <= 768
|
|
|
|
// 移动设备下点击菜单项后自动收起菜单
|
|
function toggleMobileMenu(show) {
|
|
if (show) {
|
|
sidebarMenu.classList.add("show")
|
|
menuOverlay.classList.add("show")
|
|
menuToggleBtn.classList.add("active")
|
|
menuToggleBtn.innerHTML = '<i class="fa fa-times"></i>'
|
|
} else {
|
|
sidebarMenu.classList.remove("show")
|
|
menuOverlay.classList.remove("show")
|
|
menuToggleBtn.classList.remove("active")
|
|
menuToggleBtn.innerHTML = '<i class="fa fa-bars"></i>'
|
|
}
|
|
}
|
|
|
|
// 初始化菜单按钮状态
|
|
if (window.innerWidth <= 768) {
|
|
menuToggleBtn.style.display = "block"
|
|
} else {
|
|
menuToggleBtn.style.display = "none"
|
|
}
|
|
|
|
menuLinks.forEach((link) => {
|
|
link.addEventListener("click", function (e) {
|
|
// 检查是否有 data-pjax 属性
|
|
const pjax = this.hasAttribute("data-pjax")
|
|
|
|
if (pjax) {
|
|
// 如果有 pjax 属性，不阻止默认行为，让 pjax 处理
|
|
// 但仍然处理菜单样式更新
|
|
|
|
// 在移动设备上，点击菜单项后自动收起菜单
|
|
if (window.innerWidth <= 768) {
|
|
toggleMobileMenu(false)
|
|
}
|
|
} else {
|
|
// 如果没有 pjax 属性，阻止默认跳转
|
|
e.preventDefault()
|
|
}
|
|
|
|
// 移除所有active状态
|
|
menuLinks.forEach((l) => l.classList.remove("active"))
|
|
|
|
if (!pjax) {
|
|
// 子目录
|
|
const submenu = this.nextElementSibling
|
|
// 子目录有没有展开
|
|
const isActive = submenu && submenu.classList.contains("active")
|
|
|
|
// 关闭所有子菜单
|
|
document.querySelectorAll(".submenu").forEach((sm) => {
|
|
sm.classList.remove("active")
|
|
})
|
|
document.querySelectorAll(".menu-toggle").forEach((mt) => {
|
|
mt.classList.remove("active")
|
|
})
|
|
|
|
// 切换当前子菜单状态
|
|
if (submenu && !isActive) {
|
|
submenu.classList.add("active")
|
|
const menuToggle = this.querySelector(".menu-toggle")
|
|
if (menuToggle) {
|
|
// 给 menu-toggle 增加 class
|
|
menuToggle.classList.add("active")
|
|
}
|
|
}
|
|
} else {
|
|
// 业务菜单
|
|
// 更新主内容区域标题
|
|
// const menuText = this.textContent.trim()
|
|
// contentTitle.textContent = menuText
|
|
}
|
|
|
|
// 添加当前点击的active状态
|
|
this.classList.add("active")
|
|
})
|
|
})
|
|
|
|
// 菜单切换按钮点击事件
|
|
menuToggleBtn.addEventListener("click", function() {
|
|
const isMenuShown = sidebarMenu.classList.contains("show")
|
|
toggleMobileMenu(!isMenuShown)
|
|
})
|
|
|
|
// 遮罩层点击事件，点击遮罩层关闭菜单
|
|
menuOverlay.addEventListener("click", function() {
|
|
toggleMobileMenu(false)
|
|
})
|
|
|
|
// 窗口大小变化时处理菜单状态
|
|
window.addEventListener("resize", function() {
|
|
if (window.innerWidth <= 768) {
|
|
menuToggleBtn.style.display = "block"
|
|
// 如果从大屏幕变为小屏幕，默认收起菜单
|
|
if (!isMobile) {
|
|
toggleMobileMenu(false)
|
|
}
|
|
} else {
|
|
menuToggleBtn.style.display = "none"
|
|
// 大屏幕下移除所有移动端相关类
|
|
sidebarMenu.classList.remove("show")
|
|
menuOverlay.classList.remove("show")
|
|
menuToggleBtn.classList.remove("active")
|
|
}
|
|
})
|
|
|
|
$(document).pjax("#sub-app-container .sidebar-menu a[data-pjax]", "#sub-app-container-main-content", {
|
|
maxCacheLength: 0,
|
|
push: true,
|
|
replace: false,
|
|
fragment: "#sub-app-container-main-content",
|
|
timeout: 8000
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|