<template>
  <div class="backhome" @click="router.push({ path: '/' })">
    <img class="logo" :src="require(`@/assets/images/resource/${isMobile ? 'backhome_mb' : 'btn_backhome'}.png`)" />
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { computed } from "vue";
import browser from '@/utils/browser'

const router = useRouter();
const route = useRoute();

const isMobile = computed(() => browser.isMobile())

</script>

<style lang="scss" scoped>
.backhome {
  position: fixed;
  right: 50px;
  top: 50px;
  cursor: pointer;
  z-index: 9;

  >img {
    width: 110px;
    height: auto;
  }
}

@media screen and (max-width: 1400px) {
  .backhome {
    right: 20px;
    top: 20px;

    >img {
      width: 100px;
      height: auto;
    }
  }
}

@media screen and (max-width: 1000px) {
  .backhome {
    right: 12px;
    top: 20px;

    >img {
      width: 32px;
      height: auto;
    }
  }

}
</style>
