<template>
  <div class="content-warp">
    <div class="top">
      <div class="top-1">
        <Top1 />
      </div>
      <div class="top-2" style="padding: 0;">
        <Top2 />
      </div>
      <div class="top-3">
        <Top3 />
      </div>
    </div>

    <div class="center">
      <div class="center-1">
        <Center1 />
      </div>
      <div class="center-2">
        <Center2 />
      </div>
    </div>

    <div class="bottom">
      <div class="bottom-1">
        <Bottom1 />
        <!-- <div class="bottom-1-1">
          <Bottom1 />
        </div>
        <div class="bottom-1-2">
          <Bottom2 />
        </div> -->
      </div>
      <div class="bottom-2">
        <Bottom2 />
      </div>
      <div class="bottom-3">
        <Bottom3 />
      </div>
    </div>
  </div>
</template>

<script>
import Top1 from './MunicipalChart/Top1'
import Top2 from './MunicipalChart/Top2'
import Top3 from './MunicipalChart/Top3'
import Center1 from './MunicipalChart/Center1'
import Center2 from './MunicipalChart/Center2'
import Bottom1 from './MunicipalChart/Bottom1'
import Bottom2 from './MunicipalChart/Bottom2'
import Bottom3 from './MunicipalChart/Bottom3'

export default {
  name: 'provincialChart',
  components: {
    Top1,
    Top2,
    Top3,
    Center1,
    Center2,
    Bottom1,
    Bottom2,
    Bottom3,
  },
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
.content-warp {
  width: 100%;
  height: 100%;
  background: #e1ebf7;
  padding: 24px;
}
.top {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .top-1,
  .top-2,
  .top-3 {
    padding: 24px;
    background: rgba(255, 255, 255, 0.91);
    border-radius: 5px;
  }
  .top-1,
  .top-3 {
    width: 480px;
    height: 518px;
  }
  .top-2 {
    flex: 1;
    margin: 0 15px;
    height: 518px;
  }
}

.center {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .center-1,
  .center-2 {
    width: 50%;
    height: 390px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.91);
    border-radius: 5px;
  }

  .center-1 {
    margin-right: 7.5px;
  }
  .center-2 {
    margin-left: 7.5px;
  }
}

.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .bottom-1 {
    width: 38%;
    height: 350px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.91);
    border-radius: 5px;
  }
  .bottom-2 {
    width: 24%;
    height: 350px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.91);
    border-radius: 5px;
  }
  .bottom-3 {
    width: 38%;
    height: 350px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.91);
    border-radius: 5px;
  }

  .bottom-1 {
    margin-right: 7.5px;
  }
  .bottom-2 {
    margin-left: 7.5px;
  }
  .bottom-3 {
    margin-left: 7.5px;
  }
}
</style>
