<template>
  <div class="homecon"
    :style="{ backgroundImage: `url(${require(`@/assets/images/resource/home/${isMobile ? 'mob_bg' : 'map'}.jpg`)})` }">
    <img class="start" @click="router.push({name:'scene',params:{id:'fd720_EVTdqRdFM'}})"
      :src="require('@/assets/images/resource/home/btn_start.png')" alt="">
  </div>
</template>

<script setup>
import { onMounted, watch, computed, ref, nextTick, provide } from "vue";
import browser from '@/utils/browser'
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();
const isMobile = computed(() => browser.isMobile())

onMounted(() => {
  nextTick(() => {

  })
});

</script>

<style lang="scss" scoped>
.homecon {
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #d5e5e3;
  background-size: cover;
  background-position: center;
  position: relative;

  .start {
    position: absolute;
    bottom: 20%;
    cursor: pointer;
    left: 50%;
    width: 32%;
    max-width: 700px;
    transform: translateX(-50%);
  }
}

@media only screen and (max-width: 1000px) {

  .homecon {
    .start {
      width: 100%;
    }
  }
}
</style>
