superstar-dice/_src/components/nav/gameNav.scss

.sicbo-logo{
  width: px2rem(154);
}
.k3-logo{
  width: px2rem(59);
}
.box-logo{
  width: px2rem(95);
}
.baccarat-logo{
  width: px2rem(204);
}

.game-top-nav{
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  background: #273142;
  height: 58px;
  @media #{$phone} {
    display: none;
  }
  .logo-link{
    height: 58px;
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  .top-nav-container{
  	@media #{$desktop} {
      min-width: 1300px;
      max-width: 1600px;
      height: 58px;
    }
    margin: 0 auto;
    position: relative;
  }
  .left-side{
    position: absolute;
    left: 0;
    top: 0;
    height: 58px;
    display: flex;
    align-items: center;
    .logo{
      width: 36px;
    }
    .game-title{
      display: inline-block;
      margin-left: 10px;
      color: #ffffff;
      font-size: 26px;
    }
  }
  .game-link{
    display: inline-block;
    margin-left: 30px;
    background-color: #222c3c;
    border: 1px solid #313d4f;
    font-size: 0;
    border-radius: 4px;
    .link-item{
      display: inline-block;
      width: 100px;
      text-align: center;
      height: 36px;
      line-height: 36px;
      color: #7c8ca5;
      font-size: 12px;
      text-decoration: none;
      box-sizing: border-box;
      i{
        display: inline-block;
        vertical-align: middle;
        margin-right: 6px;
      }
      &.current{
        background-color: #265a86;
        border: 1px solid #2da1f8;
        color: #ffffff;
        .sicbo-icon{
          background: url('./img/pc-sicbo-logo-c.png') no-repeat;
          background-size: 100%;
        }
        .k3-icon{
          background: url('./img/pc-k3-logo-c.png') no-repeat;
          background-size: 100%;
        }
        .box-icon{
          background: url('./img/pc-box-logo-c.png') no-repeat;
          background-size: 100%;
        }
        .baccarat-icon{
          background: url('./img/pc-baccarat-logo-c.png') no-repeat;
          background-size: 100%;
        }
      }
    }
    .sicbo-icon{
      width: 21px;
      height: 21px;
      background: url('./img/pc-sicbo-logo.png') no-repeat;
      background-size: 100%;
    }
    .k3-icon{
      width: 21px;
      height: 21px;
      background: url('./img/pc-k3-logo.png') no-repeat;
      background-size: 100%;
    }
    .box-icon{
      width: 21px;
      height: 21px;
      background: url('./img/pc-box-logo.png') no-repeat;
      background-size: 100%;
    }
    .baccarat-icon{
      width: 26px;
      height: 20px;
      background: url('./img/pc-baccarat-logo.png') no-repeat;
      background-size: 100%;
    }
  }
  .right-side{
    position: absolute;
    right: 0;
    top: 0;
    height: 58px;
    display: flex;
    align-items: center;
    font-size: 16px;
    .router-link-active{
      background-image: -webkit-linear-gradient(right, #9586e7, #e87bbc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .doughnut-link{
    display: block;
    text-decoration: none;
    font-size: 0;
  }
  .nav-doughnut{
    position: relative;
    margin-right: 10px;
    width: 46px;
    height: 46px;
    display: inline-block;
    span{
      position: absolute;
      left: 0;
      right: 0;
      top: 12px;
      text-align: center;
      color: #ffffff;
      font-size: 12px;;
    }
    em{
      position: absolute;
      font-style: normal;
      left: 0;
      right: 0;
      top: 25px;
      text-align: center;
      color: #798297;
      font-size: 12px;
    }
  }
  .nav-icon{
    display: inline-block;
    width: 32px;
    height: 32px;
    cursor: pointer;
    margin-right: 10px;
  }
  .help-icon{
    background: url('./img/tel-icon.png') no-repeat;
    background-size: 100%;
    transition: all .3s ease-in-out;
  }
  .arrow-down{
    display: inline-block;
    vertical-align: middle;
    background: url('./img/arrow-down.png') no-repeat;
    background-size: 100%;
    width: 11px;
    height: 7px;
  }
  .game-router-link{
    display: inline-block;
    height: 58px;
    line-height: 58px;
    padding: 0 16px;
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
  }
  .lang{
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-left: 23px;
    color: #ffffff;
    height: 58px;
    cursor: pointer;
    position: relative;
    >span{
      display: inline-block;
      margin: 0 8px;
    }
    .flag{
      vertical-align: middle;
    }
    &:hover{
      .lang-change{
        display: block;
      }
    }
  }
  .lang-change{
    position: absolute;
    display: none;
    top: 50px;
    left: 0;
    background-color: rgba($color: #000000, $alpha: .7);
    background-size: 100%;
    border: 1px solid #313d4e;
    width: 91px;
    height: 108px;
    overflow: hidden;
    border-radius: 4px;
  }
  .lang-item{
    height: 36px;
    line-height: 36px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .2s ease-in;
    cursor: pointer;
    &:hover{
      background-color: rgba($color: #fff, $alpha: .1);
    }
    i{
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 8px;
      vertical-align: middle;
    }
    .zh-logo{
      background: url('../../assets/zh-logo.png') no-repeat;
    }
    .kr-logo{
      background: url('../../assets/kr-logo.png') no-repeat;
    }
    .en-logo{
      background: url('../../assets/en-logo.png') no-repeat;
    }
  }
  .login-btn{
    width: 86px;
    height: 36px;
    line-height: 36px;
    background-size: 100%;
    font-size: 14px;
    color: #ffffff;
    margin-left: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #2b9ff7;
    margin-right: 10px;
    border-radius: 4px;
    &:hover{
      background-color: #5ca4dc;
    }
    .login-circle{
      background: url('../../assets/login-circle-icon.png') no-repeat;
      display: inline-block;
      width: 14px;
      height: 15px;
      margin-right: 4px;
    }
  }
  .login-user-name{
    color: #fff;
    font-size: 16px;
    height: 58px;
    line-height: 58px;
    cursor: pointer;
    position: relative;
    &:hover{
      .loginout-btn{
        display: block;
      }
    }
    .arrow-down{
      margin-left: 6px;
    }
  }
  .loginout-btn{
    display: none;
    position: absolute;
    background-color: #2da1f8;
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    width: 70px;
    left: 50%;
    margin-left: -35px;
    top: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }
}