若依(ruoyi)前端Vue3 Element Plus Vite版样式修改

简介: 若依(ruoyi)前端Vue3 Element Plus Vite版样式修改

1. 导航栏样式

背景色

位置:src/layout/components/Navbar.vue

类名:.navbar

// 比如背景色等
background: #1b2535;

右侧图标(全屏等)

.right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;
      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;
        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

右侧下拉菜单样式

位置: src/assets/styles/element-ui.scss

加入以下样式:

// 下拉菜单
.el-dropdown__popper {
  .el-scrollbar {
    padding: 5px;
    .el-dropdown-menu {
      .el-dropdown-menu__item {
        border-radius: 5px;
        font-weight: 700;
        //字体颜色
        color: rgb(255, 255, 255);
        &:hover {
          //鼠标移入背景色
          background-color: #99a1a2;
        }
      }
    }
  }
}

左侧面包屑文字样式

位置:src/components/Breadcrumb/index.vue

<!--  <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>  -->
<!--  将a标签修改成span标签,并添加一个has-redirect样式  -->
<span class="has-redirect" v-else @click.prevent="handleLink(item)">

样式:

.has-redirect,
.no-redirect {
  color: #dcdcdc;
  cursor: default;
  font-weight: 700;
}
.has-redirect {
  color: #ffffff;
  cursor: pointer;
}

左侧面包屑旁边的显示/隐藏侧边栏SVG样式

位置:src/components/Hamburger/index.vue

其中 fill 可以设置图标颜色:

<div style="padding: 0 15px;" @click="toggleClick">
    <svg
      :class="{'is-active':isActive}"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
      fill="#fff"
    >
      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
    </svg>
  </div>

sidebar字体样式

位置:src/assets/styles/sidebar.scss

加入以下样式:

// sidebar 菜单
.el-sub-menu,
.el-menu--vertical {
  font-weight: 700;
  background: #99a9bf;
}
.el-menu-item {
  font-weight: 700;
  background: #99a9bf;
}

全局tags标签按钮等背景色

位置:src/store/modules/settings.js

theme: storageSetting.theme || '#409EFF',

tags标签页样式

位置:src/layout/components/TagsView/index.vue

类名:.tags-view-container

.tags-view-container {
  height: 34px;
  width: 100%;
  // 背景色
  background: #fff;
  // 下边框
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);

表格样式

位置:src/assets/styles/ruoyi.scss

.el-table {
  .el-table__header-wrapper, .el-table__fixed-header-wrapper {
    // 表格头
    th {
      word-break: break-word;
      // 如果用的plus的深色模式,直接吧!important删掉,或者背景色直接删掉
      background-color: #f8f8f9 !important;
      color: #515a6e;
      height: 40px !important;
      font-size: 13px;
    }
  }
  .el-table__body-wrapper {
    .el-button [class*="el-icon-"] + span {
      margin-left: 1px;
    }
  }
}

树形菜单选中样式

位置: src/assets/styles/ruoyi.scss

加入以下样式:

//树形选中菜单样式
 .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
   background-color: #43b3bb !important;
   color: white;
 }


相关文章
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
125 1
|
2月前
|
JavaScript 前端开发 API
Vue 3:下一代前端框架革新
Vue 3:下一代前端框架革新
377 106
|
2月前
|
JavaScript 前端开发 编译器
Vue 3:下一代前端框架的革新
Vue 3:下一代前端框架的革新
309 103
|
2月前
|
JavaScript 前端开发 API
Vue 3:下一代前端框架的革命
Vue 3:下一代前端框架的革命
295 104
|
2月前
|
JavaScript 前端开发 API
Vue 3:下一代前端框架的革命
Vue 3:下一代前端框架的革命
232 102
|
2月前
|
JavaScript 前端开发 算法
Vue 3:下一代前端框架的革命性进化
Vue 3:下一代前端框架的革命性进化
339 103
|
1月前
|
JavaScript 前端开发 安全
Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
每日激励:“如果没有天赋,那就一直重复”。我是蒋星熠Jaxonic,一名执着于代码宇宙的星际旅人。用Vue 3与TypeScript构建高效、可维护的前端系统,分享Composition API、状态管理、性能优化等实战经验,助力技术进阶。
Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
65 0
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
988 14
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
309 0

热门文章

最新文章