前端样式

网页标题-loge

在ruoyi-ui/public 目录中放你的loge文件，修改同目录下index.html文件

<link rel="icon" href="<%= BASE_URL %>logo.png">

网页标题-title

修改ruoyi-ui/src/layout/Sidebar/Loge.vue文件，这里要修改三处地点

#第一处
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' && navType !== 3 ? variables.logoTitleColor : variables.logoLightTitleColor }"> 你要修改的标题 </h1>
#第二处
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' && navType !== 3 ? variables.logoTitleColor : variables.logoLightTitleColor }"> 你要修改的标题 </h1>
#第三处

登录界面标题

修改ruoyi-ui\src\views\login.vue

<h3 class="title">登陆界面标题</h3>

登陆界面底部文字

<!--  底部  -->
    <div class="el-login-footer">
      <span>Copyright © 2025-2026 NAME All Rights Reserved.</span>
    </div>

登陆界面背景

.login {
  display: flex;
  justify-content: flex-end;
  padding-right: 120px;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/背景2.png");
  background-size: cover;
}

侧边栏上方logo

logo文件存放到ruoyi-ui\src\assets\logo目录下

修改ruoyi-ui\src\layout\components\Sidebar\Logo.vue文件中这一行

import logoImg from '@/assets/logo/logo.png'

logo在文字上方，修改ruoyi-ui\src\layout\components\Sidebar\Logo.vue文件中样式

.sidebar-logo-container {
  position: relative;
  width: 100%;
  height: 110px;
  line-height: normal;
  background: #2b2f3a;
  text-align: center;
  overflow: hidden;

  & .sidebar-logo-link {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    & .sidebar-logo {
      width: 64px;
      height: 64px;
      margin: 0;
    }

    & .sidebar-title {
      display: block;
      margin: 6px 0 0 0;
      color: #fff;
      font-weight: 600;
      line-height: 1.2;
      font-size: 14px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      // vertical-align: baseline;
    }
  }

注册界面标题

修改ruoyi-ui\src\views\register.vue文件

<h3 class="title">你要设置的标题</h3>

注册界面背景

修改ruoyi-ui\src\views\register.vue文件

.register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/image/背景2.png");
  background-size: cover;
}

登陆窗口样式修改

我这里改为在右侧显示，修改ruoyi-ui\src\views\login.vue文件

.login {
  display: flex;
  justify-content: flex-end; #最右
  padding-right: 120px; #间距
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/背景2.png");
  background-size: cover;
}

注册界面样式

修改ruoyi-ui\src\views\register.vue文件

.register {
  display: flex;
  justify-content: flex-end;
  padding-right: 120px; 
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/背景2.png");
  background-size: cover;
}

修改页面标题变量

修改.env.development和.env.production，将VUE_APP_TITLE变量设置为你需要的页面标题

去除首页右上角 源码地址 & 文档地址

修改ruoyi-ui\src\layout\components\Navbar.vue文件，将下面的代码注释

        <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>

侧边栏的颜色

修改ruoyi-ui\src\assets\styles\variables.scss文件

// 默认菜单主题风格
$base-menu-color:#bfcbd9;
$base-menu-color-active:#f4f4f5;
$base-menu-background:#191970;#设置为午夜蓝
$base-logo-title-color: #ffffff;

$base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529;

$base-sub-menu-background:#191970;#下拉菜单设置为午夜蓝
$base-sub-menu-hover:#001528;

打开注册功能

修改ruoyi-ui\src\views\login.vue文件

      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: true,
      redirect: undefined

更换首页显示

修改ruoyi-ui\src\router\index.js文件

  {
    path: '',
    component: Layout,
    redirect: 'index',
    children: [
      {
        path: 'index',
        component: () => import('@/views/index'),
        name: 'Index',
        meta: { title: '首页', icon: 'guide', affix: true }
      }
    ]
  }