Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
前端资源
RuoYi-Vue
提交
14c6c796
R
RuoYi-Vue
项目概览
前端资源
/
RuoYi-Vue
12 个月 前同步成功
通知
5
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
R
RuoYi-Vue
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
14c6c796
编写于
9月 04, 2021
作者:
R
RuoYi
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
新增暗色菜单风格主题
上级
5d72f9d2
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
53 addition
and
43 deletion
+53
-43
ruoyi-ui/src/assets/styles/sidebar.scss
ruoyi-ui/src/assets/styles/sidebar.scss
+10
-10
ruoyi-ui/src/assets/styles/variables.scss
ruoyi-ui/src/assets/styles/variables.scss
+35
-25
ruoyi-ui/src/layout/components/Sidebar/Logo.vue
ruoyi-ui/src/layout/components/Sidebar/Logo.vue
+3
-3
ruoyi-ui/src/layout/components/Sidebar/index.vue
ruoyi-ui/src/layout/components/Sidebar/index.vue
+3
-3
ruoyi-ui/src/layout/index.vue
ruoyi-ui/src/layout/index.vue
+2
-2
未找到文件。
ruoyi-ui/src/assets/styles/sidebar.scss
浏览文件 @
14c6c796
...
...
@@ -3,15 +3,15 @@
.main-container
{
min-height
:
100%
;
transition
:
margin-left
.28s
;
margin-left
:
$
sideBarW
idth
;
margin-left
:
$
base-sidebar-w
idth
;
position
:
relative
;
}
.sidebar-container
{
-webkit-transition
:
width
.28s
;
transition
:
width
0
.28s
;
width
:
$
sideBarW
idth
!
important
;
background-color
:
$
menuBg
;
width
:
$
base-sidebar-w
idth
!
important
;
background-color
:
$
base-menu-background
;
height
:
100%
;
position
:
fixed
;
font-size
:
0px
;
...
...
@@ -81,12 +81,12 @@
}
&
.theme-dark
.is-active
>
.el-submenu__title
{
color
:
$
subMenuActiveText
!
important
;
color
:
$
base-menu-color-active
!
important
;
}
&
.nest-menu
.el-submenu
>
.el-submenu__title
,
&
.el-submenu
.el-menu-item
{
min-width
:
$
sideBarW
idth
!
important
;
min-width
:
$
base-sidebar-w
idth
!
important
;
&
:hover
{
background-color
:
rgba
(
0
,
0
,
0
,
0
.06
)
!
important
;
...
...
@@ -95,10 +95,10 @@
&
.theme-dark
.nest-menu
.el-submenu
>
.el-submenu__title
,
&
.theme-dark
.el-submenu
.el-menu-item
{
background-color
:
$
subMenuBg
!
important
;
background-color
:
$
base-sub-menu-background
!
important
;
&
:hover
{
background-color
:
$
subMenuH
over
!
important
;
background-color
:
$
base-sub-menu-h
over
!
important
;
}
}
}
...
...
@@ -154,7 +154,7 @@
}
.el-menu--collapse
.el-menu
.el-submenu
{
min-width
:
$
sideBarW
idth
!
important
;
min-width
:
$
base-sidebar-w
idth
!
important
;
}
// mobile responsive
...
...
@@ -165,14 +165,14 @@
.sidebar-container
{
transition
:
transform
.28s
;
width
:
$
sideBarW
idth
!
important
;
width
:
$
base-sidebar-w
idth
!
important
;
}
&
.hideSidebar
{
.sidebar-container
{
pointer-events
:
none
;
transition-duration
:
0
.3s
;
transform
:
translate3d
(
-
$
sideBarW
idth
,
0
,
0
);
transform
:
translate3d
(
-
$
base-sidebar-w
idth
,
0
,
0
);
}
}
}
...
...
ruoyi-ui/src/assets/styles/variables.scss
浏览文件 @
14c6c796
...
...
@@ -8,37 +8,47 @@ $tiffany: #4AB7BD;
$yellow
:
#FEC171
;
$panGreen
:
#30B08F
;
// sidebar
$menuText
:
#bfcbd9
;
$menuActiveText
:
#409EFF
;
$subMenuActiveText
:
#f4f4f5
;
// https://github.com/ElemeFE/element/issues/12951
// 默认菜单主题风格
$base-menu-color
:
#bfcbd9
;
$base-menu-color-active
:
#f4f4f5
;
$base-menu-background
:
#304156
;
$base-logo-title-color
:
#ffffff
;
$
menuBg
:
#304156
;
$
menuHover
:
#263445
;
$
sidebarTitle
:
#ffffff
;
$
base-menu-light-color
:
rgba
(
0
,
0
,
0
,.
70
)
;
$
base-menu-light-background
:
#ffffff
;
$
base-logo-light-title-color
:
#001529
;
$menuLightBg
:
#ffffff
;
$menuLightHover
:
#f0f1f5
;
$sidebarLightTitle
:
#001529
;
$base-sub-menu-background
:
#1f2d3d
;
$base-sub-menu-hover
:
#001528
;
$subMenuBg
:
#1f2d3d
;
$subMenuHover
:
#001528
;
// 自定义暗色菜单风格
/**
$base-menu-color:hsla(0,0%,100%,.65);
$base-menu-color-active:#fff;
$base-menu-background:#001529;
$base-logo-title-color: #ffffff;
$sideBarWidth
:
200px
;
$base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529;
$base-sub-menu-background:#000c17;
$base-sub-menu-hover:#001528;
*/
$base-sidebar-width
:
200px
;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export
{
menuText
:
$menuText
;
menuActiveText
:
$menuActiveText
;
subMenuActiveText
:
$subMenuActiveText
;
menuBg
:
$menuBg
;
menuHover
:
$menuHover
;
menuLightBg
:
$menuLightBg
;
menuLightHover
:
$menuLightHover
;
subMenuBg
:
$subMenuBg
;
subMenuHover
:
$subMenuHover
;
sideBarWidth
:
$sideBarWidth
;
sidebarTitle
:
$sidebarTitle
;
sidebarLightTitle
:
$sidebarLightTitle
menuColor
:
$base-menu-color
;
menuLightColor
:
$base-menu-light-color
;
menuColorActive
:
$base-menu-color-active
;
menuBackground
:
$base-menu-background
;
menuLightBackground
:
$base-menu-light-background
;
subMenuBackground
:
$base-sub-menu-background
;
subMenuHover
:
$base-sub-menu-hover
;
sideBarWidth
:
$base-sidebar-width
;
logoTitleColor
:
$base-logo-title-color
;
logoLightTitleColor
:
$base-logo-light-title-color
}
ruoyi-ui/src/layout/components/Sidebar/Logo.vue
浏览文件 @
14c6c796
<
template
>
<div
class=
"sidebar-logo-container"
:class=
"
{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuB
g : variables.menuLightBg
}">
<div
class=
"sidebar-logo-container"
:class=
"
{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuB
ackground : variables.menuLightBackground
}">
<transition
name=
"sidebarLogoFade"
>
<router-link
v-if=
"collapse"
key=
"collapse"
class=
"sidebar-logo-link"
to=
"/"
>
<img
v-if=
"logo"
:src=
"logo"
class=
"sidebar-logo"
/>
<h1
v-else
class=
"sidebar-title"
:style=
"
{ color: sideTheme === 'theme-dark' ? variables.
sidebarTitle : variables.sidebarLightTitle
}">
{{
title
}}
</h1>
<h1
v-else
class=
"sidebar-title"
:style=
"
{ color: sideTheme === 'theme-dark' ? variables.
logoTitleColor : variables.logoLightTitleColor
}">
{{
title
}}
</h1>
</router-link>
<router-link
v-else
key=
"expand"
class=
"sidebar-logo-link"
to=
"/"
>
<img
v-if=
"logo"
:src=
"logo"
class=
"sidebar-logo"
/>
<h1
class=
"sidebar-title"
:style=
"
{ color: sideTheme === 'theme-dark' ? variables.
sidebarTitle : variables.sidebarLightTitle
}">
{{
title
}}
</h1>
<h1
class=
"sidebar-title"
:style=
"
{ color: sideTheme === 'theme-dark' ? variables.
logoTitleColor : variables.logoLightTitleColor
}">
{{
title
}}
</h1>
</router-link>
</transition>
</div>
...
...
ruoyi-ui/src/layout/components/Sidebar/index.vue
浏览文件 @
14c6c796
<
template
>
<div
:class=
"
{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuB
g : variables.menuLightBg
}">
<div
:class=
"
{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuB
ackground : variables.menuLightBackground
}">
<logo
v-if=
"showLogo"
:collapse=
"isCollapse"
/>
<el-scrollbar
:class=
"settings.sideTheme"
wrap-class=
"scrollbar-wrapper"
>
<el-menu
:default-active=
"activeMenu"
:collapse=
"isCollapse"
:background-color=
"settings.sideTheme === 'theme-dark' ? variables.menuB
g : variables.menuLightBg
"
:text-color=
"settings.sideTheme === 'theme-dark' ? variables.menu
Text : 'rgba(0,0,0,.65)'
"
:background-color=
"settings.sideTheme === 'theme-dark' ? variables.menuB
ackground : variables.menuLightBackground
"
:text-color=
"settings.sideTheme === 'theme-dark' ? variables.menu
Color : variables.menuLightColor
"
:unique-opened=
"true"
:active-text-color=
"settings.theme"
:collapse-transition=
"false"
...
...
ruoyi-ui/src/layout/index.vue
浏览文件 @
14c6c796
<
template
>
<div
:class=
"classObj"
class=
"app-wrapper"
:style=
"
{'--current-color': theme}">
<div
v-if=
"device==='mobile'&&sidebar.opened"
class=
"drawer-bg"
@
click=
"handleClickOutside"
/>
<sidebar
class=
"sidebar-container"
:style=
"
{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }"
/>
<sidebar
class=
"sidebar-container"
/>
<div
:class=
"
{hasTagsView:needTagsView}" class="main-container">
<div
:class=
"
{'fixed-header':fixedHeader}">
<navbar
/>
...
...
@@ -93,7 +93,7 @@ export default {
top
:
0
;
right
:
0
;
z-index
:
9
;
width
:
calc
(
100%
-
#{
$
sideBarW
idth
}
);
width
:
calc
(
100%
-
#{
$
base-sidebar-w
idth
}
);
transition
:
width
0
.28s
;
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录