RuoYi 系统样式修改

教学视频

https://su.liurb.org/kprksc

以下演示，使用的 前后端分离 版本，当前版本为 3.9.0，切换到 springboot3 分支。如果是其他的版本，大同小异。

> https://gitee.com/y_project/RuoYi-Vue.git

修改登录页面

替换背景图

文件位置

1

src --> views --> login.vue

替换下图中位置的图片即可，注意尺寸问题，原图尺寸为 1000 * 563，就尽量找一张大图就行了

调整后的效果如下

修改系统名称

这个配置在环境配置文件内，一共有三个文件，如下图红框的位置，统一将 VUE_APP_TITLE 的值做替换即可

重启服务后就能够看到效果

修改左侧导航栏

修改系统 logo

文件位置

1

src --> layout --> component --> sidebar --> Logo.vue

修改对应的 logo.png 文件即可，图片位置

1

src --> assets --> logo --> logo.png

注意保持图片尺寸一致，64 * 64

调整后的效果如下

修改菜单栏颜色

菜单文件位置

1

src --> layout --> component --> sidebar--> SidebarItem.vue

菜单主题文件位置

1

src --> assets --> styles --> variables.scss

然后可以根据自己的喜好去调整配色，以下是我这边调整的一套浅色配色，可供参考。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


$base-menu-active-text-color: #2d8cf0; // 激活菜单项的文字颜色 (清爽蓝)

// --- 主要使用浅色主题 ---
$base-menu-background:#ffffff;           // 菜单栏背景颜色 (纯白)
$base-menu-color:#495060;                 // 菜单全部字体颜色 (深灰)
$base-menu-color-active:#2d8cf0;         // 父级菜单激活的字体颜色 (清爽蓝)
$base-logo-title-color: #001529;         // 系统标题颜色 (深蓝黑，保持对比度)

// 在浅色模式下，子菜单和hover效果通常是浅灰色背景
$base-sub-menu-background:#ffffff;       // 子菜单背景也是白色
$base-sub-menu-hover:#f5f7fa;             // 菜单hover背景颜色 (极浅灰)

// 浅色主题 (可选)
$base-menu-light-color:rgba(0,0,0,.85);   // 浅色模式字体颜色
$base-menu-light-background:#ffffff;     // 浅色模式背景颜色
$base-logo-light-title-color: #001529;    // 浅色模式Logo标题颜色

同时还需要加入激活菜单的配置，样式文件位置

1

src --> assets --> styles --> sidebar.scss

在文件末尾加入以下样式配置，用作一个通用的配置，后续如果想再调整菜单样式，只需要调整上面的 variables.scss 相关配置即可。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// --- 激活的菜单项 ---
.el-menu-item.is-active {
      color: $base-menu-active-text-color !important;
      background-color: $base-sub-menu-hover !important;
      &:hover {
        background-color: $base-sub-menu-hover !important;
      }
}
 
.submenu-title-noDropdown, .el-submenu__title {
      &:hover {
        background-color: $base-sub-menu-hover !important;
      }
}

最终效果如下：

修改顶部导航栏

删除工具栏图标

右侧顶部导航栏，有很多这种 icon 图标，如果不想要的话，可以删除掉

文件位置

1

src --> layout --> component --> Navbar.vue

不想要哪个就删除哪个就好了

或者全部不想要就可以将 template 标签的内容全部注释掉

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


  <!-- <template v-if="device!=='mobile'">
    <search id="header-search" class="right-menu-item" />

    <el-tooltip content="源码地址" effect="dark" placement="bottom">
      <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
    </el-tooltip>

    <el-tooltip content="文档地址" effect="dark" placement="bottom">
      <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
    </el-tooltip>

    <screenfull id="screenfull" class="right-menu-item hover-effect" />

    <el-tooltip content="布局大小" effect="dark" placement="bottom">
      <size-select id="size-select" class="right-menu-item hover-effect" />
    </el-tooltip>

  </template> -->

最终效果如图所示：

修改默认头像

文件位置

1

src --> store --> modules --> user.js

替换下图中路径上的这个 profile.jpg 文件即可

调整后效果如下