<template>
    <div class="container">
        <img class="qrcode" src="../assets/qrcode.png">
        <div class="fixed-container">
            <div class="header-container clearfix">
                <div class="exp-container">
                    <div class="exp clearfix">
                        <div class="lv">
                            <img src="../assets/english.png">
                            Lv {{user ? user.level_info.level_id - 1 : 0}}
                        </div>
                        <span>经验值</span>
                        <div class="progress-container">
                            <div class="progress">
                                <div class="progress-bar progress-bar-info" role="progressbar" :aria-valuenow="user ? user.member_experience : 0" aria-valuemin="0" :aria-valuemax="user ? user.level_info.level_end : 1" :style="englishPercent">
                                    <span class="sr-only">20% Complete</span>
                                </div>
                            </div>
                        </div>
                        <span>{{user ? user.member_experience : 0}}字 / {{user ? user.level_info.level_end : 1}}字</span>
                    </div>
                    <div class="exp clearfix">
                        <div class="lv">
                            <img src="../assets/japen.png">
                            Lv {{user ? user.level_jp_info.level_id - 1 : 0}}
                        </div>
                        <span>经验值</span>
                        <div class="progress-container">
                            <div class="progress">
                                <div class="progress-bar progress-bar-danger" role="progressbar" :aria-valuenow="user ? user.member_experience_jp : 0" aria-valuemin="0" :aria-valuemax="user ? user.level_jp_info.level_end : 1" :style="japenPercent">
                                    <span class="sr-only">20% Complete</span>
                                </div>
                            </div>
                        </div>
                        <span>{{user ? user.member_experience_jp : 0}}字 / {{user ? user.level_jp_info.level_end : 1}}字</span>
                    </div>
                </div>
                <button class="btn-publish btn btn-danger pull-right" @click="goPublish"><img src="../assets/publish-icon.png" height="16px"> 去发布任务</button>
            </div>
            <div class="notice">
                <img src="../assets/notice.png" height="16px;">
                公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
            </div>
        </div>
        <div class="row" style="height:100%;">
            <div class="col-md-4" style="width:400px;margin-right:40px;height:100%;padding-right:0;">
                <scrollbar style="height:100%;width:100%">
                    <div style="padding-right:10px;">
                        <div class="sel-container">
                            <div class="row">
                                <div class="col-md-6">
                                    <select class="form-control">
                                        <option value="">请选择领域</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <select class="form-control">
                                        <option value="">请选择任务来源</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row" style="margin-top:10px;">
                                <div class="col-md-6">
                                    <select class="form-control">
                                        <option value="">请选择翻译人数</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <select class="form-control">
                                        <option value="">请选择翻译语言</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="mission-list">
                            <div class="mission" v-for="mission in missionList">
                                <span class="title"><router-link style="color:#000;" :to="'/mission/'+mission.id">{{mission.title}}</router-link></span>
                                <div class="info">
                                    任务发布者：
                                    <span class="auth">{{mission.auth}}</span>
                                    发布时间：{{mission.publishTime}}
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        原文{{mission.wordNumber}}字
                                </div>
                                    <div class="col-md-8">
                                        英文限制等级：{{mission.limitLevel}}级
                                </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        交稿时间：{{mission.endTime}}
                                </div>
                                    <div class="col-md-8">
                                        稿费：{{mission.money}}
                                </div>
                                </div>
                                <button class="btn btn-primary" @click="receive(mission.id)">领取(2)</button>
                            </div>
                        </div>
                    </div>
                </scrollbar>
            </div>
            <div class="col-md-4" style="width:400px;margin-right:40px;height:100%;padding-right:0;">
                <scrollbar style="height:100%;width:100%">
                    <div style="padding-right:10px;">
                        <div class="dynamic-title">
                            <div class="title">
                                <img src="../assets/dynamic.png">
                                用户动态
                            </div>
                            <div class="attention">
                                我的关注({{attention}}人)
                            </div>
                        </div>
                        <div class="dynamic-list">
                            <div class="dynamic clearfix" v-for="dynamic in dynamicList">
                                <div class="avator">
                                    <a href="javascript:void 0" class="thumbnail" @click="goUser">
                                        <img :src="dynamic.img" alt="">
                                    </a>
                                </div>
                                <div class="content">
                                    <div class="info">
                                        <div class="user">
                                            <el-popover
                                                placement="bottom-start"
                                                width="260"
                                                trigger="hover"
                                                >
                                                <span slot="reference">{{dynamic.user}}</span>
                                                <div class="card clearfix">
                                                    <img class="avator" :src="dynamic.img">
                                                    <div class="content">
                                                        <div class="info">
                                                            <div class="name">{{dynamic.user}}</div>
                                                            <div class="level">LV{{dynamic.lv}}</div>
                                                        </div>
                                                        <div class="intro">{{dynamic.intro}}</div>
                                                    </div>
                                                </div>
                                                <div class="card-footer">
                                                    <div class="ctn">
                                                        <div class="col">
                                                            <div>已领取</div>
                                                            <div>{{dynamic.receive}}</div>
                                                        </div>
                                                        <div class="col">
                                                            <div>关注者</div>
                                                            <div>{{dynamic.follow}}</div>
                                                        </div>
                                                        <div class="col">
                                                            <a href="javascript:void 0">私信</a>
                                                        </div>
                                                        <div class="col">
                                                            <a href="javascript:void 0">+关注</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-popover>
                                        </div>
                                        <div class="detail">{{dynamic.detail}}</div>
                                        <div class="time">{{dynamic.time}}</div>
                                    </div>
                                    <div class="desc">{{dynamic.desc}}</div>
                                    <div class="footer">
                                        <span style="color:#999">字数：</span>
                                        {{dynamic.wordNumber}}
                                        <updown style="float:right;"></updown>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </scrollbar>
            </div>
            <div class="col-md-4" style="width:280px;height:100%;padding-right:0;">
                <scrollbar style="height:100%;width:100%">
                    <div style="padding-right:10px;">
                        <div class="active-title">
                            <div class="title">
                                <img src="../assets/active-user.png">
                                活跃用户
                            </div>
                        </div>
                        <calendar
                            value=""
                            width="280px"
                            :disabled-days-of-week="[]"
                            :has-input="false"></calendar>
                        <div class="sign">
                            <div>
                                <button class="btn btn-primary">签到 3月19日</button>
                            </div>
                            <p>连续签到11天，有额外奖励哦!</p>
                        </div>
                        <div class="active-title">
                            <div class="title">
                                <img src="../assets/rank.png">
                                翻译人气排行榜
                            </div>
                        </div>
                        <div class="row rank">
                            <div class="col-md-4">
                                <div class="rank-block">
                                    <img src="../assets/headimg.png" alt="" class="img-circle img-responsive">
                                    <img class="medal" src="../assets/rank1.png">
                                </div>
                                <div class="name">名称名称</div>
                            </div>
                            <div class="col-md-4">
                                <div class="rank-block">
                                    <img src="../assets/headimg.png" alt="" class="img-circle img-responsive">
                                    <img class="medal" src="../assets/rank2.png">
                                </div>
                                <div class="name">名称名称</div>
                            </div>
                            <div class="col-md-4">
                                <div class="rank-block">
                                    <img src="../assets/headimg.png" alt="" class="img-circle img-responsive">
                                    <img class="medal" src="../assets/rank3.png">
                                </div>
                                <div class="name">名称名称</div>
                            </div>
                        </div>
                        <div class="rank-list">
                            <div class="rank-item">
                                <img src="../assets/headimg.png" alt="" class="img-circle">
                                <div class="name">名称名称</div>
                                <img src="../assets/next.png" class="next">
                            </div>
                            <div class="rank-item">
                                <img src="../assets/headimg.png" alt="" class="img-circle">
                                <div class="name">名称名称</div>
                                <img src="../assets/next.png" class="next">
                            </div>
                            <div class="rank-item">
                                <img src="../assets/headimg.png" alt="" class="img-circle">
                                <div class="name">名称名称</div>
                                <img src="../assets/next.png" class="next">
                            </div>
                        </div>
                        <div class="about">
                            <div class="item">
                                <a href="javascript:void 0;">帮助中心</a>
                                &nbsp;|&nbsp;
                                <a href="javascript:void 0;">常见问题</a>
                                &nbsp;|&nbsp;
                                <a href="javascript:void 0;">关于我们</a>
                            </div>
                            <p>联系客服-邮箱：xxxxxx@xxx.com</p>
                            <p>XX信息技术有限公司</p>
                            <p>powered by XXX THX.法律声明</p>
                            <p>浙ICP备123456789号</p>
                            <p>浙网公安备123456789号</p>
                        </div>
                    </div>
                </scrollbar>
            </div>
        </div>
    </div>
</template>

<script>
    import Scrollbar from './scrollbar/components/scrollbar.vue'
    import Calendar from './Calendar.vue'
    import Updown from './Updown.vue'
    import * as Types from '../store/mutation-types'

    export default{
        data(){
            return {
                attention:10,
                missionList:[{
                    title:'单人翻译',
                    auth:'大明粉',
                    publishTime:'2017-02-11',
                    wordNumber:1000,
                    limitLevel:5,
                    endTime:'24h',
                    money:'200大洋',
                    id:18
                },{
                    title:'多人翻译',
                    auth:'大明粉',
                    publishTime:'2017-02-11',
                    wordNumber:1000,
                    limitLevel:5,
                    endTime:'24h',
                    money:'200大洋',
                    id:1
                },{
                    title:'测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题',
                    auth:'大明粉',
                    publishTime:'2017-02-11',
                    wordNumber:1000,
                    limitLevel:5,
                    endTime:'24h',
                    money:'200大洋'
                },{
                    title:'测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题',
                    auth:'大明粉',
                    publishTime:'2017-02-11',
                    wordNumber:1000,
                    limitLevel:5,
                    endTime:'24h',
                    money:'200大洋'
                },{
                    title:'测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题',
                    auth:'大明粉',
                    publishTime:'2017-02-11',
                    wordNumber:1000,
                    limitLevel:5,
                    endTime:'24h',
                    money:'200大洋'
                },{
                    title:'测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题',
                    auth:'大明粉',
                    publishTime:'2017-02-11',
                    wordNumber:1000,
                    limitLevel:5,
                    endTime:'24h',
                    money:'200大洋'
                },{
                    title:'测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题',
                    auth:'大明粉',
                    publishTime:'2017-02-11',
                    wordNumber:1000,
                    limitLevel:5,
                    endTime:'24h',
                    money:'200大洋'
                },{
                    title:'测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题',
                    auth:'大明粉',
                    publishTime:'2017-02-11',
                    wordNumber:1000,
                    limitLevel:5,
                    endTime:'24h',
                    money:'200大洋'
                },{
                    title:'测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题测试翻译标题',
                    auth:'大明粉',
                    publishTime:'2017-02-11',
                    wordNumber:1000,
                    limitLevel:5,
                    endTime:'24h',
                    money:'200大洋'
                }],
                dynamicList:[{
                    img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492546337062&di=51be958e094bb2fba4601a1d596bed92&imgtype=0&src=http%3A%2F%2Fimg.qq745.com%2Fuploads%2Fallimg%2Fd214f9e82320fab30ba54857dbee2f2e.jpg",
                    user:'王大白',
                    detail:'领取第x个任务',
                    time:'1分钟前',
                    desc:'翻译是你最喜爱的工作，没有之一，为此工作了达数年之久，难道还说不喜爱吗？',
                    wordNumber:500,
                    upCount:5,
                    downCount:0,
                    lv:2,
                    intro:'Translation is your favorite job,no one,to work.',
                    receive:33,
                    follow:22
                },{
                    img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492546337062&di=51be958e094bb2fba4601a1d596bed92&imgtype=0&src=http%3A%2F%2Fimg.qq745.com%2Fuploads%2Fallimg%2Fd214f9e82320fab30ba54857dbee2f2e.jpg",
                    user:'王大白',
                    detail:'领取第x个任务',
                    time:'1分钟前',
                    desc:'翻译是你最喜爱的工作，没有之一，为此工作了达数年之久，难道还说不喜爱吗？',
                    wordNumber:500,
                    upCount:5,
                    downCount:0,
                    lv:2,
                    intro:'Translation is your favorite job,no one,to work.',
                    receive:44,
                    follow:55
                },{
                    img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492546337062&di=51be958e094bb2fba4601a1d596bed92&imgtype=0&src=http%3A%2F%2Fimg.qq745.com%2Fuploads%2Fallimg%2Fd214f9e82320fab30ba54857dbee2f2e.jpg",
                    user:'王大白',
                    detail:'领取第x个任务',
                    time:'1分钟前',
                    desc:'翻译是你最喜爱的工作，没有之一，为此工作了达数年之久，难道还说不喜爱吗？',
                    wordNumber:500,
                    upCount:5,
                    downCount:0,
                    lv:2,
                    intro:'Translation is your favorite job,no one,to work.',
                    receive:44,
                    follow:55
                },{
                    img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492546337062&di=51be958e094bb2fba4601a1d596bed92&imgtype=0&src=http%3A%2F%2Fimg.qq745.com%2Fuploads%2Fallimg%2Fd214f9e82320fab30ba54857dbee2f2e.jpg",
                    user:'王大白',
                    detail:'领取第x个任务',
                    time:'1分钟前',
                    desc:'翻译是你最喜爱的工作，没有之一，为此工作了达数年之久，难道还说不喜爱吗？',
                    wordNumber:500,
                    upCount:5,
                    downCount:0,
                    lv:2,
                    intro:'Translation is your favorite job,no one,to work.',
                    receive:44,
                    follow:55
                },{
                    img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492546337062&di=51be958e094bb2fba4601a1d596bed92&imgtype=0&src=http%3A%2F%2Fimg.qq745.com%2Fuploads%2Fallimg%2Fd214f9e82320fab30ba54857dbee2f2e.jpg",
                    user:'王大白',
                    detail:'领取第x个任务',
                    time:'1分钟前',
                    desc:'翻译是你最喜爱的工作，没有之一，为此工作了达数年之久，难道还说不喜爱吗？',
                    wordNumber:500,
                    upCount:5,
                    downCount:0,
                    lv:2,
                    intro:'Translation is your favorite job,no one,to work.',
                    receive:44,
                    follow:55
                },{
                    img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492546337062&di=51be958e094bb2fba4601a1d596bed92&imgtype=0&src=http%3A%2F%2Fimg.qq745.com%2Fuploads%2Fallimg%2Fd214f9e82320fab30ba54857dbee2f2e.jpg",
                    user:'王大白',
                    detail:'领取第x个任务',
                    time:'1分钟前',
                    desc:'翻译是你最喜爱的工作，没有之一，为此工作了达数年之久，难道还说不喜爱吗？',
                    wordNumber:500,
                    upCount:5,
                    downCount:0,
                    lv:2,
                    intro:'Translation is your favorite job,no one,to work.',
                    receive:44,
                    follow:55
                },{
                    img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492546337062&di=51be958e094bb2fba4601a1d596bed92&imgtype=0&src=http%3A%2F%2Fimg.qq745.com%2Fuploads%2Fallimg%2Fd214f9e82320fab30ba54857dbee2f2e.jpg",
                    user:'王大白',
                    detail:'领取第x个任务',
                    time:'1分钟前',
                    desc:'翻译是你最喜爱的工作，没有之一，为此工作了达数年之久，难道还说不喜爱吗？',
                    wordNumber:500,
                    upCount:5,
                    downCount:0,
                    lv:2,
                    intro:'Translation is your favorite job,no one,to work.',
                    receive:44,
                    follow:55
                }]
            }
        },
        components:{
            Scrollbar,
            Calendar,
            Updown
        },
        mounted(){
//            this.$router.push('/login');
        },
        created(){
            console.log('home created');
            if(!this.user){
                console.log('get user');
                //查询用户信息
                this.$http.get('apiv1/tmembers',{}).then(res => {
                    if(!res.body.code){
                        this.$store.commit(Types.SET_USER,res.body);
                    }
                },res => {

                });
            }
        },
        methods:{
            goPublish(){
                this.$router.push('/publish');
            },
            receive(id){
                this.$router.push('/trans/'+id);
            },
            goUser(){
                this.$router.push('/person/0');
            }
        },
        computed:{
            user(){
                return this.$store.state.user.user;
            },
            englishPercent(){
                var width = Math.round(this.user ? this.user.member_experience : 0 / this.user ? this.user.level_info.level_end : 1 * 10000) / 100.00 + "%";
                return {
                    width:width
                }
            },
            japenPercent(){
                var width = Math.round(this.user ? this.user.member_experience_jp : 0 / this.user ? this.user.level_jp_info.level_end : 1 * 10000) / 100.00 + "%";
                return {
                    width:width
                }
            }
        }
    }
</script>

<style scoped>
    .container{
        position:relative;
        padding-top:222px;
        padding-bottom:0;
        height:100%;
    }

    .qrcode{
        position:absolute;
        display:inline-block;
        width:200px;
        right:-220px;
        top:120px;
    }

    .header-container{
        padding:20px 0;
    }

    .fixed-container{
        padding-bottom:15px;
        padding-left:15px;
        padding-right:15px;
        border-bottom:1px solid #d6d6d6;
        position:absolute;
        top:100px;
        left:0;
        width:100%;
    }

    .exp-container{
        float:left;
    }

    .exp{
        line-height:20px;
    }

    .exp:last-child{
        margin-top:10px;
    }

    .btn-publish{
        width:140px;
        height:40px;
        border-radius: 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;
    }

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

    .exp{
        display:table;
        /*vertical-align: middle;*/
    }

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

    .exp .progress-container{
        display:table-cell;
        vertical-align: middle;
    }

    .exp .progress{
        /*float:left;*/
        margin-left:10px;
        height:15px;
        margin-bottom:0;
        width:500px;
        /*vertical-align: middle;*/
    }

    .notice{
        font-size:16px;
        line-height:1;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .notice img{
        float:left;
        margin-right:5px;
    }

    .sel-container{
        padding-top:10px;
        /*padding-bottom:20px;*/
    }

    .sel-container .form-control{
        border-radius:3px;
    }

    .mission{
        padding:20px 0;
        border-bottom:1px solid #d6d6d6;
        position:relative;
    }

    .mission .title{
        display:block;
        overflow: hidden;
        white-space:nowrap;
        text-overflow: ellipsis;
    }

    .mission .info{
        margin:10px 0;
        color:#999;
        font-size:12px;
        line-height:1;
    }

    .mission .info .auth{
        color:#438eff;
        margin-right:20px;
    }

    .mission .row{
        font-size:12px;
    }

    .mission .row .col-md-4{
        padding-right:0;
    }

    .mission button{
        width:80px;
        position:absolute;
        right:0;
        bottom:20px;
    }

    .dynamic-title{
        padding:15px 0;
        border-bottom:1px solid #d6d6d6;
        line-height:1;
    }

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

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

    .dynamic-title .attention{
        font-size:12px;
        color:#999;
        float:right;
        display:inline-block;
    }

    .dynamic{
        padding:15px 0;
        position:relative;
        border-bottom:1px solid #d6d6d6;
    }

    .dynamic .avator{
        float:left;
        width:36px;
        height:36px;
    }

    .dynamic .avator .thumbnail{
        margin-bottom:0;
        padding:0;
        border-radius:50%;
        overflow:hidden;
    }

    .dynamic .content{
        margin-left:46px;
    }

    .dynamic .content .info{
        margin:10px 0;
        line-height:1;
        position:relative;
    }

    .dynamic .content .info > div.user{
        color:#438eff;
        margin-right:5px;
        cursor:pointer;
    }

    .dynamic .content > .info > div{
        /*float:left;*/
        color:#999;
        display:inline-block;
    }

    .dynamic .content > .info > div.time{
        /*float:right;*/
        font-size:12px;
        color:#999;
        position:absolute;
        right:0;
    }

    .dynamic .content > .desc{
        font-size:16px;
        margin-bottom:10px;
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
    }

    .dynamic .content > .footer{
        line-height:33px;
        font-size:12px;
    }

    .card{
        padding-bottom:10px;
    }

    .card .avator{
        display:inline-block;
        width:48px;
        height:48px;
        float:left;
        border-radius:50%;
    }

    .card .content{
        margin-left:58px;
    }

    .card .content > .info{
        position:relative;
        line-height:1;
        margin-top:5px;
        margin-bottom:10px;
    }

    .card .content > .info > .name{
        font-size:18px;
        /*float:left;*/
        display:inline-block;
    }

    .card .content > .info > .level{
        /*float:right;*/
        font-size:14px;
        line-height:18px;
        position:absolute;
        display:inline-block;
        right:0;
        top:0;
    }

    .card .content > .intro{
        font-size:14px;
        color:#999;
    }

    .card-footer{
        height:50px;
        line-height:50px;
        background-color:#f7f7f7;
        border-top:1px solid #d6d6d6;
        margin:0 -10px -10px -10px;
        padding:10px 0;
    }

    .card-footer .ctn{
        font-size:14px;
        line-height:30px;
        height:30px;
        width:100%;
    }

    .card-footer .ctn > .col{
        width:25%;
        float:left;
        height:100%;
        border-right:1px solid #d6d6d6;
        text-align:center;
    }

    .card-footer .ctn > .col:last-child{
        border-right:none;
    }

    .card-footer .ctn > .col > a{
        color:#000;
    }

    .card-footer .ctn > .col > a:hover{
        text-decoration:none;
    }

    .card-footer .ctn > .col > div{
        line-height:15px;
    }

    .active-title{
        padding:15px 0;
        /*border-bottom:1px solid #d6d6d6;*/
        line-height:1;
    }

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

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

    .sign{
        padding:10px;
        background-color:#f7f7f7;
        border:1px solid #d6d6d6;
        border-top:none;
        text-align:center;
    }

    .sign p{
        margin:0;
        margin-top:10px;
    }

    .rank .rank-block{
        position:relative;
    }

    .rank .rank-block > .medal{
        display:inline-block;
        position:absolute;
        bottom:-20px;
        width:20px;
        left:50%;
        margin-left:-10px;
    }

    .rank .name{
        margin-top:20px;
        text-align:center;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .rank-list{
        margin:20px 0;
        border-top:1px solid #d6d6d6;
        border-bottom:1px solid #d6d6d6;
    }

    .rank-list .rank-item{
        height:48px;
        padding:6px 0;
        line-height:48px;
        border-bottom:1px solid #d6d6d6;
        cursor:pointer;
    }

    .rank-list .rank-item:last-child{
        border-bottom:none;
    }

    .rank-list .rank-item > img.img-circle{
        width:36px;
        height:36px;
        display:inline-block;
        float:left;
    }

    .rank-list .rank-item > .name{
        /*display:inline-block;*/
        line-height:36px;
        float:left;
        margin-left:10px;
    }

    .rank-list .rank-item > img.next{
        display:inline-block;
        margin-top:8px;
        float:right;
        height:20px;
    }

    .about{
        padding:20px;
        background-color:#f7f7f7;
        color:#000;
        text-align:center;
    }

    .about .item{
        margin-bottom:10px;
    }

    .about .item a{
        color:#000;
    }

    .about p{
        font-size:12px;
    }

    .about p:last-child{
        margin:0;
    }

</style>
