<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>
      </div>
      <div class="right">
        <m-card title="党建引领"><PartyLead /></m-card>
        <m-card title="物业健康度"><PropertyHealth /></m-card>
        <m-card title="示范小区"><ExampleCommunity /></m-card>
      </div>
    </div>
  </div>
</template>

<script>
import Command from './command'
import OperationSign from './operation-sign'
import PartyLead from './party-lead'
import PropertyHealth from './property-health'
import ExampleCommunity from './example-community'
export default {
  name: 'LeftComponent',
  components: {
    Command,
    OperationSign,
    PartyLead,
    PropertyHealth,
    ExampleCommunity,
  },
}
</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>
