mirror of
https://gitee.com/ulthon/ulthon_admin.git
synced 2026-07-07 10:32:48 +08:00
页面适配手机,新增皮肤切换功能
This commit is contained in:
@@ -1,14 +1,14 @@
|
||||
<div class="layui-header">
|
||||
<a class="layui-logo" href="/">{:get_system_config('site_name')}</a>
|
||||
<!-- 头部区域(可配合layui已有的水平导航) -->
|
||||
<ul class="layui-nav layui-layout-left">
|
||||
<!-- 头部区域(可配合layui已有的水平导航) PC端显示 -->
|
||||
<ul class="layui-nav layui-layout-left layui-hide-xs pc-nav-container">
|
||||
<li class="layui-nav-item header-nav-item" data-name="Index" ><a href="{:url('admin/Index/index')}">首页</a></li>
|
||||
<li class="layui-nav-item header-nav-item" data-name="User" ><a href="{:url('admin/User/index')}">用户管理</a></li>
|
||||
<li class="layui-nav-item header-nav-item" data-name="File" ><a href="{:url('admin/File/index')}">文件管理</a></li>
|
||||
<li class="layui-nav-item header-nav-item" data-name="Admin" ><a href="{:url('admin/Admin/index')}">管理员管理</a></li>
|
||||
<li class="layui-nav-item header-nav-item" data-name="System" ><a href="{:url('admin/System/index')}">系统设置</a></li>
|
||||
</ul>
|
||||
<ul class="layui-nav layui-layout-right">
|
||||
<ul class="layui-nav layui-layout-right layui-hide-xs">
|
||||
<li class="layui-nav-item header-nav-item" data-name="Login">
|
||||
<a href="javascript:;">
|
||||
<img src="{$admin.avatar}" class="layui-nav-img">
|
||||
@@ -22,4 +22,64 @@
|
||||
|
||||
<li class="layui-nav-item"><a href="{:url('Login/logout')}">退出</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 手机端显示 -->
|
||||
|
||||
<div class="left-bottom-options layui-show-xs-block layui-hide-md layui-icon layui-icon-right">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="layui-nav layui-layout-right layui-show-xs-block layui-hide-md">
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;" class="mobile-nav-current-title">菜单</a>
|
||||
<dl class="layui-nav-child mobile-nav-container"> <!-- 二级菜单 -->
|
||||
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item header-nav-item" data-name="Login">
|
||||
<a href="javascript:;">
|
||||
<img src="{$admin.avatar}" class="layui-nav-img">
|
||||
</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="{:url('Admin/edit')}">基本资料</a></dd>
|
||||
<dd><a href="{:url('Admin/password')}">安全设置</a></dd>
|
||||
<dd><a href="{:url('Login/logout')}">退出</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tpl" style="display: none;">
|
||||
<dd class="mobile-nav-item header-nav-item"><a href="{:url('Admin/edit')}">基本资料</a></dd>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
$(function(){
|
||||
$('.pc-nav-container').children().each(function(n,e){
|
||||
var nav = $('.tpl .mobile-nav-item').clone();
|
||||
|
||||
nav.data('name',$(e).data('name'))
|
||||
|
||||
nav.html($(e).html())
|
||||
|
||||
nav.appendTo('.mobile-nav-container')
|
||||
|
||||
})
|
||||
|
||||
$('.left-bottom-options').click(function(){
|
||||
layer.open({
|
||||
type:1,
|
||||
content:$('.layui-side'),
|
||||
anim:3,
|
||||
offset:'l',
|
||||
area:['60%','100%'],
|
||||
shadeClose:true,
|
||||
title:false,
|
||||
closeBtn:false,
|
||||
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
@@ -1,42 +1,76 @@
|
||||
<link rel="stylesheet" href="/static/css/reset.css">
|
||||
<link rel="stylesheet" href="/static/css/pagination.css">
|
||||
<link rel="stylesheet" href="/static/lib/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="/static/css/common.css">
|
||||
<script src="/static/lib/jquery/jquery-3.4.1.min.js"></script>
|
||||
<script src="/static/lib/jquery/jquery.cookie.js"></script>
|
||||
<script src="/static/lib/layui/layui.js"></script>
|
||||
<script src="/static/js/common.js"></script>
|
||||
|
||||
<style>
|
||||
.main-container{
|
||||
.main-container {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.layui-table img{
|
||||
|
||||
.layui-table img {
|
||||
max-width: 60px;
|
||||
max-height: 60px;;;
|
||||
max-height: 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
//JavaScript代码区域
|
||||
layui.use(['element','layer'], function () {
|
||||
layui.use(['element', 'layer', 'util'], function () {
|
||||
var element = layui.element;
|
||||
var util = layui.util;
|
||||
var defaultCookieSetting = {
|
||||
path:'/',
|
||||
expires: 7,
|
||||
}
|
||||
//执行
|
||||
util.fixbar({
|
||||
bar1: ''
|
||||
, click: function (type) {
|
||||
console.log(type);
|
||||
if (type === 'bar1') {
|
||||
var skinName = $.cookie('skin-name')
|
||||
$('body').removeClass()
|
||||
if(skinName == 'skin-1'){
|
||||
$.cookie('skin-name','skin-0',defaultCookieSetting)
|
||||
$('body').addClass('skin-0')
|
||||
}else{
|
||||
$.cookie('skin-name','skin-1',defaultCookieSetting)
|
||||
$('body').addClass('skin-1')
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
$('.layui-side').addClass('layui-hide-xs')
|
||||
|
||||
});
|
||||
|
||||
$(function(){
|
||||
if(typeof currentHeaderNavItem != "undefined"){
|
||||
$('.header-nav-item').each(function(i,e){
|
||||
if($(e).data('name') == currentHeaderNavItem){
|
||||
$(e).addClass('layui-this')
|
||||
}
|
||||
})
|
||||
}
|
||||
if(typeof currentLeftNavItem != "undefined"){
|
||||
$('.left-nav-item').each(function(i,e){
|
||||
if($(e).data('name') == currentLeftNavItem){
|
||||
$(e).addClass('layui-this')
|
||||
}
|
||||
})
|
||||
}
|
||||
$(function () {
|
||||
var skinName = $.cookie('skin-name')
|
||||
|
||||
$('body').addClass(skinName)
|
||||
setTimeout(() => {
|
||||
if (typeof currentHeaderNavItem != "undefined") {
|
||||
$('.header-nav-item').each(function (i, e) {
|
||||
if ($(e).data('name') == currentHeaderNavItem) {
|
||||
$(e).addClass('layui-this')
|
||||
}
|
||||
})
|
||||
}
|
||||
if (typeof currentLeftNavItem != "undefined") {
|
||||
$('.left-nav-item').each(function (i, e) {
|
||||
if ($(e).data('name') == currentLeftNavItem) {
|
||||
$(e).addClass('layui-this')
|
||||
}
|
||||
})
|
||||
}
|
||||
}, 1);
|
||||
})
|
||||
</script>
|
||||
{:get_system_config('site_tongji')}
|
||||
{:get_system_config('site_tongji')}
|
||||
Reference in New Issue
Block a user