<template>
  <div class="game-iframe">
    <div v-if="false" class="back" @click="goBack">返回</div>
    <iframe class="iframe" :src="gameUrl" frameborder="0"></iframe>
  </div>
</template>

<script>
import { computed, onMounted } from "vue"
import { useStore } from "vuex"
import { useRouter } from "vue-router"
export default {
  name: "GameIframe",
  setup() {
    const store = useStore()
    const router = useRouter()
    const gameUrl = computed(() => store.state.app.gameUrl)
    const goBack = () => {
      router.back()
    }
    onMounted(() => {
      store.commit("config/setValue", { name: "musicVolume", type: false })
    })
    return { gameUrl, goBack }
  }
}
</script>

<style lang="scss" scoped>
.game-iframe {
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  transform: rotateX(0deg);
  .back {
    position: absolute;
    z-index: 999;
    top: 0.34rem;
    left: 0.5rem;
    width: 1.2rem;
    height: 1.2rem;
    background: #212121;
    font-size: 0.4rem;
    text-align: center;
    line-height: 1.2rem;
    border-radius: 0.2rem;
    font-weight: bold;
    box-sizing: border-box;
    border: 1px solid #959494;
    color: #fff;
    &:active {
      opacity: 0.8;
    }
  }
  .iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}
</style>
