<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8" />
|
<meta
|
name="viewport"
|
content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
/>
|
<title></title>
|
<script src="js/layui/layui.js"></script>
|
<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />
|
<link rel="stylesheet" type="text/css" href="css/index.css" />
|
</head>
|
<body>
|
<!-- 头部 -->
|
<div class="header">
|
<h1>看板目录</h1>
|
</div>
|
|
<!-- 中间部分 -->
|
<div class="container" id="list">
|
<div class="grid-container" id="gridContainer">
|
<!-- 这里将通过JavaScript动态渲染九宫格 -->
|
</div>
|
</div>
|
|
<!-- 底边 -->
|
<div class="footer">
|
<h4>©宁波广深科技有限公司</h4>
|
</div>
|
</body>
|
<script type="text/javascript">
|
|
layui.use("tree", function () {
|
var tree = layui.tree,
|
layer = layui.layer;
|
$ = layui.jquery;
|
|
//列表菜单
|
/* $.post({
|
url: "http://192.168.1.223:9091/simple/list",
|
success: function (data) {
|
var len = data.data.length;
|
|
data.data.forEach(function (item) {
|
$('#gridContainer').append(`<div class="grid-item"><a href="${item.href}" target="_blank">${item.title}</a></div>`);
|
})
|
|
//数据小于等于9个时，以默认的九宫格展示
|
if (len <= 9) {
|
$('.grid-container').css({
|
'grid-template-columns': 'repeat(3, 1fr)',
|
'grid-gap': '10px',
|
'margin': '20px'
|
});
|
//当数据小于等于25个时，调整他的外边距
|
} else if (len <= 25) {
|
$('.grid-item').css({"padding": "17px"});
|
} else if (len > 25) {
|
//当数据大于25个时，取消放大效果
|
$('#list').css("transform", "scale(1)");
|
//并且每列展示20个
|
$('.grid-container').css("grid-template-columns", "repeat(20, 1fr)");
|
}
|
}
|
})*/
|
|
//树类菜单
|
$.post({
|
url: "http://192.168.1.223:9091/simple/getTree",
|
dataType: "json",
|
success: function (data) {
|
//渲染
|
tree.render({
|
elem: "#list",
|
data: data.data,
|
isJump: true
|
});
|
},
|
});
|
});
|
</script>
|
</html>
|
