@section styles{
    @*<link href="~/css/cropper.css" rel="stylesheet" />*@
    <link href="~/css/views/uploadProfilePicture.css" rel="stylesheet" />
    <link href="~/libs/pear/css/pear-module/cropper.css" rel="stylesheet" />
    <style type="text/css">
        .text-center {
            text-align: center;
        }

        .user-info-head {
            width: 110px;
            height: 110px;
            line-height: 110px;
            position: relative;
            display: inline-block;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            margin: 0 auto;
        }

        .layui-line-dash {
            border-bottom: 1px dashed #ccc;
            margin: 15px 0;
        }

        .comment {
            position: absolute;
            bottom: 3px;
            right: 10px;
            font-size: 12px;
            color: dimgray;
        }

        .content {
            padding-left: 13px;
            font-size: 13px;
            color: dimgray;
        }

        .title {
            padding-left: 13.5px;
        }

        .layui-tab-title {
            border-bottom: none;
        }

        .fl-item {
            height: 30px;
            font-size: 13.5;
        }

        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50px;
            background-color: gray;
            display: inline-block;
            margin-right: 10px;
        }
    </style>
}

<div class="layui-row layui-col-space10">
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 25px;">
                <div class="text-center layui-text">
                    <div class="user-info-head" id="userInfoHead">
                        <img id="userAvatar" src="@Url.Action("GetProfilePicture","Users")" width="115px" height="115px" alt="">
                    </div>
                    <h2 style="padding-top: 20px;font-size: 20px;">就眠仪式</h2>
                    <p style="padding-top: 8px;margin-top: 10px;font-size: 13.5px;">China ， 中国</p>
                </div>
            </div>
            <div style="height: 45px;border-top: 1px whitesmoke solid;text-align: center;line-height: 45px;font-size: 13.5px;">
                <span>今日事 ，今日毕</span>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header">
                归档
            </div>
            <div class="layui-card-body">
                <div class="fl-item"><span class="dot"></span>数据结构</div>
                <div class="fl-item"><span class="dot"></span>结构算法</div>
                <div class="fl-item"><span class="dot"></span>开源夜谈</div>
                <div class="fl-item"><span class="dot"></span>数据整合</div>
                <div class="fl-item"><span class="dot"></span>其他相关</div>
            </div>
        </div>
    </div>
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">我的文章</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-row layui-col-space10" style="margin: 10px;">
                                <div class="layui-col-md1">
                                    <img src="~/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
                                </div>
                                <div class="layui-col-md11" style="height: 80px;">
                                    <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                    <div class="content">
                                        “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                    </div>
                                    <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12</div>
                                </div>
                            </div>
                            <div class="layui-row layui-col-space10" style="margin: 10px;">
                                <div class="layui-col-md1">
                                    <img src="~/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
                                </div>
                                <div class="layui-col-md11" style="height: 80px;">
                                    <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                    <div class="content">
                                        “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                    </div>
                                    <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12</div>
                                </div>
                            </div>
                            <div class="layui-row layui-col-space10" style="margin: 10px;">
                                <div class="layui-col-md1">
                                    <img src="~/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
                                </div>
                                <div class="layui-col-md11" style="height: 80px;">
                                    <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                    <div class="content">
                                        “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                    </div>
                                    <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12</div>
                                </div>
                            </div>
                            <div class="layui-row layui-col-space10" style="margin: 10px;">
                                <div class="layui-col-md1">
                                    <img src="~/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
                                </div>
                                <div class="layui-col-md11" style="height: 80px;">
                                    <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                    <div class="content">
                                        “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                    </div>
                                    <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12</div>
                                </div>
                            </div>
                            <div class="layui-row layui-col-space10" style="margin: 10px;">
                                <div class="layui-col-md1">
                                    <img src="~/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
                                </div>
                                <div class="layui-col-md11" style="height: 80px;">
                                    <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                    <div class="content">
                                        “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                    </div>
                                    <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12</div>
                                </div>
                            </div>
                            <div class="layui-row layui-col-space10" style="margin: 10px;">
                                <div class="layui-col-md1">
                                    <img src="~/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
                                </div>
                                <div class="layui-col-md11" style="height: 80px;">
                                    <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                    <div class="content">
                                        “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                    </div>
                                    <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12</div>
                                </div>
                            </div>
                            <div class="layui-row layui-col-space10" style="margin: 10px;">
                                <div class="layui-col-md1">
                                    <img src="~/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
                                </div>
                                <div class="layui-col-md11" style="height: 80px;">
                                    <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                    <div class="content">
                                        “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                    </div>
                                    <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script type="text/javascript">
        layui.use(['abp', 'element'], function () {
            var abp = layui.abp;
            var $ = layui.jquery;
            var element = layui.element;

            window.saveCallback = function (data) {
                parent.layer.close(data.index);
                abp.notify.success(data.msg);
                $("#userAvatar").attr("src", "@Url.Action("GetProfilePicture","Users")");
                parent.layui.$(".layui-nav-img").attr("src", "@Url.Action("GetProfilePicture","Users")");
            }

            $("#userAvatar").click(function () {
                parent.layer.open({
                    type: 2,
                    title: "更换图片",
                    content: "@Url.Action("UploadProfilePicture", "Users")",
                    area: ["900px","622px"],
                    shade: 0.1,
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        parent.window['layui-layer-iframe'+ index].submitForm();
                    }
                });
            });
        });
    </script>
}

