<!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">
|
// document.addEventListener('plusready', function(){
|
// //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
|
// });
|
layui.use('tree', function () {
|
var tree = layui.tree,
|
layer = layui.layer
|
$ = layui.jquery;
|
|
//列表菜单
|
$.post({
|
url: "http://192.168.0.13: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 <= 25) {
|
$('.grid-container').css({
|
'grid-template-columns': 'repeat(5, 1fr)',
|
'grid-gap': '1px',
|
'margin': '2px'
|
});
|
//当数据小于等于25个时，调整他的外边距
|
} else if (len <= 49) {
|
$('.grid-item').css({"padding": "17px"});
|
} else if (len > 49) {
|
//当数据大于25个时，取消放大效果
|
$('#list').css("transform", "scale(1)");
|
//并且每列展示20个
|
$('.grid-container').css("grid-template-columns", "repeat(20, 1fr)");
|
}
|
}
|
})
|
|
//树类菜单
|
// $.post({
|
// url: "http://192.168.0.207:9091/simple/getTree",
|
// dataType: "json",
|
// success: function(data) {
|
// //渲染
|
// tree.render({
|
// elem: '#list',
|
// data: data.data,
|
// isJump: true
|
// });
|
// }
|
// });
|
});
|
|
</script>
|
</html>
|
