<template>
  <div class="right-section">
    <m-card mode="border">
      <CommunityPhoto />
    </m-card>
    <m-card mode="border">
      <ManageIssue />
    </m-card>
    <m-card mode="border">
      <Combine />
    </m-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import CommunityPhoto from './community-photo.vue'
import ManageIssue from './manage-issue.vue'
import Combine from './combine.vue'

export default defineComponent({
  name: 'RightSection',
  components: { CommunityPhoto, ManageIssue, Combine },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'

.right-section
  $full()
  display flex
  justify-content space-between
  >div
    height 100%
    width 33%
    .beauty1
      flex 1
    .beauty2
      flex 1.6
</style>
