首页菜单栏、头部样式修改

gaoluyang

2025-02-11 e7f031f3cda19aecd2b5216be3d0436d94f3d6d3

首页菜单栏、头部样式修改

 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;

// 自定义暗色菜单风格

 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;

 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>