You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.4 KiB
60 lines
1.4 KiB
<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> |