<template>
  <div>
    <!-- 规则 -->
    <transition name="fade">
      <div class="modal-mask" v-show="modalShow">
        <div class="pub-border-wrapper">
          <div class="overflow-modal rule-modal">
            <i class="close-icon" @click="closeMdoal"></i>
              <div class="title">{{$t('modal.title')}}</div>
              <div class="game-modal">
                <div class="list-item">
                  <span class="order">1.</span>
                  <p class="item-text">{{$t('modal.text1')}}</p>
                </div>
                <div class="list-item">
                  <span class="order">2.</span>
                  <p class="item-text">{{$t('modal.text2')}}</p>
                </div>
                <div class="list-item">
                  <span class="order">3.</span>
                  <div class="text-wrap">
                    <p class="text">{{$t('modal.text3.title')}}</p>
                    <p class="text">{{$t('modal.text3.tip1')}}</p>
                    <p class="text">{{$t('modal.text3.tip2')}}</p>
                    <p class="text">{{$t('modal.text3.tip3')}}</p>
                    <p class="text">{{$t('modal.text3.tip4')}}</p>
                  </div>
                </div>
                <div class="list-item">
                  <span class="order">4.</span>
                  <div class="text-wrap">
                    <p class="text">{{$t('modal.text4.title')}}</p>
                    <p class="text">{{$t('modal.text4.tip1')}}</p>
                    <p class="text">{{$t('modal.text4.tip2')}}</p>
                  </div>
                </div>
                <div class="list-item">
                  <span class="order">5.</span>
                  <div class="text-wrap">
                    <p class="text">{{$t('modal.text5.title')}}</p>
                    <p class="text">{{$t('modal.text5.tip1')}}</p>
                    <p class="text">{{$t('modal.text5.tip2')}}</p>
                    <p class="text">{{$t('modal.text5.tip3')}}</p>
                    <p class="text">{{$t('modal.text5.tip4')}}</p>
                    <p class="text">{{$t('modal.text5.tip5')}}</p>
                    <p class="text">{{$t('modal.text5.tip6')}}</p>
                  </div>
                </div>
                <div class="list-item">
                  <span class="order">6.</span>
                  <div class="text-wrap">
                    <p class="text">{{$t('modal.text6.title')}}</p>
                    <p class="text">{{$t('modal.text6.tip1')}}</p>
                    <p class="text">{{$t('modal.text6.tip2')}}</p>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
    </transition>
    <!-- 公平 -->
    <transition name="fade">
      <div class="modal-mask" v-show="fairShow">
        <div class="pub-border-wrapper">
          <div class="overflow-modal">
            <div class="title">{{$t('fair.title')}}</div>
            <i class="close-icon" @click="closeFair"></i>
            <div class="game-modal">
              <div class="list-item">
                <span class="order">1.</span>
                <div class="text-wrap">
                  <p class="text">{{$t('fair.order1.text1')}}</p>
                  <p class="text">{{$t('fair.order1.text2')}}</p>
                  <p class="text">{{$t('fair.order1.text3')}}</p>
                  <p class="text" v-html="$t('fair.order1.text4')"></p>
                  <p class="text" v-html="$t('fair.order1.text5')"></p>
                </div>
              </div>
              <div class="list-item">
                <span class="order">2.</span>
                <div class="text-wrap">
                  <p class="text">{{$t('fair.order2.text1')}}</p>
                  <p class="text" v-html="$t('fair.order2.text2')"></p>
                </div>
              </div>
              <div class="list-item">
                <span class="order">3.</span>
                <p class="item-text">{{$t('fair.order3')}}</p>
              </div>
              <div class="list-item">
                <span class="order">4.</span>
                <p class="item-text">{{$t('fair.order4')}}</p>
              </div>
              <div class="list-item">
                <span class="order">5.</span>
                <p class="item-text">{{$t('fair.order5')}}</p>
              </div>
              <div class="list-item">
                <span class="order">6.</span>
                <p class="item-text">{{$t('fair.order6')}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <!-- 余额 -->
    <transition name="fade">
      <div class="modal-mask" v-show="countShow">
        <div class="pub-border-wrapper">
          <div class="overflow-modal">
            <div class="title">{{$t('money.title')}}</div>
            <i class="close-icon" @click="closeCount"></i>
            <div class="game-modal">
              <div class="list-item">
                <pre class="pre-item">{{$t('money.content')}}</pre>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <!-- gt币 -->
    <transition name="fade">
      <div class="modal-mask" v-show="gtShow">
        <div class="pub-border-wrapper">
          <div class="overflow-modal">
            <div class="title">{{$t('gt.title')}}</div>
            <i class="close-icon" @click="closeGt"></i>
            <div class="game-modal">
              <div class="list-item">
                <span class="order"></span>
                <p class="item-text">{{$t('gt.text1')}}</p>
              </div>
              <div class="list-item">
                <span class="order"></span>
                <p class="item-text">{{$t('gt.text2')}}</p>
              </div>
              <div class="list-item">
                <span class="order"></span>
                <p class="item-text">{{$t('gt.text3')}}</p>
              </div>
              <div class="list-item">
                <span class="order"></span>
                <p class="item-text">{{$t('gt.text4')}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "gameModal",
  props: {},
  data() {
    return {
        modalShow:false,
        fairShow:false,
        countShow:false,
        gtShow:false
    };
  },
  methods: {
    closeMdoal() {
     this.modalShow = false;
    },
    closeFair() {
      this.fairShow = false;
    },
    closeCount() {
      this.countShow = false;
    },
    closeGt() {
      this.gtShow = false;
    },
  },
  created() {}
};
</script>

<style lang="scss">
@import "./style.scss";
</style>
