2023-01-04

king

2023-01-04 e078f8984a300eb4d7c44896985d34566ba122ee

 src/components/header/index.scss

@@ -7,6 +7,8 @@
  width: 100%;
  height: 48px;
  display: flex;
  background: var(--mk-sys-background);
  color: var(--mk-sys-font-color);

  .header-logo {
    width: 180px;
@@ -39,7 +41,7 @@
      position: relative;
      top: 3px;
      font-size: 20px;
      color: #ffffff;
      color: var(--mk-sys-font-color);
    }
  }
  .header-collapse.collapse {
@@ -62,18 +64,21 @@
        padding: 0 10px;
        height: 42px;
        display: inline-block;
        color: var(--mk-sys-font-color);
      }

      &:hover {
        color: #eeeeee;
        span {
          border-bottom: 4px solid #fafcfb;
          color: var(--mk-sys-color);
          border-bottom: 4px solid var(--mk-sys-color);
        }
      }
      &.active {
        color: #ffffff;
        span {
          border-bottom: 4px solid #1890ff;
          color: var(--mk-sys-color);
          border-bottom: 4px solid var(--mk-sys-color);
        }
      }
    }
@@ -95,9 +100,9 @@
    border-radius: 5px;
  }
  .header-menu::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0);
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 255);
    border-radius: 3px;
  }

@@ -111,7 +116,7 @@
      margin-right: 7px;
    }
    span {
      color: #ffffff;
      color: var(--mk-sys-font-color);
      font-size: 0.95rem;
      .username {
        vertical-align: middle;
@@ -216,7 +221,7 @@
  // left: 11.8%;
  .menu-wrap {
    .title {
      color: #1890ff;
      color: var(--mk-sys-color);
      font-size: 15px;
      font-weight: 600;
    }
@@ -224,18 +229,14 @@
      max-width: 60vw;
      padding: 5px 0 5px 15px;
      div {
        // float: left;
        display: inline-block;
        vertical-align: top;
        margin-bottom: 8px;
        width: 120px;
        // overflow: hidden;
        // white-space: nowrap;
        // text-overflow: ellipsis;
        cursor: pointer;
      }
      div:hover {
        color: #40a9ff;
        color: var(--mk-sys-color5);
      }
      div:not(:last-child) {
        margin-right: 15px;
@@ -248,3 +249,29 @@
    }
  }
}

body[class*='-white'] {
  .header-container {
    box-shadow: 0 1px 1px #d9d9d9;

    .header-menu::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.07);
      background: rgba(0, 0, 0, 0);
      border-radius: 3px;
    }
  }
}
body[class*='-black'] {
  .header-container {
    .header-menu {
      li {
        &:hover, &.active {
          span {
            color: #ffffff;
          }
        }
      }
    }
  }
}