web-lee/src/components/Person.vue

<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">
                                <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>
            <div class="col-sm-6">
                <div class="header">
                    <img src="../assets/account.png">
                    <span class="title">个人账户</span>
                    <div class="recharge">
                        <a href="javascript:void 0">充值记录</a>
                        <button class="btn btn-primary">充值</button>
                    </div>
                </div>
                <div class="account">
                    <div class="row" style="padding-top:20px;">
                        <div class="col-sm-6" style="border-right:1px solid #d6d6d6;">
                            <div class="money">
                                当前金额：<span>1030</span>大洋<a href="javascript:void 0">收支记录</a>
                            </div>
                            <div class="alipay">
                                <span class="title">支付宝账号：</span>
                                <div class="input">
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                            <div style="margin-top:30px;">
                                <button class="btn btn-danger" style="width:100px;">提现</button>
                            </div>
                            <p style="margin-top:10px;color:#b8b8b8;">每月1-3号可申请提现，提现金额需大于1000大洋</p>
                        </div>
                        <div class="col-sm-6">
                            <div class="invitation">
                                <div class="title">
                                    邀请码购买记录
                                </div>
                                <div class="item" :class="{used:item.used}" v-for="item in invCodes">
                                    邀请码：{{item.code}}
                                    <span>{{item.state}}</span>
                                    <span>{{item.date}}</span>
                                </div>
                            </div>
                            <div style="margin-top:10px;">
                                <button class="btn btn-primary">购买邀请码</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top:30px;">
            <div class="col-sm-6">
                <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/glossary.png">
                    <span class="title">生词表</span>
                </div>
                <div class="glossary clearfix">
                    <div class="word" v-for="n in 10">
                        <span>Boy 男孩</span>
                        <img src="../assets/remove.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                invCodes:[{
                    code:'YUE8',
                    state:'未使用',
                    date:'2017-01-01',
                    used:false
                },{
                    code:'YUE8',
                    state:'已使用',
                    date:'2017-01-01',
                    used:true
                },{
                    code:'YUE8',
                    state:'已使用',
                    date:'2017-01-01',
                    used:true
                },{
                    code:'YUE8',
                    state:'已使用',
                    date:'2017-01-01',
                    used:true
                }]
            }
        }
    }
</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;
        margin-top:10px;
        line-height:1;
    }

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

    .recharge{
        float:right;
        font-size:14px;
        margin-top:-6px;
    }

    .recharge a{
        color:#000;
        vertical-align: middle;
        text-decoration: underline;
    }

    .recharge button{
        vertical-align: middle;
        width:80px;
        margin-left:10px;
    }

    .account .money{
        margin-top:20px;
        color:#666;
    }

    .account .money span{
        color:#fe5e5e;
        font-size:36px;
    }

    .account .money a{
        color:#000;
        margin-left:20px;
        text-decoration: underline;
    }

    .alipay .title{
        position:absolute;
        left:10px;
        line-height:34px;
        color:#666;
    }

    .alipay .input{
        padding-left:89px;
    }

    .invitation{
        border:1px solid #d6d6d6;
    }

    .invitation .title{
        padding:15px 10px;
        line-height:1;
        background-color:#d6d6d6;
        font-weight:bold;
    }

    .invitation .item{
        padding:10px;
        font-size:12px;
    }

    .invitation .item:nth-child(odd){
        background-color:#f7f7f7;
    }

    .invitation .item.used{
        color:#999;
    }

    .invitation .item span{
        margin-left:5px;
    }

    .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;
    }

    .glossary .word{
        float:left;
        /*margin-left:10px;*/
        padding:5px;
        font-size:0;
    }

    .glossary .word span{
        font-size:14px;
        vertical-align: middle;
    }

    .glossary .word span:hover{
        text-decoration: underline;
    }

    .glossary .word:hover img{
        display:inline-block;
    }

    .glossary .word img{
        width:14px;
        cursor:pointer;
        display:none;
    }
</style>