vue3:十一、主页面布局(修改左侧导航条的样式)

一、样式

1、初始样式

如下图，可知，左侧导航条存在背景色

2、 左侧导航栏搭建完成样式

去掉导航条的背景色，以及菜单项的底色，并且修改选中状态的效果，修改悬停效果

二、实现

1、设置左侧导航栏底色

(1)去掉顶部和左侧导航栏的底色

初始页面效果

顶部与左侧底色样式

将代码中与顶部与左侧的样式删掉，这部分代码是引入导航条时，官方给出的顶部和左侧边栏的效果，可以直接去掉

移除后页面效果

移除样式之后，左侧边栏和顶部导航栏的背景色都更改为白色

加入设定背景色

#f4f6f9

现在需要给左侧边栏一个背景色，这里设置为#f4f6f9

加入底色后颜色展示

由下图可以看出，加入sidebar的背景色之后，菜单栏部分还是白色背景色

(2)去除菜单项底色

初始页面效果

根据开发者工具找到菜单项的底色

可以根据f12查找到菜单块对应的样式，并根据样式找到设置为白色背景色的部分，并进行更改，由下图可以看出，在el-menu这个样式中，设置了背景色(这里可以取消勾选，去看看是否是这部分导致的白色背景色)

修改底色

由于这里的背景色是通过变量var(--el-menu-bg-color)设定，那么可以直接在base.css这个全部变量去设置其变量值，即可更改整体背景色

在全局css中将找的.el-menu的背景色的变量var(--el-menu-bg-color); 设置为指定色：#f4f6f9

展示效果

由下图，可以看出，菜单块的白色背景已经被清楚

(3)选中菜单项底色

初始页面效果

目前选中项只有一个文字颜色改变，现在需要给一个背景色以及文字色