<template>
  <div class="public-service">
    <m-card mode="border">
      <Police />
    </m-card>
    <m-card mode="border">
      <div class="population"><Population /></div>
      <div class="house"><House /></div>
      <div class="company"><Company /></div>
    </m-card>
    <m-card id="flex-start" mode="border">
      <m-card title="应急物资储备">
        <Brief
          :list="[
            { name: '防汛防台', value: 65 },
            { name: '防寒抗冻', value: 35 },
            { name: '疫情控制', value: 43 },
            { name: '应急抢险', value: 43 },
          ]"
        />
      </m-card>
      <m-card title="“两牢”人员">
        <Summary
          :list="[
            { name: '总人员', value: 120 },
            { name: '劳改人员', value: 20 },
            { name: '劳教人员', value: 100 },
          ]"
          two-child
        />
      </m-card>
      <m-card title="房屋外立面"></m-card>
    </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 Brief from '../components/brief.vue'
import Summary from '../components/summary.vue'

export default defineComponent({
  name: 'PublicSafety',
  components: { Police, Population, House, Company, Brief, Summary },
})
</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.2
#flex-start
  :deep(.card-content)
    justify-content flex-start
</style>
