<template>
  <m-grid
    :template="['title title title', 'left . right']"
    columns="16vw auto 49vw"
    rows="0.4rem auto"
    gap="0.05rem"
  >
    <m-title area="title">南东城运</m-title>
    <m-map ref="map" />
    <m-animate enter="fadeInLeft" leave="fadeOutLeft">
      <LeftSection area="left" />
    </m-animate>
    <m-animate enter="fadeInRight" leave="fadeOutRight">
      <RightSection area="right" />
    </m-animate>
  </m-grid>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import LeftSection from '@/view/community/left-section.vue'
import RightSection from '@/view/community/right-section.vue'
import store from '@/store'

export default defineComponent({
  name: 'Main',
  components: { LeftSection, RightSection },
  setup() {
    store.commit('SET_CURRENT_VIEW', { name: '振兴小区', type: 'community' }) // 使标题不显示公共的3个按钮
  },
})
</script>

<style lang="stylus" scoped></style>
