<template >
  <PageBackground id="main-page">
    <Header />
    <div class="content-module">
      <div class="content-top">
        <LeftModule class="left" />
        <CenterMapModule class="center" />
        <RightModule class="right"/>
      </div>
      <div  class="content-bottom">
        <BottomModule />
      </div>
    </div>
  </PageBackground>
</template>

<script>
import PageBackground from './components/PageBackground.vue'
import Header from './components/Header'
import BottomModule from './modules/bottom/index.vue'
import LeftModule from './modules/left/index.vue'
import RightModule from './modules/right/index.vue'
import CenterMapModule from './modules/center-map/index.vue'

export default {
  name: 'MainView',
  components: {
    Header,
    PageBackground,
    LeftModule,
    RightModule,
    BottomModule,
    CenterMapModule
  },
  provide() {
    return {
      namespace: 'bei-data-v'
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang='less'>
#main-page {
  .content-module {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    .content-top {
      height: 618px;
      margin: 0px 10px 5.5px 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .left {
        width: 368px;
      }
      .center {
        width: 1135px;
        height: 590px;
      }
      .right {
        width: 381px;
      }
    }
  }
}
</style>
