<template>
  <div class="left-component">
    <p class="title">街镇概况</p>
    <div>
      <div class="left">
        <m-card title="指挥体系"><Command /></m-card>
        <m-card title="土地人口"><LandPopulation /></m-card>
        <m-card title="绿化市容"><Green /></m-card>
        <m-card title="民防指标"><Defense /></m-card>
      </div>
      <div class="right">
        <m-card title="网格管理"><GridManagement /></m-card>
        <m-card title="房屋物业"><House /></m-card>
        <m-card title="小区检查清单"><CommunityCheck /></m-card>
      </div>
    </div>
  </div>
</template>

<script>
import Command from './command'
import LandPopulation from './land-population'
import Green from './green'
import Defense from './defense'
import House from './house'
import CommunityCheck from './community-check'
import GridManagement from './grid-management'
export default {
  name: 'LeftComponent',
  components: {
    Command,
    LandPopulation,
    Green,
    Defense,
    House,
    CommunityCheck,
    GridManagement,
  },
  data() {
    return {}
  },
}
</script>

<style lang="stylus" scoped>
.left-component
  z-index 99
  background-image url('../../assets/images/component-bg.png')
  background-repeat no-repeat
  background-size 100% 100%
  width 100%
  height calc(100vh - 0.5rem)
  position relative
  padding .15rem .1rem .1rem
  .title
    position absolute
    text-align center
    left 0
    right 0
    margin 0 auto
    font-size .14rem
    top -0.1rem
    text-shadow 0 0 .05rem #3391FF
    font-weight bold
  >div
    display flex
    width 100%
    height 100%
    >div
      // flex 1
      width 50%
      height 100%
      &.left
        >div
          &:nth-child(1)
            height 15%
          &:nth-child(2)
          &:nth-child(3)
            height 30%
          &:nth-child(4)
            height 25%
      &.right
        >div
          &:nth-child(1)
            height 30%
          &:nth-child(2)
            height 40%
          &:nth-child(3)
            height 30%
</style>
