flyLong/tv/src/views/Main.vue

<template>
    <div :class="pageStyle">
        <Headside></Headside>
        <div class="userList">
            <ul>
                <li v-for="(s,i) in students" :class="studentsClassName[i].name" v-show="students"
                    v-if="students.length > 0">
                    <div class="ltLi" v-if="students.length == 1"></div>
                    <div class="centerLi">
                        <div class="topLi">
                            <div class="human">
                                <span class="name">{{ s.Name }}</span>
                                <!--<img src="../static/img/people/flyhead.png"/>-->
                                <!--<img v-bind:src="require('../static/img/people/' + s.head)" alt="">-->
                                <!--<img :src="s.Head" alt="" v-if="s.Head">-->
                                <img :src="s.Head" alt="" v-if="s.Head">
                                <!--<img v-bind:src="require('../static/img/people/flyhead.png')" alt="" v-if="!s.Head">-->
                                <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head">
                            </div>
                            <div class="cla">
                                <!--<em v-if="s.activePercent != 0">{{  s.activePercent |fmtNum }}</em>-->
                                <em v-if="s.activePercent != 0">{{ s.activePercent }}</em>
                                <em class="plus" v-if="s.activePercent == 0">
                                    ---
                                </em>
                            </div>
                            <div class="lcla">
                                <span>%</span>
                            </div>
                            <!--fastJump-->
                            <!--heartJump-->
                            <div>
                                <div class="lhj">
                                    <div :class="[{'heartJump':true}]">
                                        <span class="fastJump" v-if="s.realHr != 0"
                                              v-show="parseInt(s.activePercent) > 90">{{ s.realHr }}</span>
                                        <span class="normalJump" v-if="s.realHr != 0"
                                              v-show="parseInt(s.activePercent) <= 90 && parseInt(s.activePercent) > 30">{{
                        s.realHr
                      }}</span>
                                        <span class="slowJump" v-if="s.realHr != 0"
                                              v-show="parseInt(s.activePercent) <= 30">{{ s.realHr }}</span>

                                        <span class="plus" v-if="s.realHr == 0">
                                        ---
                                    </span>
                                    </div>
                                </div>
                                <div class="rhj">
                                    <img src="../static/img/heart.svg" class=""/>
                                </div>
                            </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>
                    <div class="rtLi" v-if="students.length == 1"></div>
                    <img src="../static/img/long.png" class="longIcon" v-if="students.length == 1"/>
                </li>
            </ul>
        </div>
        <!--图示-->
        <div class="levelIcon">
            <ul>
                <li>
          <span class="cube">
             <div>
                  0%-<br>
            39%
             </div>
          </span>
                    <em>激活放松</em>
                </li>
                <li>
          <span class="cube">
             <div>
             40%-<br>54%  </div>
          </span>
                    <em>动态热身</em>
                </li>
                <li>
          <span class="cube">
             <div>
             55%-<br>69%  </div>
          </span>
                    <em>脂肪燃烧</em>
                </li>
                <li>
          <span class="cube">
             <div>
             70%-<br>79%  </div>
          </span>
                    <em>糖分消耗</em>
                </li>
                <li>
          <span class="cube">
             <div>
             80%-<br>89%  </div>
          </span>
                    <em>心肺训练</em>
                </li>
                <li>
          <span class="cube">
             <div>
             ≥90%  </div>
          </span>
                    <em>峰值锻炼</em>
                </li>
            </ul>
        </div>
        <newRecord :toper-info="toperInfo"></newRecord>
    </div>
</template>

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

    let qs = require('qs');

    export default {
        data() {
            return {
                eqSn: '30:9C:23:0C:8B:1E',
                pageStyle: RandomBg(),
                trueDate: true,//真实数据 true false
                totalTime: 4,
                times: 1,
                thisClassName: '',
                studentsClassName: [],
                students: [],
                single: [],
                dialogVisible: false,
                serachBtnStatus: false,
                dialogMsg: '',
                imgsrc: '../static/img/people/',
                toperInfo: {
                    dialogVisible: false,
                    toper: {},
                },
                // 本地绑定名字和头像路径
                headImg: [
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                    {name: 'flyhead.png'},
                ],
                nameList: [
                    {name: '杨东艳'},
                    {name: '隋小飞'},
                    {name: '刘晓蕾'},
                    {name: '刘海生'},
                    {name: '贾雨琦'},
                    {name: '李延海'},
                    {name: '宋凌晨'},
                    {name: '段长鹏'},
                    {name: '郑伟'},
                    {name: '周睿'},
                    {name: '贾奕'},
                    {name: '王正祥'},
                    {name: '高超'},
                    {name: '武发鲁'},
                    {name: '赵晋洪'},
                    {name: '张岩'},
                    {name: '郑伟'},
                    {name: '郑伟'},
                ],
                fakeEgg: {
                    Rs: {
                        "DuId": 37,
                        "UserId": 0,
                        "UserName": "郑伟",
                        "Sex": 1,
                        // "Head": "http://192.168.0.2/zw.png",
                        "Head": "https://img-operation.csdnimg.cn/csdn/silkroad/img/1604989753379.png",
                        "Cle": 400,
                        "CleTitle": "个人单次卡路里记录",
                        "CleUnit": "千卡",
                        "CkTitle": "个人单次CK记录",
                        "Ck": 99.9,
                        "CkUnit": "CK值"
                    }
                },
                mainTimer: null,
                timer2: null,
            }
        },
        mounted() {
            // this.$router.push({path: '/2pkRank'});
            // return false

            if (this.trueDate) {
                this.mainTimer = setInterval(() => {
                    this.GetgetUserList();
                    this.curgetClassStat();
                }, 1000);

                this.timer2 = setInterval(() => {
                    this.createEgg();
                }, 6000);
                this.GetgetUserList();
                this.createEgg();
            } else {
                // 彩蛋
                this.OpenEgg(this.fakeEgg);
                this.mainTimer = setInterval(() => {
                    this.students = this.fakeNews();
                    this.giveClassName(this.students);
                }, 1000);
            }


            // this.alertInfo(document.body.clientWidth);
            // this.alertInfo(window.screen.height);

            // 倒计时
            let that = this;
            // that.serachBtnStatus = true;
            // let totalTime = 3
            // let clock = window.setInterval(() => {
            //       totalTime--
            //       if (totalTime < 0) {
            //         totalTime = 3;
            //         that.serachBtnStatus = false;

            //       }
            //     }
            //     ,
            //     1000
            // )
        },
        watch: {
            '$route': function (val) {
                if (val.path == '/main') {
                    if (this.trueDate) {
                        this.mainTimer = setInterval(() => {
                            this.GetgetUserList();
                            this.curgetClassStat();
                        }, 1000);
                        this.GetgetUserList();
                        this.timer2 = setInterval(() => {
                            this.createEgg();
                        }, 6000);
                    } else {
                        this.students = this.fakeNews();
                        this.giveClassName(this.students);
                        // this.createEgg(this.students[5]);
                    }
                } else {
                    clearInterval(this.mainTimer);
                    clearInterval(this.timer2);
                }
            }
        },
        beforeDestroy() {
            clearInterval(this.mainTimer);
            clearInterval(this.timer2);
            this.mainTimer = null;
            this.timer2 = null;
        },
        methods: {
            fakeNews() {
                let item = [];
                // 1 2 3 5 9 11 13 16 21 30
                let fakeNums = 2;
                for (var i = 0; i < fakeNums; i++) {
                    item.push(
                        {
                            "SvId": 1,
                            "UserId": 1,
                            "Cle": 999,
                            "realHr1": parseInt(Math.random() * 100 + 50),
                            "realHr": 60,
                            "activePercent": 30,
                            "heartRate": 90,
                            "Steps": 9999,
                            "PureCalorieNoVo2": 999,
                            "Name": "东南西北中",
                            "updateTime": 1604568915582,
                            "Ck": 99.9,
                            "Head": '',
                        }
                    )
                }
                return item;
            },
            alertInfo(info) {
                alert(info);
            },
            // 启动一个成就彩蛋
            createEgg() {
                let that = this;
                let param = {
                    token: localStorage.token,
                    eqSn: localStorage.eqSn
                };
                let postdata = qs.stringify(param);
                getRecordBreak(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        this.OpenEgg(json);
                    } else {
                        // 并没有人破记录
                        if (json.Code == 999) return false;
                        if (json.Code != 999) that.$message.error(json.Memo + '[egg]');
                    }
                })
            },
            OpenEgg(msg) {
                this.toperInfo.toper = msg.Rs;
                this.toperInfo.dialogVisible = true;
                // 倒计时5秒自动关闭
                let that = this;
                this.totalTime = 4;
                let clock = window.setInterval(() => {
                    this.totalTime--;
                    if (parseInt(this.totalTime) < 0) {
                        that.toperInfo.dialogVisible = false;
                        clearInterval(clock);
                    }
                }, 1000)
            },
            GetgetUserList() {
                let that = this;
                let param = {
                    token: localStorage.token,
                    eqSn: localStorage.eqSn
                };
                let postdata = qs.stringify(param);

                getHello(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.students = json.Rs;
                        // // 返回空值不处理
                        // if (that.times == 1) {
                        //     that.students = json.Rs;
                        //     if (!json.Rs) return false;
                        //     // // 添加头像 和 姓名 ..
                        //     that.times++
                        // } else {
                        //     if (localStorage.result != JSON.stringify(json.Rs)) {
                        //         that.students = json.Rs;
                        //         // this.createEgg(this.students[1]);
                        //         if (!json.Rs) return false;
                        //         // // 添加头像 和 姓名
                        //         // that.students.map(function (i, v) {
                        //         //     i.head = that.headImg[v].name;
                        //         //     i.userNmae = that.nameList[v].name
                        //         // });
                        //     }
                        //     localStorage.res = JSON.stringify(json.Rs);
                        // }

                        that.giveClassName(json.Rs);
                        // test 启动一个成就彩蛋
                        // this.createEgg(that.students[4]);
                    } else {
                        // 已下课
                        if (json.Code == '999') {
                            that.students = ""
                            // 没人不做处理
                            //     that.$router.push({path: '/rank'});
                        } else {
                            //     // 已出错
                            that.$message.error(json.Memo);
                        }
                    }
                })
            },
            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) {
                        // 没开课
                        console.log(json.ClassOn);
                        if (json.ClassOn == 0) {
                            console.log("xiakele ");
                            // 0: 下课 团课/私教 排名
                            // 1：团课/私教 todo
                            // 2：竞技课2PK
                            // 3：竞技课threepk
                            switch (parseInt(json.dp)) {
                                case 0:
                                    that.$router.push({path: '/rank'});
                                    break;
                                case 1:
                                    that.$router.push({path: '/'});
                                    break;
                                case 2:
                                    console.log(123);
                                    that.$router.push({path: '/pk'});
                                    break;
                                case 3:
                                    that.$router.push({path: '/threepk'});
                                    break;
                            }
                        }
                    } else {
                        console.log("已上课");

                        // that.$message.error(json.Memo);
                    }
                })
            },
            // 给每一个数据加类名，一次遍历全部赋值
            giveClassName(res) {
                let that = this;
                let numberClass = '';
                let colorClass = '';
                for (let i = 0; i < parseInt(res.length); i++) {
                    switch (true) {
                        case  parseInt(res.length) == 1:
                            numberClass = 'max';
                            break;
                        case  parseInt(res.length) == 2:
                            numberClass = 'two';
                            break;
                        case  parseInt(res.length) <= 4 && parseInt(res.length) > 2:
                            numberClass = 'three';
                            break;
                        case  parseInt(res.length) <= 6 && parseInt(res.length) > 4:
                            numberClass = 'six';
                            break;
                        case  parseInt(res.length) <= 9 && parseInt(res.length) > 6:
                            numberClass = 'nine';
                            break;
                        case parseInt(res.length) <= 12 && parseInt(res.length) > 9:
                            numberClass = 'ten';
                            break;
                        case parseInt(res.length) <= 15 && parseInt(res.length) > 12:
                            numberClass = 'twelve';
                            break;
                        case parseInt(res.length) <= 20 && parseInt(res.length) > 15:
                            numberClass = 'sixteen';
                            break;
                        case parseInt(res.length) <= 24 && parseInt(res.length) > 20:
                            numberClass = 'twenty';
                            break;
                        case parseInt(res.length) <= 30 && parseInt(res.length) > 24:
                            numberClass = 'twentyFour';
                            break;
                        case parseInt(res.length) > 31:
                            numberClass = 'thirtyFive';
                            break;
                    }

                    let per = parseInt(res[i].activePercent);
                    switch (true) {
                        case per >= 90:
                            colorClass = 'red';
                            break;
                        case per <= 89 && per > 79:
                            colorClass = 'brown';
                            break;
                        case per <= 79 && per > 70:
                            colorClass = 'yellow';
                            break;
                        case per <= 70 && per > 54:
                            colorClass = 'green';
                            break;
                        case per <= 54 && per > 39:
                            colorClass = 'violet';
                            break;
                        case per <= 39:
                            colorClass = 'blue';
                            break
                    }
                    that.studentsClassName[i] = {
                        name: numberClass + ' ' + colorClass,
                    }
                }
            },
        },
        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 parseFloat(val).toFixed(2);
                    // return parseInt(val);
                    // return parseFloat(val).toFixed(3);
                }
            },
        },
        components: {
            Headside, newRecord
        }
    }
</script>

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

    @font-face {
        font-family: vista;
        src: url('../assets/font/vista.otf');
    }

    * {
        font-family: vista;
    }

    .pages {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-family: vista;
    }

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

    .blue .centerLi {
        background: #028FE1;
    }

    .violet .centerLi {
        background: #6D26FA;
    }

    .green .centerLi {
        background: #0AB105;
    }

    .yellow .centerLi {
        background: #BACC01;
    }

    .brown .centerLi {
        background: #EA8813;
    }

    .red .centerLi {
        background: #CF1122;
    }

    .levelIcon {
        position: absolute;
        bottom: 0.1rem;
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 5rem;
        padding-bottom: 5px;
    }

    .levelIcon ul {
        width: 96%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0;
        margin-left: 2%;
    }

    .levelIcon li {
        width: 14.666666666667%;
        height: 100%;
        float: left;
        padding-left: 2.4%;
    }

    .levelIcon li:nth-child(1) {
        padding-left: 0;
    }

    .levelIcon li span {
        width: 5rem;
        height: 4rem;
        overflow: hidden;
        float: left;
        background: url("../static/img/t1.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: top center;
        font-family: vista;
        font-weight: normal;
        font-size: 1.2rem;
        letter-spacing: -0.05em;
        text-align: center;
        color: #fff;
        line-height: 0.4rem;

    }

    .levelIcon li span div {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-top: 17%;
    }

    .levelIcon li:nth-child(2) span {
        background: url("../static/img/t2.svg");
        background-size: 100% 100%;
        background-position: top center;
    }

    .levelIcon li:nth-child(3) span {
        background: url("../static/img/t3.svg");
        background-size: 100% 100%;
        background-position: top center;
    }

    .levelIcon li:nth-child(4) span {
        background: url("../static/img/t4.svg");
        background-size: 100% 100%;
        background-position: top center;
    }

    .levelIcon li:nth-child(5) span {
        background: url("../static/img/t5.svg");
        background-size: 100% 100%;
        background-position: top center;
    }

    .levelIcon li:nth-child(6) span {
        background: url("../static/img/t6.svg");
        background-size: 100% 100%;
        background-position: top center;
    }

    .levelIcon li:nth-child(6) span div {
        margin-top: 13%;
    }

    .levelIcon li em {
        float: right;
        width: 4rem;
        height: 42px;
        border-radius: 21px;
        background: rgba(2, 143, 225, 0.16);
        border: 1px solid #028fe1;
        box-shadow: 0px 0px 5px #028fe1;
        font-family: vista;
        font-weight: normal;
        font-size: 24px;
        text-align: center;
        color: #fff;
        font-style: normal;
        line-height: 42px;
        margin-top: 15%;
        margin-left: 1%;
    }

    .levelIcon li:nth-child(2) em {
        background: rgba(109, 38, 250, 0.16);
        border: 1px solid #6d26fa;
        box-shadow: 0px 0px 5px #6d26fa;
    }

    .levelIcon li:nth-child(3) em {
        background: rgba(10, 177, 5, 0.16);
        border: 1px solid #0ab105;
        box-shadow: 0px 0px 5px #0ab105;

    }

    .levelIcon li:nth-child(4) em {
        background: rgba(186, 204, 1, 0.16);
        border: 1px solid #bacc01;
        box-shadow: 0px 0px 5px #bacc01;
    }

    .levelIcon li:nth-child(5) em {
        background: rgba(234, 136, 19, 0.16);
        border: 1px solid #ea8813;
        box-shadow: 0px 0px 5px #ea8813;
    }

    .levelIcon li:nth-child(6) em {
        background: rgba(209, 17, 34, 0.16);
        border: 1px solid #d11122;
        box-shadow: 0px 0px 5px #d11122;
    }

    .levelIcon {
        height: 70px;
    }

    .levelIcon li span {
        width: 70px;
        height: 70px;
        font-size: 0.2rem;
    }

    .levelIcon li span div {
        font-size: 16px;
        padding-top: 0.19rem;
        line-height: 22px;
    }

    .levelIcon ul {
        width: 98%;
    }

    .levelIcon li em {
        width: 45%;
        height: 30px;
        line-height: 30px;
        font-size: 0.2rem;
        margin-top: 11%;
        margin-left: 3%;
        float: left;
    }


    .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-direction: alternate; /*轮流反向播放动画。*/
        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    }

    .normalJump {
        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-direction: alternate; /*轮流反向播放动画。*/
        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    }

    .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-direction: alternate; /*轮流反向播放动画。*/
        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    }

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

    }

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


    /*userList*/

    .userList {
        width: 100%;
        height: 76%;
        overflow: hidden;
        display: block;
        margin: 0.1rem auto;
    }

    .userList ul {
        /*width: 100%;*/
        height: 98%;
        overflow: hidden;
        display: block;
        margin: 0.1rem;
        margin-bottom: 0;
    }

    .userList li {
        display: block;
        z-index: 666;
    }

    .centerLi {
        width: 99.8%;
        overflow: hidden;
        float: left;
        color: #fff;

    }

    .human img {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: 2px solid #fff;
        border-radius: 250px;
        /*box-shadow: 0px 0px 5px #fff;*/
    }

    s {
        text-decoration: none;
    }

    em {
        font-style: normal;
    }

    .cla {
        position: relative;
        float: left;
        text-align: right;
    }

    .centerLi .human {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding: 0;
    }

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

    .lcla span {
        position: relative;
        float: left;
    }

    .cla em {
        text-align: right;
    }

    .heartJump {
        position: relative;
    }

    .lhj span {
        position: relative;
        text-align: right;
        float: left;
    }

    .rhj {
        float: right;
    }

    .rhj img {
        position: relative;
        float: right;
    }


    .bottomLi {
        width: 96%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 0.3rem;
        font-weight: normal !important;
        color: #fff;
        text-align: left;
        line-height: 0.7rem;
    }

    .bottomLi img {
        float: left;
        margin-left: 10%;
    }

    .bottomLi .btcla {
        width: 33.333%;
        float: left;
    }

    .bottomLi .btck {
        width: 33.333%;
        float: left;
    }

    .bottomLi .step {
        width: 33.333%;
        float: right;
    }

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

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

    /*max*/
    .max {
        width: 12rem;
        height: 5.6rem;
        display: block;
        margin: 0 auto;
        margin-top: 1rem;
    }

    .max .centerLi {
        width: 90%;
        height: 100%;
    }

    .max .ltLi {
        width: 5%;
        height: 100%;
        float: left;
        background: url("../static/img/ltCube.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .max .rtLi {
        width: 5%;
        height: 100%;
        float: right;
        background: url("../static/img/rtCube.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .max .human .name {
        font-size: 0.5rem;
        height: 1rem;
        line-height: 1rem;
    }

    .max .human img {
        width: 3rem;
        height: 3rem;
    }

    .max .cla {
        width: 3rem;
        height: 2rem;
        top: -2.4rem;
        left: 0;
        font-size: 0.55rem;
    }

    .max .lcla span {
        font-size: 0.7rem;
        top: -2.4rem;
        float: left;
        left: 0;
    }

    .max .cla em {
        font-size: 1.5rem;
        left: 1rem;
    }

    .max .lhj span {
        width: 3rem;
        height: 2rem;
        top: -2.4rem;
        left: 3.4rem;
        font-size: 1.5rem;
    }

    .max .rhj img {
        width: 0.5rem;
        top: -2.3rem;
        right: 0.3rem;
    }

    .max .longIcon {
        position: absolute;
        width: 1.96rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        bottom: 2rem;
        right: 3.5rem;
    }

    .max .topLi {
        height: 4.5rem;
    }

    .max .bottomLi {
        font-size: 0.5rem;
        text-align: center;
    }

    .max .bottomLi .btck {
        /*text-indent: 1.6rem;*/
    }

    .max .bottomLi img {
        width: 0.5rem;
        height: 0.5rem;
        margin-top: 0.1rem;
    }

    .max .bottomLi span {
        line-height: 0.8rem;
        text-indent: 0.2rem;
    }

    .max .bottomLi .btck {
        width: 29%;
        padding-left: 1%;
    }

    .max .bottomLi .step {
        width: 24%;
        padding-right: 2%;
    }

    .max .cla em.plus {
        position: relative;
        left: -0.5rem
    }

    .max .lhj span.plus {
        position: relative;
        left: 2.75rem
    }

    .max .bottomLi .btcla img {
        width: 0.5rem;
        height: 0.5rem;
    }

    .max .bottomLi .btcla span {
        text-indent: 0.1rem;
    }

    .max .bottomLi .btck span {
        text-indent: 0.1rem;
    }

    .max .bottomLi .btck img {
        width: 0.6rem;
        height: 0.6rem;
        margin-top: 0.05rem;
    }


    /*two*/
    .two {
        width: 49%;
        height: 5.33rem;
        float: left;
        overflow: hidden;
        margin-top: 6%
    }

    .two .centerLi {
        border: 1px solid #fff;
    }

    .two:nth-child(2) {
        float: right;
    }

    .two .human .name {
        width: 100%;
        height: 1rem;
        font-size: 0.5rem;
        line-height: 1rem;
    }

    .two .human img {
        width: 2.8rem;
        height: 2.8rem;
    }

    .two .cla {
        width: 2.9rem;
        height: 2rem;
        top: -2.4rem;
        left: 0;
        font-size: 0.5rem;
    }

    .two .lcla span {
        font-size: 0.55rem;
        top: -2.3rem;
        float: left;
        left: 0;
    }

    .two .cla em {
        font-size: 1.3rem;
        left: 1rem;
    }

    .two .lhj span {
        width: 3rem;
        height: 2rem;
        top: -2.4rem;
        left: 2.4rem;
        font-size: 1.2rem;
    }

    .two .rhj img {
        width: 0.45rem;
        top: -2.2rem;
        right: 0.3rem;
    }

    .two .topLi {
        height: 4.2rem;
    }

    .two .bottomLi {
        font-size: 0.4rem;
        text-align: center;
    }

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

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

    .two .bottomLi .btck {
        width: 29%;
        padding-left: 0%;
    }

    .two .bottomLi .step {
        width: 26%;
        padding-right: 4%;
    }

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

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

    .two .bottomLi .btck img {
        width: 0.6rem;
        height: 0.6rem;
        margin-top: 0.05rem;
    }

    .two .bottomLi .btck span {
        text-indent: 0.1rem;
    }


    /*three*/
    .three {
        width: 50%;
        height: 4rem;
        float: left;
        overflow: hidden;
        margin-bottom: 1%
    }

    .three .centerLi {
        width: 96%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: 1px solid #fff;
        float: none;
    }

    .three .human .name {
        width: 100%;
        height: 0.8rem;
        font-size: 0.4rem;
        line-height: 0.8rem;
    }

    .three .human img {
        width: 2.1rem;
        height: 2.1rem;
        margin-top: 0.1rem;
    }

    .three .cla {
        width: 2.9rem;
        height: 2rem;
        top: -1.8rem;
        left: 0;
        font-size: 0.4rem;
    }

    .three .lcla span {
        font-size: 0.45rem;
        top: -1.8rem;
        float: left;
        left: 0;
    }

    .three .cla em {
        font-size: 1.2rem;
        left: 1rem;
    }

    .three .lhj span {
        width: 3rem;
        height: 2rem;
        top: -1.70rem;
        left: 2.3rem;
        font-size: 1.1rem;
    }

    .three .rhj img {
        width: 0.4rem;
        top: -1.7rem;
        right: 0.4rem;
    }

    .three .topLi {
        /*height: 3.26rem;*/
        height: 3.18rem;
    }

    .three .bottomLi {
        font-size: 0.4rem;
        margin-top: 0rem;
        text-align: center;
    }


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

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

    .three .bottomLi .btck {
        width: 30%;
        padding-left: 2%;
    }

    .three .bottomLi .step {
        width: 25%;
        padding-right: 2%;
    }

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

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

    .three .bottomLi .btck img {
        width: 0.6rem;
        height: 0.6rem;
        margin-top: 0.05rem;
    }

    .three .bottomLi .btck span {
        text-indent: 0.1rem;
    }

    /*six*/
    .six {
        width: 33.3333%;
        height: 3.6rem;
        float: left;
        overflow: hidden;
        margin-bottom: 1%
    }

    .six .centerLi {
        width: 98%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: 1px solid #fff;
        float: none;
    }

    .six .human .name {
        width: 100%;
        height: 0.8rem;
        font-size: 0.35rem;
        line-height: 0.8rem;
    }

    .six .human img {
        width: 1.6rem;
        height: 1.6rem;
        margin-top: 0.1rem;
    }

    .six .cla {
        width: 2rem;
        height: 2rem;
        top: -1.3rem;
        left: 0;
        font-size: 0.3rem;
    }

    .six .lcla span {
        font-size: 0.4rem;
        top: -1.4rem;
        float: left;
        left: -0.05rem;
    }

    .six .cla em {
        font-size: 0.9rem;
        left: 1rem;
    }

    .six .lhj span {
        width: 2rem;
        height: 2rem;
        top: -1.3rem;
        left: 1.6rem;
        font-size: 0.85rem;
    }

    .six .rhj img {
        width: 0.3rem;
        top: -1.3rem;
        right: 0.2rem;
    }

    .six .topLi {
        height: 2.6rem;
    }

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

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

    .six .bottomLi .btcla img {
        width: 0.3rem;
        /*margin-top: 0.1rem;*/
    }

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

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

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

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

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

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

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

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


    /*nine*/
    .nine {
        width: 33.3333%;
        height: 2.7rem;
        float: left;
        overflow: hidden;
        margin-bottom: 0.1rem
    }

    .nine .centerLi {
        width: 98%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: 1px solid #fff;
        float: none;
    }

    .nine .human .name {
        width: 100%;
        height: 0.6rem;
        font-size: 0.3rem;
        line-height: 0.6rem;
    }

    .nine .human img {
        width: 1.2rem;
        height: 1.2rem;
        margin-top: 0.1rem;
    }

    .nine .cla {
        width: 1.9rem;
        height: 2rem;
        top: -1.1rem;
        left: 0;
        font-size: 0.25rem;
    }

    .nine .lcla span {
        font-size: 0.35rem;
        top: -1.1rem;
        float: left;
        left: 0.05rem;
    }

    .nine .cla em {
        font-size: 0.7rem;
        left: 1rem;
    }

    .nine .lhj span {
        width: 1.9rem;
        height: 2rem;
        top: -1.1rem;
        left: 1.6rem;
        font-size: 0.7rem;
    }

    .nine .rhj img {
        width: 0.25rem;
        top: -1.0rem;
        right: 0.4rem;
    }

    .nine .topLi {
        height: 2rem;
    }

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


    .nine .bottomLi img {
        width: 0.35rem;
        height: 0.35rem;
        margin-top: 0.2rem;
    }

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

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

    .nine .bottomLi .btck {
        width: 32%;
        padding-left: 5%;
    }

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

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

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

    .nine .bottomLi .btck img {
        width: 0.45rem;
        height: 0.45rem;
        margin-top: 0.15rem;
    }

    /*ten*/
    .ten {
        width: 25%;
        height: 2.6rem;
        float: left;
        overflow: hidden;
        margin-bottom: 0.2rem
    }

    .ten .centerLi {
        width: 98%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: 1px solid #fff;
        float: none;
    }

    .ten .human .name {
        width: 100%;
        height: 0.5rem;
        font-size: 0.3rem;
        line-height: 0.55rem;
        margin-bottom: 0.1rem;
    }

    .ten .human img {
        width: 1.1rem;
        height: 1.1rem;
        margin-top: 0.2rem;
    }

    .ten .cla {
        width: 1.4rem;
        height: 1.5rem;
        top: -0.95rem;
        left: 0;
        font-size: 0.2rem;
    }

    .ten .lcla span {
        font-size: 0.3rem;
        top: -0.95rem;
        float: left;
        left: -0rem;
    }

    .ten .cla em {
        font-size: 0.6rem;
        left: 0.5rem;
    }

    .ten .lhj span {
        width: 1.4rem;
        height: 2.1rem;
        top: -0.9rem;
        left: 1.4rem;
        font-size: 0.6rem;
    }

    .ten .rhj img {
        width: 0.2rem;
        top: -0.9rem;
        right: 0.15rem;
    }

    .ten .topLi {
        height: 1.85rem;
    }

    .ten .bottomLi {
        width: 98%;
        font-size: 0.25rem;
        margin-top: 0.1rem;
        text-align: center;
    }

    .ten .bottomLi img {
        width: 0.3rem;
        height: 0.3rem;
        margin-top: 0.25rem;
    }

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

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

    .ten .bottomLi .btck {
        width: 32%;
        padding-left: 3%;
    }

    .ten .bottomLi .step {
        width: 29%;
        padding-right: 0%;
    }

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

    .ten .lhj span.plus {
        position: relative;
        left: 1.2rem;
        line-height: 0.75rem;
    }

    .ten .btck img {
        width: 0.4rem;
        height: 0.4rem;
        margin-top: 0.18rem;
    }

    /*twelve*/
    .twelve {
        width: 20%;
        height: 2.4rem;
        float: left;
        overflow: hidden;
        margin-bottom: 0.3rem
    }

    .twelve .centerLi {
        width: 98%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: 1px solid #fff;
        float: none;
    }

    .twelve .human .name {
        width: 100%;
        height: 0.5rem;
        font-size: 0.25rem;
        line-height: 0.7rem;
        margin-bottom: 0.2rem;
    }

    .twelve .human img {
        width: 0.9rem;
        height: 0.9rem;
    }

    .twelve .cla {
        width: 1.2rem;
        height: 1.2rem;
        top: -0.8rem;
        left: -0.1rem;
        font-size: 0.2rem;
    }

    .twelve .lcla span {
        font-size: 0.25rem;
        top: -0.8rem;
        float: left;
        left: -0.07rem;
    }

    .twelve .cla em {
        font-size: 0.5rem;
        left: 0.5rem;
    }

    .twelve .lhj span {
        width: 1.2rem;
        height: 1.2rem;
        top: -0.8rem;
        left: 0.9rem;
        font-size: 0.5rem;
    }

    .twelve .rhj img {
        width: 0.18rem;
        top: -0.75rem;
        right: 0.15rem;
    }

    .twelve .topLi {
        height: 1.65rem;
    }

    .twelve .bottomLi {
        width: 98%;
        font-size: 0.225rem;
        margin-top: 0.1rem;
        text-align: center;
    }

    .twelve .bottomLi img {
        width: 0.25rem;
        height: 0.25rem;
        margin-top: 0.25rem;
    }

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

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

    .twelve .bottomLi .btck {
        width: 32%;
        padding-left: 2%;
    }

    .twelve .bottomLi .step {
        width: 27%;
        padding-right: 1%;
    }

    .twelve .cla em.plus {
        position: relative;
        left: -0.2rem
    }

    .twelve .lhj span.plus {
        position: relative;
        left: 0.8rem
    }

    .twelve .btck img {
        width: 0.3rem;
        height: 0.3rem;
    }

    .twelve .btck img {
        width: 0.35rem;
        height: 0.35rem;
        margin-top: 0.22rem;
    }


    /*sixteen*/
    .sixteen {
        width: 20%;
        height: 1.95rem;
        float: left;
        overflow: hidden;
        margin-bottom: 0.1rem
    }

    .sixteen .centerLi {
        width: 98%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: 1px solid #fff;
        float: none;
    }

    .sixteen .human .name {
        width: 100%;
        height: 0.4rem;
        font-size: 0.22rem;
        line-height: 0.45rem;
        margin-top: 0.1rem;
        margin-bottom: 0.1rem;

    }

    .sixteen .human img {
        width: 0.75rem;
        height: 0.75rem;
    }

    .sixteen .cla {
        width: 1.2rem;
        height: 1.4rem;
        top: -0.7rem;
        left: 0;
        font-size: 0.15rem;
    }

    .sixteen .lcla span {
        font-size: 0.275rem;
        top: -0.7rem;
        float: left;
        left: -0rem;
    }

    .sixteen .cla em {
        font-size: 0.5rem;
        left: 0.2rem;
    }

    .sixteen .lhj span {
        width: 1rem;
        height: 1.8rem;
        top: -0.7rem;
        left: 1rem;
        font-size: 0.5rem;
    }

    .sixteen .rhj img {
        width: 0.17rem;
        top: -0.65rem;
        right: 0.15rem;
    }

    .sixteen .topLi {
        height: 1.4rem;
    }

    .sixteen .bottomLi {
        width: 98%;
        font-size: 0.2rem;
        margin-top: -0.05rem;
        text-align: center;
    }

    .sixteen .bottomLi img {
        width: 0.25rem;
        height: 0.25rem;
        margin-top: 0.25rem;
    }

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

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

    .sixteen .bottomLi .btck {
        width: 32%;
        padding-left: 3%;
    }

    .sixteen .bottomLi .step {
        width: 27%;
        padding-right: 3%;
        /*text-align: center;*/
    }

    .sixteen .cla em.plus {
        position: relative;
        left: -0.2rem
    }

    .sixteen .lhj span.plus {
        position: relative;
        left: 0.9rem
    }

    .sixteen .btck img {
        width: 0.3rem;
        height: 0.3rem;
    }


    /*twenty*/
    .twenty {
        width: 16.66667%;
        height: 1.85rem;
        float: left;
        overflow: hidden;
        margin-bottom: 0.1rem
    }

    .twenty .centerLi {
        width: 98%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: 1px solid #fff;
        float: none;
    }

    .twenty .human .name {
        width: 100%;
        height: 0.4rem;
        font-size: 0.22rem;
        line-height: 0.5rem;
        margin-bottom: 0.1rem;
    }

    .twenty .human img {
        width: 0.75rem;
        height: 0.75rem;
        margin-top: 0.15rem;
    }

    .twenty .cla {
        width: 0.95rem;
        height: 1.4rem;
        top: -0.69rem;
        left: 0;
        font-size: 0.15rem;
    }

    .twenty .lcla span {
        font-size: 0.225rem;
        top: -0.65rem;
        float: left;
        left: 0rem;
    }

    .twenty .cla em {
        font-size: 0.4rem;
        left: 0.2rem;
    }

    .twenty .lhj span {
        width: 0.85rem;
        height: 2rem;
        top: -0.65rem;
        left: 0.9rem;
        font-size: 0.4rem;
    }

    .twenty .rhj img {
        width: 0.15rem;
        top: -0.6rem;
        right: 0.1rem;
    }

    .twenty .topLi {
        height: 1.35rem;
    }

    .twenty .bottomLi {
        width: 98%;
        font-size: 0.2rem;
        margin-top: -0.1rem;
        text-align: center;
    }

    .twenty .bottomLi img {
        width: 0.2rem;
        height: 0.2rem;
        margin-top: 0.275rem;
    }

    .twenty .bottomLi span {
        line-height: 0.8rem;
        text-indent: 0.05rem;
    }

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

    .twenty .bottomLi .btck {
        width: 32%;
        padding-left: 3%;
    }

    .twenty .bottomLi .step {
        width: 28%;
        padding-right: 3%;
    }

    .twenty .cla em.plus {
        position: relative;
        left: -0.2rem
    }

    .twenty .lhj span.plus {
        position: relative;
        left: 0.8rem
    }


    /*twentyFour*/
    .twentyFour {
        width: 16.6667%;
        height: 1.6rem;
        float: left;
        overflow: hidden;
        margin-bottom: 0.1rem
    }

    .twentyFour .centerLi {
        width: 96%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: 1px solid #fff;
        /*border: 0.03rem solid rgba(255,255,255,0.1);*/
        /*box-shadow:inset 0 0 6px rgba(0,0,0,0.4);*/
        float: none;
    }

    .twentyFour .human .name {
        width: 100%;
        height: 0.4rem;
        font-size: 0.2rem;
        line-height: 0.4rem;
    }

    .twentyFour .human img {
        width: 0.7rem;
        height: 0.7rem;
        margin-top: 0.05rem;
    }

    .twentyFour .cla {
        width: 0.9rem;
        height: 1.4rem;
        top: -0.6rem;
        left: 0;
        font-size: 0.15rem;
    }

    .twentyFour .lcla span {
        font-size: 0.2rem;
        top: -0.65rem;
        float: left;
        left: -0rem;
    }

    .twentyFour .cla em {
        font-size: 0.4rem;
        left: 0.2rem;
    }

    .twentyFour .lhj span {
        width: 0.75rem;
        height: 2rem;
        top: -0.57rem;
        left: 1rem;
        font-size: 0.4rem;
    }

    .twentyFour .rhj img {
        width: 0.15rem;
        top: -0.6rem;
        right: 0.15rem;
    }

    .twentyFour .topLi {
        height: 1.18rem;
    }

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

    .twentyFour .bottomLi img {
        width: 0.2rem;
        height: 0.2rem;
        margin-top: 0.15rem;
    }

    .twentyFour .bottomLi span {
        line-height: 0.55rem;
        text-indent: 0.05rem;
    }

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

    .twentyFour .bottomLi .btck {
        width: 32%;
        padding-left: 2%;
    }

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

    .twentyFour .cla em.plus {
        position: relative;
        left: -0.2rem
    }

    .twentyFour .lhj span.plus {
        position: relative;
        left: 0.8rem;
        line-height: 0.45rem;
    }

    .twentyFour .btck img {
        width: 0.25rem;
        height: 0.25rem;
        margin-top: 0.12rem;
    }

    .twentyFour .bottomLi .step img {
        margin-top: 0.16rem;
    }
</style>