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

.game-moblie-nav{
  display: none;
  @media #{$phone} {
    display: block;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    height: px2rem(88);
    line-height: px2rem(88);
    background-color: #273142;
    .nav-icon{
      display: inline-block;
      vertical-align: middle;
      margin: 0 px2rem(10);
      width: px2rem(66);
      height: px2rem(88);
    }
    .moblie-nav-icon{
      background: url('./img/moblie-nav-icon.png') center center no-repeat;
      background-size: px2rem(31) px2rem(24);
    }
    .moblie-nav-close{
      background: url('./img/moblie-nav-close.png') center center no-repeat;
      background-size: px2rem(24) px2rem(24);
    }
    .game-select-list{
      width: px2rem(270);
      position: absolute;
      height: px2rem(88);
      top: 0;
      left: 50%;
      margin-left: -px2rem(135);
      .title{
        text-align: center;
      }
      .game-list{
        position: absolute;
        left: 0;
        right: 0;
        top: px2rem(80);
        background-color: #161d28;
        // &::after{
        //   content: '';
        //   position: absolute;
        //   @include triangle-up(6px,#161d28);
        //   left: 50%;
        //   margin-left: 3px;
        //   top: -6px;
        // }
        .select-list-item{
          display: block;
          text-align: center;
          height: px2rem(70);
          line-height: px2rem(70);
          border-bottom: 1px solid #262c35;
          &:last-child{
            border-bottom: none;
          }
        }
      }
    }
    .auction-icon-wrap{
      position: absolute;
      top: 50%;
      margin-top: -px2rem(26);
      right: px2rem(80);
    }
    .moblie-auction-icon{
      width: px2rem(53);
      height: px2rem(53);
    }
    .game-nav-newwork{
      position: absolute;
      right: 0;
      .wifi-icon{
        background-size: px2rem(53) px2rem(38) !important;
      }
      .newwork-list{
        right: 0;
        left: auto;
      }
    }
    .nav-list{
      position: absolute;
      top: px2rem(88);
      left: 0;
      right: 0;
      background-color: #273142;
    }
    .list-item{
      display: block;
      height: px2rem(78);
      line-height: px2rem(78);
      text-align: center;
      border-top: 1px solid #36455a;
      font-size: px2rem(28);
      color: #ffffff;
      text-decoration: none;
      .eos-get-icon{
        width: px2rem(48);
        display: inline-block;
        margin-right: px2rem(10);
      }
      &.current{
        background-color: #44546b;
      }
    }
    .tel-icon{
      width: px2rem(60);
      height: px2rem(60);
    }
  }
  .flag{
    width: px2rem(20);
    display: inline-block;
    margin-right: px2rem(6);
  }
  .mob-nav-arrow{
    display: inline-block;
    margin-left: px2rem(6);
    vertical-align: middle;
    background: url('./img/moblie-nav-arrow.png') no-repeat;
    background-size: 100%;
    width: px2rem(21);
    height: px2rem(12);
  }
  .arrow-down{
    display: inline-block;
    vertical-align: middle;
    background: url('./img/moblie-nav-arrow.png') no-repeat;
    background-size: 100%;
    width: 9px;
    height: 5px;
    margin-left: 6px;
  }
  .white-arrow-down{
    display: inline-block;
    vertical-align: middle;
    @include triangle-down(5px,#ffffff);
    margin-left: px2rem(6);
  }
  .login-btn{
    position: absolute;
    right: px2rem(15);
    top: 50%;
    margin-top: -px2rem(28);
    line-height: px2rem(56);
    height: px2rem(56);
    font-size: px2rem(28);
    padding: 0 px2rem(26);
    color: #ffffff;
    background-color: #279cf3;
    border-radius: 4px;
  }
  .login-user-name{
    position: absolute;
    right: px2rem(15);
    top: 0;
    line-height: px2rem(88);
    font-size: px2rem(28);
    color: #ffffff;
    &:hover, &:active{
      .loginout-btn{
        display: block;
      }
    }
  }
  .loginout-btn{
    position: absolute;
    top: px2rem(80);
    right: px2rem(0);
    width: px2rem(180);
    height: px2rem(90);
    background: rgba(#000000, 0.8);
    border: 1px solid rgba(#ffffff, 0.2);
    em{
      display: block;
      margin: px2rem(18) px2rem(15) 0;
      line-height: px2rem(50);
      text-align: center;
      border-radius: 5px;
      border: 1px solid rgba(#ffffff, 0.2);
      background-color: #249af2;
    }
  }
}