site_8g/src/components/Header/style.module.scss

.headerWrap{
    height: $-header-height;
    //position: fixed;
    //z-index: 9;
    width: 100%;
    max-width: $-body-width;
    background: $-theme-color ;
    //transform: translate3d(200px, 0, 0);

  .headerMain{
    position: relative;
    padding: 3px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .headerLeft{
      position: absolute;
      display: block;
      line-height: 21px;
      color: #ccc;
      top: .15rem;
      left: .12rem;
      z-index: 100;
      .menu{
        font-size: .16rem;
        color: #606060;
      }
    }
    .headerTitle{
      margin: 0 .5rem;
      height: .4rem;
      display: flex;
      width: auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 0.4rem;
      text-align: center;
      font-size: 18px;
      font-weight: 400;
      color: #fff;
      align-items: center;
      img{
        //height: 0.1389rem;
      }
      .title{
        font-size: .24rem;
        font-weight: 900;
        line-height: 40px;
        font-style: italic;
        color: #333;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
      }
      .selectCountry{
        display: flex;
        align-items: center;
        margin-left: .12rem;
      }
      .menuDown{
        margin-left: .06rem;
        border: .04rem solid #4b3d0e;
        border-color: #4b3d0e transparent transparent transparent;
        border-width: .05rem;
        border-radius: .015rem;
        border-bottom: 0;
        width: 0;
        height: 0;
      }
    }

    .headerRight{
      position: absolute;
      display: block;
      font-size: 14px;
      line-height: 21px;
      color: #ccc;
      top: .10rem;
      right: .12rem;
      .right{
        color: #fff;
        font-size: .15rem;
        display: flex;
        align-items: center;
        a {
          color: #fff;
        }
        .rightActive{
          background: linear-gradient(180deg, #ff9323, #ff6a01);
          padding: .04rem .05rem;
          border-radius: .05rem;
          color: #fff;
          margin-left: .11rem;
          //margin-top: -.023rem;
        }
      }
    }
  }
}

.bar {
  position: relative;
  display: block;
  width: 0.2083rem;
  height: 3px;
  margin-bottom: 5px ;
  background-color: #606060;
  border-radius: 10px;
  transition: 0.3s;
}

.cross .bar:nth-of-type(1) {
  transform: translateY(7px) rotate(-45deg);
}

.cross .bar:nth-of-type(2) {
  opacity: 0;
}

.cross .bar:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}