<template>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="header">
                    <img src="../assets/pcenter.png">
                    <span class="title">个人资料</span>
                    <div class="exp clearfix">
                        <div class="lv">
                            <img src="../assets/english.png">
                            Lv 10
                        </div>
                        <span>经验值:</span>
                        <span>600字 / 1000字</span>
                    </div>
                    <div class="exp clearfix">
                        <div class="lv">
                            <img src="../assets/japen.png">
                            Lv 10
                        </div>
                        <span>经验值:</span>
                        <span>600字 / 1000字</span>
                    </div>
                </div>
                <div class="profile">
                    <div class="row">
                        <div class="col-sm-3">
                            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494004375030&di=9d941b5b1417be938b6262ebdcab9f36&imgtype=0&src=http%3A%2F%2Fpic.cnitblog.com%2Favatar%2F552009%2F20141030013312.png" alt="" class="img-rounded img-responsive">
                            <div class="nickname">
                                昵称昵称昵称
                            </div>
                            <div class="edit">
                                <button class="btn btn-primary btn-block">屏蔽用户</button>
                                <button class="btn btn-danger btn-block">举报用户</button>
                            </div>
                        </div>
                        <div class="col-sm-9">
                            <div class="item">
                                <img src="../assets/school.png">
                                <div class="content">
                                    <div class="word" style="border-radius:16px;">
                                        测试测试测试
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <img src="../assets/location.png">
                                <div class="content">
                                    <div class="word" style="border-radius:16px;">
                                        测试测试测试
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <img src="../assets/aword.png">
                                <div class="content">
                                    <div class="word" style="border-radius:5px;">
                                        测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <img src="../assets/intro.png">
                                <div class="content">
                                    <div class="word" style="border-radius:5px;">
                                        测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="header">
                    <img src="../assets/mission.png">
                    <span class="title">他领取的任务</span>
                    <div class="mission-desc">
                        <span>平均分:</span>
                        <span>4.5</span>
                        <span>已翻译数量:</span>
                        <span>29</span>
                        <span>领取数:</span>
                        <span>30</span>
                        <span>总字数:</span>
                        <span>12000</span>
                    </div>
                </div>
                <div class="mission">
                    <div>
                        <span class="title">小蝌蚪的未来是光明的</span>
                        <div class="time">
                            倒计时:
                            <span>22:23:35</span>
                        </div>
                    </div>
                    <div style="margin-top:20px;">
                        <button class="btn btn-primary">原文</button>
                        <button class="btn btn-danger">翻译</button>
                        <button class="btn btn-danger">校对</button>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="header">
                    <img src="../assets/pcenter.png">
                    <span class="title">本人资料</span>
                    <div class="exp clearfix">
                        <div class="lv">
                            <img src="../assets/english.png">
                            Lv 10
                        </div>
                        <span>经验值:</span>
                        <span>600字 / 1000字</span>
                    </div>
                    <div class="exp clearfix">
                        <div class="lv">
                            <img src="../assets/japen.png">
                            Lv 10
                        </div>
                        <span>经验值:</span>
                        <span>600字 / 1000字</span>
                    </div>
                </div>
                <div class="profile">
                    <div class="row">
                        <div class="col-sm-3">
                            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494004375030&di=9d941b5b1417be938b6262ebdcab9f36&imgtype=0&src=http%3A%2F%2Fpic.cnitblog.com%2Favatar%2F552009%2F20141030013312.png" alt="" class="img-rounded img-responsive">
                            <div class="nickname">
                                昵称昵称昵称
                            </div>
                            <div class="edit">
                                <a href="javascript:void 0">编辑个人资料</a>
                            </div>
                        </div>
                        <div class="col-sm-9">
                            <div class="item">
                                <img src="../assets/school.png">
                                <div class="content">
                                    <div class="word" style="border-radius:16px;">
                                        测试测试测试
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <img src="../assets/location.png">
                                <div class="content">
                                    <div class="word" style="border-radius:16px;">
                                        测试测试测试
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <img src="../assets/aword.png">
                                <div class="content">
                                    <div class="word" style="border-radius:5px;">
                                        测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <img src="../assets/intro.png">
                                <div class="content">
                                    <div class="word" style="border-radius:5px;">
                                        测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="header">
                    <img src="../assets/mission.png">
                    <span class="title">我领取的任务</span>
                    <div class="mission-desc">
                        <span>平均分:</span>
                        <span>4.5</span>
                        <span>已翻译数量:</span>
                        <span>29</span>
                        <span>领取数:</span>
                        <span>30</span>
                        <span>总字数:</span>
                        <span>12000</span>
                    </div>
                </div>
                <div class="mission">
                    <div>
                        <span class="title">小蝌蚪的未来是光明的</span>
                        <div class="time">
                            倒计时:
                            <span>22:23:35</span>
                        </div>
                    </div>
                    <div style="margin-top:20px;">
                        <button class="btn btn-primary">原文</button>
                        <button class="btn btn-danger">翻译</button>
                        <button class="btn btn-danger">校对</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return {

            }
        }
    }
</script>

<style scoped>
    .header{
        padding-top:25px;
        padding-bottom:15px;
        border-bottom:1px solid #d6d6d6;
        font-size:0;
    }

    .header > img{
        width:16px;
        height:16px;
    }

    .header > span.title{
        font-size:16px;
        vertical-align: middle;
        margin-left:5px;
        font-weight:bold;
    }

    .exp{
        line-height:20px;
    }

    .lv{
        height:20px;
        line-height:20px;
        /*width:70px;*/
        background-color:#eee;
        /*border:1px solid #d6d6d6;*/
        border-radius:10px;
        padding:0 10px 0 22px;
        position:relative;
        float:left;
        font-size:14px;
    }

    .lv img{
        position:absolute;
        top:0;
        left:0;
        z-index: 1;
        display:inline-block;
        height:20px;
    }

    .exp{
        display:inline-table;
        vertical-align: middle;
        margin-left:10px;
    }

    .exp span{
        float:left;
        font-size:12px;
        /*line-height:20px;*/
        /*display:inline-block;*/
        margin-left:10px;
    }

    .profile{
        padding:20px 0;
    }

    .profile .img-rounded{
        border-radius:5px;
    }

    .profile .item{
        position:relative;
    }

    .profile .item:not(:first-child){
        margin-top:10px;
    }

    .profile .item img{
        width:32px;
        height:32px;
        position:absolute;
        top:0;
        left:0px;
    }

    .profile .item .content{
        padding-left:40px;
    }

    .profile .item .content .word{
        padding:6px 12px;
        background-color:#f7f7f7;
    }

    .nickname{
        font-size:18px;
        font-weight:bold;
        text-align:center;
        text-overflow:ellipsis;
        overflow:hidden;
        white-space:nowrap;
        margin-top:12px;
        line-height:1;
    }

    .edit{
        text-align:center;
        line-height:1;
        margin-top:10px;
        height:76px;
    }

    .edit button{
        margin-top:10px;
    }

    .edit a{
        color:#000;
        font-size:12px;
        text-decoration: underline;
    }

    .header .mission-desc{
        float:right;
        font-size:14px;
        line-height:23px;
        color:#666;
    }

    .header .mission-desc span{
        vertical-align: middle;
    }
    .header .mission-desc span:nth-child(odd){
        margin-left:5px;
    }
    .header .mission-desc span:nth-child(even){
        color:#fe5e5e;
    }

    .mission,.glossary{
        margin-top:20px;
        padding:20px;
        background-color:#f7f7f7;
        line-height:1;
    }

    .mission span.title{
        font-size:16px;
    }

    .mission .time{
        float:right;
        color:#666;
    }

    .mission .time span{
        color:#fe5e5e;
    }

    .mission button{
        width:100px;
    }

    .mission button:not(:first-child){
        margin-left:10px;
    }
</style>
