<template>
  <m-grid
    :template="[
      'title title title',
      'box1 . box5',
      'box2 . box5',
      'box3 . box6',
      'box4 . box6',
    ]"
    columns="1fr 2.5fr 1fr"
    rows="5rem 1fr 2fr 1fr 2fr"
    gap="0"
    :bgImg="require('@/assets/images/stars-bg.png')"
    style="padding: 0"
  >
    <m-title area="title" color="#fff" :bgImg="require('@/assets/images/title-bg.png')">智慧物业管理微平台</m-title>
    <m-card area="box1" title="物业应急指挥体系" mode="4" :icon="require('@/assets/images/icon1.png')">
      <emergencyCommand></emergencyCommand>
    </m-card>
    <m-card area="box2" title="运行体征" mode="4" :icon="require('@/assets/images/icon2.png')">
    <operation></operation>
    </m-card>
    <m-card area="box3" title="投诉保修" mode="4" :icon="require('@/assets/images/icon3.png')">
    </m-card>
    <m-card area="box4" title="智能发现" mode="4" :icon="require('@/assets/images/icon4.png')">
    </m-card>
    <m-card area="box5" title="物业督查" mode="4" :icon="require('@/assets/images/icon5.png')">
    </m-card>
    <m-card area="box6" title="协同处置" mode="4" :icon="require('@/assets/images/icon6.png')">
    </m-card>
  </m-grid>
</template>

<script>
import emergencyCommand from '@/views/components/emergencyCommand.vue'
import operation from '@/views/components/operation.vue'
export default {
  name: 'Main',
  components:{
    emergencyCommand,
    operation
  }
}
</script>
