若依(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;
 }