<template>
  <div class="public-manage">
    <m-card mode="border">
      <Complain />
    </m-card>
    <m-card mode="border">
      <Demand />
    </m-card>
    <m-card mode="border">
      <div class="first-child"><CaseAnalysis /></div>
      <div class="second-child"><KeyTask /></div>
      <div class="third-child"><BussinessEntry /></div>
    </m-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Complain from './complain.vue'
import Demand from './demand.vue'
import CaseAnalysis from './case-analysis.vue'
import KeyTask from './key-task.vue'
import BussinessEntry from './business-entry.vue'

export default defineComponent({
  name: 'PublicMange',
  components: { Complain, Demand, CaseAnalysis, KeyTask, BussinessEntry },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.public-manage
  $full()
  display flex
  justify-content space-between
  >div
    height 100%
    width 33%
    .first-child
      flex 1
      // height 50%
    .second-child
      height 2rem
      // height 32%
    .third-child
      height 0.8rem
</style>
