<template>
  <div class="topo-editer">
    <div class="top-bar">
      <topToolBar></topToolBar>
    </div>
    <div class="contents">
      <div class="left-bar">
        <leftToolBar></leftToolBar>
      </div>
      <div class="base-topo-editer">
        <baseTopoEditer></baseTopoEditer>
      </div>
      <div class="right-bar">
        <rightPropertyBar></rightPropertyBar>
      </div>
    </div>
  </div>
</template>
<script>
import leftToolBar from "./leftToolBar";
import rightPropertyBar from "./rightPropertyBar";
import baseTopoEditer from "./baseTopoEditer";
import topToolBar from "./topToolBar";
export default {
  components: { leftToolBar, rightPropertyBar, topToolBar, baseTopoEditer },
  data() {
    return {
      view: null,
      scene: null
    };
  },
};
</script>
<style lang="less">
.topo-editer {
  width: 100%;
  height: 100%;
  .top-bar {
    width: 100%;
  }
  .contents {
    width: 100%;
    height: calc(~"100% - 48px");
    display: flex;
    justify-content: flex-start;
    .right-bar {
      width: 240px;
      height: 100%;
    }
    .base-topo-editer {
      flex: 1;
      height: 100%;
    }
  }
}
</style>