<template>
  <div class="iframe-wrapper">
    <iframe :src="url" frameborder="0" allow="fullscreen"></iframe>
    <button class="return-home" @click.cature="onClickReturnHome">
      <img class="" src="@/assets/img/icon_home.png" alt="" draggable="false">
    </button>
  </div>
</template>

<script>
export default {
  computed: {
    url() {
      return decodeURIComponent(this.$route.query.url)
    }
  },
  methods: {
    onClickReturnHome(e) {
      e.stopPropagation()
      console.log('sadf;sflsdfl');
      this.$router.push('/')
    }
  }
}
</script>

<style lang="less" scoped>
.iframe-wrapper{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  >iframe{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  >button.return-home {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.8;
    padding: 10px;
    z-index: 2;
    >img{
      width: 100%;
      height: 100%;
    }
  }
}

@media screen and (orientation: portrait) {
  button.return-home{
    top: 60px !important;
  }
}
</style>