<template>
    <div class="container center-content">
        <div class="title">个人中心</div>
        <div class="content">
            <el-menu
                :default-openeds="openeds"
                :collapse-transition="false"
                default-active="/accountdata"
                router
                class="el-menu-vertical-demo"
                text-color="#939599"
                active-text-color="#fdfb60"
            >
                <el-submenu index="1">
                    <template slot="title">
                        <img class="icon" src="../../assets/user/icon_yonghuxinxi@3x.png" alt="" />
                        <span>用户信息</span>
                    </template>
                    <el-menu-item index="/accountdata">资料与账号</el-menu-item>
                    <!-- <el-menu-item index="/address">地址管理</el-menu-item> -->
                    <el-menu-item index="/give">我赞过的</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <img class="icon" src="../../assets/user/icon_jiaoyixinxi@3x.png" alt="" />
                        <span>交易信息</span>
                    </template>
                    <el-menu-item index="/collectionorder">藏品订单</el-menu-item>
                    <el-menu-item index="/payrecord">支付记录</el-menu-item>
                    <el-menu-item index="/transactionordes">交易记录</el-menu-item>
                    <el-menu-item index="/ordervalue">价值证明</el-menu-item>
                </el-submenu>
                <!-- <el-submenu index="3">
                    <template slot="title">
                        <img class="icon" src="../../assets/user/gongxu_icon_xuqiuxinxi@3x.png" alt="" />
                        <span>铸造信息</span>
                    </template>
                </el-submenu> -->
            </el-menu>
            <div class="main">
                <router-view />
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            openeds: ['2'],
            uniqueOpened: false
        };
    },
    methods: {}
};
</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;
            margin-left: 24px !important;
        }
        .el-menu-item {
            background: #1c1e26 !important;
            font-size: 16px;
            padding-left: 78px !important;
            span {
                color: #ffffff !important;
                font-size: 18px !important;
            }
        }
    }
    .icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }
    .title {
        height: 42px;
        font-size: 32px;
        font-weight: 400;
        color: #ffffff;
        line-height: 42px;
        font-family: ZhenyanGB-Regular, ZhenyanGB;
        padding: 60px 0;
    }
    .content {
        display: flex;
        .main {
            .flex-col();
            background: #1c1e26 !important;
            flex-grow: 1;
            min-height: 1100px;
        }
    }
}
</style>
