<template>
    <el-dialog title="用户详情" :visible.sync="dialogInfoVisible" width="40%" class="dialog-info">
        <div class="info-item">
            <span>头像：</span>
            <span>
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539841082704&di=34a768737957e5a264cc29ab6cb2a962&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20110518%2FImg307890814.jpg" class="user-avatar">
            </span>
        </div>
        <div class="info-item">
            <span>昵称：</span>
            <span>tree</span>
        </div>
        <div class="info-item">
            <span>手机号码：</span>
            <span>12345678900</span>
        </div>
        <div class="info-item">
            <span>押金状态：</span>
            <span>已交纳</span>
        </div>
        <div class="info-item">
            <span>第三方登录方式：</span>
            <span>微信</span>
        </div>
        <div class="info-item">
            <span>使用状态：</span>
            <span>正常</span>
        </div>
        <div class="title">实名认证</div>
        <div class="info-item">
            <span>状态：</span>
            <span>已认证</span>
        </div>
        <div class="info-item">
            <span>身份证号码：</span>
            <span>123456789987654321</span>
            <div style="padding-top: 20px;">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539841843166&di=ac604133654228ae16bcc260bfd149d8&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171111%2F8a2058c30d614674a4fa7e40cf171ebf.jpeg" alt="" width="45%" style="margin-left: 20px;">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539841865475&di=4940df3a0f2f01aab26a73ba21517d25&imgtype=0&src=http%3A%2F%2Fimg.mp.sohu.com%2Fupload%2F20170611%2Fe5b8f304a6594090a2c00501ecf9f6f9.png" alt="" width="45%" style="margin-left: 20px;">
            </div>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "user-details",
        data() {
            return {
                dialogInfoVisible: false,
            }
        },
        methods: {
            open(data) {
                this.dialogInfoVisible = true
                console.log(data)
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .dialog-info {
        top: -5vh;
        .info-item {
            margin-bottom: 10px;
            .user-avatar {
                width: 40px;
                height: 40px;
                border-radius: 10px;
            }
            span:first-child {
                display: inline-block;
                width: 120px;
                text-align: right;
            }
            span:last-child {
                padding-left: 10px;
            }
        }
        .title {
            font-size: 16px;
            margin: 20px 0 10px;
            padding-top: 20px;
            border-top: 1px solid #ccc;
        }
    }
</style>