<template>
  <div class="left-component">
    <p class="title">全区概览</p>
    <div>
      <div class="left">
        <m-card title="指挥体系"><Command /></m-card>
        <m-card title="运行体征"><OperationSign /></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="党建引领"><PartyLead /></m-card>
        <m-card title="物业健康度"><PropertyHealth /></m-card>
        <m-card title="示范小区"></m-card>
        <!-- <m-card title="网格管理"><GridManagement /></m-card>
        <m-card title="房屋物业"><House /></m-card>
        <m-card title="小区检查清单"><CommunityCheck /></m-card>
        <m-card title="工作提示"><WorkTips /></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 WorkTips from './work-tips'
// import GridManagement from './grid-management'
import OperationSign from './operation-sign'
import PartyLead from './party-lead'
import PropertyHealth from './property-health'
export default {
  name: 'LeftComponent',
  components: {
    Command,
    // LandPopulation,
    // Green,
    // Defense,
    // House,
    // CommunityCheck,
    // WorkTips,
    // GridManagement,
    OperationSign,
    PartyLead,
    PropertyHealth,
  },
  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
      &.left
        >div
          height 85%
          &:nth-child(1)
            height 15%
      &.right
        >div
          height 28%
          &:nth-child(1)
            height 44%
</style>
