Skip to content

F
fgqyxxlr
Commit f276a839 by RuoYi
Options

侧边栏添加一套深蓝色主题

parent 28b8f3e3
Showing with 113 additions and 75 deletions
ruoyi-admin/src/main/resources/static/css/skins.css
......@@ -103,11 +103,6 @@
border-left: none;
}
.skin-blue .nav>li>.treeview-menu {
margin: 0 1px;
background: #2c3b41
}
.skin-blue .sidebar a {
color: #b8c7ce
}
......@@ -116,15 +111,6 @@
text-decoration: none
}
.skin-blue .treeview-menu>li>a {
color: #8aa4af
}
.skin-blue .treeview-menu>li.active>a,
.skin-blue .treeview-menu>li>a:hover {
color: #fff
}
.skin-blue .sidebar-form {
border-radius: 3px;
border: 1px solid #374850;
......@@ -292,11 +278,6 @@
border-left: none;
}
.skin-green .nav>li>.treeview-menu {
margin: 0 1px;
background: #2c3b41
}
.skin-green .sidebar a {
color: #b8c7ce
}
......@@ -305,15 +286,6 @@
text-decoration: none
}
.skin-green .treeview-menu>li>a {
color: #8aa4af
}
.skin-green .treeview-menu>li.active>a,
.skin-green .treeview-menu>li>a:hover {
color: #fff
}
.skin-green .sidebar-form {
border-radius: 3px;
border: 1px solid #374850;
......@@ -457,11 +429,6 @@
border-bottom: 1px solid #e5e5e5;
}
.skin-red .nav>li>.treeview-menu {
margin: 0 1px;
background: #2c3b41
}
.skin-red .sidebar a {
color: #b8c7ce
}
......@@ -470,15 +437,6 @@
text-decoration: none
}
.skin-red .treeview-menu>li>a {
color: #8aa4af
}
.skin-red .treeview-menu>li.active>a,
.skin-red .treeview-menu>li>a:hover {
color: #fff
}
.skin-red .sidebar-form {
border-radius: 3px;
border: 1px solid #374850;
......@@ -622,11 +580,6 @@
border-bottom: 1px solid #e5e5e5;
}
.skin-yellow .nav>li>.treeview-menu {
margin: 0 1px;
background: #2c3b41
}
.skin-yellow .sidebar a {
color: #b8c7ce
}
......@@ -635,15 +588,6 @@
text-decoration: none
}
.skin-yellow .treeview-menu>li>a {
color: #8aa4af
}
.skin-yellow .treeview-menu>li.active>a,
.skin-yellow .treeview-menu>li>a:hover {
color: #fff
}
.skin-yellow .sidebar-form {
border-radius: 3px;
border: 1px solid #374850;
......@@ -787,11 +731,6 @@
border-bottom: 1px solid #e5e5e5;
}
.skin-purple .nav>li>.treeview-menu {
margin: 0 1px;
background: #2c3b41
}
.skin-purple .sidebar a {
color: #b8c7ce
}
......@@ -800,15 +739,6 @@
text-decoration: none
}
.skin-purple .treeview-menu>li>a {
color: #8aa4af
}
.skin-purple .treeview-menu>li.active>a,
.skin-purple .treeview-menu>li>a:hover {
color: #fff
}
.skin-purple .sidebar-form {
border-radius: 3px;
border: 1px solid #374850;
......@@ -855,7 +785,7 @@
* NAME - .theme-dark/theme-light
*
*/
/** 深色主题 .theme-dark **/
/** 深黑主题 .theme-dark **/
.theme-dark .user-panel>.info>p, .theme-dark .user-panel>.info, .theme-dark .user-panel>.info>a{
color: #fff
}
......@@ -961,4 +891,94 @@
.fixed-sidebar.theme-light.mini-navbar .nav li:hover>.nav-second-level {
background-color: #f9fafc;
}
\ No newline at end of file
/** 深蓝主题 theme-light **/
/**
.skin-blue.theme-blue .logo, .skin-white.theme-blue .logo {
background-color: rgba(15,41,80,1) !important;
color: #fff;
}
**/
.theme-blue .user-panel>.info>p, .theme-blue .user-panel>.info, .theme-blue .user-panel>.info>a{
color: #a3b1cc
}
.theme-blue .nav>li.active{
background-color: rgba(15,41,80,1);
}
.theme-blue .navbar-static-side {
background-color: rgba(15,41,80,1);
box-shadow: 2px 0 2px 0 rgba(29,35,41,.05);
}
.theme-blue .user-panel {
background-color: rgba(15,41,80,1);
}
.theme-blue .navbar-default .nav>li>a {
color: #a3b1cc;
}
.theme-blue.skin-blue .navbar-default .nav>li.active>a {
color: #1890ff;
}
.theme-blue.skin-blue .navbar-default .nav>li.selected>a,
.theme-blue.skin-blue .navbar-default .nav>li.selected>a:focus {
background-color: #1890ff;
}
.theme-blue.skin-green .navbar-default .nav>li.active>a {
color: #52c41a;
}
.theme-blue.skin-green .navbar-default .nav>li.selected>a,
.theme-blue.skin-green .navbar-default .nav>li.selected>a:focus {
background-color: #52c41a;
color: rgba(255,255,255,1);
}
.theme-blue.skin-purple .navbar-default .nav>li.active>a {
color: rgb(114, 46, 209);
}
.theme-blue.skin-purple .navbar-default .nav>li.selected>a,
.theme-blue.skin-purple .navbar-default .nav>li.selected>a:focus {
background-color: #722ed1;
color: rgba(255,255,255,1);
}
.theme-blue.skin-red .navbar-default .nav>li.active>a {
color: rgb(245, 34, 45);
}
.theme-blue.skin-red .navbar-default .nav>li.selected>a,
.theme-blue.skin-red .navbar-default .nav>li.selected>a:focus {
background-color: #f5222d;
color: rgba(255,255,255,1);
}
.theme-blue.skin-yellow .navbar-default .nav>li.active>a {
color: rgb(250, 173, 20);
}
.theme-blue.skin-yellow .navbar-default .nav>li.selected>a,
.theme-blue.skin-yellow .navbar-default .nav>li.selected>a:focus {
background-color: #faad14;
color: rgba(255,255,255,1);
}
.theme-blue .navbar-default .nav>li>a:hover,
.theme-blue .navbar-default .nav>li>a:focus {
background-color: rgba(15,41,80,1);
box-shadow: 2px 0 2px 0 rgba(29,35,41,.05);
}
.fixed-sidebar.theme-blue.mini-navbar .nav li:hover>a> span.nav-label {
background-color: rgba(15,41,80,1);
}
.fixed-sidebar.theme-blue.mini-navbar .nav li:hover>.nav-second-level {
background-color: rgba(15,41,80,1);
}
ruoyi-admin/src/main/resources/templates/skin.html
......@@ -118,6 +118,25 @@
</a>
<p class="text-center">黄灰</p>
</li>
<li style="float:left; width: 33.33333%; padding: 5px;">
<a href="javascript:" data-skin="skin-blue|theme-blue" 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: rgba(15,41,80,1)"></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-blue" 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: rgba(15,41,80,1)"></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>
......@@ -127,7 +146,7 @@
var skins = ["skin-blue", "skin-green", "skin-purple", "skin-red", "skin-yellow"];
// 主题样式列表
var themes = ["theme-dark", "theme-light"];
var themes = ["theme-dark", "theme-light", "theme-blue"];
$("[data-skin]").on('click',
function(e) {
......
sql/ry_20191008.sql → sql/ry_20191122.sql
......@@ -530,7 +530,7 @@ create table sys_config (
insert into sys_config values(1, '主框架页-默认皮肤样式名称', 'sys.index.skinName', 'skin-blue', 'Y', 'admin', '2018-03-16 11-33-00', 'ry', '2018-03-16 11-33-00', '蓝色 skin-blue、绿色 skin-green、紫色 skin-purple、红色 skin-red、黄色 skin-yellow' );
insert into sys_config values(2, '用户管理-账号初始密码', 'sys.user.initPassword', '123456', 'Y', 'admin', '2018-03-16 11-33-00', 'ry', '2018-03-16 11-33-00', '初始化密码 123456' );
insert into sys_config values(3, '主框架页-侧边栏主题', 'sys.index.sideTheme', 'theme-dark', 'Y', 'admin', '2018-03-16 11-33-00', 'ry', '2018-03-16 11-33-00', '深色主题theme-dark，浅色主题theme-light' );
insert into sys_config values(3, '主框架页-侧边栏主题', 'sys.index.sideTheme', 'theme-dark', 'Y', 'admin', '2018-03-16 11-33-00', 'ry', '2018-03-16 11-33-00', '深黑主题theme-dark，浅色主题theme-light，深蓝主题theme-blue' );
-- ----------------------------
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment