Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
F
fgqyxxlr
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
yaru
fgqyxxlr
Commits
01f40d91
Commit
01f40d91
authored
Oct 16, 2019
by
RuoYi
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
支持在线切换主题
parent
dd57a4fb
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
214 additions
and
13 deletions
+214
-13
ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysIndexController.java
+7
-0
ruoyi-admin/src/main/resources/static/ruoyi/js/common.js
+30
-9
ruoyi-admin/src/main/resources/templates/index.html
+31
-4
ruoyi-admin/src/main/resources/templates/skin.html
+146
-0
No files found.
ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysIndexController.java
View file @
01f40d91
...
...
@@ -38,6 +38,13 @@ public class SysIndexController extends BaseController
return
"index"
;
}
// 切换主题
@GetMapping
(
"/system/switchSkin"
)
public
String
switchSkin
(
ModelMap
mmap
)
{
return
"skin"
;
}
// 系统介绍
@GetMapping
(
"/system/main"
)
public
String
main
(
ModelMap
mmap
)
...
...
ruoyi-admin/src/main/resources/static/ruoyi/js/common.js
View file @
01f40d91
...
...
@@ -3,6 +3,15 @@
* Copyright (c) 2019 ruoyi
*/
$
(
function
()
{
// layer扩展皮肤
if
(
window
.
layer
!==
undefined
)
{
layer
.
config
({
extend
:
'moon/style.css'
,
skin
:
'layer-ext-moon'
});
}
// select2复选框事件绑定
if
(
$
.
fn
.
select2
!==
undefined
)
{
$
.
fn
.
select2
.
defaults
.
set
(
"theme"
,
"bootstrap"
);
...
...
@@ -225,17 +234,33 @@ function createMenuItem(dataUrl, menuName) {
//日志打印封装处理
var
log
=
{
log
:
function
(
msg
)
{
console
.
log
(
msg
);
log
:
function
(
msg
)
{
console
.
log
(
msg
);
},
info
:
function
(
msg
)
{
console
.
info
(
msg
);
console
.
info
(
msg
);
},
warn
:
function
(
msg
)
{
console
.
warn
(
msg
);
console
.
warn
(
msg
);
},
error
:
function
(
msg
)
{
console
.
error
(
msg
);
console
.
error
(
msg
);
}
};
//本地缓存处理
var
storage
=
{
set
:
function
(
key
,
value
)
{
window
.
localStorage
.
setItem
(
key
,
value
);
},
get
:
function
(
key
)
{
return
window
.
localStorage
.
getItem
(
key
);
},
remove
:
function
(
key
)
{
window
.
localStorage
.
removeItem
(
key
);
},
clear
:
function
()
{
window
.
localStorage
.
clear
();
}
};
...
...
@@ -253,7 +278,3 @@ $.ajaxSetup({
}
}
});
layer
.
config
({
extend
:
'moon/style.css'
,
skin
:
'layer-ext-moon'
});
ruoyi-admin/src/main/resources/templates/index.html
View file @
01f40d91
...
...
@@ -17,7 +17,7 @@
<link
th:href=
"@{/css/skins.css}"
rel=
"stylesheet"
/>
<link
th:href=
"@{/ruoyi/css/ry-ui.css?v=4.0.0}"
rel=
"stylesheet"
/>
</head>
<body
class=
"fixed-sidebar full-height-layout gray-bg"
style=
"overflow: hidden"
th:classappend=
"|${@config.getKey('sys.index.sideTheme')} ${@config.getKey('sys.index.skinName')}|"
>
<body
class=
"fixed-sidebar full-height-layout gray-bg"
style=
"overflow: hidden"
>
<div
id=
"wrapper"
>
<!--左侧导航开始-->
...
...
@@ -187,9 +187,13 @@
<i
class=
"fa fa-user"
></i>
个人中心
</a>
</li>
<li>
<a
onclick=
"resetPwd()"
class=
"menuItem"
>
<a
onclick=
"resetPwd()"
>
<i
class=
"fa fa-key"
></i>
修改密码
</a>
</li>
<li>
<a
onclick=
"switchSkin()"
>
<i
class=
"fa fa-dashboard"
></i>
切换主题
</a>
</li>
<li
class=
"divider"
></li>
<li>
<a
th:href=
"@{logout}"
>
...
...
@@ -236,15 +240,38 @@
<script
th:src=
"@{/ajax/libs/blockUI/jquery.blockUI.js}"
></script>
<script
th:src=
"@{/ajax/libs/layer/layer.min.js}"
></script>
<script
th:src=
"@{/ruoyi/js/ry-ui.js?v=4.0.0}"
></script>
<script
th:src=
"@{/ruoyi/js/common.js?v=4.0.0}"
></script>
<script
th:src=
"@{/ruoyi/index.js}"
></script>
<script
th:src=
"@{/ajax/libs/fullscreen/jquery.fullscreen.js}"
></script>
<script
th:inline=
"javascript"
>
<script
th:inline=
"javascript"
>
var
ctx
=
[[@{
/
}]];
/*用户管理-重置密码*/
var
skin
=
storage
.
get
(
"skin"
);
// 本地主题优先,未设置取系统配置
if
(
$
.
common
.
isNotEmpty
(
skin
)){
$
(
"body"
).
addClass
(
skin
.
split
(
'|'
)[
0
]);
$
(
"body"
).
addClass
(
skin
.
split
(
'|'
)[
1
]);
}
else
{
var
sideTheme
=
[[
$
{@
config
.
getKey
(
'sys.index.sideTheme'
)}]];
var
skinName
=
[[
$
{@
config
.
getKey
(
'sys.index.skinName'
)}]];
$
(
"body"
).
addClass
(
sideTheme
);
$
(
"body"
).
addClass
(
skinName
);
}
/* 用户管理-重置密码 */
function
resetPwd
()
{
var
url
=
ctx
+
'system/user/profile/resetPwd'
;
$
.
modal
.
open
(
"重置密码"
,
url
,
'800'
,
'500'
);
}
/* 切换主题 */
function
switchSkin
()
{
layer
.
open
({
type
:
2
,
shadeClose
:
true
,
title
:
"切换主题"
,
area
:
[
"530px"
,
"386px"
],
content
:
[
ctx
+
"system/switchSkin"
,
'no'
]
})
}
</script>
</body>
</html>
ruoyi-admin/src/main/resources/templates/skin.html
0 → 100644
View file @
01f40d91
<!DOCTYPE html>
<html
lang=
"zh"
xmlns:th=
"http://www.thymeleaf.org"
>
<head>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<meta
name=
"renderer"
content=
"webkit"
>
<title>
主题选择
</title>
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;ie.html"/>
<![endif]-->
<link
rel=
"shortcut icon"
href=
"../static/favicon.ico"
th:href=
"@{favicon.ico}"
/>
<link
th:href=
"@{/css/bootstrap.min.css}"
rel=
"stylesheet"
/>
<link
th:href=
"@{/css/style.css}"
rel=
"stylesheet"
/>
<style
type=
"text/css"
>
.list-unstyled
{
margin
:
10px
;}
.full-opacity-hover
{
opacity
:
1
;
filter
:
alpha
(
opacity
=
1
);
border
:
1px
solid
#fff
}
.full-opacity-hover
:hover
{
border
:
1px
solid
#f00
;}
</style>
</head>
<body
class=
"gray-bg"
>
<ul
class=
"list-unstyled clearfix"
>
<li
style=
"float:left; width: 33.33333%; padding: 5px;"
>
<a
href=
"javascript:"
data-skin=
"skin-blue|theme-dark"
style=
"display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
class=
"clearfix full-opacity-hover"
>
<span
style=
"width: 20%; float: left; height: 13px; background: #367fa9"
></span>
<span
style=
"width: 80%; float: left; height: 13px; background: #3c8dbc"
></span>
<span
style=
"width: 20%; float: left; height: 30px; background: #2f4050"
></span>
<span
style=
"width: 80%; float: left; height: 30px; background: #f4f5f7"
></span>
</a>
<p
class=
"text-center"
>
蓝
</p>
</li>
<li
style=
"float:left; width: 33.33333%; padding: 5px;"
>
<a
href=
"javascript:"
data-skin=
"skin-green|theme-dark"
style=
"display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
class=
"clearfix full-opacity-hover"
>
<span
style=
"width: 20%; float: left; height: 13px; background: #008d4c"
></span>
<span
style=
"width: 80%; float: left; height: 13px; background: #00a65a"
></span>
<span
style=
"width: 20%; float: left; height: 30px; background: #222d32"
></span>
<span
style=
"width: 80%; float: left; height: 30px; background: #f4f5f7"
></span>
</a>
<p
class=
"text-center"
>
绿
</p>
</li>
<li
style=
"float:left; width: 33.33333%; padding: 5px;"
>
<a
href=
"javascript:"
data-skin=
"skin-purple|theme-dark"
style=
"display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
class=
"clearfix full-opacity-hover"
>
<span
style=
"width: 20%; float: left; height: 13px; background: #555299"
></span>
<span
style=
"width: 80%; float: left; height: 13px; background: #605ca8"
></span>
<span
style=
"width: 20%; float: left; height: 30px; background: #222d32"
></span>
<span
style=
"width: 80%; float: left; height: 30px; background: #f4f5f7"
></span>
</a>
<p
class=
"text-center"
>
紫
</p>
</li>
<li
style=
"float:left; width: 33.33333%; padding: 5px;"
>
<a
href=
"javascript:"
data-skin=
"skin-red|theme-dark"
style=
"display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
class=
"clearfix full-opacity-hover"
>
<span
style=
"width: 20%; float: left; height: 13px; background: #dd4b39"
></span>
<span
style=
"width: 80%; float: left; height: 13px; background: #d73925"
></span>
<span
style=
"width: 20%; float: left; height: 30px; background: #222d32"
></span>
<span
style=
"width: 80%; float: left; height: 30px; background: #f4f5f7"
></span>
</a>
<p
class=
"text-center"
>
红
</p>
</li>
<li
style=
"float:left; width: 33.33333%; padding: 5px;"
>
<a
href=
"javascript:"
data-skin=
"skin-yellow|theme-dark"
style=
"display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
class=
"clearfix full-opacity-hover"
>
<span
style=
"width: 20%; float: left; height: 13px; background: #f39c12"
></span>
<span
style=
"width: 80%; float: left; height: 13px; background: #e08e0b"
></span>
<span
style=
"width: 20%; float: left; height: 30px; background: #222d32"
></span>
<span
style=
"width: 80%; float: left; height: 30px; background: #f4f5f7"
></span>
</a>
<p
class=
"text-center"
>
黄
</p>
</li>
<li
style=
"float:left; width: 33.33333%; padding: 5px;"
>
<a
href=
"javascript:"
data-skin=
"skin-blue|theme-light"
style=
"display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
class=
"clearfix full-opacity-hover"
>
<span
style=
"width: 20%; float: left; height: 13px; background: #367fa9"
></span>
<span
style=
"width: 80%; float: left; height: 13px; background: #3c8dbc"
></span>
<span
style=
"width: 20%; float: left; height: 30px; background: #f9fafc"
></span>
<span
style=
"width: 80%; float: left; height: 30px; background: #f4f5f7"
></span>
</a>
<p
class=
"text-center"
>
蓝灰
</p>
</li>
<li
style=
"float:left; width: 33.33333%; padding: 5px;"
>
<a
href=
"javascript:"
data-skin=
"skin-green|theme-light"
style=
"display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
class=
"clearfix full-opacity-hover"
>
<span
style=
"width: 20%; float: left; height: 13px; background: #008d4c"
></span>
<span
style=
"width: 80%; float: left; height: 13px; background: #00a65a"
></span>
<span
style=
"width: 20%; float: left; height: 30px; background: #f9fafc"
></span>
<span
style=
"width: 80%; float: left; height: 30px; background: #f4f5f7"
></span>
</a>
<p
class=
"text-center"
>
绿灰
</p>
</li>
<li
style=
"float:left; width: 33.33333%; padding: 5px;"
>
<a
href=
"javascript:"
data-skin=
"skin-purple|theme-light"
style=
"display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
class=
"clearfix full-opacity-hover"
>
<span
style=
"width: 20%; float: left; height: 13px; background: #555299"
></span>
<span
style=
"width: 80%; float: left; height: 13px; background: #605ca8"
></span>
<span
style=
"width: 20%; float: left; height: 30px; background: #f9fafc"
></span>
<span
style=
"width: 80%; float: left; height: 30px; background: #f4f5f7"
></span>
</a>
<p
class=
"text-center"
>
紫灰
</p>
</li>
<li
style=
"float:left; width: 33.33333%; padding: 5px;"
>
<a
href=
"javascript:"
data-skin=
"skin-red|theme-light"
style=
"display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
class=
"clearfix full-opacity-hover"
>
<span
style=
"width: 20%; float: left; height: 13px; background: #dd4b39"
></span>
<span
style=
"width: 80%; float: left; height: 13px; background: #d73925"
></span>
<span
style=
"width: 20%; float: left; height: 30px; background: #f9fafc"
></span>
<span
style=
"width: 80%; float: left; height: 30px; background: #f4f5f7"
></span>
</a>
<p
class=
"text-center"
>
红灰
</p>
</li>
<li
style=
"float:left; width: 33.33333%; padding: 5px;"
>
<a
href=
"javascript:"
data-skin=
"skin-yellow|theme-light"
style=
"display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)"
class=
"clearfix full-opacity-hover"
>
<span
style=
"width: 20%; float: left; height: 13px; background: #f39c12"
></span>
<span
style=
"width: 80%; float: left; height: 13px; background: #e08e0b"
></span>
<span
style=
"width: 20%; float: left; height: 30px; background: #f9fafc"
></span>
<span
style=
"width: 80%; float: left; height: 30px; background: #f4f5f7"
></span>
</a>
<p
class=
"text-center"
>
黄灰
</p>
</li>
</ul>
</body>
<script
th:src=
"@{/js/jquery.min.js}"
></script>
<script
th:src=
"@{/ruoyi/js/common.js?v=4.0.0}"
></script>
<script
type=
"text/javascript"
>
//皮肤样式列表
var
skins
=
[
"skin-blue"
,
"skin-green"
,
"skin-purple"
,
"skin-red"
,
"skin-yellow"
];
// 主题样式列表
var
themes
=
[
"theme-dark"
,
"theme-light"
];
$
(
"[data-skin]"
).
on
(
'click'
,
function
(
e
)
{
var
skin
=
$
(
this
).
data
(
'skin'
);
$
.
each
(
skins
,
function
(
i
)
{
parent
.
$
(
"body"
).
removeClass
(
skins
[
i
]);
});
$
.
each
(
themes
,
function
(
i
)
{
parent
.
$
(
"body"
).
removeClass
(
themes
[
i
]);
});
parent
.
$
(
"body"
).
addClass
(
skin
.
split
(
'|'
)[
0
]);
parent
.
$
(
"body"
).
addClass
(
skin
.
split
(
'|'
)[
1
]);
storage
.
set
(
'skin'
,
skin
);
});
</script>
</html>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment