wyyl/resources/beike/admin/css/_header.scss

@charset "UTF-8";

/**
 * @copyright     2022 beikeshop.com - All Rights Reserved.
 * @link          https://beikeshop.com
 * @Author        pu shuo <pushuo@guangda.work>
 * @Date          2022-08-04 15:52:42
 * @LastEditTime  2022-09-16 19:05:15
 */

.header-wrap {
  background-color: #fff;
  height: 54px;
  // border-bottom: 1px solid #f1f1f1;
  position: relative;
  display: flex;
  align-items: center;
  z-index: 9;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .05);

  .header-left {
    width: 190px;
    // flex-wrap: wrap;

    .logo {
      a {
        max-width: 76%;
        height: 40px;
        margin: auto;
        display: flex;
        align-items: center; // flex-start | center
        justify-content: center; // flex-end | center | space-between

        img {
          max-height: 100%;
        }
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;

    > .navbar {
      margin-bottom: 0;
      padding: 0;
      list-style: none;
      > li {
        .dropdown {
          &:hover {
            .nav-link {
              background-color: #eee;
            }

            .dropdown-menu {
              display: block;
              &.dropdown-menu-end {
                right: 0;
                left: auto;
              }
            }
          }
        }

        a.nav-link {
          color: #333;
          padding: 0 6px;
          height: 54px;
          display: flex;
          align-items: center;

          &.show {
            background-color: #eee;
          }
        }
      }
    }

    .navbar {
      &.navbar-left {
        li {
          html[lang="zh_cn"] &, html[lang="zh_hk"] &, html[lang="en"] &, html[lang="ja"] & {
            padding: 0 1rem;
          }

          @media screen and (max-width: 1200px) {
            html[lang="zh_cn"] &, html[lang="zh_hk"] &, html[lang="en"] &, html[lang="ja"] & {
              padding: 0 .2rem;
            }
          }

          a.nav-link {
            position: relative;

            &:after {
              content: '';
              position: absolute;
              left: 0;
              display: none;
              bottom: 0;
              width: 100%;
              height: 3px;
              background-color: $primary;
            }
          }

          &.active, &:hover {
            font-weight: bold;

            a {
              &:after {
                display: block;
              }
            }
          }
        }
      }

      &.navbar-right {
        > li {
          &.vip-serve {
            &:not(.active) {
              a {
                color: #999;

                img {
                  filter: grayscale(100%);
                }
              }
            }

            a {
              color: #ff6c00;
            }

            img {
              width: 22px;
              position: relative;
              top: -3px;
            }

            span {
              margin-left: 3px;
            }
          }

          a.nav-link {
            padding: 0 14px;
          }

          &.update-btn a {
            padding-top: 0.15rem;
            padding-bottom: 0.15rem;
            border-radius: 2px;
            font-size: 12px;
          }
        }
      }
    }
  }

  .avatar {
    height: 36px;
    margin-bottom: -15px;
    margin-top: -15px;
    width: 36px;
  }
}

.header-mobile-wrap {
  background-color: #fff;
  padding: 10px;
  height: 54px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .05);

  > .logo {
    a {
      max-width: 150px;
      height: 40px;
      margin: auto;
      display: flex;
      align-items: center; // flex-start | center
      justify-content: center; // flex-end | center | space-between
    }

    img {
      max-height: 100%;
    }
  }

  .header-mobile-left {
    display: flex;
    align-items: center;

    .mobile-open-menu i {
      font-size: 1.5rem;
      line-height: 1;
    }



  }

  .header-mobile-right {
    display: flex;
    justify-content: right;

    .lang, .user {
      .dropdown a {
        padding: 0;
      }
    }

    .mobile-to-front {
      margin-left: 10px;
      a {
        color:var(--bs-body-color);

        i {
          font-size: 1.2rem;
          line-height: 1;
        }
      }
    }
  }
}

#offcanvas-mobile-menu {
  width: 80%;

  .offcanvas-header {
    padding: 10px 20px 10px 10px;
    border-bottom: 1px solid #e5e5e5;

  }

  .mobile-menu-wrap {
    padding: 0;

    ul.mobile-navbar {
      list-style: none;
      padding: 0;
      margin-bottom: 0;

      > .nav-item {
        &.active {
          background-color: #f9f9f9;

           & > a {
            background-color: #e2e2e2;
          }
        }
      }

      .nav-link:active {
        background-color: #eee;
      }

      .navbar-nav {
        a {
          padding-left: 36px;
        }

        >.nav-item {
          &:last-of-type {
            border: none;
          }

          &.active {
             & > a {
              background-color: #eee;
            }
          }
        }
      }
    }

    .navbar-nav,.mobile-navbar {
      .nav-item {
        border-bottom: 1px solid #e5e5e5;

        a {
          color: var(--bs-body-color);
          flex: 1;
          height: 44px;
          padding-left: 20px;
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .offcanvas-footer {
    .offcanvas-btns {
      display: flex;
      justify-content: space-between;

      .nav-link{
        padding: 10px;
      }

      .dropdown-toggle::after {
        color: var(--bs-body-color);
      }

      .dropdown-menu {
        border-color: rgba(0, 0, 0, .2);;
      }
    }
  }
}