@import "@/styles/_support.scss";

$navHei: 92px;
$navHeiM: 72px;

.v-header {
  height: $navHei;
  background-color: #fff;
  color: $cFontGray;
  position: relative;
  z-index: 1000;
  font-size: $fontSize;

  .header-container {
    max-width: 1200px;
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    position: relative;
  }

  .main-nav {
    height: 100%;
    flex: 1 0 auto;
  }

  .logo-img {
    // margin-right: 43.2px;
    margin-right: 0;
    max-width: 213px;
    cursor: pointer;
  }

  .nav-list {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
  }

  .nav-item {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
  }

  .main-nav-list {
    // display: flex;
    @extend .fcc;
    cursor: pointer;
  }

  .nav-item.link-item {
    padding: 0 50px;
    height: 60px;
  }

  .nav-item.search {
    flex: 1 1 auto;
  }

  .nav-item.auth {
    color: #ffffff;

    .lang {
      color: $cOrange;
      min-width: 96px;
    }
  }
}

// PC端导航
.pc {
  display: block;
  display: flex;

  justify-content: space-between;

  .main-nav-list {
    flex: 1;
  }

  .main-func {
    display: flex;
    align-items: center;
    font-size: $fontSizeSmall-M2;

    // 电话
    &-tel {
      display: flex;
      align-items: center;
      font-size: $fontSize-M2;
      font-weight: normal;
      color: $cOrange2;

      img {
        margin-right: 2px;
        margin-top: 4px;
      }
    }

    // 语言切换
    &-lang {
      cursor: pointer;
      color: $cOrange2;
      margin-left: 24px;
    }

    // 登入
    &-login {
      // cursor: pointer;
      // @include border-tans;
      // @extend .fcc;
      // width: 69px;
      // height: 45px;
      // border-radius: 22.5px;
      margin-left: 16px;
    }

    // 报价
    &-quote {
      cursor: pointer;
      @include linear-bg-top;
      @extend .fcc;
      width: 94px;
      height: 45px;
      border-radius: 22.5px;
      margin-left: 16px;
      font-weight: bold;
      color: #ffffff;
    }
  }
}

// 移动端导航
.mobile {
  display: none;

  &-nav-list {
    position: absolute;
    right: 0;
    top: 24px;

    display: flex;
    align-items: center;

    img {
      width: 20px;
      margin-left: 20px;
    }
  }
}

@media (max-width: 1200px) {
  .v-header {
    @include content-percent(1%);
  }
}

@media (max-width: 1100px) {
  // .v-header {
  //   .logo-img {
  //   }
  // }

  // .pc {
  //   .auth {
  //     margin-right: 20px;
  //   }

  //   .nav-item.auth {
  //     .lang {
  //       min-width: auto;
  //     }
  //   }
  // }
}

@media (max-width: 1020px) {
  .v-header {
    @include content-percent();

    .main-nav {
    }

    // .logo-img {
    //   max-width: 213px;
    //   margin: 0;
    // }

    .pc {
      display: none;
    }

    .mobile {
      display: block;

      &-nav-list {
        top: 32px;
      }
    }
  }
}

@media (max-width: 768px) {
  .v-header {
    // 原1200px临界样式

    .pc {
      display: none;
    }

    height: $navHeight-M;

    .logo-img {
      width: 186px;
      margin: 0;
    }

    .mobile {
      display: block;

      &-nav-list {
        top: 24px;
      }
    }
  }
}