zhaobao
/
layui_back


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
							<!DOCTYPE html>
<html lang="en" class="bg-white">
<head>
    <title>设置</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/module/admin.css?v=318"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        /*body {*/
        /*    overflow-x: hidden;*/
        /*}*/

        /*.layui-card-body {*/
        /*    padding: 0;*/
        /*}*/

        /*.theme-div {*/
        /*    padding-left: 15px;*/
        /*    padding-top: 20px;*/
        /*    margin-bottom: 10px;*/
        /*}*/

        /*.btnTheme {*/
        /*    display: inline-block;*/
        /*    margin: 0 6px 15px 0;*/
        /*    padding: 4px;*/
        /*    border: 1px solid #fff;*/
        /*}*/

        /*.btnTheme img {*/
        /*    width: 80px;*/
        /*    height: 50px;*/
        /*    border: 1px solid #f2f2f2;*/
        /*    background: #F2F2F2;*/
        /*    cursor: pointer;*/
        /*}*/

        /*.btnTheme:hover, .btnTheme.active {*/
        /*    border-color: #5FB878;*/
        /*}*/

        /*.more-menu-item {*/
        /*    display: block;*/
        /*    height: 50px;*/
        /*    line-height: 50px;*/
        /*    font-size: 16px;*/
        /*    border-bottom: 1px solid #e8e8e8;*/
        /*    color: #333;*/
        /*    padding: 0px 25px;*/
        /*    font-style: normal;*/
        /*}*/

        /*.more-menu-item:first-child {*/
        /*    border-top: 1px solid #e8e8e8;*/
        /*}*/

        /*.more-menu-item:hover {*/
        /*    background: #F2F2F2;*/
        /*    color: #333;*/
        /*}*/

        /*.more-menu-item .layui-icon {*/
        /*    padding-right: 10px;*/
        /*    font-size: 18px;*/
        /*}*/

        /*.more-menu-item:after {*/
        /*    content: "\e602";*/
        /*    font-family: layui-icon !important;*/
        /*    position: absolute;*/
        /*    right: 16px;*/
        /*    color: #999;*/
        /*}*/

        /*.more-menu-item.no-icon:after {*/
        /*    content: "";*/
        /*}*/

        /*!** 设置表单样式 *!*/
        /*.set-item-label {*/
        /*    display: inline-block;*/
        /*    height: 38px;*/
        /*    line-height: 38px;*/
        /*    padding-left: 20px;*/
        /*    color: #333333;*/
        /*}*/

        /*.set-item-ctrl {*/
        /*    display: inline-block;*/
        /*    height: 38px;*/
        /*    line-height: 38px;*/
        /*}*/

        /*.set-item-ctrl > * {*/
        /*    margin: 0;*/
        /*}*/
        /* theme */
        .more-theme-list {
            padding-left: 15px;
            padding-top: 20px;
            margin-bottom: 10px;
        }

        .more-theme-item {
            padding: 4px;
            margin: 0 6px 15px 0;
            display: inline-block;
            border: 1px solid transparent;
        }

        .more-theme-item img {
            width: 80px;
            height: 50px;
            background: #f5f7f9;
            box-sizing: border-box;
            border: 1px solid #f5f7f9;
            cursor: pointer;
        }

        .more-theme-item:hover, .more-theme-item.active {
            border-color: #5FB878;
        }

        .more-menu-item {
            color: #595959;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            padding: 0 25px;
            border-bottom: 1px solid #e8e8e8;
            font-style: normal;
            display: block;
        }

        /* menu */
        .more-menu-item:first-child {
            border-top: 1px solid #e8e8e8;
        }

        .more-menu-item:hover {
            color: #595959;
            background: #f6f6f6;
        }

        .more-menu-item .layui-icon {
            font-size: 18px;
            padding-right: 10px;
        }

        .more-menu-item:after {
            color: #8c8c8c;
            right: 16px;
            content: "\e602";
            position: absolute;
            font-family: layui-icon !important;
        }

        .more-menu-item.no-icon:after {
            display: none;
        }

        /* setting from */
        .set-item-label {
            height: 38px;
            line-height: 38px;
            padding-left: 20px;
            display: inline-block;
        }

        .set-item-ctrl {
            height: 38px;
            line-height: 38px;
            display: inline-block;
        }

        .set-item-ctrl > * {
            margin: 0 !important;
        }
    </style>
</head>
<body>

<!-- 加载动画 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<div class="layui-card-header">主题设置</div>
<!-- 主题列表 -->
<div class="more-theme-list">
    <div class="more-theme-item active">
        <img src="../../assets/module/img/theme-admin.png"/>
    </div>
    <div class="more-theme-item" data-theme="theme-cyan">
        <img src="../../assets/module/img/theme-cyan.png"/>
    </div>
    <div class="more-theme-item" data-theme="theme-white">
        <img src="../../assets/module/img/theme-white.png"/>
    </div>
    <div class="more-theme-item" data-theme="theme-pink">
        <img src="../../assets/module/img/theme-pink.png"/>
    </div>
    <div class="more-theme-item" data-theme="theme-colorful">
        <img src="../../assets/module/img/theme-colorful.png"/>
    </div>
    <div class="more-theme-item" data-theme="theme-blue">
        <img src="../../assets/module/img/theme-blue.png"/>
    </div>
    <div class="more-theme-item" data-theme="theme-green">
        <img src="../../assets/module/img/theme-green.png"/>
    </div>
    <div class="more-theme-item" data-theme="theme-purple">
        <img src="../../assets/module/img/theme-purple.png"/>
    </div>
    <div class="more-theme-item" data-theme="theme-red">
        <img src="../../assets/module/img/theme-red.png"/>
    </div>
    <div class="more-theme-item" data-theme="theme-sky-blue">
        <img src="../../assets/module/img/theme-sky-blue.png"/>
    </div>

</div>
<!--    <div class="theme-div"></div>-->

<!-- 导航 -->
<div class="more-menu">
    <a class="more-menu-item" href="https://easyweb.vip/doc/" target="_blank">
        <i class="layui-icon layui-icon-read" style="font-size: 19px;"></i> 开发文档
    </a>
    <a class="more-menu-item" href="https://demo.easyweb.vip/spa" target="_blank">
        <i class="layui-icon layui-icon-tabs" style="font-size: 16px;"></i> &nbsp;spa版本
    </a>
    <a class="more-menu-item" href="https://demo.easyweb.vip/theme" target="_blank">
        <i class="layui-icon layui-icon-theme"></i> 主题生成器
    </a>
</div>
<div class="layui-form" style="margin: 25px 0;" lay-filter="more-set-form">
    <div class="layui-form-item">
        <label class="set-item-label">页&emsp;脚：</label>
        <div class="set-item-ctrl">
            <input id="setFooter" lay-filter="setFooter" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
        </div>
        <label class="set-item-label"> Tab&nbsp;记忆：</label>
        <div class="set-item-ctrl">
            <input id="setTab" lay-filter="setTab" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="set-item-label">多标签：</label>
        <div class="set-item-ctrl">
            <input id="setMoreTab" lay-filter="setMoreTab" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
        </div>
        <label class="set-item-label">切换刷新：</label>
        <div class="set-item-ctrl">
            <input id="setRefresh" lay-filter="setRefresh" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="set-item-label">导航箭头：</label>
        <div class="set-item-ctrl">
            <input lay-filter="navArrow" type="radio" value="" title="默认" name="navArrow">
            <input lay-filter="navArrow" type="radio" value="arrow2" title="箭头" name="navArrow">
            <input lay-filter="navArrow" type="radio" value="arrow3" title="加号" name="navArrow">
        </div>
    </div>
</div>
<!--    &lt;!&ndash; 控制开关 &ndash;&gt;-->
<!--    <div class="layui-form" style="margin: 25px 0;">-->
<!--        <div class="layui-form-item">-->
<!--            <label class="set-item-label">页&emsp;脚：</label>-->
<!--            <div class="set-item-ctrl">-->
<!--                <input id="setFooter" lay-filter="setFooter" type="checkbox" lay-skin="switch" lay-text="开启|关闭">-->
<!--            </div>-->
<!--            <label class="set-item-label"> Tab&nbsp;记忆：</label>-->
<!--            <div class="set-item-ctrl">-->
<!--                <input id="setTab" lay-filter="setTab" type="checkbox" lay-skin="switch" lay-text="开启|关闭">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="set-item-label">多标签：</label>-->
<!--            <div class="set-item-ctrl">-->
<!--                <input id="setMoreTab" lay-filter="setMoreTab" type="checkbox" lay-skin="switch" lay-text="开启|关闭">-->
<!--            </div>-->
<!--            <label class="set-item-label">切换刷新：</label>-->
<!--            <div class="set-item-ctrl">-->
<!--                <input id="setRefresh" lay-filter="setRefresh" type="checkbox" lay-skin="switch" lay-text="开启|关闭">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="set-item-label">导航箭头：</label>-->
<!--            <div class="set-item-ctrl">-->
<!--                <input lay-filter="navArrow" type="radio" value="" title="默认" name="navArrow">-->
<!--                <input lay-filter="navArrow" type="radio" value="arrow2" title="箭头" name="navArrow">-->
<!--                <input lay-filter="navArrow" type="radio" value="arrow3" title="加号" name="navArrow">-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../assets/js/common.js?v=315"></script>
<script>
    // layui.use(['layer', 'form', 'admin'], function () {
    //     var $ = layui.jquery;
    //     var layer = layui.layer;
    //     var form = layui.form;
    //     var admin = layui.admin;
    //     var leftNav = '.layui-layout-admin>.layui-side>.layui-side-scroll>.layui-nav';
    //     var mainTab = '.layui-body>.layui-tab[lay-filter="admin-pagetabs"]';
    //
    //     var themes = [
    //         {title: '黑白主题', theme: 'admin'},
    //         {title: '黑色主题', theme: 'black'},
    //         {title: '蓝色主题', theme: 'blue'},
    //         {title: '藏青主题', theme: 'cyan'},
    //         {title: '黄色主题', theme: 'yellow'},
    //         {title: '绿色主题', theme: 'green'},
    //         {title: '粉红主题', theme: 'pink'},
    //         {title: '紫白主题', theme: 'purple-white'},
    //         {title: '紫色主题', theme: 'purple'},
    //         {title: '白色主题', theme: 'white'},
    //         {title: '红白主题', theme: 'red-white'},
    //         {title: '红色主题', theme: 'red'},
    //         {title: '深蓝主题', theme: 'sky-blue'}
    //     ];
    //     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="../../assets/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'));
    //     });
    //
    //     // 关闭/开启页脚
    //     var openFooter = layui.data(admin.tableName).openFooter;
    //     $('#setFooter').prop('checked', openFooter == undefined ? true : openFooter);
    //     form.on('switch(setFooter)', function (data) {
    //         var checked = data.elem.checked;
    //         layui.data(admin.tableName, {key: 'openFooter', value: checked});
    //         checked ? top.layui.jquery('body.layui-layout-body').removeClass('close-footer') : top.layui.jquery('body.layui-layout-body').addClass('close-footer');
    //     });
    //
    //     // 关闭/开启Tab记忆功能
    //     $('#setTab').prop('checked', top.layui.index.cacheTab);
    //     form.on('switch(setTab)', function (data) {
    //         top.layui.index.setTabCache(data.elem.checked);
    //     });
    //
    //     // 切换Tab自动刷新
    //     var tabAutoRefresh = layui.data(admin.tableName).tabAutoRefresh;
    //     $('#setRefresh').prop('checked', tabAutoRefresh == undefined ? false : tabAutoRefresh);
    //     form.on('switch(setRefresh)', function (data) {
    //         var checked = data.elem.checked;
    //         layui.data(admin.tableName, {key: 'tabAutoRefresh', value: checked});
    //         checked ? top.layui.jquery(mainTab).attr('lay-autoRefresh', 'true') : top.layui.jquery(mainTab).removeAttr('lay-autoRefresh');
    //     });
    //
    //     // 关闭/开启多标签
    //     var openTab = layui.data(admin.tableName).openTab;
    //     $('#setMoreTab').prop('checked', openTab == undefined ? top.layui.index.pageTabs : openTab);
    //     form.on('switch(setMoreTab)', function (data) {
    //         var checked = data.elem.checked;
    //         layui.data(admin.tableName, {key: 'openTab', value: checked});
    //         admin.putTempData('indexTabs', undefined);  // 清除缓存的Tab
    //         top.location.reload();
    //     });
    //
    //     // 导航小三角
    //     var navArrow = layui.data(admin.tableName).navArrow;
    //     if (navArrow == undefined) {
    //         var $sideNav = top.layui.jquery('.layui-side .layui-nav-tree');
    //         navArrow = $sideNav.hasClass('arrow2') ? 'arrow2' : $sideNav.hasClass('arrow3') ? 'arrow3' : '';
    //     }
    //     $('[name="navArrow"][value="' + (navArrow ? navArrow : '') + '"]').prop('checked', 'true');
    //     form.on('radio(navArrow)', function (data) {
    //         layui.data(admin.tableName, {key: 'navArrow', value: data.value});
    //         top.layui.jquery(leftNav).removeClass('arrow2 arrow3');
    //         data.value && top.layui.jquery(leftNav).addClass(data.value);
    //     });
    //
    //     form.render('checkbox');
    //     form.render('radio');
    // });

    layui.use(['form', 'admin'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var admin = layui.admin;
        var setter = admin.setter;
        var $body = $('body');

        // 切换主题
        var $themItem = $('.more-theme-item');
        $themItem.click(function () {
            $themItem.removeClass('active');
            $(this).addClass('active');
            admin.changeTheme($(this).data('theme'));
        });
        var theme = $body.data('theme');
        if (theme) {
            $themItem.removeClass('active');
            $themItem.filter('[data-theme="' + theme + '"]').addClass('active');
        }

        // 关闭/开启页脚
        form.on('switch(setFooter)', function (data) {
            var checked = data.elem.checked;
            admin.putSetting('closeFooter', !checked);
            checked ? $body.removeClass('close-footer') : $body.addClass('close-footer');
        });
        $('#setFooter').prop('checked', !$body.hasClass('close-footer'));

        // 关闭/开启Tab记忆功能
        form.on('switch(setTab)', function (data) {
            layui.index.setTabCache(data.elem.checked);
        });
        $('#setTab').prop('checked', setter.cacheTab);

        // 关闭/开启多标签
        form.on('switch(setMoreTab)', function (data) {
            var checked = data.elem.checked;
            admin.putSetting('pageTabs', checked);
            admin.putTempData('indexTabs', undefined);
            location.reload();
        });
        $('#setMoreTab').prop('checked', setter.pageTabs);

        // 切换Tab自动刷新
        var $mainTab = $('.layui-body>.layui-tab[lay-filter="admin-pagetabs"]');
        form.on('switch(setRefresh)', function (data) {
            var checked = data.elem.checked;
            admin.putSetting('tabAutoRefresh', checked);
            checked ? $mainTab.attr('lay-autoRefresh', 'true') : $mainTab.removeAttr('lay-autoRefresh');
        });
        $('#setRefresh').prop('checked', setter.tabAutoRefresh === true);

        // 导航小三角
        var $leftNav = $('.layui-layout-admin>.layui-side>.layui-side-scroll>.layui-nav');
        form.on('radio(navArrow)', function (data) {
            $leftNav.removeClass('arrow2 arrow3');
            data.value && $leftNav.addClass(data.value);
            admin.putSetting('navArrow', data.value);
        });
        var navArrow = $leftNav.hasClass('arrow2') ? 'arrow2' : $leftNav.hasClass('arrow3') ? 'arrow3' : '';
        $('[name="navArrow"][value="' + navArrow + '"]').prop('checked', true);

        form.render('radio', 'more-set-form');
        form.render('checkbox', 'more-set-form');
    });
</script>
</body>
</html>