<template>
  <div id="containerCmp">
    <dv-full-screen-container >
      <topHeader :title="titHeader" :index="index"></topHeader>
      <dv-border-box-1 style="height: 90%">
        <div class="main-container">
            <slot></slot>
          <div v-if="visitBoMenu" style="position: absolute;bottom: 80px;left: 0;right: 0;display: flex;justify-content: center;">
            <bottomMenu :active="active"></bottomMenu>
          </div>
        </div>
      </dv-border-box-1>
    </dv-full-screen-container>
  </div>
</template>
<script>
import topHeader from '../components/topHeader.vue'
import bottomMenu from '../components/bottomMenu.vue'
export default {
  name: 'DataView2',
  components: {
    topHeader,
    bottomMenu
  },
  props:{
    titHeader:{
      type:'String'
    },
    index:{
      type:'String',
      default:''
    },
    visitBoMenu:{
      type:Boolean,
      default:true
    },
    active:{
      type:'String'
    }
  },
}
</script>

<style lang="less">
#containerCmp {
  #dv-full-screen-container {
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 11, 44, 1);
  }
  .main-container {
    height: calc(~"100% - 40px");
    margin: .3rem;
    box-sizing: border-box;
    position: relative;
    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
    }
    .leftCmp {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      height: 100%;
      width: 25%;
      z-index: 9;
      box-sizing: border-box;
      background-color: rgba(0, 11, 44, .2);
      .border-box-content {
        flex-direction: column;
      }
    }
    .centerCmp{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
    .centerTop{
      position: absolute;
      top: 0;
      left: 25%;
      right: 25%;
      height: 20%;
      z-index: 9;
    }
    .centerBottom{
      position: absolute;
      bottom: 0;
      left: 25%;
      right: 25%;
      height: 20%;
      z-index: 9;
    }
    .rightCmp {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 25%;
      z-index: 9;
      background-color: rgba(0, 11, 44, .2);
    }
  }

}
</style>
