<template>
  <div class="mapcon">
    <div class="mapimg">
      <bird-view v-if="!isMobile" />
      <birdview_mb v-else></birdview_mb>
    </div>
  </div>
</template>

<script setup>
import { onMounted, watch, computed, ref, nextTick,provide  } from "vue";
import birdView from "./bird_view.vue";
import birdview_mb from "./birdview_mb/index.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>
.mapcon {
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #d5e5e3;

  .mapimg {
    width: 100%;
    height: 100%;
  }

  .music{
    position: absolute;
    z-index: 999;
    bottom: 20px;
    right: 40px;
    width: 80px;
    cursor: pointer;
  }
}
@media only screen and (max-width: 1000px) {

  .mapcon {
    .music{
      position: absolute;
      z-index: 999;
      bottom: 20px;
      right: 40px;
      width: 50px;
      cursor: pointer;
  }
}
}
</style>
