superstar-dice/_src/components/game/gameHeader.vue

<template>
  <div class="game-header">
    <img class="logo" src="./img/logo.png" alt="">
    <i class="game-question-icon" @click="showRules"></i>
    <div class="user-balance">
      <div class="m-limit-tips">
        {{$t('k3.limit')}} 100 EOS
      </div>
      <div class="balance-item">
        <i class="game-eos-icon"></i>
        {{balance}}
      </div>
      <div class="balance-item">
        <i class="game-gt-icon"></i>
        {{gt}}
        <i class="game-help-icon" @click="showGtRules"></i>
      </div>
    </div>
  </div>
</template>

<script>
import Rules from '@/components/popup/rules'
import NP from 'number-precision'

export default {
  name: 'gameHeader',
  data () {
    return {
    }
  },
  computed: {
    balance () {
      return this.$store.state.balance ? NP.divide(this.$store.state.balance, 10000) : 0
    },
    gt () {
      return this.$store.state.gt
    }
  },
  methods: {
    showRules () {
      Rules.showRules()
    },
    showGtRules () {
      Rules.showGTRules()
    }
  },
  mounted () {
  }
}
</script>
<style lang="scss">
.game-header{
  width: px2rem(1300);
  margin: 0 auto;
  text-align: center;
  position: relative;
  img{
    width: px2rem(78);
    vertical-align: middle;
  }
  .game-question-icon{
    margin-left: px2rem(6);
  }
}
.user-balance{
  position: absolute;
  right: 0;
  bottom: px2rem(4);
  background-color: #514391;
  color: #ffffff;
  font-size: px2rem(16);
  padding: 0 px2rem(20);
  border-radius: px2rem(20);
  .balance-item{
    display: inline-block;
    height: px2rem(40);
    line-height: px2rem(40);
    min-width: px2rem(120);
    text-align: left;
    &:first-child{
      margin-right: px2rem(14);
    }
  }
}
.m-limit-tips{
  display: none;
}
@media #{$phone} {
  .game-header{
    width: 100%;
    position: absolute;
    left: px2rem(40);
    top: px2rem(30);
    width: px2rem(660);
    z-index: 1;
    .m-limit-tips{
      display: block;
      float: left;
      font-size: px2rem(20);
      margin-top: px2rem(6);
      margin-left: px2rem(10);
    }
    .user-balance{
      position: static;
      background-color: transparent;
      font-size: px2rem(24);
      text-align: right;
      padding: 0;
      .balance-item{
        margin-right: px2rem(10);
      }
      .game-help-icon{
        display: none;
      }
      .game-gt-icon{
        transform: scale(1.3);
      }
      .game-eos-icon{
        transform: scale(1.3);
      }
    }
    .logo{
      display: none;
    }
    .game-question-icon{
      display: none;
    }
  }
}
</style>