<template>
  <m-grid
    :template="[
      'title title title',
      'box1 . box5',
      'box1 . box5',
      'box2 . box5',
      'box2 . box6',
      'box3 . box6',
      'box3 . box7',
      'box4 . box7',
      'box4 . box7',
    ]"
    columns="1fr 2fr 1fr"
    rows="4rem 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr"
    gap="0"
    style="padding: 0 .5rem .5rem"
  >
    <!-- <m-map></m-map> -->
    <m-title area="title" color="#fff" :bgImg="require('@/assets/images/title-bg.png')">上海市物业管理地理信息平台</m-title>
    <m-card area="box1" mode="5" title="综合监管应用场景" :icon="require('@/assets/images/icon1.png')">
      <OverSee />
    </m-card>
    <m-card area="box2" mode="5" title="962121热线应用场景" :icon="require('@/assets/images/icon2.png')">
      <Hotline />
    </m-card>
    <m-card area="box3" mode="5" title="智能感知应用场景" :icon="require('@/assets/images/icon3.png')">
      <Intelligence />
    </m-card>
    <m-card area="box4" mode="5" title="灾情上报应用场景" :icon="require('@/assets/images/icon4.png')">
      <Disaster />
    </m-card>
    <m-card area="box5" mode="5" title="各行政区住宅小区汇总" :icon="require('@/assets/images/icon5.png')">
      <CommunitySummary />
    </m-card>
    <m-card area="box6" mode="5" title="住宅小区类型分布" :icon="require('@/assets/images/icon6.png')">
      <CommunityType />
    </m-card>
    <m-card area="box7" mode="5" title="物业监管应用专题图" :icon="require('@/assets/images/icon7.png')">
      <ThematicMap/>
    </m-card>
  </m-grid>
</template>

<script>
import OverSee from './oversee'
import Hotline from './hotline'
import Intelligence from './intelligence'
import Disaster from './disaster'
import CommunitySummary from './community-summary'
import CommunityType from './community-type'
import ThematicMap from './thematic-map'
export default {
  name: 'Main',
  components: {
    OverSee,
    Hotline,
    Intelligence,
    Disaster,
    CommunitySummary,
    CommunityType,
    ThematicMap,
  },
  mounted() {
    this.$store.dispatch('initData')
  },
}
</script>
