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

2023-08-01 878

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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