【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式 |
您所在的位置:网站首页 › 三星侧边栏隐藏了怎么办 › 【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式 |
掌握分寸感,找目标一致的人协同你,有效地调配资源,就可以提高效率。 写在前面的话:博主最近想要搭建自己的前端若依项目,因此此系列博客会做一些记录。我的项目gitee地址: https://gitee.com/xuruicong/rachel-front-show 说明:只运行前端项目,只需要要下载官方项目http://www.ruoyi.vip/ 修改vue.config.js文件中的target: `http://localhost:8080`为: target: `http://vue.ruoyi.vip/prod-api/`,修改效果预览: 目录 1. 修改系统logo 2. 修改菜单栏颜色 1. 删除部分工具栏 2. 修改默认头像 三、修改面包屑hamburger 1. 修改收起展开图标和标题 3. 添加自定义面包屑 四、修改全局边距 一、修改左侧导航栏sidebar(tips: 全局搜索sidebar-title) src-->layout-->component-->sidebar--> Logo.vue 只需要修改对应的图标logo.png即可 2. 修改菜单栏颜色(tips:全局搜索.sidebar-container) src-->layout-->component-->sidebar--> SidebarItem.vue src-->assets-->styles-->sidebar.scss src-->assets-->styles--> variables.scss // variable.scss // 默认菜单主题风格 $base-menu-color: #333333; // 菜单全部字体颜色 $base-menu-color-active: #e60012; // 父级菜单激活的字体颜色 $base-menu-background: #fff; // 菜单栏背景颜色(非激活状态) $base-logo-title-color: #e60012; // 系统标题颜色 $base-menu-light-color: rgba(0, 0, 0, 0.7); $base-menu-light-background: #e60012; // 选中菜单的字体颜色 $base-logo-light-title-color: #fff; // 对应base-logo-title-color $base-sub-menu-background: #f5f7fa; // 选中的菜单的子菜单背景颜色 $base-sub-menu-hover: #f7f0f1; // 子菜单hover背景颜色如果还想要修改 激活的菜单的样式需要在sidebar.scss中添加和修改如下代码: // sidebar.scss .el-menu-item.is-active { color: #e60012 !important; background-color: $base-sub-menu-hover !important; // 点击菜单的颜色 &:hover { background-color: $base-sub-menu-hover !important; } } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { background-color: $base-sub-menu-hover !important; } } & .theme-dark .nest-menu .el-submenu > .el-submenu__title, & .theme-dark .el-submenu .el-menu-item { // background-color: $base-sub-menu-background !important; color: #333333 !important; background-color: #fff; &:hover { background-color: $base-sub-menu-hover !important; } }修改之后的效果如下: src-->layout-->component-->Navbar.vue 2. 修改默认头像(tips:全局搜索profile.jpg) src-->store-->modules-->user.js 替换profile.jpg图片即可 三、修改面包屑hamburger![]() src-->layout-->component-->Navbar.vue 注释掉面包屑部分,我们一会自己写 src-->component-->Hamburger--> index.vue ![]() 在全局settings文件中,若以框架已经定义了是否显示tagsView,设置属性为false即可。 /** * 是否显示 tagsView */ tagsView: true,
src-->layout-->component-->Navbar.vue 需要修改Navbar的高度,并添加面包屑 // Navbar.vue由于修改了navbar的高从50px--->100px,会影响页面整个的高度。(整个页面的高度是100vh,下面内容app-main的高度就是100vh-navbar的高度)因此需要修改app-main高度 src--> layout-->components-->AppMain.vue .app-main { /* 100= navbar 100 */ min-height: calc(100vh - 100px); // 原来是50px width: 100%; position: relative; overflow: hidden; }但是希望去掉首页/,因为不是所有页面都是通过首页进入的。 src-->components-->Breadcrumb-->index.vue 注释掉默认的首页即可 // if (!this.isDashboard(first)) { // matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched) // }可以看到 ,所有页面都包含在app-container下的,如果需要修改样式则需呀修改全局的app-container样式。 src-->assets-->styles-->index.scss 最终页面效果如下: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |