<template>
    <div class="container center-content">
        <div class="title">个人中心</div>
        <div class="content">
            <el-menu
                default-active="/accountdata"
                router
                class="el-menu-vertical-demo"
                text-color="#939599"
                active-text-color="#00FFCB"
            >
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>用户信息</span>
                    </template>
                    <el-menu-item index="/accountdata">资料与账号</el-menu-item>
                    <el-menu-item index="1-2">地址管理</el-menu-item>
                    <el-menu-item index="1-3">我赞过的</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>交易信息</span>
                    </template>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>铸造信息</span>
                    </template>
                </el-submenu>
            </el-menu>
            <div class="main">
                <router-view />
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    padding-bottom: 200px;
    /deep/ .el-menu {
        width: 200px;
        background: #1c1e26 !important;
        margin-right: 30px;
        .el-submenu__title {
            background: #1c1e26 !important;
            color: #ffffff !important;
            font-size: 18px !important;
            padding-left: 10px !important;
        }
        .el-menu-item {
            background: #1c1e26 !important;
            span {
                color: #ffffff !important;
                font-size: 18px !important;
            }
        }
    }
    .title {
        height: 42px;
        font-size: 32px;
        font-weight: 400;
        color: #ffffff;
        line-height: 42px;
        padding: 60px 0;
    }
    .content {
        display: flex;
        .main {
            .flex-col();
            background: #1c1e26 !important;
            flex-grow: 1;
            min-height: 1100px;
        }
    }
}
</style>
