<!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://localhost:9091/simple/getTree",
|
dataType: "json",
|
success: function (data) {
|
//渲染
|
tree.render({
|
elem: "#list",
|
data: data.data,
|
isJump: true
|
});
|
},
|
});
|
});
|
</script>
|
</html>
|
