第一局部

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;    }  }}