<template>
  <main class="entry-page">
    <section class="entry-section">
      <Viewer ref="viewerRef" />
    </section>
  </main>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Viewer from '@/components/Viewer.vue'

const viewerRef = ref<unknown>(null)
</script>
<style scoped lang="scss">
.entry-page {
  display: flex;
}
.entry-section {
  width: 100%;
  height: calc(100vh - #{toRem(13.2)});
}
.focus-pic,
.logged .entry-section {
  height: calc(100vh - #{toRem(8)});
}
.gvs-focus-map .entry-report-button {
  display: none;
}
@media (max-width: toRem(76.8)) {
  .entry-page {
    padding-top: toRem(11.5);
    overflow: hidden;
  }
  .entry-section {
    height: calc(100dvh - #{toRem(18)});
  }
}
</style>
