<template>
  <div class="public-service">
    <m-card mode="border2">
      <Police />
    </m-card>
    <m-card mode="border2">
      <div class="population"><Population /></div>
      <div class="house"><House /></div>
      <div class="company"><Company /></div>
    </m-card>
    <m-card mode="border2">
      <EmergencyStore />
    </m-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Police from './police.vue'
import Population from './population.vue'
import House from './house.vue'
import Company from './company.vue'
import EmergencyStore from './emergency-store.vue'
export default defineComponent({
  name: 'PublicSafety',
  components: { Police, Population, House, Company, EmergencyStore },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.public-service
  $full()
  display flex
  justify-content space-between
  >div
    height 100%
    width 33%
    .population
      flex 1
    .house
      flex 2
    .company
      flex 1.4
</style>
