<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-animate enter="fadeInLeft" leave="fadeOutLeft">
      <LeftComponent area="left" />
    </m-animate>
    <m-animate enter="fadeInRight" leave="fadeOutRight">
      <RightComponent area="right" />
    </m-animate>
  </m-grid>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import LeftComponent from './left/left-component.vue'
import RightComponent from './right/right-component.vue'

export default defineComponent({
  name: 'Main',
  components: { LeftComponent, RightComponent },
})
</script>

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