GCSGUI/src/components/page/HomePage.vue

<script lang="ts">
import {defineComponent} from 'vue'
import SceneViewer from "@/components/SceneViewer.vue";
import BottomBar from "@/components/BottomBar.vue";
import Toolbar from "@/components/toolbar.vue";
import CollisionDetection from "@/components/CollisionDetection.vue";
import {useMessage} from 'naive-ui'

export default defineComponent({
  name: "HomePage",
  components: {CollisionDetection, Toolbar, BottomBar, SceneViewer},
  data(){
    return {
      showDetection: false,
      graphHeight: 0,
      message: useMessage()
    }
  },
  computed: {
    setPageStyle: function () {
      return this.showDetection? 100 - this.graphHeight : 100
      }
  },
  methods: {
    // 显示地形碰撞检测面板，resize地图窗口
    resizeMap(height: number) {
      if(height<0)
        this.showDetection = false
      else{
        this.graphHeight = height
        this.showDetection = true
      }
    },
  }
})
</script>

<template>
  <div id="map" :style="{height: setPageStyle+'vh'}">
    <SceneViewer id="scene-viewer"></SceneViewer>
    <BottomBar></BottomBar>
    <toolbar ref="ToolBar" @resizeMap="resizeMap"></toolbar>
  </div>

</template>

<style>
@import '../../styles/cesium-compass.css';
#map {
  width: 100vw;
  position: relative;
}
#scene-viewer {
  width: 100vw;
  height: 100%;
  position: absolute;
  overflow: hidden;
}


</style>