<template>
  <div class="left-component">
    <div class="left">
      <m-card title="街道基数"><StreetBasic /></m-card>
      <m-card title="城市环境"><CityEnvironment /></m-card>
      <m-card title="土地人口"><LandPopulation /></m-card>
    </div>
    <div class="right">
      <m-card title="民防指标"><Defense /></m-card>
      <m-card title="物业评分"><Property /></m-card>
    </div>
  </div>
</template>

<script>
import LandPopulation from './land-population'
import Defense from './defense'
import CityEnvironment from './city-environment'
import Property from './property-score'
import StreetBasic from './street-basic'
export default {
  name: 'LeftComponent',
  components: {
    LandPopulation,
    Defense,
    CityEnvironment,
    Property,
    StreetBasic,
  },
  data() {
    return {}
  },
}
</script>

<style lang="stylus" scoped>
.left-component
  display flex
  z-index 99
  width 100%
  height calc(100vh - 0.5rem)
  position relative
  >div
    // width 50%
    width calc(33.3vw / 2)
    height 100%
    &.left
      >div
        &:nth-child(1)
          height 45%
        &:nth-child(2)
          height 25%
        &:nth-child(3)
          height 30%
    &.right
      >div
        &:nth-child(1)
          height 25%
        &:nth-child(2)
          height 75%
</style>
