关于前端:ruoyielementPlus样式修改

第一局部

1. 登录框

• 去完整版处间接复制款式给 .login-form

• 题目再改个色彩 .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;}
  }
}