skyeyesystem/frontend/Skyeye-sys-ui/src/layout/components/header-nav/index.scss

@import '~@/styles/variables.scss';
$bg: #000b0d;
$dark_gray: #889aa4;
$light_gray: #eee;

.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 5px 20px;
  box-sizing: border-box;
  z-index: 9;
  // border-bottom: 1px solid $--color-border-1;
  background-color: $--color-black-14;
  backdrop-filter: blur(20px);

  // border-color:
  // color-mix(in oklab, var(--tw-color-white) 6%, transparent);
  .header-nav-l {
    display: flex;
    align-items: center;

    .logo {
      width: 350px;
      height: 32px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;

      img {
        width: 34px;
        height: 34px;
      }

      >span {
        font-size: 24px;
        margin-left: 16px;
        font-family: YouSheBiaoTiHei-2;
        color: $--color-text-1;
      }
    }

    h1 {
      font-size: 24px;

      span {
        font-size: inherit;
        color: $--color-primary;
      }
    }

    ul {
      display: flex;
      margin: 0 0 0 10px;
      position: relative;

      .active-bar {
        position: absolute;
        bottom: -12px;
        padding: 0;
        display: inline-block;
        height: 3px;
        width: 100px;
        background-color: $--color-primary;
      }

      li {
        transition: all 0.2s;
        box-sizing: border-box;
        line-height: 1;
        margin: 0 20px;

        a {
          font-size: 16px;
          box-sizing: border-box;
          transition: all 0.2s;
          text-align: center;
          cursor: pointer;

          &.active {
            font-weight: bold;
            color: $--color-text-0;
          }
        }
      }
    }
  }

  .header-nav-c {
    display: flex;
    align-items: center;

    ::v-deep .el-menu {
      height: 100%;
      background-color: transparent;
    }

    .el-menu--horizontal>.el-menu-item {
      color: $--color-text-0;
      background-color: transparent !important;
    }


    .el-menu.el-menu--horizontal {
      border-bottom: none;
    }

    li {
      height: 100%;
      font-size: 16px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      margin-right: 20px;
    }

    .el-menu-item.is-active {
      color: $--color-primary;
    }

    .el-menu--horizontal>.el-menu-item.is-active {
      border-color: $--color-primary;
    }
  }

  .header-nav-r {
    width: 350px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    >li {
      display: flex;
      align-items: center;
      margin: 0 0 0 10px;

      &.time {
        margin: 0 0 0 20px;

        span {
          display: block;
          margin: 2px 0;
          text-align: center;
          font-family: 'Century Gothic';
          font-size: 18px;
          font-weight: bold;
          letter-spacing: 0.05em;
        }
      }

      .user-name {
        //margin-left: 8px;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        color: $--color-text-2;
        letter-spacing: 0.05em;

        i {
          color: $--color-text-2;
        }
      }

      .user-photo {
        width: 24px;
        height: 24px;
        display: inline-block;
        border-radius: 50%;
        margin: 8px 8px 0 8px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }

        i {
          font-size: 20px;
          color: $--color-text-2;
        }
      }

      .toggle-scene-icon {
        padding: 0 5px;
        height: 100%;
        display: flex;
        align-items: center;
      }

      &.toggle-scene {
        width: 160px;
      }
    }

    .user-login {
      cursor: pointer;
      color: $--color-primary;
      font-size: 14px;
      transition: color 0.3s;

      &:hover {
        color: $--color-hover;
      }
    }
  }

  .el-icon-arrow-down {
    cursor: pointer;
  }

  @keyframes dynamic {
    from {
      background-position: 0 0;
    }

    to {
      background-position: 200% 0;
    }
  }
}

.login-form {
  box-sizing: border-box;
  padding: 29px 85px 0 85px;
  width: 100%;
  position: relative;

  .el-form-item {
    margin-bottom: 30px;
  }

  .el-form-item__content {
    height: 32px;
    line-height: 32px;
  }

  ::v-deep .el-input {
    display: inline-block;

    .el-input__inner {}

    input {
      background: transparent;
      -webkit-appearance: none;
      color: $--color-text-2;
      caret-color: $--color-text-2;

      &:-webkit-autofill {
        box-shadow: none !important;
        -webkit-text-fill-color: #fff !important;
      }
    }
  }

  .el-form-item__button {}
}

.split-line {
  margin: 0 5px;
}