superstar-dice/_src/components/game/style.scss

.game-main-wrap{
  position: relative;
  width: px2rem(1300);
  margin: 0 auto;
}
.game-desktop{
  height: px2rem(460);
  background: url('./img/desk.png') no-repeat;
  background-size: 100%;
  position: relative;
  .game-cell-wrap{
    position: absolute;
    left: 0;
    right: 0;
    width: px2rem(1300);
    height: px2rem(460);
  }
  .game-desk-bg{
    position: absolute;
    left: 0;
    right: 0;
    width: px2rem(1300);
    height: px2rem(460);
    z-index: 5;
    pointer-events: none;
    &.en-lang-bg{
      background: url('./img/desk_word_e.png') no-repeat;
      background-size: 100%;
    }
    &.zh-lang-bg{
      background: url('./img/desk_word_c.png') no-repeat;
      background-size: 100%;
    }
    &.kr-lang-bg{
      background: url('./img/desk_word_k.png') no-repeat;
      background-size: 100%;
    }
  }
}

.game-cell-item {
  cursor: pointer;
  position: absolute;
  height: px2rem(160);
  &.checked {
    &::before{
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('./img/choose_c.png') center center no-repeat;
      background-size: cover;
    }
  }
  &.opened {
    &::before{
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('./img/choose_win.png');
      background-size: cover;
    }
  }
}
.game-cell-0{
  width: px2rem(140);
  right: px2rem(20);
  top: px2rem(37);
  border-top-right-radius: 4px;
  overflow: hidden;
}
.game-cell-1{
  width: px2rem(140);
  right: px2rem(162);
  top: px2rem(37);
}
.game-cell-2{
  width: px2rem(140);
  right: px2rem(20);
  top: px2rem(199);
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
.game-cell-3{
  width: px2rem(140);
  right: px2rem(162);
  top: px2rem(199);
}

// 总和 114
$space: 114;

@for $i from 4 through 11 {
  .game-cell-#{$i} {
    height: px2rem(155);
    width: px2rem(112);
    left: px2rem(78 + $space * ($i - 4));
    top: px2rem(42);
  }
}

@for $i from 12 through 19 {
  .game-cell-#{$i} {
    height: px2rem(155);
    width: px2rem(112);
    left: px2rem(78 + $space * ($i - 12));
    top: px2rem(199);
  }
}

// 下注
.game-bet{
  font-size: 0;
  margin: 0 auto;
  position: absolute;
  left: px2rem(10);
  bottom: px2rem(10);
  width: px2rem(1280);
  .bet-tips{
    display: inline-block;
    margin-left: px2rem(4);
    color: #21083b;
    font-size: px2rem(16);
  }
  .bet-center-box{
    display: inline-block;
    vertical-align: top;
    position: relative;
		&::after{
			content: '';
			position: absolute;
			top: px2rem(38);
			left: 0;
			background: url('./img/line.png');
			background-size: 100%;
			width: px2rem(258);
			height: px2rem(5);
		}
  }
  .bet-input-wrap{
		display: inline-block;
		text-align: center;
  }
  .bet-input{
      margin-top: px2rem(10);
      width: px2rem(178);
      height: px2rem(30);
      line-height: px2rem(30);
      font-size: px2rem(20);
      color: #bdb9ce;
      border-radius: 4px;
      outline: none;
      border: none;
			padding-left: px2rem(12);
			background-color: #514391;
      &::-webkit-input-placeholder {
          color: #bdb9ce;
      }
  }
  .counter-target-wrap{
    position: absolute;
    top: 14px;
    width: px2rem(540);
    left: px2rem(370);
    .counter-target{
        width: px2rem(50);
        height: px2rem(50);
        line-height: px2rem(50);
        visibility: hidden;
        position: absolute;
        top: 0;
        z-index: 30;
        &.counter{
          margin-left: 0;
        }
        &.counter-red{
          left: px2rem(28);
        }
        &.counter-blue{
          left: px2rem(118);
        }
        &.counter-pur{
          left: px2rem(208);
        }
        &.counter-green{
          left: px2rem(298);
        }
        &.counter-yellow{
          left: px2rem(388);
        }
        &.counter-orange{
          left: px2rem(478);
        }
      }
    }
  .counter-item-wrap{
    position: absolute;
    z-index: 10;
    top: px2rem(10);
    width: px2rem(550);
    left: px2rem(370);
  }
  .bet-btn-wrap{
    position: absolute;
    right: 0;
    top: px2rem(22);
    .pub-btn{
      display: inline-block;
      vertical-align: top;
      cursor: pointer;
      width: px2rem(112);
      height: px2rem(51);
      text-align: center;
      padding-top: px2rem(14);
      font-size: px2rem(20);
      box-sizing: border-box;
      font-weight: bold;
      margin-left: px2rem(10);
      &.loading{
        background: url('./img/but_clear_x.png') center center no-repeat;
        background-size: 100%;
        color: #646363;
      }
      &.en-btn{
        padding-top: px2rem(4);
        font-size: px2rem(18);
      }
    }
  }
  .continute-btn{
    background: url('./img/but_ten_u.png') no-repeat;
    background-size: 100%;
    color: #8523b6;
    &:hover{
      background: url('./img/but_ten_d.png') no-repeat;
      background-size: 100%;
    }
  }
  .clear-btn{
    background: url('./img/but_clear_u.png') no-repeat;
    background-size: 100%;
    color: #115983;
    &:hover{
      background: url('./img/but_clear_d.png') no-repeat;
      background-size: 100%;
    }
    &.disabled{
      background: url('./img/but_clear_x.png') no-repeat;
      color: #777a7c;
      background-size: 100%;
      pointer-events: none;
    }
  }
  .confirm-btn{
    color: #d64100;
    background: url('./img/but_sure_u.png') no-repeat;
    background-size: 100%;
    &:hover{
      background: url('./img/but_sure_d.png') no-repeat;
      background-size: 100%;
    }
  }
  .ten-beting-btn{
    background: url('./img/but_ten_x.png') no-repeat;
    background-size: 100%;
    color: #ffffff;
    span{
      display: inline-block;
      vertical-align: middle;
      margin-left: px2rem(4);
      font-size: px2rem(14);
    }
  }
  .counter-change{
    display: inline-block;
    width: px2rem(90);
    // padding-right: 28px;
    margin-top: px2rem(12);
    margin-left: px2rem(10);
    .balance-item{
      width: px2rem(77);
      height: px2rem(30);
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #5550a1;
      font-size: px2rem(16);
      color: #fff;
      margin-bottom: px2rem(8);
      border-radius: px2rem(8);
      cursor: pointer;
    }
  }
  .counter-change-bg{
    background-size: 100%;
    width: px2rem(982);
    height: px2rem(92);
  }
  .animate-counter-wrap{
    position: absolute;
    left: px2rem(40);
    top: px2rem(40);
  }
  .animate-counter{
    position: absolute;
    z-index: 30;
    top: 0;
    left: px2rem(40);
    width: px2rem(50);
    height: px2rem(50);
    line-height: px2rem(50);
    text-align: center;
    font-size: px2rem(16);
    font-weight: bold;
    visibility: hidden;
    font-style: normal;
  }
}
.gt-tips{
	margin: px2rem(4) auto;
  font-size: px2rem(16);
  color: #21083b;
	display: flex;
	align-items: center;
	position: relative;
	padding-left: px2rem(4);
}
.gt-help-icon{
  display: inline-block;
  vertical-align: middle;
  background: url('../../assets/icon_question2.png') no-repeat;
  margin-left: px2rem(10);
  background-size: 100%;
  width: px2rem(30);
  height: px2rem(30);
  cursor: pointer;
}
.gt-times-icon{
  display: inline-block;
  vertical-align: middle;
  background: url('./img/bei.png') no-repeat;
  margin-left: px2rem(6);
  background-size: 100%;
  font-size: px2rem(16);
  width: px2rem(32);
  height: px2rem(32);
  line-height: px2rem(32);
  text-align: center;
  font-style: normal;
  color: #ffffff;
}

.counter{
  width: px2rem(70);
  height: px2rem(70);
  line-height: px2rem(70);
  display: inline-block;
  cursor: pointer;
  text-align: center;
  position: relative;
  top: 0;
  transition: top .3s ease-in-out;
  font-size: px2rem(18);
  font-weight: bold;
  margin-left: px2rem(20);
  user-select: none;
  &:first-child{
    margin-left: 0;
  }
  &.current{
    &:after{
      content: '';
      position: absolute;
      top: -px2rem(12);
      left: -px2rem(12);
      right: -px2rem(12);
      bottom: -px2rem(12);
      background: url('./img/counter-border.png') no-repeat;
      background-size: 100%;
    }
    top: -px2rem(20);
  }
}
.counter-red{
  background: url('./img/counter-red.png') no-repeat;
  background-size: 100%;
  color: #cd0400;
}
.counter-blue{
  background: url('./img/counter-blue.png') no-repeat;
  background-size: 100%;
  color: #126ae4;
}
.counter-pur{
  background: url('./img/counter-pur.png') no-repeat;
  background-size: 100%;
  color: #9b40d8;
}
.counter-green{
  background: url('./img/counter-green.png') no-repeat;
  background-size: 100%;
  color: #23b14d;
}
.counter-yellow{
  background: url('./img/counter-yellow.png') no-repeat;
  background-size: 100%;
  color: #c4b600;
}
.counter-orange{
  background: url('./img/counter-orange.png') no-repeat;
  background-size: 100%;
  color: #f28900;
}

.cell-counter{
  position: absolute;
  z-index: 20;
  width: px2rem(50);
  height: px2rem(50);
  left: 50%;
  top: 50%;
  margin-left: -px2rem(25);
  margin-top: -px2rem(25);
  line-height: px2rem(50);
  font-size: px2rem(16);
  text-align: center;
  user-select: none;
}

.bet-sum{
	float: right;
	margin-top: px2rem(10);
	width: px2rem(320);
	font-size: px2rem(18);
	color: #ffffff;
	line-height: px2rem(46);
	height: px2rem(46);
	border-radius: px2rem(23);
	background-color: rgba($color: #362353, $alpha: .8);
  text-align: center;
  i{
    margin-left: px2rem(10);
  }
}
.bet-limit{
  display: inline-block;
  color: #21083b;
  font-size: px2rem(16);
  width: px2rem(94);
  height: px2rem(69);
  text-align: center;
  padding-top: px2rem(14);
  margin-left: px2rem(16);
  margin-top: px2rem(12);
  box-sizing: border-box;
  position: relative;
  &::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: url('../game/img/line2.png') no-repeat;
    background-size: 100%;
    width: px2rem(2);
    height: px2rem(69);
  }
  p{
    margin-bottom: px2rem(6);
  }
}
.game-result-show{
	position: absolute;
	width: px2rem(600);
	height: px2rem(120);
	right: 0;
	top: -px2rem(124);
	z-index: 30;
	background-color: rgba($color: #fff, $alpha: .5);
	border-radius: 10px;
	text-align: center;
	font-size: px2rem(30);
	color: #fff;
	.game-reuslt-content{
		position: absolute;
		top: px2rem(8);
		left: px2rem(8);
		right: px2rem(8);
		bottom: px2rem(8);
		line-height: px2rem(104);
		background-color: #583e93;
		border-radius: 10px;
	}
	.bet-amount{
		color: #42ed75;
	}
	.win-amount{
		color: #ffe954;
	}
	.closeResultModal{
		position: absolute;
		font-size: px2rem(20);
		bottom: px2rem(6);
		right: px2rem(6);
		line-height: 1.4;
		cursor: pointer;
	}
}

@media #{$phone} {
  .game-desktop{
    background: url('./img/h5/desktop.png') no-repeat;
    background-size: 100%;
    height: px2rem(837);
  }
  .game-main-wrap{
    width: px2rem(706);
    .game-bet{
      width: 100%;
      left: 0;
      padding-top: px2rem(98);
      bottom: px2rem(62);
      .bet-btn-wrap{
        top: auto;
        bottom: 0;
        right: px2rem(14);
      }
      .bet-input{
        width: px2rem(220);
        height: px2rem(58);
        line-height: px2rem(58);
        margin-left: px2rem(16);
        font-size: px2rem(24);
      }
      .bet-tips{
        display: none;
      }
      .animate-counter-wrap {
        bottom: px2rem(50);
        top: auto;
      }
      .bet-btn-wrap{
        .continute-btn{
          background: url('./img/h5/3@2x.png') no-repeat;
          background-size: 100%;
          &:hover{
            background: url('./img/h5/3_b@2x.png') no-repeat;
            background-size: 100%;
          }
        }
        .ten-beting-btn{
          background: url('./img/h5/3_a@2x.png') no-repeat;
          background-size: 100%;
          font-size: px2rem(12);
          span{
            vertical-align: top;
          }
        }
        .clear-btn{
          background: url('./img/h5/1@2x.png') no-repeat;
          background-size: 100%;
          &:hover{
            background: url('./img/h5/1_a@2x.png') no-repeat;
            background-size: 100%;
          }
          &.disabled{
            background: url('./img/h5/4@2x.png') no-repeat;
            color: #777a7c;
            background-size: 100%;
            pointer-events: none;
          }
        }
        .confirm-btn{
          background: url('./img/h5/2@2x.png') no-repeat;
          background-size: 100%;
          &:hover{
            background: url('./img/h5/2_a@2x.png') no-repeat;
            background-size: 100%;
          }
        }
        .pub-btn{
          width: px2rem(132);
          height: px2rem(64);
          padding-top: 0;
          line-height: px2rem(64);
          &.loading{
            background: url('./img/h5/4@2x.png') center center no-repeat;
            background-size: 100%;
            color: #646363;
          }
          &.en-btn{
            padding-top: px2rem(10);
            line-height: 1;
          }
        }
      }
    }
    .bet-center-box{
      &::after{
        display: none;
      }
      .gt-tips{
        display: none;
      }
    }
    .bet-limit{
      display: none;
    }
    .game-cell-wrap{
      width: 100%;
    }
    .game-desk-bg{
      width: 100%;
    }
    .counter-item-wrap{
      left: 0;
      width: px2rem(700);
    }
    .counter-target-wrap{
      left: 0;
      width: px2rem(700);
      .counter-target{
        width: px2rem(50);
        height: px2rem(50);
        line-height: px2rem(50);
        visibility: hidden;
        position: absolute;
        top: 0;
        z-index: 30;
        &.counter{
          margin-left: 0;
        }
        &.counter-red{
          left: px2rem(28);
        }
        &.counter-blue{
          left: px2rem(142);
        }
        &.counter-pur{
          left: px2rem(258);
        }
        &.counter-green{
          left: px2rem(378);
        }
        &.counter-yellow{
          left: px2rem(488);
        }
        &.counter-orange{
          left: px2rem(608);
        }
      }
    }
    .counter{
      width: px2rem(76);
      height: px2rem(76);
      line-height: px2rem(76);
      margin: 0 px2rem(20);
      font-size: px2rem(28);
    }
    .game-cell-wrap{
      height: px2rem(597);
    }
    .game-desk-bg{
      height: px2rem(597);
      &.zh-lang-bg{
        background: url('./img/h5/desk_c.png') no-repeat;
        background-size: 100%;
      }
      &.en-lang-bg{
        background: url('./img/h5/desk_e.png') no-repeat;
        background-size: 100%;
      }
      &.kr-lang-bg{
        background: url('./img/h5/desk_k.png') no-repeat;
        background-size: 100%;
      }
    }
  }
  .bet-sum{
    display: none;
  }
  // 总和 114
  $mspace: 162;

  @for $i from 0 through 3 {
    .game-cell-#{$i} {
      height: px2rem(170);
      width: px2rem(160);
      left: auto;
      top: auto;
      right: px2rem(30 + $mspace * $i);
      bottom: px2rem(16);
    }
  }

  $kspace: 108;
  @for $i from 4 through 9 {
    .game-cell-#{$i} {
      height: px2rem(106);
      width: px2rem(106);
      left: px2rem(30 + $kspace * ($i - 4));
      top: px2rem(78);
    }
  }
  @for $i from 10 through 11 {
    .game-cell-#{$i} {
      height: px2rem(106);
      width: px2rem(106);
      left: px2rem(30 + $kspace * ($i - 10));
      top: px2rem(186);
    }
  }
  @for $i from 12 through 13 {
    .game-cell-#{$i} {
      height: px2rem(106);
      width: px2rem(106);
      right: px2rem(30 + $kspace * (13 - $i));
      top: px2rem(186);
      left: auto;
    }
  }
  @for $i from 14 through 19 {
    .game-cell-#{$i} {
      height: px2rem(106);
      width: px2rem(106);
      left: px2rem(30 + $kspace * ($i - 14));
      top: px2rem(296);
    }
  }
}

.m-bet-sum{
  display: none;
}

.moblie-rule-cell{
  display: none;
  position: absolute;
  width: px2rem(214);
  height: px2rem(104);
  left: px2rem(246);
  top: px2rem(186);
  .game-question-icon{
    position: absolute;
    right: px2rem(20);
    top: px2rem(30);
  }
}

@media #{$phone}{
  .moblie-rule-cell{
    display: block;
  }
  .m-bet-sum{
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: px2rem(10);
    height: px2rem(40);
    line-height: px2rem(40);
    padding: 0 px2rem(16);
    color: #21083b;
    font-size: px2rem(24);
    .gt-times-icon{
      width: px2rem(36);
      height: px2rem(36);
      line-height: px2rem(36);
      vertical-align: top;
    }
    .gt-help-icon{
      width: px2rem(36);
      height: px2rem(36);
      vertical-align: top;
    }
    .right{
      float: right;
      i{
        margin: 0 px2rem(8);
      }
      .game-eos-icon{
        transform: scale(1.3);
      }
      .game-gt-icon{
        transform: scale(1.3);
      }
    }
  }
}