rui-neng/public/themes/static_new/styles/sections/header.scss

.site-header {
  position: fixed;
  top: 1.5625rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 100;
  width: 97%;
  height: 4rem;
  border-radius: 1.25rem;
  display: flex;
  align-items: stretch;
  isolation: isolate;
  overflow: visible;
  // 毛玻璃放在伪元素上，避免与子孙 .glass-card 的 backdrop-filter 嵌套导致子级失效
  // background-color: color-mix(in srgb, var(--color-white) 20%, transparent);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    backdrop-filter: blur(5px) saturate(100%);
    box-shadow:
      inset 0 0 0 2px color-mix(in srgb, var(--color-white) 10%, transparent),
      inset 2px 2px 2px -2px color-mix(in srgb, var(--color-white) 90%, transparent),
      inset -2px -2px 2px -2px color-mix(in srgb, var(--color-white) 80%, transparent);
  }

  >* {
    position: relative;
    z-index: 1;
  }

  &.dark::before {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--color-white) 50%, transparent),
      inset 1px 1px 10px rgba(0, 0, 0, .1),
      inset -1px -1px 10px rgba(255, 255, 255, .1);
  }

  &.dark {
    .site-header__logo {
      .dark-logo {
        display: block;
      }

      .light-logo {
        display: none;
      }
    }

    .site-header__nav-link,.site-header__dropdown-link {
      color: rgba(58, 58, 58, 1);
    }

    .site-header__icon-btn {
      border: 1px solid var(--color-white);

      svg {
        fill: rgba(58, 58, 58, 1);
      }
    }

    .site-header__dropdown {
      box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--color-white) 50%, transparent),
      inset 1px 1px 10px rgba(0, 0, 0, .1),
      inset -1px -1px 10px rgba(255, 255, 255, .1);
    }

  }

  .site-header__container {
    display: flex;
    flex: 1;
    padding: 0 1.5625rem;
    align-items: center;
    width: 100%;
    min-height: 0;
  }

  .site-header__logo {
    width: 8rem;
    height: 1.875rem;

    .light-logo,
    .dark-logo {
      width: 100%;
      height: 100%;
      display: none;
    }

    .light-logo {
      display: block;
    }

    .dark-logo {
      display: none;
    }
  }

  .site-header__nav {
    flex: 1;
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    gap: 2.75rem;
  }

  .site-header__nav-link {
    position: relative;
    color: var(--color-white);
    font-family: "OPPO Sans 4.0";
    font-style: Medium;
    font-size: var(--font-20);
    font-weight: 500;
    line-height: var(--font-24);
    letter-spacing: 0rem;
    text-align: left;
    opacity: 0.88;
    transition: color 0.3s ease, opacity 0.3s ease;

    &:hover {
      opacity: 1;
    }

  }

  /* 「产品及解决方案」二级导航 */
  .site-header__nav-item {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    cursor: pointer;
    /* 空隙在链接行下方、不在 nav-item 的盒模型里；悬停时向下伸出桥接层（默认高度 0 不挡页面点击） */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      height: 0;
      z-index: 1;
      pointer-events: none;
    }

    &:hover::after,
    &:focus-within::after {
      height: 200%;
      pointer-events: auto;
    }

    &:hover .site-header__dropdown,
    &:focus-within .site-header__dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(20px);
      pointer-events: auto;
    }
  }

  .site-header__dropdown {
    position: absolute;
    left: 50%;
    top: 100%;
    padding: 1.75rem 3.125rem;
    transform: translateX(-50%);
    z-index: 200;
    border-radius: 1.4375rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      height: 0.75rem;
    }
  }

  .site-header__dropdown-link {
    position: relative;
    display: block;
    color: var(--color-white);

    font-family: "OPPO Sans 4.0";
    font-style: Regular;
    font-size: var(--font-20);
    font-weight: 400;
    line-height: var(--font-22);
    letter-spacing: 0px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-header__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
  }

  .site-header__contact-btn {
    border: none;
    padding-top: 0;
    padding-bottom: 0;
    height: 2.375rem;
    border-radius: .75rem;
  }

  .site-header__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: .75rem;

    &.toggle {
      display: none;
      position: relative;
      z-index: 102;
    }

    &.search-btn {
      border: 1px solid rgba(255, 255, 255, 1);
      background: transparent;
    }

    img,
    svg {
      fill: var(--color-white);
      width: 1.3438rem;
      height: 1.3438rem;
    }
  }
}

@media (width <=992px) {
  .site-header {
    .site-header__container {
      justify-content: space-between;
    }

    .site-header__nav {
      display: none;
    }

    .site-header__icon-btn.toggle {
      display: flex;
    }
  }
}