flyLong/tv/src/views/Rank.vue

<template>
    <div class="rank">
        <Headside></Headside>
        <div class="rankContainer">
            <div class="lt">
                <div class="recordMain">
                    <el-carousel :interval="30000" height="370px" >
                        <el-carousel-item v-for="rs in recordMain">
                            <h5>{{rs.title}}</h5>
                            <div class="sumContainer">
                                <div class="sum">
                                    <s>{{rs.Unite}}</s>
                                    <em>{{rs.Result}}</em>
                                </div>
                                <span class="sumBg"></span>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="bottom">
                    <el-carousel :interval="15000" height="280px">
                        <el-carousel-item v-for="Rs in bottom">
                            <div class="topOne" v-if="Rs.style == 'topOne'">
                                <h5>{{Rs.title}}</h5>
                                {{bottom.students}}
                                <ul>
                                    <li v-for="(hero,i) in Rs.students">
                                        <div class="dgCenter">
                                            <div class="dghead">
                                                <!--<img v-bind:src="require('../static/img/people/' + topMsg.head)" alt="">-->
                                                <img :id="'circle_'+i"
                                                     v-bind:src="require('../static/img/people/' + hero.head)" alt="">
                                                <s>{{ topMsg.userName }}</s>
                                            </div>
                                            <div class="score">
                                                <em>{{ topMsg.ck }}</em>
                                                <span>
                      打破了历史记录{{ topMsg.topCk }}
                   </span>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="heros" v-if="Rs.style == 'heros'">
                                <h5>{{Rs.title}}</h5>
                                <ul>
                                    <li v-for="(hero,i) in Rs.students">
                                        <img :id="'circle_'+i" v-bind:src="require('../static/img/people/' + hero.head)"
                                             alt="">
                                        <img src="../static/img/rank/boy.png" class="sex" v-if="hero.sex == 1"/>
                                        <img src="../static/img/rank/girl.png" class="sex" v-if="hero.sex == 2"/>
                                        <div>
                                            <em :id="'red_'+i">No.{{i+1}}</em> {{ hero.userName }}
                                        </div>
                                        <span>{{ hero.calorie }} 千卡</span>
                                    </li>
                                </ul>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <div class="rt">
                <el-carousel :interval="15000" height="610px">
                    <el-carousel-item v-for="Rs in rt">
                        <h5>{{Rs.title}}</h5>
                        <ul>
                            <li v-for="s in Rs.students">
                                <img v-bind:src="require('../static/img/people/' + s.head)" alt="">
                                <em>{{s.name}}</em>
                                <s>{{s.ck}}</s>
                            </li>
                        </ul>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>

<script>
    import Headside from '@/components/Headside'
    import {getHello, getClassStat} from '@/api/getApiRes'
    import '../libs/rem';

    let qs = require('qs');
    export default {
        data() {
            return {
                trueDate: false,//真实数据 true false
                fakeNums: 8,//
                unite: '卡路里',
                topMsg: '',
                students: [],
                studentsLimit: [],
                showType: 2,//1 单人
                recordMain:[
                    {title:'本周场馆卡路里总消耗',Result:'1234',Unite:'千卡'},
                    {title:'本月场馆卡路里总消耗',Result:'12345',Unite:'千卡'},
                ],
                bottom:[
                    {
                        title:'单次CK值（新个人记录）',
                        students:this.fakeNewsLimit(),
                        style:'topOne'
                    },
                    {
                        title:'本周卡路里消耗英雄榜',
                        students:this.fakeNewsLimit(),
                        style:'heros'
                    },
                ],
                rt:[
                    {
                        title:'月度CK值排行',
                        students:this.fakeNews(),
                    },
                    {
                        title:'月度卡路里值排行',
                        students:this.fakeNews(),
                    }
                ]
            }
        },
        mounted() {
            if (this.trueDate) {
                this.timer = setInterval(() => {
                    // this.GetgetUserList();
                    this.curgetClassStat();
                }, 1000);
            } else {
                this.students = this.fakeNews();
                this.studentsLimit = this.fakeNewsLimit();
                this.topMsg = this.students[0];
            }
        },
        methods: {
            fakeNews() {
                let item = [];
                for (var i = 0; i < 7; i++) {
                    item.push(
                        {
                            "hubId": 0,
                            "deviceId": 22756,
                            "calorie": 96.5,
                            "heartRate": i * 5,
                            "step": i * 40,
                            "userName": "杨东艳",
                            "userNmae": "杨东艳",
                            "name": "杨东艳",
                            "updateTime": 1604568915582,
                            "activePercent": i * 5,
                            "ck": 115.9 - i,
                            "head": 'gc.png'
                        }
                    )
                }
                return item;
            },
            fakeNewsLimit() {
                let item = [];
                for (var i = 0; i < 3; i++) {
                    item.push(
                        {
                            "hubId": 0,
                            "deviceId": 22756,
                            "calorie": 999.5,
                            "heartRate": i * 5,
                            "step": i * 40,
                            "userName": "杨东艳",
                            "userNmae": "杨东艳",
                            "name": "杨东艳",
                            "updateTime": 1604568915582,
                            "activePercent": i * 5,
                            "ck": i + 115.1,
                            "sex": 1,
                            "head": 'gc.png'
                        }
                    )
                }
                return item;
            },
            GetgetUserList() {
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                getHello(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.topMsg = json.Rs[0];
                        that.students = json.Rs;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            curgetClassStat() {
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                getClassStat(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        // 上课了
                        if (json.ClassOn) {
                            that.$router.push({path: '/'});
                        }
                    } else {
                        // that.$message.error(json.Memo);
                    }
                })
            },
        },
        watch: {
            '$route': function (val) {
                if (val.path == '/rank') {
                    if (this.trueDate) {
                        this.timer = setInterval(() => {
                            // this.GetgetUserList();
                            this.curgetClassStat();
                        }, 1000);
                    } else {
                        this.students = this.fakeNews();
                        this.topMsg = this.students[0];
                    }
                } else {
                    clearInterval(this.timer);
                }
            }
        },
        components: {
            Headside
        }
    }
</script>

<style scoped>
    .rank {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../static/img/rankBg.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .rankContainer {
        width: 90%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .rankContainer .lt {
        width: 60%;
        height: 100%;
        float: left;
    }

    .rankContainer .rt {
        width: 40%;
        float: right;
    }

    .rankContainer .lt .recordMain h5 {
        font-family: Roboto;
        font-weight: normal;
        font-size: 0.6rem;
        text-align: left;
        color: #fff;
        margin: 5% auto;
    }

    .rankContainer .sum {
        position: relative;
        top: -0.4rem;
        width: 100%;
        height: 35%;
        overflow: visible;
        display: block;
        margin: 0 auto;
        text-align: center;
        z-index: 666;
    }

    .sumBg {
        position: relative;
        bottom: 2.3rem;
        width: 100%;
        height: 2rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../static/img/pingtai.png") bottom center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .sum em {
        float: right;
        font-weight: 900;
        font-family: Roboto;
        font-weight: 900;
        font-size: 3rem;
        text-align: right;
        color: #fff;
        font-style: normal;
        text-shadow: #E85297 5px 0 0, #E85297 0 5px 0, #E85297 -5px 0 0, #E85297 0 -5px 0;
    }

    .sum s {
        position: relative;
        bottom: -2rem;
        width: 2rem;
        float: right;
        font-style: normal;
        font-family: Roboto;
        font-weight: normal;
        font-size: 44px;
        text-align: center;
        color: #fff;
        text-decoration: none;
    }

    .sumContainer {
        width: 100%;
        height: 4rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .topOne {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .topOne h5 {
        font-family: Roboto;
        font-weight: normal;
        font-size: 0.4rem;
        text-align: left;
        color: #fff;
        margin: 1% 0;
    }

    ul, li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .topOne ul {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-left: 2px;
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
    }

    .topOne li {
        width: 33.3%;
        float: left;
    }

    .topOne .dgCenter {
        width: 93%;
        overflow: hidden;
        float: left;
        border-radius: 5px;
        background: rgba(0.0 .0 .0 .1);
        box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
    }

    .dgCenter .dghead {
        width: 40%;
        float: left;
    }

    .dghead img {
        width: 1rem;
        height: 1rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding: 3px;
        border-radius: 250px;
        border: 2px solid #fff;
    }

    .dghead s {
        width: 100%;
        overflow: hidden;
        display: block;
        font-weight: normal;
        font-size: 0.3rem;
        text-align: center;
        color: #fff;
        font-style: normal;
        text-decoration: none;
        margin-top: 0.2rem;
    }

    .score {
        width: 60%;
        float: right;
    }

    .score em {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-family: Roboto;
        font-weight: bold;
        font-size: 0.7rem;
        text-align: center;
        color: #fff;
        font-style: normal;
        height: 1.4rem;
        line-height: 1.4rem;
    }

    .score span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-family: Roboto;
        font-weight: normal;
        font-size: 0.2rem;
        color: #fff;
        text-align: center;
    }

    .rt {
        padding-top: 0.6rem;
    }

    .rt h5 {
        font-family: Roboto;
        font-weight: normal;
        font-size: 36px;
        text-align: center;
        color: #fff;
        margin: 0;
        margin-bottom: 0.6rem;
        text-indent: 0.2rem;
    }

    .rt ul {
        width: 80%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .rt li {
        width: 80%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-bottom: 0.24rem;
        padding: 0.1rem 4%;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
    }

    .rt li img {
        width: 0.6rem;
        height: 0.6rem;
        filter: drop-shadow(0px 0px 6px #bf00ff);
        border: 2px solid #fff;
        float: left;
        border-radius: 250px;
        margin-right: 3%;
    }

    .rt li em {
        font-family: Roboto;
        font-weight: normal;
        font-size: 0.35rem;
        text-align: center;
        color: #fff;
        font-style: normal;
        float: left;
        height: 0.6rem;
        line-height: 0.6rem;
    }

    .rt li s {
        font-family: Roboto;
        font-weight: normal;
        font-size: 0.35rem;
        text-align: right;
        color: #fff;
        text-decoration: none;
        height: 0.6rem;
        line-height: 0.6rem;
        float: right;
    }

    .heros > h5 {
        font-family: Roboto;
        font-weight: normal;
        font-size: 0.35rem;
        text-align: left;
        color: #fff;
        margin: 1% 0;
    }

    .heros ul {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-left: 3px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .heros li {
        width: 2.5rem;
        height: 2.35rem;
        float: left;
        border-radius: 5px;
        background: rgba(0.0 .0 .0 .1);
        box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        color: #fff;
        font-size: 0.3rem;
        text-align: center;
        margin-right: 5%;
    }

    .heros li > img {
        width: 1.2rem;
        height: 1.2rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-bottom: 0.2rem;
        border-radius: 100%;
        border: 2px solid #fff;
    }

    .heros li > img.sex {
        position: relative;
        top: -1.5rem;
        right: 0.55rem;
        width: 0.4rem;
        height: 0.4rem;
        overflow: hidden;
        float: right;
        border: none;

    }

    .heros li em {
        font-family: Roboto;
        font-weight: bold;
        font-size: 30px;
        text-align: center;
        font-style: normal;
    }

    .heros li em#red_0 {
        color: #FA5114;
    }

    .heros li em#red_1 {
        color: #FA981F;
    }

    .heros li em#red_2 {
        color: #FFE13C;
    }

    .heros li #circle_0 {
        border: 2px solid #FA5114;
    }

    .heros li #circle_1 {
        border: 2px solid #FA981F;

    }

    .heros li #circle_2 {
        border: 2px solid #FFE13C;

    }

    .heros li div {
        position: relative;
        top: -0.7rem;
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    .heros li span {
        position: relative;
        top: -0.67rem;
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .bottom {
        position: relative;
        width: 100%;
        padding-top: 0.1rem;
        bottom: 0.2rem;
    }

    /deep/ .el-carousel__indicators--horizontal {
        display: none;
    }
</style>