ruoyi
/
RuoYi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

展示出主题设置栏目

This commit is contained in:
panmeicheng 2018-11-28 21:53:13 +08:00
parent a47d5ac91a
commit 46b8940f0e
2 changed files with 462 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
ruoyi-admin/src/main/resources/static/ruoyi/index.js
View File

@ -40,6 +40,75 @@ $(function() {
});
function localStorageSupport() {
return "localStorage" in window && null !== window.localStorage
}
/*主题框框相关*/
$(document).ready(function () {
function e() {
var e = $("body > #wrapper").height() - 61;
$(".sidebard-panel").css("min-height", e + "px")
}
$("#side-menu").metisMenu(), $(".right-sidebar-toggle").click(function () {
$("#right-sidebar").toggleClass("sidebar-open")
}), $(".sidebar-container").slimScroll({
height: "100%",
railOpacity: .4,
wheelStep: 10
}), $(".open-small-chat").click(function () {
$(this).children().toggleClass("fa-comments").toggleClass("fa-remove"), $(".small-chat-box").toggleClass("active")
}), $(".small-chat-box .content").slimScroll({
height: "234px",
railOpacity: .4
}), $(".check-link").click(function () {
var e = $(this).find("i"), a = $(this).next("span");
return e.toggleClass("fa-check-square").toggleClass("fa-square-o"), a.toggleClass("todo-completed"), !1
}), $(function () {
$(".sidebar-collapse").slimScroll({height: "100%", railOpacity: .9, alwaysVisible: !1})
}), $(".navbar-minimalize").click(function () {
$("body").toggleClass("mini-navbar"), SmoothlyMenu()
}), e(), $(window).bind("load resize click scroll", function () {
$("body").hasClass("body-small") || e()
}), $(window).scroll(function () {
$(window).scrollTop() > 0 && !$("body").hasClass("fixed-nav") ? $("#right-sidebar").addClass("sidebar-top") : $("#right-sidebar").removeClass("sidebar-top")
}), $(".full-height-scroll").slimScroll({height: "100%"}), $("#side-menu>li").click(function () {
$("body").hasClass("mini-navbar") && NavToggle()
}), $("#side-menu>li li a").click(function () {
$(window).width() < 769 && NavToggle()
}), $(".nav-close").click(NavToggle), /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) && $("#content-main").css("overflow-y", "auto")
})
$(function () {
if ($("#fixednavbar").click(function () {
$("#fixednavbar").is(":checked") ? ($(".navbar-static-top").removeClass("navbar-static-top").addClass("navbar-fixed-top"), $("body").removeClass("boxed-layout"), $("body").addClass("fixed-nav"), $("#boxedlayout").prop("checked", !1), localStorageSupport && localStorage.setItem("boxedlayout", "off"), localStorageSupport && localStorage.setItem("fixednavbar", "on")) : ($(".navbar-fixed-top").removeClass("navbar-fixed-top").addClass("navbar-static-top"), $("body").removeClass("fixed-nav"), localStorageSupport && localStorage.setItem("fixednavbar", "off"))
}),$("#collapsemenu").click(function () {
$("#collapsemenu").is(":checked") ? ($("body").addClass("mini-navbar"), SmoothlyMenu(), localStorageSupport && localStorage.setItem("collapse_menu", "on")) : ($("body").removeClass("mini-navbar"), SmoothlyMenu(), localStorageSupport && localStorage.setItem("collapse_menu", "off"))
}), $("#boxedlayout").click(function () {
$("#boxedlayout").is(":checked") ? ($("body").addClass("boxed-layout"), $("#fixednavbar").prop("checked", !1), $(".navbar-fixed-top").removeClass("navbar-fixed-top").addClass("navbar-static-top"), $("body").removeClass("fixed-nav"), localStorageSupport && localStorage.setItem("fixednavbar", "off"), localStorageSupport && localStorage.setItem("boxedlayout", "on")) : ($("body").removeClass("boxed-layout"), localStorageSupport && localStorage.setItem("boxedlayout", "off"))
}), $(".s-skin-0").click(function () {
return $("body").removeClass("skin-1"), $("body").removeClass("skin-2"), $("body").removeClass("skin-3"), !1
}), $(".s-skin-1").click(function () {
return $("body").removeClass("skin-2"), $("body").removeClass("skin-3"), $("body").addClass("skin-1"), !1
}), $(".s-skin-3").click(function () {
return $("body").removeClass("skin-1"), $("body").removeClass("skin-2"), $("body").addClass("skin-3"), !1
}), localStorageSupport){
var e = localStorage.getItem("collapse_menu"), a = localStorage.getItem("fixednavbar"),
o = localStorage.getItem("boxedlayout");
"on" == e && $("#collapsemenu").prop("checked", "checked"), "on" == a && $("#fixednavbar").prop("checked", "checked"), "on" == o && $("#boxedlayout").prop("checked", "checked")
}
if (localStorageSupport) {//第一次加载 初始化 主题设置
var e = localStorage.getItem("collapse_menu"), a = localStorage.getItem("fixednavbar"),
o = localStorage.getItem("boxedlayout"), l = $("body");
"on" == e && (l.hasClass("body-small") || l.addClass("mini-navbar")),
"on" == a && ($(".navbar-static-top").removeClass("navbar-static-top").addClass("navbar-fixed-top"),
l.addClass("fixed-nav")),
"on" == o && l.addClass("boxed-layout")
}
});
$(window).bind("load resize",
function () {
if ($(this).width() < 769) {
@ -327,12 +396,14 @@ $(function() {
});
$('.page-tabs-content').css("margin-left", "0");
}
$('.tabCloseOther').on('click', closeOtherTabs);
//滚动到已激活的选项卡
function showActiveTab() {
scrollToTab($('.menuTab.active'));
}
$('.tabShowActive').on('click', showActiveTab);
// 点击选项卡菜单

320
ruoyi-admin/src/main/resources/templates/index.html
View File

@ -17,6 +17,13 @@
<link th:href="@{/css/style.css}" rel="stylesheet"/>
<link th:href="@{/ruoyi/css/ry-ui.css?v=3.0.0}" rel="stylesheet"/>
<style type="text/css">
#right-sidebar.sidebar-open {
right: 0
}
#right-sidebar.sidebar-open.sidebar-top {
top: 0;
border-top: none
}
.nav > li:hover .dropdown-menu {display: block;}
#content-main.max { height: calc(100% - 110px); overflow: hidden; width: 100%; height: 100%; left: 0px; position: absolute; top: 0px; z-index: 9998; margin: 0; }
</style>
@ -93,9 +100,322 @@
</li>
<li><a id="fullScreen"><i class="fa fa-arrows-alt"></i>全屏</a></li>
<li><a th:href="@{logout}"><i class="fa fa-sign-out"></i>退出</a></li>
<li class="dropdown hidden-xs">
<a class="right-sidebar-toggle" aria-expanded="false">
<i class="fa fa-tasks"></i> 主题
</a>
</li>
</ul>
</nav>
</div>
<!--主题按钮打开DIV-->
<div id="right-sidebar">
<div class="sidebar-container">
<ul class="nav nav-tabs navs-3">
<li class="active">
<a data-toggle="tab" href="#tab-1">
<i class="fa fa-gear"></i> 主题
</a>
</li>
<li class=""><a data-toggle="tab" href="#tab-2">
通知
</a>
</li>
<li><a data-toggle="tab" href="#tab-3">
项目进度
</a>
</li>
</ul>
<div class="tab-content">
<div id="tab-1" class="tab-pane active">
<div class="sidebar-title">
<h3> <i class="fa fa-comments-o"></i> 主题设置</h3>
<small><i class="fa fa-tim"></i> 你可以从这里选择和预览主题的布局和样式，这些设置会被保存在本地，下次打开的时候会直接应用这些设置。</small>
</div>
<div class="skin-setttings">
<div class="title">主题设置</div>
<div class="setings-item">
<span>收起左侧菜单</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="collapsemenu">
<label class="onoffswitch-label" for="collapsemenu">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>固定顶部</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="fixednavbar" class="onoffswitch-checkbox" id="fixednavbar">
<label class="onoffswitch-label" for="fixednavbar">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>固定宽度</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="boxedlayout" class="onoffswitch-checkbox" id="boxedlayout">
<label class="onoffswitch-label" for="boxedlayout">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="title">皮肤选择</div>
<div class="setings-item default-skin nb">
<span class="skin-name ">
<a href="#" class="s-skin-0">
默认皮肤
</a>
</span>
</div>
<div class="setings-item blue-skin nb">
<span class="skin-name ">
<a href="#" class="s-skin-1">
自定义皮肤,index.js自己实现
</a>
</span>
</div>
</div>
</div>
<div id="tab-2" class="tab-pane">
<div class="sidebar-title">
<h3> <i class="fa fa-comments-o"></i> 最新通知</h3>
<small><i class="fa fa-tim"></i> 您当前有10条未读信息</small>
</div>
<div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a1.jpg">
<div class="m-t-xs">
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
</div>
</div>
<div class="media-body">
据天津日报报道：瑞海公司董事长于学伟，副董事长董社轩等10人在13日上午已被控制。
<br>
<small class="text-muted">今天 4:21</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a2.jpg">
</div>
<div class="media-body">
HCY48之音乐大魔王会员专属皮肤已上线，快来一键换装拥有他，宣告你对华晨宇的爱吧！
<br>
<small class="text-muted">昨天 2:45</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a3.jpg">
<div class="m-t-xs">
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
</div>
</div>
<div class="media-body">
写的好！与您分享
<br>
<small class="text-muted">昨天 1:10</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a4.jpg">
</div>
<div class="media-body">
国外极限小子的炼成！这还是亲生的吗！！
<br>
<small class="text-muted">昨天 8:37</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a8.jpg">
</div>
<div class="media-body">
一只流浪狗被收留后，为了减轻主人的负担，坚持自己觅食，甚至......有些东西，可能她比我们更懂。
<br>
<small class="text-muted">今天 4:21</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a7.jpg">
</div>
<div class="media-body">
这哥们的新视频又来了，创意杠杠滴，帅炸了！
<br>
<small class="text-muted">昨天 2:45</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a3.jpg">
<div class="m-t-xs">
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
</div>
</div>
<div class="media-body">
最近在补追此剧，特别喜欢这段表白。
<br>
<small class="text-muted">昨天 1:10</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a4.jpg">
</div>
<div class="media-body">
我发起了一个投票 【你认为下午大盘会翻红吗？】
<br>
<small class="text-muted">星期一 8:37</small>
</div>
</a>
</div>
</div>
</div>
<div id="tab-3" class="tab-pane">
<div class="sidebar-title">
<h3> <i class="fa fa-cube"></i> 最新任务</h3>
<small><i class="fa fa-tim"></i> 您当前有14个任务，10个已完成</small>
</div>
<ul class="sidebar-list">
<li>
<a href="#">
<div class="small pull-right m-t-xs">9小时以后</div>
<h4>市场调研</h4> 按要求接收教材；
<div class="small">已完成： 22%</div>
<div class="progress progress-mini">
<div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
</div>
<div class="small text-muted m-t-xs">项目截止： 4:00 - 2015.10.01</div>
</a>
</li>
<li>
<a href="#">
<div class="small pull-right m-t-xs">9小时以后</div>
<h4>可行性报告研究报上级批准 </h4> 编写目的编写本项目进度报告的目的在于更好的控制软件开发的时间,对团队成员的 开发进度作出一个合理的比对
<div class="small">已完成： 48%</div>
<div class="progress progress-mini">
<div style="width: 48%;" class="progress-bar"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="small pull-right m-t-xs">9小时以后</div>
<h4>立项阶段</h4> 东风商用车公司 采购综合综合查询分析系统项目进度阶段性报告武汉斯迪克科技有限公司
<div class="small">已完成： 14%</div>
<div class="progress progress-mini">
<div style="width: 14%;" class="progress-bar progress-bar-info"></div>
</div>
</a>
</li>
<li>
<a href="#">
<span class="label label-primary pull-right">NEW</span>
<h4>设计阶段</h4>
<!--<div class="small pull-right m-t-xs">9小时以后</div>-->
项目进度报告(Project Progress Report)
<div class="small">已完成： 22%</div>
<div class="small text-muted m-t-xs">项目截止： 4:00 - 2015.10.01</div>
</a>
</li>
<li>
<a href="#">
<div class="small pull-right m-t-xs">9小时以后</div>
<h4>拆迁阶段</h4> 科研项目研究进展报告 项目编号: 项目名称: 项目负责人:
<div class="small">已完成： 22%</div>
<div class="progress progress-mini">
<div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
</div>
<div class="small text-muted m-t-xs">项目截止： 4:00 - 2015.10.01</div>
</a>
</li>
<li>
<a href="#">
<div class="small pull-right m-t-xs">9小时以后</div>
<h4>建设阶段 </h4> 编写目的编写本项目进度报告的目的在于更好的控制软件开发的时间,对团队成员的 开发进度作出一个合理的比对
<div class="small">已完成： 48%</div>
<div class="progress progress-mini">
<div style="width: 48%;" class="progress-bar"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="small pull-right m-t-xs">9小时以后</div>
<h4>获证开盘</h4> 编写目的编写本项目进度报告的目的在于更好的控制软件开发的时间,对团队成员的 开发进度作出一个合理的比对
<div class="small">已完成： 14%</div>
<div class="progress progress-mini">
<div style="width: 14%;" class="progress-bar progress-bar-info"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--主题按钮打开DIV 结束-->
<div class="row content-tabs">
<button class="roll-nav roll-left tabLeft">
<i class="fa fa-backward"></i>