<template>
    <div class="container">
        <div class="header flexcenter flexcolumn">

            <div class="portrait flexcenter shadow">
                <img class="portrait-icom" :src="info.avatar" />
            </div>
            <div class="header-username flexacenter">{{ info.nickname }}</div>

        </div>

    </div>
</template>

<script>
export default {
    name: 'userIndex',

    data() {
        return {
            info: {
                avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
                nickname: "Ada.Wu"
            }
        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style lang="scss" scoped>
.container {
    padding-top: 1.3rem;

    .header {
        padding: 1rem 0 .3733rem;


        .portrait {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            background-color: #fff;
            position: relative;
        }

        .portrait-icom {
            width: 1.8rem;
            height: 1.8rem;
            border-radius: 50%;
        }

        .header-username {
            color: #000;
            font-size: .48rem;
            line-height: normal;
            margin-top: .24rem;
            margin-bottom: .14rem;
            font-weight: 650;
        }


    }

}
</style>