移动端适配
parent
6e1e30b983
commit
97eac844ec
|
|
@ -69,4 +69,5 @@
|
|||
|
||||
body {
|
||||
background-color: whitesmoke;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
|
|
@ -79,25 +79,21 @@
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
.pear-nav-control a {
|
||||
.pear-nav-control.pc a {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pear-nav-control .layui-nav-bar {
|
||||
.pear-nav-control.pc .layui-nav-bar {
|
||||
top: 0px !important;
|
||||
}
|
||||
|
||||
.pear-nav-control .layui-this * {
|
||||
color: #51A351 !important;
|
||||
.pear-nav-control.pc .layui-this * {
|
||||
color: #5FB878!important;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.pear-nav-control a:hover {
|
||||
font-weight: 600;
|
||||
color: #51A351 !important;
|
||||
font-size: 15px;
|
||||
.pear-nav-control.pc .layui-nav-bar{
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
/** 隐 藏 后 子 级 悬 浮 菜 单 */
|
||||
|
|
|
|||
|
|
@ -36,11 +36,13 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
|
|||
theme: "dark-theme",
|
||||
height: '100%',
|
||||
control: param.menu.control ? 'control' : false, // control
|
||||
defaultMenu: 1,
|
||||
defaultOpen: 0,
|
||||
defaultMenu: 0,
|
||||
accordion: param.menu.accordion,
|
||||
url: param.menu.data,
|
||||
parseData: false
|
||||
parseData: false,
|
||||
change:function(){
|
||||
compatible();
|
||||
}
|
||||
})
|
||||
sideMenu.selectItem(param.menu.select);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -213,11 +213,14 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
|
|||
|
||||
function createMenuAndControl(option) {
|
||||
|
||||
var control = '<ul class="layui-nav pear-nav-control">';
|
||||
var control = '<ul class="layui-nav pear-nav-control pc layui-hide-xs">';
|
||||
|
||||
var controlPe = '<ul class="layui-nav pear-nav-control layui-hide-sm">';
|
||||
// 声 明 头 部
|
||||
var menu = '<div class="layui-side-scroll ' + option.theme + '">'
|
||||
// 开 启 同 步 操 作
|
||||
var index = 0;
|
||||
var controlItemPe = '<dl class="layui-nav-child">';
|
||||
$.each(option.data, function(i, item) {
|
||||
var menuItem = '';
|
||||
var controlItem = '';
|
||||
|
|
@ -226,11 +229,19 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
|
|||
'" class="layui-this layui-nav-item"><a href="#">' + item.title + '</a></li>';
|
||||
menuItem = '<ul pear-id="' + item.id + '" lay-filter="' + option.elem +
|
||||
'" class="layui-nav arrow layui-nav-tree pear-nav-tree">';
|
||||
// 兼容移动端
|
||||
controlPe += '<li class="layui-nav-item"><a class="pe-title" href="javascript:;" >'+ item.title +'</a>';
|
||||
|
||||
controlItemPe += '<dd pear-href="' + item.href + '" pear-title="' + item.title + '" pear-id="' + item.id +'"><a href="javascript:void(0);">'+ item.title +'</a></dd>';
|
||||
|
||||
} else {
|
||||
controlItem = '<li pear-href="' + item.href + '" pear-title="' + item.title + '" pear-id="' + item.id +
|
||||
'" class="layui-nav-item"><a href="#">' + item.title + '</a></li>';
|
||||
menuItem = '<ul style="display:none" pear-id="' + item.id + '" lay-filter="' + option.elem +
|
||||
'" class="layui-nav arrow layui-nav-tree pear-nav-tree">';
|
||||
|
||||
controlItemPe += '<dd pear-href="' + item.href + '" pear-title="' + item.title + '" pear-id="' + item.id +'"><a href="javascript:void(0);">'+ item.title +'</a></dd>';
|
||||
|
||||
}
|
||||
index++;
|
||||
$.each(item.children, function(i, note) {
|
||||
|
|
@ -263,18 +274,22 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
|
|||
})
|
||||
menu += menuItem + '</ul>';
|
||||
control += controlItem;
|
||||
|
||||
})
|
||||
|
||||
|
||||
controlItemPe += "</li></dl></ul>"
|
||||
controlPe += controlItemPe;
|
||||
$("#" + option.control).html(control);
|
||||
$("#" + option.control).append(controlPe);
|
||||
$("#" + option.elem).html(menu);
|
||||
$("#" + option.control + " .pear-nav-control").on("click", "li", function() {
|
||||
$("#" + option.control + " .pear-nav-control").on("click", "[pear-id]", function() {
|
||||
$("#" + option.elem).find(".pear-nav-tree").css({
|
||||
display: 'none'
|
||||
});
|
||||
$("#" + option.elem).find(".pear-nav-tree[pear-id='" + $(this).attr("pear-id") + "']").css({
|
||||
display: 'block'
|
||||
});
|
||||
$("#" + option.control).find(".pe-title").html($(this).attr("pear-title"));
|
||||
$("#" + option.control).find("")
|
||||
option.change($(this).attr("pear-id"), $(this).attr("pear-title"), $(this).attr("pear-href"))
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
"menu": {
|
||||
"data": "admin/data/menu.json",
|
||||
"accordion": true,
|
||||
"control": false,
|
||||
"control": true,
|
||||
"select": "0"
|
||||
},
|
||||
"tab": {
|
||||
"muiltTab": true,
|
||||
"muiltTab": false,
|
||||
"keepState": true,
|
||||
"tabMax": 30,
|
||||
"index": {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<div class="layui-card-header">今日访问</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" id="value1">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value1">
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
<div class="layui-card-header">提交次数</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" id="value2">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value2">
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
<div class="layui-card-header">下载数量</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" id="value3">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value3">
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
<div class="layui-card-header">流量统计</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" id="value4">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value4">
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
|
|
|
|||
Loading…
Reference in New Issue