guns 功能菜单及主题设置

一、默认主题设置
二、点击顶部导航栏-->跳转指定页面
三、点击顶部导航栏->左侧菜单栏收缩展开
四、右侧菜单栏设置
五、页脚设置

一、默认主题设置

1.新增自己设置的主题样式css代码：env-sys/webapp/assets/common/module/theme/theme-lxh.css

2.找到设置主题的html位置，如下：

代码解读
3.在theme.html加入新增的主题theme: "lxh"

var themes = [{title: '新增主题', theme: 'lxh'},{title: '黑白主题', theme: 'admin'},{title: '黑色主题', theme: 'black'},{title: '蓝色主题', theme: 'blue'},{title: '藏青主题', theme: 'cyan'},{title: '黄色主题', theme: 'yellow'},{title: '绿色主题', theme: 'green'},{title: '紫白主题', theme: 'purple-white'},{title: '紫色主题', theme: 'purple'},{title: '白色主题', theme: 'white'},{title: '红白主题', theme: 'red-white'},{title: '红色主题', theme: 'red'}];for (var i = 0; i < themes.length; i++) {var str = '<div class="btnTheme" theme="theme-' + themes[i].theme + '" title="' + themes[i].title + '">';str += '      <img src="' + Feng.ctxPath + '/assets/common/module/theme/img/theme-' + themes[i].theme + '.png">';str += '   </div>';$('.theme-div').append(str)}// 切换主题var mTheme = layui.data(admin.tableName).theme;$('.btnTheme[theme=' + (mTheme ? mTheme : admin.defaultTheme) + ']').addClass('active');$('.btnTheme').click(function () {$('.btnTheme').removeClass('active');$(this).addClass('active');admin.changeTheme($(this).attr('theme'));});

4.然后在该html对应的js文件里设置默认主题defaultTheme为我们上面新增的主题theme-lxh，此处对应我们项目的js为admin.js
5.设置完毕

二、点击顶部导航栏–>跳转指定页面

本系统框架采用的是EasyWeb iframe v3.1.3
相关说明文档可参考：EasyWeb iframe（ https://easyweb.vip/ ）

1.顶部导航栏html位置

2._header.html部分代码解读

<div class="layui-header"><ul class="layui-nav layui-layout-left"><li class="layui-nav-item" lay-unselect><a ew-event="flexible" title="侧边伸缩"><i class="layui-icon layui-icon-shrink-right"></i></a></li><li class="layui-nav-item" lay-unselect><a ew-event="refresh" title="刷新"><i class="layui-icon layui-icon-refresh-3"></i></a></li>@var types = shiro.getUser().systemTypes;@if(tool.isNotEmpty(types)){@for(type in types) {@if(typeLP.index == 1){<li class="layui-nav-item layui-hide-xs layui-this" lay-unselect><a ew-href="${ctxPath}/system/console" nav-bind="${type.code}">${type.name}</a></li>@}else if(typeLP.index == 2){<li class="layui-nav-item layui-hide-xs" lay-unselect><a ew-href="${ctxPath}/emergency/statistic" ew-title="风险源统计" nav-bind="${type.code}">${type.name}</a></li>@}else if(typeLP.index == 3){<li class="layui-nav-item layui-hide-xs" lay-unselect><a ew-href="${ctxPath}/assist/statistics" ew-title="辅助统计分析" nav-bind="${type.code}">${type.name}</a></li>@}else if(typeLP.index == 4){<li class="layui-nav-item layui-hide-xs" lay-unselect><a ew-href="${ctxPath}/alarmTEvent" ew-title="事件管理" nav-bind="${type.code}">${type.name}</a></li>@}else if(typeLP.index == 5){<li class="layui-nav-item layui-hide-xs" lay-unselect><a ew-href="${ctxPath}/planTDisposal" ew-title="生成处置方案" nav-bind="${type.code}">${type.name}</a></li>@}else if(typeLP.index == 6){<li class="layui-nav-item layui-hide-xs" lay-unselect><a ew-href="${ctxPath}/assist/gisModel" ew-title="Gis模型" nav-bind="${type.code}">${type.name}</a></li>@}@}@}</ul>
</div>

这里 typeLP.index 对应的就是顶部导航栏第1、2、3、4、5、6个，此处所使用的的是EasyWeb iframe框架中，a 标签的 ew-href 属性，即打开一个新页签，ew-title 设置新页签的标题名称，如下：

3.设置完毕

三、点击顶部导航栏->左侧菜单栏收缩展开

1.找到侧边栏对应html代码：

2._sidebar.html 代码解读：

3.对应效果如下：（默认第一个菜单栏展开，其余菜单栏收缩）

4.设置完毕

四、右侧菜单栏设置

1.对应代码位置：

2.添加链接：

3.效果如下：

五、页脚设置

1.代码位置：env-sys/webapp/pages/common/_footer.html

2.代码解读:

@/* 页脚 */
<div class="layui-footer">Copyright © 2019 Stylefeng All rights reserved.<span class="pull-right">Version 企业版 v1.0</span>
</div>@/* 手机屏幕遮罩层 */
<div class="site-mobile-shade"></div>

3.效果如下：