flyLong/tv/src/views/pk.vue

<template>
    <div class="pages">
        <Headside></Headside>

        <div class="pk-detail-con">
            <img src="../assets/img/pk/redGood.svg" class="lp_icon"/>
            <div class="progress">
                <div class="progress-bar" :style="{width: pkVal}">
                    <i class="lightning"></i>
                </div>
            </div>
            <img src="../assets/img/pk/blueGood.svg" class="rp_icon"/>
        </div>

        <div class="pk_container">
            <div class="lt">
                <ul>
                    <li :class="RedstudentsClassName" v-for="(s,i) in students.redUnite">
                        <div class="bg">
                            <h5>
                                <div class="nameLt">
                                    <i class="el-icon-male" v-if="s.Sex == 1"></i>
                                    <i class="el-icon-female" v-if="s.Sex == 2"></i>
                                </div>
                                <div class="nameMd">{{ s.Name }}</div>
                                <div class="namert"></div>
                            </h5>
                            <div class="user">
                                <div class="ult">
                                    <em>
                                        <div v-if="s.realHr != 0">{{ s.activePercent |max100}}</div>
                                        <div class="plus" v-if="s.activePercent == 0 && s.realHr == 0">---</div>
                                        <s>%</s>
                                    </em>
                                </div>
                                <div class="umd">
                                    <div class="circle">
                                        <img :class="s.sportLevel" :src="s.Head" alt="" v-if="s.Head">
                                        <img :class="s.sportLevel" src="../static/img/people/flyhead.png" alt=""
                                             v-if="!s.Head">
                                    </div>
                                    <!-- 生日快乐 -->
                                    <div class="birth" v-if="s.IsBirthday == 1">
                                        <img src="../assets/img/birth/birthCrow.png" class="birthCrow"/>
                                        <img src="../assets/img/birth/birthText.png" class="birthText"/>
                                    </div>
                                </div>
                                <div class="urt">
                                    <em class="fastJump" v-if="s.realHr != 0" v-show="parseInt(s.activePercent) > 90">{{
                                        s.realHr }}</em>
                                    <em class="slowJump" v-if="s.realHr != 0" v-show="parseInt(s.activePercent) <= 90">{{
                                        s.realHr }}</em>
                                    <em class="plus" v-if="s.realHr == 0"> --- </em>
                                    <img src="../static/img/heart.svg" class=""/>
                                </div>
                            </div>
                            <div class="bottomLi">
                                <div class="btcla">
                                    <img src="../static/img/s1.svg"/>
                                    <span>{{ s.Cle |fmtInt }}</span>
                                </div>
                                <div class="btck">
                                    <img src="../static/img/s2.svg"/>
                                    <span>{{ s.PureCalorieNoVo2  |fmtInt }}</span>
                                </div>
                                <div class="step">
                                    <img src="../static/img/ck.svg"/>
                                    <span>{{ s.Ck  |fmtFloat}}</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="md">
                <div class="partInfo">
                        <span class="title rtitle">
                        <img src="../assets/img/pk/redFlag.svg"/>
                        CK
                        </span>

                    <span class="title btitle">
                        <img src="../assets/img/pk/blueFlag.svg"/>
                        CK
                        </span>
                </div>
                <div class="cubelist">
                    <div class="cubes rcube">
                        <em>红队</em>
                    </div>
                    <img class="vs" src="../assets/img/pk/vs.svg"/>
                    <div class="cubes bcube">
                        <em>蓝队</em>
                    </div>
                </div>
                <div class="teamScore">
                    <div class="lt">{{redSum}}</div>
                    <div class="rt">{{blueSum}}</div>
                </div>

                <div class="bottomInfo">
                    <span class="names">
                        {{PlanName}}
                    </span>
                    <div class="teacher">
                        <br>
                        <span>人数：{{num}}</span>
                    </div>
                    <div class="classTime">
                        {{classInfo.endTime}}
                    </div>
                </div>
            </div>
            <div class="rt">
                <ul>
                    <li :class="BluestudentsClassName" v-for="(s,i) in students.blueUnite">
                        <div class="bg">
                            <h5>
                                <div class="nameLt">
                                    <i class="el-icon-male" v-if="s.Sex == 1"></i>
                                    <i class="el-icon-female" v-if="s.Sex == 2"></i>
                                </div>
                                <div class="nameMd">{{ s.Name }}</div>
                                <div class="namert"></div>
                            </h5>
                            <div class="user">
                                <div class="ult">
                                    <em>
                                        <div v-if="s.realHr != 0">
                                            {{ s.activePercent |max100 }}
                                        </div>
                                        <div class="plus" v-if="s.activePercent == 0&& s.realHr == 0">
                                            ---
                                        </div>
                                        <s>%</s>
                                    </em>
                                </div>
                                <div class="umd">
                                    <div class="circle">
                                        <img :class="s.sportLevel" :src="s.Head" alt="" v-if="s.Head">
                                        <img :class="s.sportLevel" src="../static/img/people/flyhead.png" alt=""
                                             v-if="!s.Head">
                                        <!-- 生日快乐 -->
                                        <div class="birth" v-if="s.IsBirthday == 1">
                                            <img src="../assets/img/birth/birthCrow.png" class="birthCrow"/>
                                            <img src="../assets/img/birth/birthText.png" class="birthText"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="urt">
                                    <em class="fastJump" v-if="s.realHr != 0" v-show="parseInt(s.activePercent) > 90">{{
                                        s.realHr }}</em>
                                    <em class="slowJump" v-if="s.realHr != 0" v-show="parseInt(s.activePercent) <= 90">{{
                                        s.realHr }}</em>
                                    <em class="plus" v-if="s.realHr == 0"> --- </em>
                                    <img src="../static/img/heart.svg" class=""/>
                                </div>
                            </div>
                            <div class="bottomLi">
                                <div class="btcla">
                                    <img src="../static/img/s1.svg"/>
                                    <span>{{ s.Cle |fmtInt }}</span>
                                </div>
                                <div class="btck">
                                    <img src="../static/img/s2.svg"/>
                                    <span>{{ s.PureCalorieNoVo2  |fmtInt}}</span>
                                </div>
                                <div class="step">
                                    <img src="../static/img/ck.svg"/>
                                    <span>{{ s.Ck  |fmtFloat}}</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

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

    let qs = require('qs');
    export default {
        data() {
            return {
                trueDate: true,//真实数据 true false
                studentsClassName: [],
                students: {
                    redUnite: [],
                    blueUnite: [],
                },
                redSum: 0,
                blueSum: 0,
                pkVal: '50%',
                RedstudentsClassName: '',
                BluestudentsClassName: '',
                PlanName: '',
                num: 0,
                classInfo: {
                    name: '竞技课程',
                    num: '0',
                    btTime: '2020-11-13 09:00:00',//时间戳
                    endTime: '00:00:00',
                    redSum: 0,
                    blueSum: 0,
                }
            }
        },
        mounted() {
            let that = this;
            if (this.trueDate) {
                this.PkTimer = setInterval(() => {
                    this.GetgetUserList();
                    this.curgetClassStat();
                }, 1000);
                this.GetgetUserList();

                // this.PkEgg = setInterval(() => {
                //     this.createEgg();
                // }, 6000);

            } else {
                // 虚假的数据
                let json = {
                    "Code": "0",
                    "Memo": "Success",
                    "Dp": {
                        "PlanId": 182,
                        "ShopId": 1,
                        "SvId": 1,
                        "PlanName": "齐源大厦浏览器显示2020-12-02日08:40开始的竞技游戏",
                        "Status": 2,
                        "BeginTime": "17:15:18",
                        "EndTime": 0,
                        "ClassType": 2,
                        "PkNum": 2
                    }
                };
                // 载入课程信息
                let Dp = json.Dp;
                that.ReadLessonInfo(Dp);
                // 载入学生信息
                let Rs = fakeNews(14, 2);
                that.UniteBreak(Rs);

                // 人口总数
                that.num = json.Rs ? json.Rs.length : 0;
                this.ClacClassTime();
            }
        },
        watch: {
            '$route': function (val) {
                let that = this;
                if (val.path == '/pk') {
                    if (this.trueDate) {
                        this.PkTimer = setInterval(() => {
                            this.GetgetUserList();
                            this.ClacClassTime();
                            this.curgetClassStat();
                        }, 1000);
                        this.GetgetUserList();
                        // this.PkEgg = setInterval(() => {
                        //     this.createEgg();
                        // }, 6000);

                    } else {
                        let Rs = fakeNews(16);
                        that.UniteBreak(Rs);
                    }
                } else {
                    clearInterval(this.PkTimer);
                    clearInterval(this.PkEgg);
                }
            }
        },
        beforeDestroy() {
            clearInterval(this.PkTimer);
            clearInterval(this.PkEgg);
            this.PkTimer = null;
            this.PkEgg = null;
        },
        methods: {
            // 载入课程信息
            ReadLessonInfo(Dp) {
                this.PlanName = Dp.PlanName;
                this.BeginTime = Dp.BeginTime;
            },
            // 分队展示
            UniteBreak(Rs) {
                let that = this;
                that.students.redUnite = [];
                that.students.blueUnite = [];
                if (!Rs) {
                    that.students.redUnite = [];
                    that.students.blueUnite = [];
                } else {
                    Rs.map(function (item, t) {
                        item.sportLevel = sportLevel(item.activePercent);
                        if (item.GroupNo == 1) {
                            that.students.redUnite.push(item);
                        }
                        if (item.GroupNo == 2) {
                            that.students.blueUnite.push(item);
                        }
                    })

                }
                that.giveClassName(that.students.redUnite, 1);
                that.giveClassName(that.students.blueUnite, 2);
                that.calcSumCK(that.students);
            },
            // 计算各队总分
            calcSumCK(Rs) {
                let that = this;
                let redSum = 0;
                let blueSum = 0;
                // that.redSum
                Rs.redUnite.map(function (item, t) {
                    redSum += parseFloat(item.Ck);
                });
                Rs.blueUnite.map(function (item, t) {
                    blueSum += parseFloat(item.Ck);
                });
                that.redSum = redSum.toFixed(1);
                that.blueSum = blueSum.toFixed(1);

                // 进度条 formatCk
                let redFmtSum = 0;
                let blueFmtSum = 0;
                Rs.redUnite.map(function (item, t) {
                    redFmtSum += item.formatCk
                });
                Rs.blueUnite.map(function (item, t) {
                    blueFmtSum += item.formatCk
                });

                // pkVal
                let sumMax = redFmtSum + blueFmtSum;

                // 当为0时均分
                if (sumMax == 0) {
                    that.pkVal = '50%';
                } else {
                    // 限制最大
                    let pkval = parseInt((redFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((redFmtSum / sumMax) * 100);
                    that.pkVal = pkval + '%';
                }
            },
            // 获取上课学生信息
            GetgetUserList() {
                let that = this;
                let param = {
                    token: localStorage.token,
                    eqSn: localStorage.eqSn
                };
                // this.giveClassName(this.Bluestudents,2);
                let postdata = qs.stringify(param);
                getHello(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        if (!json.Dp) {
                            // that.$message.error('没有获取到课程信息');
                            return false
                        } else {
                            that.ReadLessonInfo(json.Dp);
                        }
                        that.UniteBreak(json.Rs);

                        // 人口总数
                        that.num = json.Rs.length ? json.Rs.length : 0;
                        this.ClacClassTime();
                    } else {
                        // 已下课
                        console.log(json.Code);
                        if (json.Code == '999') {
                            // that.$router.push({path: '/2pkRank'});
                        } else {
                            // 已出错
                            that.$message.error(json.Memo);
                        }
                    }
                })
            },
            // 动态计算排版
            giveClassName(res, type) {
                let that = this;
                let numberClass = '';
                switch (true) {
                    case  parseInt(res.length) <= 2 && parseInt(res.length) > 0:
                        numberClass = 'two';
                        break;
                    case  parseInt(res.length) == 3:
                        numberClass = 'three';
                        break;
                    case  parseInt(res.length) <= 4 && parseInt(res.length) > 2:
                        numberClass = 'four';
                        break;
                    case  parseInt(res.length) <= 6 && parseInt(res.length) > 4:
                        numberClass = 'four';
                        break;
                    case  parseInt(res.length) > 6:
                        numberClass = 'eight';
                        break;
                }
                if (type == 1) {
                    that.RedstudentsClassName = numberClass;
                } else {
                    that.BluestudentsClassName = numberClass;
                }
            },
            // 计算团队竞技课持续时间
            ClacClassTime() {
                let BeginTime = new Date(globalcurrent() + ' ' + this.BeginTime);//结束时间
                let nowDate = new Date();
                let date = new Date(nowDate - BeginTime - 8 * 60 * 60 * 1000);//减掉东八区时区问题

                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                this.classInfo.endTime = h + m + s;
            },
            // // 计算双方对抗强度加总
            // CalcTeamCk() {
            //     let that = this;
            //     let Redsum = 0;
            //     let Bluesum = 0;
            //     let sumMax = 0;
            //     if (that.Redstudents) {
            //         that.Redstudents.map(function (i) {
            //             Redsum = parseFloat(Redsum) + parseFloat(i.Ck)
            //         });
            //     }
            //     if (that.Bluestudents) {
            //         that.Bluestudents.map(function (i) {
            //             Bluesum = parseFloat(Bluesum) + parseFloat(i.Ck)
            //         });
            //     }
            //     that.classInfo.redSum = parseFloat(Redsum).toFixed(1);
            //     that.classInfo.blueSum = parseFloat(Bluesum).toFixed(1);
            //
            //     sumMax = parseFloat(Redsum) + parseFloat(Bluesum);
            //     that.classInfo.pkVal = (that.classInfo.redSum / sumMax) * 100 + '%';
            // },
            // 当前课程状态
            curgetClassStat() {
                let that = this;
                let param = {
                    token: localStorage.token,
                    eqSn: localStorage.eqSn
                };
                let postdata = qs.stringify(param);
                getClassStat(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        // 没开课
                        if (json.ClassOn == 0) {
                            console.log("xiakele ");
                            // 0: 下课 团课/私教 排名
                            // 1：团课/私教 todo
                            // 2：竞技课2PK
                            // 3：竞技课3PK
                            that.$router.push({path: '/2pkRank'});
                            switch (parseInt(json.dp)) {
                                case 2:
                                    that.$router.push({path: '/2pkRank'});
                                    break;
                            }
                        }
                    } else {
                        // that.$message.error(json.Memo);
                    }
                })
            },
        },
        filters: {
            fmtNum(val) {
                if (val == 0) {
                    return '--'
                } else {
                    if (parseInt(val) < 0) return 0;
                    if (parseInt(val) > 0) return val
                }
            },
            fmtFloat(val) {
                if (val == 0) {
                    return '0.0'
                } else {
                    return parseFloat(val).toFixed(1);
                }
            },
            fmtInt(val) {
                if (val == 0) {
                    return '0'
                } else {
                    return parseInt(val);
                }
            },
            max100(val) {
                if (val <= 100) {
                    return val
                } else {
                    return 100
                }
            }
        },
        components: {
            Headside
        }
    }
</script>

<style scoped>
    @import "../assets/css/bg.css";

    .pages {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background-color: #028fe1;
        background: url("../static/img/pkBg.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }

    * {
        font-family: vista;
    }


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

    em {
        font-style: normal;
    }


    .pk-detail-con {
        position: relative;
        top: 0.5rem;
        width: 98%;
        height: 0.6rem;
        display: block;
        margin: 0 auto;
        overflow: visible;
    }

    .progress {
        width: 100%;
        height: 0.3rem;
        overflow: visible;
        background-color: #04A6EE;
        border-radius: 19px;
        background-image: url("../static/img/pk/blue.png");
        /*background-image: linear-gradient(45deg, #60b7ff 25%, #0a84e9 0, #0a84e9 50%, #60b7ff 0, #60b7ff 75%, #0a84e9 0);*/
        /*background-size: 40px 40px;*/
    }

    .progress-bar {
        height: 0.3rem;
        text-align: left;
        background-color: #F75E07;
        -moz-transition: width .6s ease;
        -webkit-transition: width .6s ease;
        transition: width .6s ease;
        background-image: url("../static/img/pk/red.png");

        /*background-image: linear-gradient(45deg, #ff9960 25%, #f75e07 0, #f75e07 50%, #ff9960 0, #ff9960 75%, #f75e07 0);*/
        /*background-size: 40px 40px;*/
    }

    .progress, .progress-bar {

        /*background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);*/
        /*background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);*/
        /*background-image: linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);*/
    }

    .lightning {
        position: relative;
        top: -0.5rem;
        width: 1rem;
        height: 1.3rem;
        float: right;
        margin-right: -0.5rem;
        background: url("../static/img/pk/light.png") no-repeat center;
        background-size: cover;

    }

    .lp_icon {
        position: absolute;
        left: -0.1rem;
        top: -0.3rem;
        width: 0.8rem;
        height: 0.8rem;
        float: left;
    }

    .rp_icon {
        position: absolute;
        right: 0;
        top: -0.3rem;
        width: 0.8rem;
        height: 0.8rem;
        float: right;
    }

    .pk_container {
        width: 98%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .pk_container .lt {
        width: 35%;
        float: left;
    }

    .pk_container .rt {
        width: 35%;
        float: right;
    }

    .pk_container .md {
        width: 30%;
        float: left;
    }

    .pk_container ul {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-top: 0.01rem;
    }

    .pk_container li {
        overflow: hidden;
        color: #fff;
        margin-bottom: 0.1rem;
    }

    .pk_container .lt li {
        overflow: hidden;
    }

    .pk_container .rt li {
        overflow: hidden;
    }

    .pk_container .lt .bg {
        border: 2px solid rgba(255, 143, 122, 0.5);
        background: rgba(194, 36, 6, 0.5);
    }

    .pk_container .rt .bg {
        border: 2px solid rgba(80, 115, 255, 0.5);
        background: rgba(0, 30, 152, 0.5);
    }


    .pk_container li .bg > h5 {
        font-family: vista;
        font-weight: 500;
        font-size: 0.3rem;
        text-align: center;
        color: #fff;
        margin: 0;
        margin-top: 0.1rem;
        margin-bottom: 0.1rem;
    }

    .bg > h5 div {
        float: left;
        width: 20%;
        text-align: left;
        text-indent: 0.1rem;
    }

    .bg > h5 .nameMd {
        width: 60%;
        text-align: center;
        text-indent: 0;
    }

    .pk_container li .user {
        width: 100%;
        overflow: visible;
        display: block;
        margin: 0 auto;
    }

    .pk_container .user .ult {
        width: 33.333%;
        float: left;
        overflow: visible;
        flex-direction: column;
    }

    .pk_container .user .umd {
        width: 33.333%;
        float: left;
        overflow: visible;
        flex-direction: column
    }

    .pk_container .user .urt {
        width: 33.333%;
        float: right;
        flex-direction: column;
    }

    .centerLi .slowJump {
        animation: mymove 3s infinite;
        -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
        animation-direction: alternate; /*轮流反向播放动画。*/
        animation-timing-function: ease-in-out; /*动画的速度曲线*/
        /* Safari 和 Chrome */
        -webkit-animation: mymove 3s infinite;
        -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    }

    .user .ult span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 0.3rem;
        text-align: center;
    }

    .user .ult em {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .user .ult em div {
        width: 80%;
        overflow: hidden;
        float: right;
        text-align: right;
        padding-right: 0.3rem;
        font-size: 0.8rem;
        line-height: 1.6rem;
    }

    .user .ult s {
        position: relative;
        top: -1.2rem;
        right: 0rem;
        float: right;
        font-family: HeadLineA;
        font-weight: normal;
        font-size: 0.3rem;
        text-align: center;
        text-decoration: none;
    }

    .circle {
        width: 1.7rem;
        height: 1.7rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border-radius: 250px;
        padding-top: 0.09rem;
    }

    .user .umd img {
        width: 1.5rem;
        height: 1.5rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border-radius: 250px;
        border: 0.1rem solid #B9CB01;
    }


    .urt img {
        position: relative;
        right: 0.1rem;
        top: -1.2rem;
        width: 0.35rem;
        height: 0.35rem;
        float: right;
    }

    .urt em {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-family: HeadLineA;
        font-weight: normal;
        font-size: 0.7rem;
        letter-spacing: -0.05em;
        text-align: right;
        font-style: normal;
        line-height: 1.5rem;
        padding-right: 25%;
    }

    .bottomLi {
        width: 98%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-weight: normal;
        color: #fff;
        text-align: center;
        font-size: 0.4rem;
        text-indent: 0.2rem;
    }

    .bottomLi img {
        /*width: 0.24rem;*/
        /*height: 0.24rem;*/
        float: left;
        margin-left: 10%;
    }

    .bottomLi span {
        float: left;
        text-align: left;
    }

    .bottomLi .btcla {
        width: 30%;
        float: left;
        text-align: left;
    }

    .bottomLi .btck {
        width: 40%;
        float: left;
        text-align: left;
    }

    .bottomLi .step {
        width: 30%;
        float: right;
        text-align: left;
    }

    @keyframes mymove {
        0% {
            transform: scale(1); /*开始为原始大小*/
        }
        25% {
            transform: scale(1.2); /*放大1.1倍*/
        }
        50% {
            transform: scale(1);
        }
        75% {
            transform: scale(1.2);
        }

    }

    @-webkit-keyframes mymove /*Safari and Chrome*/
    {
        0% {
            transform: scale(1); /*开始为原始大小*/
        }
        25% {
            transform: scale(1.2); /*放大1.1倍*/
        }
        50% {
            transform: scale(1);
        }
        75% {
            transform: scale(1.2);
        }
    }


    .md {
        width: 30%;
        overflow: hidden;
        float: left;
    }

    .partInfo {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-top: 1rem;
    }

    .partInfo .rp, .partInfo .bp {
        width: 50%;
        float: left;
    }

    .partInfo .title {
        width: 33%;
        overflow: hidden;
        display: block;
        margin: 0;
        font-size: 0.4rem;
        color: #fff;
        text-align: left;
    }

    .rtitle {
        float: left;
        padding-left: 0.25rem;
    }

    .partInfo .btitle {
        width: 30%;
        float: right;
    }

    .partInfo .title img {
        width: 0.4rem;
        float: left;
        margin-right: 0.2rem;
    }

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

    .cubelist .cubes {
        width: 33%;
        height: 2rem;
        overflow: hidden;
        float: left;
        background-position: top center;

    }

    .cubelist .vs {
        width: 33%;
        height: 2rem;
        overflow: hidden;
        float: left;
    }

    .cubelist .cubes em {
        width: 80%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: center;
        font-size: 0.3rem;
        font-style: normal;
        color: #fff;
        line-height: 2rem;
    }

    .cubes.rcube {
        background: url("../static/img/pk/rcube.png");
        background-size: 100% 100%;
    }

    .cubes.bcube {
        background: url("../static/img/pk/bcube.png");
        background-size: 100% 100%;
    }

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

    .teamScore div {
        width: 50%;
        float: left;
        text-align: center;
        color: #fff;
        font-size: 0.6rem;
    }

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

    .bottomInfo .names {
        width: 98%;
        height: 0.6rem;
        border-radius: 36px;
        background: #0925b4;
        border: 2px solid rgba(255, 255, 255, 0.5);
        font-size: 0.4rem;
        font-family: Roboto;
        font-weight: normal;
        text-align: center;
        color: #e1ff00;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 0.2rem;
    }

    .teacher {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 0.1rem;
        margin-bottom: 0.1rem;
        color: #fff;
        font-size: 0.3rem;
    }

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

    .classTime {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #fff;
        text-align: center;
    }

    .fastJump {
        animation: mymove 1s infinite;
        -webkit-animation: mymove 1s infinite; /*Safari and Chrome*/
        animation-direction: alternate; /*轮流反向播放动画。*/
        animation-timing-function: ease-in-out; /*动画的速度曲线*/
        /* Safari 和 Chrome */
        -webkit-animation: mymove 1s infinite;
        -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    }

    .slowJump {
        animation: mymove 2s infinite;
        -webkit-animation: mymove 2s infinite; /*Safari and Chrome*/
        animation-direction: alternate; /*轮流反向播放动画。*/
        animation-timing-function: ease-in-out; /*动画的速度曲线*/
        /* Safari 和 Chrome */
        -webkit-animation: mymove 3s infinite;
        -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    }

    /*two*/
    .pk_container li.two {
        width: 90%;
        overflow: hidden;
        display: block;
    }

    .two .bottomLi {
        width: 98%;
        font-size: 0.35rem;
        margin-top: 0.3rem;
        text-align: center;
    }

    .two .bottomLi img {
        width: 0.4rem;
        height: 0.4rem;
        margin-top: 0.15rem;
    }

    .two .bottomLi .btck img {
        width: 0.4rem;
        margin-top: 0.1rem;
    }

    .two .bottomLi span {
        line-height: 0.8rem;
        text-indent: 0.1rem;
    }

    .two .bottomLi .btcla {
        width: 30%;
    }

    .two .bottomLi .btck {
        width: 33%;
        padding-left: 3%;
    }

    .two .bottomLi .step {
        width: 28%;
        padding-right: 0%;
    }

    .two .cla em.plus {
        position: relative;
        left: -0.3rem
    }

    .two .lhj span.plus {
        position: relative;
        left: 1.3rem
    }

    .two .bottomLi .btck img {
        width: 0.5rem;
        height: 0.5rem;
        margin-top: 0.12rem;
    }

    .two .urt img {
        width: 0.3rem;
        height: 0.3rem;
    }

    /*three*/

    .pk_container li.three {
        width: 90%;
        overflow: hidden;
        display: block;
    }

    .three .bottomLi {
        width: 98%;
        font-size: 0.35rem;
        margin-top: 0rem;
        text-align: center;
    }

    .three .circle {
        width: 1.2rem;
        height: 1.2rem;
    }

    .three .circle img {
        width: 0.9rem;
        height: 0.9rem;
    }

    .three .user {
        height: 1.2rem;
        overflow: hidden;
    }

    .three .ult em div {
        line-height: 1.2rem;
    }

    .three .urt em {
        line-height: 1.2rem;
    }

    .three .bottomLi img {
        width: 0.4rem;
        height: 0.4rem;
        margin-top: 0.15rem;
    }

    .three .bottomLi .btck img {
        width: 0.4rem;
        margin-top: 0.1rem;
    }

    .three .bottomLi span {
        line-height: 0.8rem;
        text-indent: 0.1rem;
    }

    .three .bottomLi .btcla {
        width: 30%;
    }

    .three .bottomLi .btck {
        width: 33%;
        padding-left: 3%;
    }

    .three .bottomLi .step {
        width: 28%;
        padding-right: 0%;
    }

    .three .cla em.plus {
        position: relative;
        left: -0.3rem
    }

    .three .lhj span.plus {
        position: relative;
        left: 1.3rem
    }

    .three .bottomLi .btck img {
        width: 0.5rem;
        height: 0.5rem;
        margin-top: 0.12rem;
    }


    /*four*/
    .four {
        width: 49%;
        float: left;
    }

    .four .bg {
        width: 96%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .pk_container li.four .bg > h5 {
        font-size: 0.25rem;
    }

    .four .user .ult span {
        font-size: 0.2rem;
    }

    .four .user .ult em div {
        width: 90%;
        font-size: 0.5rem;
        line-height: 1rem;
        padding-right: 0.2rem;
    }

    .four .user .ult s {
        font-size: 0.2rem;
        line-height: 1rem;
        height: 1rem;
        overflow: hidden;
    }

    .four .user .ult em {
        height: 1.1rem;
    }

    .four .circle {
        width: 1rem;
        height: 1rem;
    }

    .four .user .umd img {
        width: 0.8rem;
        height: 0.8rem;
    }

    .four .urt img {
        width: 0.15rem;
        height: 0.15rem;
        top: -0.8rem;
    }

    .four .urt em {
        font-size: 0.4rem;
        line-height: 1rem;
    }

    .four .bottomLi {
        width: 100%;
        text-indent: 0.1rem;
        font-size: 0.2rem;
    }

    .four .bottomLi img {
        width: 0.2rem;
        height: 0.2rem;
    }

    .four .bottomLi span {
        width: 60%;
    }

    .four .user {
        height: 1.2rem;
        overflow: hidden;
    }

    /*six*/


    /*eight*/
    .eight {
        width: 49%;
        float: left;
    }

    .eight .bg {
        width: 96%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .pk_container li.eight .bg > h5 {
        font-size: 0.25rem;
        margin: 0.01rem 0;
    }

    .eight .user .ult span {
        font-size: 0.2rem;

    }

    .eight .user .ult em div {
        width: 90%;
        margin-right: 0rem;
        font-size: 0.5rem;
        line-height: 1rem;
        padding-right: 0.2rem;
    }

    .eight .user .ult s {
        font-size: 0.2rem;
        line-height: 1rem;
    }

    .eight .circle {
        width: 1rem;
        height: 1rem;
    }

    .eight .user .umd img {
        width: 0.8rem;
        height: 0.8rem;
    }

    .eight .urt img {
        width: 0.15rem;
        height: 0.15rem;
        top: -0.8rem;
    }

    .eight .urt em {
        font-size: 0.4rem;
        line-height: 1rem;
    }

    .eight .user .ult em {
        height: 1.1rem;
    }
    .eight .bottomLi {
        width: 100%;
        text-indent: 0.1rem;
        font-size: 0.2rem;
    }

    .eight .bottomLi img {
        width: 0.2rem;
        height: 0.2rem;
    }

    .eight .bottomLi span {
        width: 60%;
    }

    .eight .user {
        height: 1.2rem;
        overflow: hidden;
    }

    .pk_container .rt li {
        float: right;
    }

    /*color*/
    .user .umd img.blue {
        border-color: #028FE1;
    }

    .user .umd img.violet {
        border-color: #6D26FA;
    }

    .user .umd img.green {
        border-color: #059F00;
    }

    .user .umd img.yellow {
        border-color: #A6B700;
    }

    .user .umd img.brown {
        border-color: #EA8813;
    }

    .user .umd img.red {
        border-color: #CF1122;
    }

    .birth {
        position: relative;
        top: -2rem;
        width: 1.7rem;
        height: 1px;
        display: block;
        margin: 0 auto;
    }

    .birth img.birthCrow {
        position: relative;
        top: 0.2rem;
        width: 1.1rem;
        height: 0.4rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: none;
    }

    .birth img.birthText {
        position: relative;
        top: 1rem;
        width: 1.6rem;
        height: 0.6rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: none;
    }

    .three .birth img.birthCrow {
        top: 0.7rem;
        width: 0.8rem;
        height: 0.3rem;
    }

    .three .birth img.birthText {
        top: 1.1rem;
        width: 1.3rem;
        height: 0.6rem;
    }

    .four .birth {
        width: 1rem;
    }

    .four .birth img.birthCrow {
        top: 0.9rem;
        width: 0.7rem;
        height: 0.3rem;
    }

    .four .birth img.birthText {
        top: 1.3rem;
        width: 1rem;
        height: 0.4rem;
    }
    .eight .birth {
        width: 1rem;
    }

    .eight .birth img.birthCrow {
        top: 0.9rem;
        width: 0.7rem;
        height: 0.3rem;
    }

    .eight .birth img.birthText {
        top: 1.3rem;
        width: 1rem;
        height: 0.4rem;
    }

</style>