ruoyi+elementPlus样式修改

1年前 (2022) 程序员胖胖胖虎阿
103 0 0

第一部分

1. 登录框

  • 去完整版处直接复制样式给 .login-form

ruoyi+elementPlus样式修改

  • 标题再改个颜色 .title
  • 更改input框的边框变量值(边框颜色,图标颜色) element-ui.scss

    // 个人调整
    .el-input {
      --el-input-focus-border-color: #1fb496 !important;
      --el-input-border-radius: 0 !important;
      --el-input-icon-color: #5c5c66 !important;
    }
  • 用户头像的图标跟锁的图标移动到右边并且下载新的图标

2. 菜单图标

  • 换成自己的白色svg
  • 原组件是 hamburger

3. 导航栏样式

  • 背景色
    .navbar

    background: #3c8dbc;
  • 右侧图标颜色

.right-menu-item

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 15px;
      color: #ffffff;
      vertical-align: text-bottom;
      &:hover {
        background-color: #367fa9;
      }
      :deep(.size-icon--style) {
        font-size: 15px;
        color: #ffffff;
      }
      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;
        &:hover {
          background: #367fa9;
        }
      }
    }
  • 需要在组件里面的svg后面添加label,并且用div包裹

         <div @click="toggle">
          <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" />
          <span class="label" style="font-weight: 700; margin-left: 3px">全屏</span>
        </div>

4. 左侧面包屑文字样式

  • breadcrumb组件内

    // 将a标签修改成span标签,并添加一个has-redirect样式
     <span class="has-redirect" v-else @click.prevent="handleLink(item)">
              {{ item.meta.title }}
    </span>
    
    // style
      .has-redirect,
      .no-redirect {
        color: #dcdcdc;
        cursor: default;
        font-weight: 700;
      }
      .has-redirect {
        color: #ffffff;
        cursor: pointer;
      }

5. 右侧下拉菜单样式

  • 直接在element.scss全局修改
// 下拉菜单
.el-dropdown__popper {
  .el-scrollbar {
    padding: 5px;
    .el-dropdown-menu {
      .el-dropdown-menu__item {
        border-radius: 5px;
        font-weight: 700;
        &:hover {
          background-color: #e1e3e9;
        }
      }
    }
  }
}

6. 头像加载失败处理

  • 顺便将头像的边框改成3px
function errorEvent(event) {
  const el = event.srcElement;
  import("@/assets/images/profile.jpg").then((res) => {
    el.src = res.default;
  });
}

7. sidebar字体

  • 全局elment.scss处设置

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

    8. tags标签

  • theme store文件

    theme: storageSetting.theme || "#3c8dbc",

第二部分

1. 表单右上角小图标

  • 更改成div类型的标签

            <div class="cus-rightToolbarItem" @click="refresh()">
              <el-icon><Refresh /></el-icon>
            </div>
  • 样式
  .cus-rightToolbarItem {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #dddddd;
    transition: border 0.3s;
    &:hover {
      background-color: #e7e7e7;
    }
    &:active {
      border: 2px solid black;
    }
  }

2. dialog弹窗样式

  • 在element全局样式处添加
// dialog
.el-message-box {
  border: 0 !important;
  .el-message-box__header {
    background-color: #3c8dbc;
    .el-message-box__title {
      color: white;
      font-weight: 700;
    }
    .el-message-box__close {
      color: white;
    }
  }
}
版权声明:程序员胖胖胖虎阿 发表于 2022年11月13日 上午7:16。
转载请注明:ruoyi+elementPlus样式修改 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...