flyLong/tv/src/views/pk.vue

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

        <div class="pk-detail-con">
            <img src="../static/img/pk/left_power.png" class="lp_icon"/>
            <div class="progress">
                <div class="progress-bar" :style="{width: classInfo.pkVal}">
                    <i class="lightning"></i>
                </div>
            </div>
            <img src="../static/img/pk/right_power.png" class="rp_icon"/>
        </div>

        <div class="pk_container">
            <div class="lt">
                <ul>
                    <li :class="RedstudentsClassName" v-for="(s,i) in Redstudents">
                        <div class="bg">
                            <h5>{{ s.Name }}</h5>
                            <div class="user">
                                <div class="ult">
                                    <em>
                                        <div v-if="s.activePercent != 0">
                                            {{ s.activePercent}}
                                        </div>
                                        <div class="plus" v-if="s.activePercent == 0">
                                            ---
                                        </div>
                                        <s>%</s>
                                    </em>
                                </div>
                                <div class="umd">
                                    <div class="circle">
                                        <img src="../static/img/people/flyhead.png"/>
                                    </div>
                                </div>
                                <div class="urt">
                                    <em class="fastJump" v-if="s.realHr != 0" v-show="parseInt(s.realHr) > 100">{{
                                        s.realHr }}</em>
                                    <em class="slowJump" v-if="s.realHr != 0" v-show="parseInt(s.realHr) <= 100">{{
                                        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 |fmtFloat }}</span>
                                </div>
                                <div class="btck">
                                    <img src="../static/img/s2.svg"/>
                                    <span>{{ s.Steps }}</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="../static/img/pk/rfight.png"/>
                        ck值
                        </span>

                    <span class="title btitle">
                        <img src="../static/img/pk/bfight.png"/>
                        ck值
                        </span>
                </div>
                <div class="cubelist">
                    <div class="cubes rcube">
                        <em>红队</em>
                    </div>
                    <img class="vs" src="../static/img/pk/vs.png"/>
                    <div class="cubes bcube">
                        <em>蓝队</em>
                    </div>
                </div>
                <div class="teamScore">
                    <div class="lt">{{classInfo.redSum}}</div>
                    <div class="rt">{{classInfo.blueSum}}</div>
                </div>

                <div class="bottomInfo">
                    <span class="names">
                        {{classInfo.name}}
                    </span>
                    <div class="teacher">
                        <span>教练：{{classInfo.teacher}}</span>
                        <span>人数：{{classInfo.num}}</span>
                    </div>
                    <div class="classTime">
                        {{classInfo.endTime}}
                    </div>
                </div>
            </div>
            <div class="rt">
                <ul>
                    <li :class="BluestudentsClassName" v-for="(s,i) in Bluestudents">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

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

    let qs = require('qs');
    export default {
        data() {
            return {
                trueDate: true,//真实数据 true false
                studentsClassName: [],
                RedstudentsClassName: '',
                BluestudentsClassName: '',
                Redstudents: [],
                Bluestudents: [],
                classInfo: {
                    name: '竞技课程',
                    teacher: '凯瑞根',
                    num: '0',
                    btTime: '2020-11-13 09:00:00',//时间戳
                    endTime: '00:00:00',
                    redSum: 0,
                    blueSum: 0,
                    pkVal: '50%'
                }
            }
        },
        mounted() {
            // this.timer = setInterval(() => {
            //     this.GetgetUserList();
            //     this.ClacClassTime();
            // }, 1000);
            this.GetgetUserList();
        },
        beforeDestroy() {
            // clearInterval(this.timer);
            // this.timer = null;
        },
        methods: {
            fakeNews() {
                let item = [];
                let nums = Math.random() * 100 + 1;
                this.fakeNums = 3;
                for (var i = 0; i < this.fakeNums; i++) {
                    item.push(
                        {
                            "SvId": 1,
                            "UserId": 1,
                            "Cle": 999,
                            "realHr": 112,
                            "activePercent": 100,
                            "Steps": 9999,
                            "Name": "东南西北",
                            "updateTime": 1604568915582,
                            "Ck": nums,
                            "head": 'flyhead.png'
                        }
                    )
                }
                return item;
            },
            GetgetUserList() {
                let that = this;
                let param = {
                    token: localStorage.token,
                };

                this.giveClassName(this.fakeNews(), 1);
                this.Redstudents = this.fakeNews();
                this.giveClassName(this.fakeNews(), 2);
                this.Bluestudents = this.fakeNews();

                // 总人数
                this.classInfo.num = parseInt(this.Redstudents.length) + parseInt(this.Bluestudents.length);

                // this.giveClassName(this.Bluestudents,2);
                this.CalcTeamCk();
                return false
                let postdata = qs.stringify(param);
                getHello(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        // 返回空值不处理

                        if (that.times == 1) {
                            that.students = json.Rs;
                            if (!json.Rs) return false;
                            that.times++;
                            that.giveClassName(json.Rs);
                        } else {
                            if (localStorage.result != JSON.stringify(json.Rs)) {
                                that.students = json.Rs;
                                if (!json.Rs) return false
                            }
                            localStorage.res = JSON.stringify(json.Rs);
                            that.giveClassName(json.Rs);
                        }


                        // test 启动一个成就彩蛋
                        // this.createEgg(that.students[4]);
                    } else {
                        // 已下课
                        console.log(json.Code);
                        if (json.Code == '999') {
                            that.$router.push({path: '/rank'});
                        } 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) <= 8 && parseInt(res.length) > 6:
                        numberClass = 'eight';
                        break;
                }
                if (type == 1) {
                    that.RedstudentsClassName = numberClass;
                } else {
                    that.BluestudentsClassName = numberClass;
                }
            },
            // 计算团队竞技课持续时间
            ClacClassTime() {
                let endtime = new Date(this.classInfo.btTime);//结束时间
                let today = new Date();//当前时间
                let delta_T = today.getTime() - endtime.getTime();//时间间隔
                if (delta_T < 0) {
                    //clearInterval(auto);
                    //show_time.innerHTML = "倒计时已经结束";
                }
                let total_days = delta_T / (24 * 60 * 60 * 1000);//总天数
                let total_show = Math.floor(total_days);//实际显示的天数
                let total_hours = (total_days - total_show) * 24;//剩余小时
                let hours_show = Math.floor(total_hours);//实际显示的小时数
                let total_minutes = (total_hours - hours_show) * 60;//剩余的分钟数
                let minutes_show = Math.floor(total_minutes);//实际显示的分钟数
                let total_seconds = (total_minutes - minutes_show) * 60;//剩余的分钟数
                let seconds_show = Math.floor(total_seconds);//实际显示的秒数

                hours_show = hours_show < 9 ? "0" + hours_show : hours_show;
                minutes_show = minutes_show < 9 ? "0" + minutes_show : minutes_show;
                seconds_show = seconds_show < 9 ? "0" + seconds_show : seconds_show;
                let str = hours_show + ":" + minutes_show + ":" + seconds_show;
                this.classInfo.endTime = str;
            },
            // 计算双方对抗强度加总
            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 + '%';
            }
        },
        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'
                } else {
                    return parseFloat(val).toFixed(1);
                }
            }
        },
        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: #60B7FF;
        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: #FF9960;
        -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.2rem;
        width: 0.8rem;
        height: 0.8rem;
        float: left;
    }

    .rp_icon {
        position: absolute;
        right: 0;
        top: -0.2rem;
        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, 255, 255, 0.3);
        background: rgba(233, 53, 18, 0.67);
    }

    .pk_container .rt .bg {
        border: 2px solid rgba(255, 255, 255, 0.3);
        background: rgba(7, 43, 188, 0.67);
    }


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

    .pk_container li .user {
        width: 100%;
        overflow: hidden;
        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: hidden;
        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.65rem;
        height: 1.65rem;
        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: 5px 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 {
        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;
    }

    /*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%;
        margin-right: 0.05rem;
        font-size: 0.5rem;
    }

    .four .user .ult s {
        font-size: 0.1rem;
    }

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

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

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

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

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


    /*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.15rem;
        margin-top: 0.05rem;
        margin-bottom: 0.05rem;
    }

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

    }

    .eight .user .ult em div {
        width: 90%;
        margin-right: 0.15rem;
        font-size: 0.4rem;
    }

    .eight .user .ult s {
        font-size: 0.1rem;
        top: -0.5rem;
        right: 0.02rem;
    }

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

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

    .eight .urt img {
        width: 0.1rem;
        height: 0.1rem;
    }

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

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

</style>