<template>
  <!-- <m-card title="业务入口"> -->
  <m-card title="业务入口">
    <div class="content">
      <div
        v-for="entry in entrys"
        :key="entry.type"
        @click="routeTo(entry.type)"
      >
        {{ entry.name }}
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useRouter } from 'vue-router'
import store from '@/store'
export default defineComponent({
  name: 'BussinessEntry',
  setup() {
    const entrys = computed(() => store.state.communityOptions)
    const router = useRouter()
    const routeTo = (id: string) => {
      router.push({
        name: 'community',
        query: {
          id,
        },
      })
    }
    return {
      entrys,
      routeTo,
    }
  },
})
</script>

<style lang="stylus" scoped>
.content
  width 100%
  height 100%
  display flex
  align-items center
  justify-content space-around
  >div
    width 40%
    min-height 70%
    background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
    display flex
    align-items center
    justify-content center
    font-size .12rem
    font-weight bold
    cursor pointer
    opacity 0.8
    color #ccc
    &:hover
      color #fff
      opacity 1
</style>
