<template>
    <dv-border-box-1>
        <div class="menu-item-style" @click="menuClick">
            <div class="menu-name-style">{{name}}</div>
            <my-icon :type="iconType" class="icon-style" style="font-size: 80px;margin-top: 50px"></my-icon>
        </div>
    </dv-border-box-1>
</template>
<script>
    export default{
        data(){
            return {}
        },
        props:["name","iconType"],
        methods:{
            menuClick:function () {
                this.$emit("menuClick")
            }
        }
    }
</script>
<style scoped lang="scss">
    .menu-item-style{
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
        .menu-name-style{
            font-size: 24px;
            font-weight: bolder;
        }
    }
</style>