<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>后台管理</title>
<link rel="shortcut icon"
href="https://ceepsp-1251007425
.cos
.ap-shanghai
.myqcloud
.com/20220609113851230946420220609113851">
<link rel="stylesheet" href="{
$Think
.config
.homepagenoindex}public/layui/css/layui
.css" media="all" />
<link rel="stylesheet" href="{
$Think
.config
.homepagenoindex}public/css/admin
.css" media="all" />
<link rel="stylesheet" href="{
$Think
.config
.homepagenoindex}public/iconfont/iconfont
.css" media="all" />
<script type="text/javascript" src="{
$Think
.config
.homepagenoindex}public/js/jquery-1
.12
.4-min
.js"></script>
<script type="text/javascript" src="{
$Think
.config
.homepagenoindex}public/js/shuiyin
.js"></script>
<script type="text/javascript" src="{
$Think
.config
.homepagenoindex}public/layui/layui
.js"></script>
<script src="{
$Think
.config
.homepagenoindex}public/js/cos-js-sdk-v5
.min
.js"></script>
<style>
ol li a {
background-color: rgba
(0, 0, 0, 1
) !important;
}
.three_this {
background-color: #ebba92 !important;
}
.layui-form {
margin-top: 15px !important;
}
/* 关键修改：无下级菜单靠左样式 + 覆盖Layui默认缩进 */
.menu-type1 {
padding-left: 20px !important;
}
.menu-type1 a {
padding-left: 20px !important;
margin-left: 0 !important;
}
.layui-nav-tree
.layui-nav-child a {
padding-left: 20px !important;
}
.layui-nav-tree {
padding-left: 0 !important;
}
/* 新增：Tab容器样式，填满右侧区域 */
.layui-tab-admin {
position: absolute;
top: 60px;
right: 0;
bottom: 0;
left: 200px;
margin: 0;
box-sizing: border-box;
}
.layui-tab-content-admin {
height: calc
(100% - 40px
);
padding: 0;
}
.layui-tab-item-admin {
height: 100%;
overflow: hidden;
}
.layui-tab-item-admin iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
<!-- 定义全局变量，供JS使用 -->
<script>
var currentAction = "{
$(string
)request
()->action
()}";
var homePage = "{
$Think
.config
.homepage}";
var homePageNoIndex = "{
$Think
.config
.homepagenoindex}";
</script>
</head>
<body class="layui-layout-body">
<div id="LAY_app" class="layadmin-tabspage-none">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<!-- 头部区域（保留原有代码） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item layui-hide-xs" lay-unselect="">
<a href="" target="_blank" title="前台">
<i class="layui-icon layui-icon-website"></i>
</a>
</li>
<li class="layui-nav-item">
<a href="">
<i class="layui-icon layui-icon-notice"></i>
</a>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:void
(0
);" class="phone">{
$Think
.session
.loupan
.name}-{
$Think
.session
.loupan
.phone}</a>
<dl class="layui-nav-child layui-anim layui-anim-upbit">
<dd><a href="javascript:open1
();">修改密码</a></dd>
<hr>
<dd><a href="javascript:logout
();">退 出</a></dd>
</dl>
</li>
</ul>
</div>
<div class="layui-side layui-side-menu">
<div class="layui-side-scroll">
<div class="layui-logo" lay-href=""> <span>后台管理</span> </div>
<!-- 菜单容器：清空原有静态内容，仅保留空的UL -->
<ul class="layui-nav layui-nav-tree ul00" lay-filter="test"></ul>
</div>
</div>
<!-- 关键修改：替换原{__CONTENT__}为Layui选项卡容器 -->
<div class="layui-tab layui-tab-card layui-tab-admin" lay-filter="adminTab">
<ul class="layui-tab-title"></ul>
<div class="layui-tab-content layui-tab-content-admin">
</div>
</div>
</div>
</div>
<script>
// 全局存储Layui的element和layer对象
var element, layer;
/**
* 动态渲染左侧菜单（适配新接口返回结构）
*/
function list
() {
$.ajax
({
type: 'post',
url: homePage + "Admin/juese/juese",
dataType: "json",
success:
function (res
) {
if
(res
.code !== 0
) {
layer
.msg
(res
.msg || '菜单加载失败', {icon: 2}
);
return;
}
var menuList = res
.menuList || [];
if
(menuList
.length === 0
) {
layer
.msg
('暂无可用菜单', {icon: 0}
);
return;
}
var
$menuContainer =
$('
.ul00'
);
$menuContainer
.empty
();
// 遍历菜单数据，分类型渲染
menuList
.forEach
(menu => {
if
(menu
.type === 1
) {
renderType1Menu
($menuContainer, menu
);
} else if
(menu
.type === 2
) {
renderType2Menu
($menuContainer, menu
);
}
}
);
// 重新渲染Layui导航组件
element
.render
('nav'
);
},
error:
function (xhr, status, error
) {
console
.error
('菜单加载失败：', error
);
layer
.msg
('菜单加载失败，请刷新页面', {icon: 2}
);
}
}
);
}
/**
* 渲染类型1菜单（无子集）- 移除href跳转，添加自定义属性
* @param
$container 父容器
* @param menu 菜单数据
*/
function renderType1Menu
($container, menu
) {
var menuAction = menu
.url
.split
('/'
).pop
();
var isActive = menuAction === currentAction ? 'layui-this' : '';
// 关键修改：href改为javascript:void
(0
)，添加data-url/data-title存储跳转信息
var menuHtml = `
<li id="
${menu
.id}" class="layui-nav-item
${isActive} menu-type1">
<a href="javascript:void
(0
);" data-url="
${homePage + menu
.url}" data-title="
${menu
.name}">
<i class="layui-icon "></i><cite>
${menu
.name}</cite>
</a>
</li>
`;
$container
.append
(menuHtml
);
}
/**
* 渲染类型2菜单（有子集）- 同样移除href跳转
* @param
$container 父容器
* @param menu 菜单数据
*/
function renderType2Menu
($container, menu
) {
var childActions =
(menu
.data || []
).map
(item => item
.url
.split
('/'
).pop
());
var isExpanded = childActions
.includes
(currentAction
) ? 'layui-nav-itemed' : '';
var childMenuHtml = '';
(menu
.data || []
).forEach
(child => {
var childAction = child
.url
.split
('/'
).pop
();
var isChildActive = childAction === currentAction ? 'layui-this' : '';
// 关键修改：子菜单同样添加自定义属性
childMenuHtml += `
<dl class="layui-nav-child">
<dd class="
${isChildActive}">
<a href="javascript:void
(0
);" data-url="
${homePage + child
.url}" data-title="
${child
.name}">
<i class="layui-icon "></i><cite style="margin-left: 20px">
${child
.name}</cite>
</a>
</dd>
</dl>
`;
}
);
var menuHtml = `
<li id="
${menu
.id}" class="layui-nav-item
${isExpanded}">
<a href="javascript:void
(0
);">
<i class="layui-icon layui-icon-release"></i><cite>
${menu
.name}</cite>
</a>
${childMenuHtml}
</li>
`;
$container
.append
(menuHtml
);
}
/**
* 新增：添加/切换Tab面板
* @param title Tab标题
* @param url 页面链接
* @param id Tab唯一标识（默认用url的哈希值）
*/
function addTab
(title, url, id
) {
// 生成唯一ID（避免重复）
var tabId = id || 'tab_' + url
.replace
(/\//g, '_'
).replace
(/\:/g, '_'
);
// 判断Tab是否已存在
if
($('
.layui-tab-title li[lay-id="' + tabId + '"]'
).length > 0
) {
// 存在则切换Tab
element
.tabChange
('adminTab', tabId
);
} else {
// 不存在则新增Tab
element
.tabAdd
('adminTab', {
title: title,
content: `<div class="layui-tab-item-admin"><iframe src="
${url}"></iframe></div>`,
id: tabId
}
);
// 切换到新Tab
element
.tabChange
('adminTab', tabId
);
}
}
// 初始化Layui组件
layui
.use
(['element', 'layer'],
function () {
element = layui
.element;
layer = layui
.layer;
// 关键修改：菜单点击事件委托（动态生成的菜单需用事件委托）
$('
.ul00'
).on
('click', 'a[data-url]',
function (e
) {
// 阻止默认跳转行为
e
.preventDefault
();
// 获取自定义属性中的标题和链接
var title =
$(this
).data
('title'
);
var url =
$(this
).data
('url'
);
// 添加/切换Tab
addTab
(title, url
);
}
);
// 原有事件绑定逻辑保留
$("
.menu_three"
).on
("click",
function () {
$(this
).next
().toggle
();
}
);
$("ol"
).on
("click", "li a",
function () {
$.each
($(this
).parent
().siblings
(),
function (i, e
) {
$(e
).find
("a"
).removeClass
('three_this'
)
}
);
$(this
).addClass
('three_this'
);
}
);
// 加载并渲染菜单
list
();
}
);
// 窗口大小调整逻辑（保留原有）
$(window).resize(function () {
if
(document
.body
.clientWidth < 1200
) {
window.resizeTo
(document
.body
.clientWidth
);
}
}
());
// 退出登录逻辑（保留原有）
function logout
() {
$.ajax
({
type: 'post',
url: homePage + "Admin/login/logout",
dataType: "json",
success:
function (data
) {
layer
.msg
(data
.msg, {
time: 2000
},
function () {
if
(data
.code == '0'
) {
window.location.href = homePage + "Admin/login/index";
} else {
window.location.reload();
}
}
);
},
}
)
}
// 修改密码逻辑（保留原有）
function open1
() {
layer
.open
({
type: 2,
content: [homePage + "Admin/login/editpass", 'no'],
area: ['500px', '300px'],
btn: ['确定', '取消'],
yes:
function (index, layero
) {
var res =
window["layui-layer-iframe" + index]
.callbackdata
();
$.ajax
({
type: 'post',
url: homePage + "Admin/login/editpassword",
data: {
id: "{
$Think
.session
.loupan
.uid}",
oldpass: res
.oldpass,
newpass: res
.newpass,
repass: res
.repass
},
dataType: "json",
success:
function (data
) {
layer
.msg
(data
.msg, {
time: 2000
},
function () {
if
(data
.code == 0
) {
layer
.close
(index
);
}
}
);
},
}
)
}
}
);
}
</script>
</body>
</html> 解决点击左侧菜单栏页面整体刷新 不要重新渲染左侧菜单栏选择的时候
本文介绍了一种通过使用JavaScript监听窗口大小变化并强制页面刷新的方法，以解决部分浏览器因性能不佳或功能不全导致的响应式布局问题。
扫一扫
564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
