<template>
    <div id="app">
        <Menu mode="horizontal" :active-name="activeName" class="page-menu">
            <Menu-item name="/page1">
                <router-link to="/page1/">page1</router-link>
            </Menu-item>
            <Menu-item name="/page2">
                <router-link to="/page2/">page2</router-link>
            </Menu-item>
        </Menu>
        <router-view></router-view>
    </div>
</template>

<script>
import { getDeepValue } from 'component/util/index';
export default {
    data() {
        return {

        }
    },

    computed: {
        activeName() {
            return getDeepValue(this.$route, 'matched[0].path');
        }
    },

    components: {

    }
}
</script>

<style lang="scss">
.page-menu {
    // 一级导航加粗
    > .ivu-menu-item,
    > .ivu-menu-submenu .ivu-menu-submenu-title {
        font-weight: bold;
    }

    // a标签占满整行
    .ivu-menu-item a {
        display: block;
        color: #657180;
    }

    // 调整目录项之间的间距，并保证a标签充满整个 menu-item
    > .ivu-menu-item {
        padding: 0;
        a {
            padding: 0 15px;
        }
    }

    > .ivu-menu-submenu {
        padding: 0 15px;
        .ivu-select-dropdown .ivu-menu-item {
            padding: 0;
            a {
                padding: 7px 16px 8px;
            }
        }
    }
}
</style>
