..
This commit is contained in:
那些花儿
@@ -0,0 +1,300 @@
|
||||
<!--#
|
||||
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;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sub-app-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="sub-app-container" id="sub-app-container">
|
||||
<!-- 左侧菜单区域 -->
|
||||
<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>
|
||||
|
||||
<!-- 右侧主体区域 -->
|
||||
<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")
|
||||
menuLinks.forEach((link) => {
|
||||
link.addEventListener("click", function (e) {
|
||||
// 检查是否有 data-pjax 属性
|
||||
const pjax = this.hasAttribute("data-pjax")
|
||||
|
||||
if (pjax) {
|
||||
// 如果有 pjax 属性，不阻止默认行为，让 pjax 处理
|
||||
// 但仍然处理菜单样式更新
|
||||
} 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")
|
||||
})
|
||||
})
|
||||
|
||||
$(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>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user