songwei
/
fxfast-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增暗色菜单风格主题

This commit is contained in:
RuoYi 2021-09-04 12:09:55 +08:00
parent 5d72f9d224
commit 14c6c796e8
5 changed files with 53 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ruoyi-ui/src/assets/styles/sidebar.scss
View File

@ -3,15 +3,15 @@
.main-container { .main-container {
min-height: 100%; min-height: 100%;
transition: margin-left .28s; transition: margin-left .28s;
margin-left: $sideBarWidth; margin-left: $base-sidebar-width;
position: relative; position: relative;
} }
.sidebar-container { .sidebar-container {
-webkit-transition: width .28s; -webkit-transition: width .28s;
transition: width 0.28s; transition: width 0.28s;
width: $sideBarWidth !important; width: $base-sidebar-width !important;
background-color: $menuBg; background-color: $base-menu-background;
height: 100%; height: 100%;
position: fixed; position: fixed;
font-size: 0px; font-size: 0px;
@ -81,12 +81,12 @@
} }
& .theme-dark .is-active > .el-submenu__title { & .theme-dark .is-active > .el-submenu__title {
color: $subMenuActiveText !important; color: $base-menu-color-active !important;
} }
& .nest-menu .el-submenu>.el-submenu__title, & .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item { & .el-submenu .el-menu-item {
min-width: $sideBarWidth !important; min-width: $base-sidebar-width !important;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: rgba(0, 0, 0, 0.06) !important;
@ -95,10 +95,10 @@
& .theme-dark .nest-menu .el-submenu>.el-submenu__title, & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
& .theme-dark .el-submenu .el-menu-item { & .theme-dark .el-submenu .el-menu-item {
background-color: $subMenuBg !important; background-color: $base-sub-menu-background !important;
&:hover { &:hover {
background-color: $subMenuHover !important; background-color: $base-sub-menu-hover !important;
} }
} }
} }
@ -154,7 +154,7 @@
} }
.el-menu--collapse .el-menu .el-submenu { .el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important; min-width: $base-sidebar-width !important;
} }
// mobile responsive // mobile responsive
@ -165,14 +165,14 @@
.sidebar-container { .sidebar-container {
transition: transform .28s; transition: transform .28s;
width: $sideBarWidth !important; width: $base-sidebar-width !important;
} }
&.hideSidebar { &.hideSidebar {
.sidebar-container { .sidebar-container {
pointer-events: none; pointer-events: none;
transition-duration: 0.3s; transition-duration: 0.3s;
transform: translate3d(-$sideBarWidth, 0, 0); transform: translate3d(-$base-sidebar-width, 0, 0);
} }
} }
} }

60
ruoyi-ui/src/assets/styles/variables.scss
View File

@ -8,37 +8,47 @@ $tiffany: #4AB7BD;
$yellow:#FEC171; $yellow:#FEC171;
$panGreen: #30B08F; $panGreen: #30B08F;
// sidebar // 默认菜单主题风格
$menuText:#bfcbd9; $base-menu-color:#bfcbd9;
$menuActiveText:#409EFF; $base-menu-color-active:#f4f4f5;
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951 $base-menu-background:#304156;
$base-logo-title-color: #ffffff;
$menuBg:#304156; $base-menu-light-color:rgba(0,0,0,.70);
$menuHover:#263445; $base-menu-light-background:#ffffff;
$sidebarTitle: #ffffff; $base-logo-light-title-color: #001529;
$menuLightBg:#ffffff; $base-sub-menu-background:#1f2d3d;
$menuLightHover:#f0f1f5; $base-sub-menu-hover:#001528;
$sidebarLightTitle: #001529;
$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 // the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export { :export {
menuText: $menuText; menuColor: $base-menu-color;
menuActiveText: $menuActiveText; menuLightColor: $base-menu-light-color;
subMenuActiveText: $subMenuActiveText; menuColorActive: $base-menu-color-active;
menuBg: $menuBg; menuBackground: $base-menu-background;
menuHover: $menuHover; menuLightBackground: $base-menu-light-background;
menuLightBg: $menuLightBg; subMenuBackground: $base-sub-menu-background;
menuLightHover: $menuLightHover; subMenuHover: $base-sub-menu-hover;
subMenuBg: $subMenuBg; sideBarWidth: $base-sidebar-width;
subMenuHover: $subMenuHover; logoTitleColor: $base-logo-title-color;
sideBarWidth: $sideBarWidth; logoLightTitleColor: $base-logo-light-title-color
sidebarTitle: $sidebarTitle;
sidebarLightTitle: $sidebarLightTitle
} }

6
ruoyi-ui/src/layout/components/Sidebar/Logo.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }"> <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <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>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <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> </router-link>
</transition> </transition>
</div> </div>

6
ruoyi-ui/src/layout/components/Sidebar/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }"> <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg" :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuText : 'rgba(0,0,0,.65)'" :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:unique-opened="true" :unique-opened="true"
:active-text-color="settings.theme" :active-text-color="settings.theme"
:collapse-transition="false" :collapse-transition="false"

4
ruoyi-ui/src/layout/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> <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="{hasTagsView:needTagsView}" class="main-container">
<div :class="{'fixed-header':fixedHeader}"> <div :class="{'fixed-header':fixedHeader}">
<navbar /> <navbar />
@ -93,7 +93,7 @@ export default {
top: 0; top: 0;
right: 0; right: 0;
z-index: 9; z-index: 9;
width: calc(100% - #{$sideBarWidth}); width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s; transition: width 0.28s;
} }