45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import CesiumViewer from './CesiumViewer.vue';
|
|
|
|
const $datatableShow = ref(false);
|
|
|
|
// @ts-expect-error https://digitalarsenal.io/Widgets/InfoBox/InfoBoxDescription.css
|
|
globalThis.CESIUM_BASE_URL = 'https://digitalarsenal.io/';
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative w-full h-full SAT">
|
|
<div id="container" class="absolute w-full h-full select-none">
|
|
<div class="viewer" :style="$datatableShow ? 'height:70%' : 'height: 100%'">
|
|
<CesiumViewer />
|
|
</div>
|
|
<div
|
|
:class="[$datatableShow ? 'visible' : 'hidden', 'datatable absolute w-full b-0 l-0']"
|
|
:style="{
|
|
height: $datatableShow ? '30%' : '0',
|
|
overflow: 'hidden',
|
|
transition: 'height 0.3s ease',
|
|
}"
|
|
>
|
|
<!-- <DataTable /> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.layout-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.layout-main .SAT {
|
|
flex: 1;
|
|
}
|
|
</style>
|
|
<!--
|
|
<style scoped>
|
|
#container {
|
|
background-color: pink;
|
|
}
|
|
</style> -->
|