首页vue-admin-template 导航栏修改hover

vue-admin-template 导航栏修改hover

时间: 2023-10-23 19:37:10 浏览: 168

vueAdmin-template:vueAdmin模板

vueAdmin模板具有Element UI，axios，iconfont，权限控制和lint的最小vue管理员模板现场演示： : 构建设置 # Clone project git clone https://github.com/PanJiaChen/vueAdmin-template.git # Install dependencies npm install # serve with hot reload at localhost:9528 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 演示版额外的如果要按用户角色授予路由器权

要修改 vue-admin-template 中的导航栏 hover 样式，可以按照以下步骤操作： 1. 打开 `src/styles/element-variables.scss` 文件，找到 `$--color-primary-hover` 变量，将其值修改为你想要的颜色值。 2. 打开 `src/styles/mixins.scss` 文件，找到 `el-menu-item-active` 类的样式，修改其中的 `background-color` 和 `border-color` 属性为你想要的颜色值。 3. 打开 `src/layout/components/Sidebar/index.vue` 文件，找到 `<el-menu>` 标签，将其中的 `@hover-background-color` 属性值修改为 `$--color-primary-hover`。这样就可以修改 vue-admin-template 中导航栏 hover 样式了。记得重新编译项目以使修改生效。

阅读全文