From f90899d72ab2c3e8883d34a3895c72b20e64f436 Mon Sep 17 00:00:00 2001 From: RuoYi Date: Mon, 7 Dec 2020 14:13:02 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=B8=BB=E9=A2=98=E9=A3=8E?= =?UTF-8?q?=E6=A0=BC=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/assets/images/dark.svg | 39 +++++ ruoyi-ui/src/assets/images/light.svg | 39 +++++ .../{image => images}/login-background.jpg | Bin .../src/assets/{image => images}/profile.jpg | Bin ruoyi-ui/src/assets/styles/sidebar.scss | 12 +- ruoyi-ui/src/assets/styles/variables.scss | 9 ++ .../src/layout/components/Settings/index.vue | 133 +++++++++++++++--- .../src/layout/components/Sidebar/Logo.vue | 15 +- .../layout/components/Sidebar/SidebarItem.vue | 3 + .../src/layout/components/Sidebar/index.vue | 8 +- ruoyi-ui/src/layout/index.vue | 12 +- ruoyi-ui/src/settings.js | 5 + ruoyi-ui/src/store/modules/settings.js | 3 +- ruoyi-ui/src/store/modules/user.js | 2 +- ruoyi-ui/src/views/login.vue | 2 +- 15 files changed, 242 insertions(+), 40 deletions(-) create mode 100644 ruoyi-ui/src/assets/images/dark.svg create mode 100644 ruoyi-ui/src/assets/images/light.svg rename ruoyi-ui/src/assets/{image => images}/login-background.jpg (100%) rename ruoyi-ui/src/assets/{image => images}/profile.jpg (100%) diff --git a/ruoyi-ui/src/assets/images/dark.svg b/ruoyi-ui/src/assets/images/dark.svg new file mode 100644 index 000000000..36b58b5b8 --- /dev/null +++ b/ruoyi-ui/src/assets/images/dark.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ruoyi-ui/src/assets/images/light.svg b/ruoyi-ui/src/assets/images/light.svg new file mode 100644 index 000000000..efd52c67d --- /dev/null +++ b/ruoyi-ui/src/assets/images/light.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ruoyi-ui/src/assets/image/login-background.jpg b/ruoyi-ui/src/assets/images/login-background.jpg similarity index 100% rename from ruoyi-ui/src/assets/image/login-background.jpg rename to ruoyi-ui/src/assets/images/login-background.jpg diff --git a/ruoyi-ui/src/assets/image/profile.jpg b/ruoyi-ui/src/assets/images/profile.jpg similarity index 100% rename from ruoyi-ui/src/assets/image/profile.jpg rename to ruoyi-ui/src/assets/images/profile.jpg diff --git a/ruoyi-ui/src/assets/styles/sidebar.scss b/ruoyi-ui/src/assets/styles/sidebar.scss index bd476abda..d870010bb 100644 --- a/ruoyi-ui/src/assets/styles/sidebar.scss +++ b/ruoyi-ui/src/assets/styles/sidebar.scss @@ -8,6 +8,7 @@ } .sidebar-container { + -webkit-transition: width .28s; transition: width 0.28s; width: $sideBarWidth !important; background-color: $menuBg; @@ -19,6 +20,8 @@ left: 0; z-index: 1001; overflow: hidden; + -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); + box-shadow: 2px 0 6px rgba(0,21,41,.35); // reset element-ui css .horizontal-collapse-transition { @@ -73,21 +76,20 @@ .submenu-title-noDropdown, .el-submenu__title { &:hover { - background-color: $menuHover !important; + background-color: rgba(0, 0, 0, 0.06) !important; } } - .is-active>.el-submenu__title { + & .theme-dark .is-active > .el-submenu__title { color: $subMenuActiveText !important; } & .nest-menu .el-submenu>.el-submenu__title, & .el-submenu .el-menu-item { min-width: $sideBarWidth !important; - background-color: $subMenuBg !important; &:hover { - background-color: $subMenuHover !important; + background-color: rgba(0, 0, 0, 0.06) !important; } } } @@ -190,7 +192,7 @@ .el-menu-item { &:hover { // you can use $subMenuHover - background-color: $menuHover !important; + background-color: rgba(0, 0, 0, 0.06) !important; } } diff --git a/ruoyi-ui/src/assets/styles/variables.scss b/ruoyi-ui/src/assets/styles/variables.scss index d5f4e9f9e..f81e4454c 100644 --- a/ruoyi-ui/src/assets/styles/variables.scss +++ b/ruoyi-ui/src/assets/styles/variables.scss @@ -15,6 +15,11 @@ $subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951 $menuBg:#304156; $menuHover:#263445; +$sidebarTitle: #ffffff; + +$menuLightBg:#ffffff; +$menuLightHover:#f0f1f5; +$sidebarLightTitle: #001529; $subMenuBg:#1f2d3d; $subMenuHover:#001528; @@ -29,7 +34,11 @@ $sideBarWidth: 200px; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; + menuLightBg: $menuLightBg; + menuLightHover: $menuLightHover; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; sideBarWidth: $sideBarWidth; + sidebarTitle: $sidebarTitle; + sidebarLightTitle: $sidebarLightTitle } diff --git a/ruoyi-ui/src/layout/components/Settings/index.vue b/ruoyi-ui/src/layout/components/Settings/index.vue index 3a9ac4afb..7e495b7b0 100644 --- a/ruoyi-ui/src/layout/components/Settings/index.vue +++ b/ruoyi-ui/src/layout/components/Settings/index.vue @@ -1,13 +1,47 @@