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
5 years ago
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
...
@@ -38,6 +38,13 @@ public class SysIndexController extends BaseController
return
"index"
;
return
"index"
;
}
}
// 切换主题
@GetMapping
(
"/system/switchSkin"
)
public
String
switchSkin
(
ModelMap
mmap
)
{
return
"skin"
;
}
// 系统介绍
// 系统介绍
@GetMapping
(
"/system/main"
)
@GetMapping
(
"/system/main"
)
public
String
main
(
ModelMap
mmap
)
public
String
main
(
ModelMap
mmap
)
...
...
This diff is collapsed.
Click to expand it.
ruoyi-admin/src/main/resources/static/ruoyi/js/common.js
View file @
01f40d91
...
@@ -3,6 +3,15 @@
...
@@ -3,6 +3,15 @@
* Copyright (c) 2019 ruoyi
* Copyright (c) 2019 ruoyi
*/
*/
$
(
function
()
{
$
(
function
()
{
// layer扩展皮肤
if
(
window
.
layer
!==
undefined
)
{
layer
.
config
({
extend
:
'moon/style.css'
,
skin
:
'layer-ext-moon'
});
}
// select2复选框事件绑定
// select2复选框事件绑定
if
(
$
.
fn
.
select2
!==
undefined
)
{
if
(
$
.
fn
.
select2
!==
undefined
)
{
$
.
fn
.
select2
.
defaults
.
set
(
"theme"
,
"bootstrap"
);
$
.
fn
.
select2
.
defaults
.
set
(
"theme"
,
"bootstrap"
);
...
@@ -225,17 +234,33 @@ function createMenuItem(dataUrl, menuName) {
...
@@ -225,17 +234,33 @@ function createMenuItem(dataUrl, menuName) {
//日志打印封装处理
//日志打印封装处理
var
log
=
{
var
log
=
{
log
:
function
(
msg
)
{
log
:
function
(
msg
)
{
console
.
log
(
msg
);
console
.
log
(
msg
);
},
},
info
:
function
(
msg
)
{
info
:
function
(
msg
)
{
console
.
info
(
msg
);
console
.
info
(
msg
);
},
},
warn
:
function
(
msg
)
{
warn
:
function
(
msg
)
{
console
.
warn
(
msg
);
console
.
warn
(
msg
);
},
},
error
:
function
(
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({
...
@@ -253,7 +278,3 @@ $.ajaxSetup({
}
}
}
}
});
});
layer
.
config
({
extend
:
'moon/style.css'
,
skin
:
'layer-ext-moon'
});
This diff is collapsed.
Click to expand it.
ruoyi-admin/src/main/resources/templates/index.html
View file @
01f40d91
...
@@ -17,7 +17,7 @@
...
@@ -17,7 +17,7 @@
<link
th:href=
"@{/css/skins.css}"
rel=
"stylesheet"
/>
<link
th:href=
"@{/css/skins.css}"
rel=
"stylesheet"
/>
<link
th:href=
"@{/ruoyi/css/ry-ui.css?v=4.0.0}"
rel=
"stylesheet"
/>
<link
th:href=
"@{/ruoyi/css/ry-ui.css?v=4.0.0}"
rel=
"stylesheet"
/>
</head>
</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"
>
<div
id=
"wrapper"
>
<!--左侧导航开始-->
<!--左侧导航开始-->
...
@@ -187,9 +187,13 @@
...
@@ -187,9 +187,13 @@
<i
class=
"fa fa-user"
></i>
个人中心
</a>
<i
class=
"fa fa-user"
></i>
个人中心
</a>
</li>
</li>
<li>
<li>
<a
onclick=
"resetPwd()"
class=
"menuItem"
>
<a
onclick=
"resetPwd()"
>
<i
class=
"fa fa-key"
></i>
修改密码
</a>
<i
class=
"fa fa-key"
></i>
修改密码
</a>
</li>
</li>
<li>
<a
onclick=
"switchSkin()"
>
<i
class=
"fa fa-dashboard"
></i>
切换主题
</a>
</li>
<li
class=
"divider"
></li>
<li
class=
"divider"
></li>
<li>
<li>
<a
th:href=
"@{logout}"
>
<a
th:href=
"@{logout}"
>
...
@@ -236,15 +240,38 @@
...
@@ -236,15 +240,38 @@
<script
th:src=
"@{/ajax/libs/blockUI/jquery.blockUI.js}"
></script>
<script
th:src=
"@{/ajax/libs/blockUI/jquery.blockUI.js}"
></script>
<script
th:src=
"@{/ajax/libs/layer/layer.min.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/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=
"@{/ruoyi/index.js}"
></script>
<script
th:src=
"@{/ajax/libs/fullscreen/jquery.fullscreen.js}"
></script>
<script
th:src=
"@{/ajax/libs/fullscreen/jquery.fullscreen.js}"
></script>
<script
th:inline=
"javascript"
>
<script
th:inline=
"javascript"
>
var
ctx
=
[[@{
/
}]];
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
()
{
function
resetPwd
()
{
var
url
=
ctx
+
'system/user/profile/resetPwd'
;
var
url
=
ctx
+
'system/user/profile/resetPwd'
;
$
.
modal
.
open
(
"重置密码"
,
url
,
'800'
,
'500'
);
$
.
modal
.
open
(
"重置密码"
,
url
,
'800'
,
'500'
);
}
}
/* 切换主题 */
function
switchSkin
()
{
layer
.
open
({
type
:
2
,
shadeClose
:
true
,
title
:
"切换主题"
,
area
:
[
"530px"
,
"386px"
],
content
:
[
ctx
+
"system/switchSkin"
,
'no'
]
})
}
</script>
</script>
</body>
</body>
</html>
</html>
This diff is collapsed.
Click to expand it.
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>
This diff is collapsed.
Click to expand it.
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