移动端适配

develop
就眠仪式 2020-08-11 19:34:44 +08:00
parent 6e1e30b983
commit 97eac844ec
7 changed files with 37 additions and 23 deletions

View File

@ -69,4 +69,5 @@
body {
background-color: whitesmoke;
height: 100%;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

View File

@ -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;
}
/** 隐 藏 后 子 级 悬 浮 菜 单 */

View File

@ -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);
}

View File

@ -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"))
})
}

View File

@ -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": {

View File

@ -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">