web-lee/src/components/Mission.vue

<template>
    <div class="container">
        <div class="row" style="margin-bottom:20px;">
            <div class="col-sm-6">
                <div class="user">
                    <img class="img-circle" :src="task_info.task_member_info.member_header_img ? task_info.task_member_info.member_header_img : defImg">
                    <span>{{task_info.task_member_info ? task_info.task_member_info.member_nickname ? task_info.task_member_info.member_nickname : task_info.task_member_info.member_username : '无名的旅人'}}</span>
                </div>
                <div class="title">{{task_info.task_title}}</div>
                <p class="content">
                    {{task_info.task_content}}
                </p>
                <div class="row" style="margin-top:12px;">
                    <div class="col-md-12">
                        <span class="lb">原文链接:</span>
                        <div class="input">
                            <input type="text" class="form-control" :value="task_info.task_url" readonly>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="single" v-if="isSingle">
                    <div class="header clearfix">
                        <img class="img-circle" src="../assets/headimg.png">
                        <span>王大白</span>
                        <div class="btns">
                            <button class="btn btn-primary" @click="proof">进行校对</button>
                            <button class="btn btn-primary">邀请校对</button>
                            <button class="btn btn-danger">评分</button>
                        </div>
                    </div>
                    <div class="time">
                        <span>领取时间：2017-01-01 12:00</span><span>完成时间：2017-01-01 12:00</span>
                    </div>
                    <div class="translate">
                        <div class="title">翻译标题翻译标题</div>
                        <p class="content">1。 高度自律和自黑
                            　　为什么不说自信呢？不自信的人，普遍内心比较脆弱。一个自信的人，对自己充满信心，做事往往带着积极向上的力量，并时刻充满激情。所有的盲目自信，和空腹自信，都是自以为是。心中要有真才实学，哪怕在不断的试错，但终究能到达攀登高峰的那一天。
                            　　人的自信到底从何而来？以及如何培养自己的自信？高度的自信，从高度的自律而来。自律又是什么？自律就是自己管理自己，自己约束自己。这是一个很重要的能力。先学会克制自己，用严格的日程表来控制生活，才能在这种自律中不断磨练出自信。自信也代表着对事情的控制能力，连最基本的时间都控制不了，谈何自信？
                            　　除了自律以外，自黑的能力也相当重要。世界之大，什么鸟都有。等你哪一天稍微做出点成绩，很多认识或不认识的人便在背后，唧唧歪歪的议论是非。从最开始的吐槽，到断章取义的论断甚至无趣的黑你。
                            　　自黑就是自己嘲笑自己，自己黑色幽默自己。自黑是一种沟通方式，也是一种境界，更是一种另类的修养。自黑不是等到有人说你时才出现，而是从头到尾都需要有的能力。你必须看透那些无聊恶俗的人，要比他们还会擅长黑自己，待他们自知无趣后，便会羞愧的退场而去。
                            　　2。 必须经历绝望
                            　　经历绝望的意思，就是已经走过这段岁月。也许你还未曾绝望过，并不意味着你不坚强，但一定没有经历过绝望的人坚强。未绝望过的人生是不完美的人生。绝望可能是情感、事业抑或无法面对的孤独等等。
                            　　「必须」 是一个前缀词，一个重要的状态。「必须」并非主动选择，而是做好充分的心理准备。当绝望来临时，坦然无惧的接受它，即使当下极其痛苦，甚至失去了自我。在绝望中寻找希望，才是值得体验的一种人生。
                            　　强大的人不是征服什么，而是能承受什么。一些事情，只有经历过了，才能明白其中的道理，和懂得人生的真谛。绝望并不可怕，可怕的是失去勇气和激情。经历绝望，但不要被绝望吞噬。相反你要胜过它，如同战胜黑暗，迎接光明一样。
                        </p>
                    </div>
                    <div class="footer clearfix">
                        <updown class="updown"></updown>
                        <Report class="pull-left" style="margin-left:10px;display:block;"></Report>
                    </div>
                    <textarea class="form-control" rows="3" style="margin-top:10px;color:#000" placeholder="评论"></textarea>
                    <div style="margin-top:10px;">
                        <button class="btn btn-primary pull-right" style="width:80px;">提交</button>
                    </div>
                </div>

                <div class="multi" v-else>
                    <div class="active-title">
                        <div class="tt">
                            <img src="../assets/trans-list.png">
                            译文列表
                        </div>
                    </div>
                    <div class="trans-list">
                        <div class="item" v-for="n in 3">
                            <div class="u">
                                <div class="up">
                                    5
                                    <Updown class="updown"></Updown>
                                </div>
                                <img class="img-circle" src="../assets/headimg.png">
                            </div>
                            <div class="right">
                                <div class="intro">
                                    <span>王大白</span>
                                    <span>翻译了该任务</span>
                                    <span>领取时间：2017-01-01 12:00</span>
                                    <span>完成时间：2017-01-01 12:00</span>
                                </div>
                                <p>翻译是你最喜爱的工作，没有之一，为此工作了达数年之久，难道还说不喜爱吗？</p>
                                <div class="btn-block clearfix">
                                    <button class="btn btn-primary pull-left">查看译文</button>
                                    <button class="btn btn-primary pull-left" @click="proof">进行校对</button>
                                    <button class="btn btn-primary pull-left">邀请校对</button>
                                    <Report class="pull-left report" style="margin-left:10px;"></Report>
                                    <button class="btn btn-danger pull-right">评分</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Updown from './Updown.vue'
    import Report from './Report.vue'

    export default{
        components:{
            Updown,
            Report
        },
        data(){
            return {
                member_task:{},
                task_info:{},
                defImg:require('../assets/headimg-def.png')
            }
        },
        mounted(){

        },
        methods:{
            proof(){
                this.$router.push('/proof/'+0+'/edit');
            }
        },
        computed:{
            user(){
                return this.$store.state.user.user ? this.$store.state.user.user : {};
            },
            isSingle(){
                return this.task_info.task_type === 0 ? true :false;
            }
        },
        created(){
            this.$http.get('apiv1/ttaskinfos/'+this.$route.params.id).then(res => {
                this.member_task = res.body.member_task;
                this.task_info = res.body.task_info;
            },res => {

            });
        }
    }
</script>

<style scoped>
    .user{
        margin:20px 0;
        height:36px;
        line-height:36px;
    }

    .user img{
        display:inline-block;
        width:36px;
        height:36px;
        float:left;
        margin-right:5px;
    }

    .user span{
        color:#438eff;
        float:left;
    }

    .title{
        font-weight:bold;
        font-size:16px;
        line-height:1;
        margin-bottom:10px;
    }

    .content{
        color:#666;
    }

    .lb{
        position:absolute;
        left:10px;
        line-height:34px;
    }

    .input{
        padding-left:65px;
    }

    .header{
        padding:20px 0 10px 0;
        line-height:36px;
        border-bottom:1px solid #d6d6d6;
    }

    .header img{
        float:left;
        display:inline-block;
        height:36px;
        width:36px;
        margin-right:5px;
    }

    .header span{
        float:left;
        color:#438eff;
    }

    .btns{
        float:right;
    }

    .time{
        margin-top:10px;
        font-size:12px;
        color:#b8b8b8;
        line-height:1;
    }

    .time span:nth-child(even){
        margin-left:20px;
    }

    .translate{
        background-color:#f7f7f7;
        padding:15px;
        margin-top:20px;
    }

    .translate .content{
        margin-bottom:0;
    }

    .footer{
        margin-top:10px;
    }

    .footer .updown{
        float:left;
    }

    .active-title{
        padding:30px 0 10px 0;
        border-bottom:1px solid #d6d6d6;
        line-height:1;
    }

    .active-title .tt{
        font-weight:bold;
        display:inline-block;
    }

    .active-title .tt img{
        float: left;
        display: block;
        height: 14px;
        margin-right: 5px;
    }

    .trans-list{

    }

    .trans-list > .item{
        padding:10px 0 20px 0;
        border-bottom:1px solid #d6d6d6;
        position:relative;
    }

    .trans-list > .item > .u{
        position:absolute;
        top:10px;
        left:0;
        width:80px;
        line-height:36px;
    }

    .trans-list > .item > .u > .up{
        display:inline-block;
        width:34px;
        height:34px;
        text-align:center;
        border:1px solid #d6d6d6;
        border-radius:50%;
        vertical-align: middle;
        line-height:34px;
        float:left;
        margin-top:1px;
        cursor:pointer;
        position:relative;
    }

    .trans-list > .item > .u > .up:hover{
        background-color:#d6d6d6;
    }

    .trans-list > .item > .u > .up:hover .updown{
        display:block;
    }

    .trans-list > .item > .u > img{
        display:inline-block;
        width:36px;
        height:36px;
        float:left;
        margin-left:10px;
    }

    .trans-list > .item > .right{
        margin-left:85px;
    }

    .trans-list > .item > .right > .intro{
        line-height:36px;
        margin-bottom:5px;
    }

    .trans-list > .item > .right > .intro > span:nth-child(1){
        color:#438eff;
        margin-left:0;
        font-size:14px;
    }

    .trans-list > .item > .right > .intro > span{
        margin-left:5px;
        color:#b8b8b8;
        font-size:12px;
    }

    .trans-list > .item > .right > p{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow:hidden;
        margin-bottom:15px;
    }

    .trans-list > .item > .right > .btn-block .pull-left:not(:first-child){
        margin-left:5px;
    }

    .trans-list > .item > .u > .up > .updown{
        position:absolute;
        top:33px;
        left:0;
        display:none;
        text-align:left;
        line-height:40px;
    }

    .report{
        display:none;
    }

    .trans-list > .item:hover .report{
        display:block;
    }

    textarea{
        border-radius:3px;
    }

</style>