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.效果如下：