<template >
  <div id="center-map">
    <div class="center-map-content">
      <CenterMapContent />
    </div>
    <ControlPanel class="control-panel"/>
  </div>
</template>

<script>
import CenterMapContent from './CenterMapContent.vue'
import ControlPanel from './ControlPanel.vue'

export default {
  name: 'Main.CenterMap',
  components: {
    CenterMapContent,
    ControlPanel
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang='less'>
#center-map {
  background: url('@/assets/images/main-center-bg.png') no-repeat;
  background-size: 100% 100%;
  width: 1135px;
  height: 590px;
  position: relative;
  .center-map-content {
    width: 100%;
    height: 100%;
    padding: 20px 5px 5px 5px;
  }

  .control-panel {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
}
</style>
