259 lines
9.5 KiB
HTML
259 lines
9.5 KiB
HTML
|
<!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="__CATCH_ADMIN_LIBS__/layui/css/layui.css"/>
|
||
|
|
<link rel="stylesheet" href="__CATCH_ADMIN_MODULE__/admin.css?v=315"/>
|
||
|
|
<!--[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;
|
||
|
|
}
|
||
|
|
</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="layui-card-body">
|
||
|
|
<!-- 主题列表 -->
|
||
|
|
<div class="theme-div"></div>
|
||
|
|
|
||
|
|
<!-- 导航 -->
|
||
|
|
<div class="more-menu">
|
||
|
|
<a class="more-menu-item" href="https://gitee.com/jaguarjack/catchAdmin" target="_blank">
|
||
|
|
<i class="layui-icon layui-icon-read" style="font-size: 19px;"></i> Git 地址
|
||
|
|
</a>
|
||
|
|
<a class="more-menu-item" href="https://catchadmin.com" target="_blank">
|
||
|
|
<i class="layui-icon layui-icon-tabs" style="font-size: 16px;"></i> 官网
|
||
|
|
</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;">
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<label class="set-item-label">页 脚：</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 记忆：</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>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="__CATCH_ADMIN_LIBS__/layui/layui.js"></script>
|
||
|
|
<script type="text/javascript" src="__CATCH_ADMIN_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'}
|
||
|
|
];
|
||
|
|
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="__CATCH_ADMIN_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');
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|