<template>
    <div class="container">
        <portal-header></portal-header>
        <main>
            <div class="layout-box center-box">
                <div class="main-left box-shadow">
                    <h3>个人中心</h3>
                    <ul>
                        <li
                            v-for="(item, index) in menuList"
                            :key="index"
                            :class="'center-menu'+ index"
                        >
                            <router-link :to="item.link" :target="item.target">{{item.title}}</router-link>
                        </li>
                    </ul>
                </div>
                <div class="main-right">
                    <router-view></router-view>
                </div>
            </div>
        </main>
        <portal-footer></portal-footer>
    </div>
</template>

<script>
import portalHeader from "../portal/components/header";
import portalFooter from "../portal/components/footer";
export default {
    name: "account",
    components: {
        portalHeader,
        portalFooter
    },
    data() {
        return {
            menuList: [
                {
                    link: "/center/account",
                    title: "我的账户",
                    target: "_self"
                },
                {
                    link: "/center/setting",
                    title: "安全设置",
                    target: "_self"
                },
                // {
                //     link: "/center/holder",
                //     title: "持有人管理",
                //     target: "_self"
                // },
                {
                    link: "/center/bankcard",
                    title: "银行卡管理",
                    target: "_self"
                }
            ]
        };
    },
    created() {}
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.container {
    background: #f7f7f7;
}
main {
    display: block;
    margin-top: 60px;
    padding: 30px 0;
    min-height: calc(100vh - 184px);
}
.center-box {
    position: relative;
    min-height: 254px;
}
.main-left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 240px;
    min-height: 254px;
    background: #fff;
    h3 {
        height: 74px;
        line-height: 74px;
        font-size: 24px;
    }
    ul {
        li {
            height: 60px;
            line-height: 60px;
            a {
                display: block;
                text-align: left;
                padding-left: 90px;
                border-left: 5px solid transparent;
                box-sizing: border-box;
            }
            &.center-menu0 {
                a {
                    background: url(~assets/images/icon-center-account.png) 64px
                        center no-repeat;
                    &.router-link-exact-active {
                        background: url(~assets/images/icon-center-account2.png)
                            #f7f7f7 64px center no-repeat;
                    }
                    &:hover {
                        background: url(~assets/images/icon-center-account2.png)
                            #f7f7f7 64px center no-repeat;
                    }
                }
            }
            &.center-menu1 {
                a {
                    background: url(~assets/images/icon-center-setting.png) 64px
                        center no-repeat;
                    &.router-link-exact-active {
                        background: url(~assets/images/icon-center-setting2.png)
                            #f7f7f7 64px center no-repeat;
                    }
                    &:hover {
                        background: url(~assets/images/icon-center-setting2.png)
                            #f7f7f7 64px center no-repeat;
                    }
                }
            }
            &.center-menu2 {
                a {
                    background: url(~assets/images/icon-center-bankcard.png)
                        64px center no-repeat;
                    &.router-link-exact-active {
                        background: url(~assets/images/icon-center-bankcard2.png)
                            #f7f7f7 64px center no-repeat;
                    }
                    &:hover {
                        background: url(~assets/images/icon-center-bankcard2.png)
                            #f7f7f7 64px center no-repeat;
                    }
                }
            }
        }
    }
    .router-link-exact-active {
        border-left: 5px solid #3d86e9;
        color: #3d86e9;
    }
}
.main-right {
    margin-left: 260px;
}
</style>
