<template>
    <div id="traditionalModel" class="traditional-menu-style">
        <dv-border-box-10>
            <div class="menu-content-style">
                <menu-item v-for="item in menuAry" :key="item.id" :name="item.name" :iconType="item.iconType" @menuClick="menuClick"/>
            </div>
        </dv-border-box-10>
    </div>
</template>
<script>
    /*
    * 传统模式
    * */
    import MenuConfig from '../../menuConfig';
    import MenuItem from './menuItem.vue';
    export default{
        data(){
            return {
                menuAry:MenuConfig,
            }
        },
        mounted(){

        },
        methods:{
            menuClick:function () {

            }
        },
        components:{
            MenuItem
        }
    }
</script>
<style scoped lang="scss">
    .traditional-menu-style{
        width: 100%;
        height: 100%;
        margin-top: 50px;
        .dv-border-box-10{
            width: 100%;
            height: 100%;
            .menu-content-style{
                width: 100%;
                height: 850px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                padding: 100px 200px;
                .dv-border-box-1{
                    width: 300px;
                    height: 300px;
                    /*margin-left: 100px;*/
                }
            }

        }
    }
</style>