From e7f031f3cda19aecd2b5216be3d0436d94f3d6d3 Mon Sep 17 00:00:00 2001 From: gaoluyang <gaoluyang@rengu.cc> Date: 星期二, 11 二月 2025 10:34:31 +0800 Subject: [PATCH] 首页菜单栏、头部样式修改 --- src/assets/styles/variables.scss | 10 +++++----- src/layout/components/Navbar.vue | 7 ++++++- src/layout/components/Sidebar/index.vue | 11 ++++++++++- 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index bc76aac..d30e122 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -10,15 +10,15 @@ // 榛樿鑿滃崟涓婚椋庢牸 $base-menu-color:#bfcbd9; -$base-menu-color-active:#f4f4f5; -$base-menu-background:#304156; +$base-menu-color-active:#ffffff; +$base-menu-background:#1890FF; $base-logo-title-color: #ffffff; $base-menu-light-color:#ffffff; -$base-menu-light-background:#ffffff; -$base-logo-light-title-color: #001529; +$base-menu-light-background:#1890FF; +$base-logo-light-title-color: #606266; -$base-sub-menu-background:#1f2d3d; +$base-sub-menu-background:#ffffff; $base-sub-menu-hover:#001528; // 鑷畾涔夋殫鑹茶彍鍗曢鏍� diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 5b45e3c..375102a 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -114,9 +114,14 @@ .navbar { height: 50px; overflow: hidden; - position: relative; + //position: relative; background: #fff; box-shadow: 0 1px 4px rgba(0,21,41,.08); + position: fixed; /* 灏嗗ご閮ㄥ浐瀹� */ + top: 0; /* 鍦ㄩ《閮ㄥ浐瀹� */ + width: 100%; /* 瀹藉害100%锛岃鐩栨暣涓鍙� */ + //background-color: #f8f9fa; /* 璁剧疆鑳屾櫙棰滆壊锛屼互渚挎洿鏄庢樉鍦扮湅鍒版晥鏋� */ + z-index: 1000; /* 纭繚澶撮儴鍦ㄥ叾浠栧唴瀹逛箣涓� */ display: flex; align-items: center; justify-content: space-between; diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index e16fdcc..39636dd 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -8,7 +8,7 @@ :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground" :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor" :unique-opened="true" - :active-text-color="settings.theme" + :active-text-color="variables.menuLightColor" :collapse-transition="false" mode="vertical" > @@ -55,3 +55,12 @@ } }; </script> + +<style style lang="scss" scoped> +::v-deep .is-active { + background-color: rgba(0, 0, 0, 0.1) !important; +} +::v-deep .el-submenu__title i { + color: #ffffff !important; +} +</style> -- Gitblit v1.9.3