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">
                                    <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" v-if="s.ActivePercent != 0 && s.RealHr != 0">
                                        <power :cur-power="s.PowerPercent"></power>

                                    </div>
                                </span>
                                <div class="head">
                                    <img :src="s.Head" alt="" v-if="s.Head">
                                    <img 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="cla">
                                <em v-if="s.RealHr != 0">{{ s.ActivePercent |max100 }}</em>
                                <em class="plus" v-if="s.ActivePercent == 0 && s.RealHr == 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>
        <!--图示-->
        <levelIcon></levelIcon>
        <newRecord :toper-info="toperInfo"></newRecord>
        <newStudent :student-info="studentInfo"></newStudent>
    </div>
</template>

<script>
    import Headside from '@/components/Headside'
    import newRecord from '@/components/newRecord'
    import newStudent from '@/components/newStudent'
    import levelIcon from '@/components/levelIcon'
    import power from '@/components/power'
    import
    {
        getHello,
        getClassStat,
        getRecordBreak,
        getNewUser
    } from '@/api/getApiRes'

    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
                times: 1,
                thisClassName: '',
                studentsClassName: [],
                students: [],
                single: [],
                dialogVisible: false,
                serachBtnStatus: false,
                dialogMsg: '',
                imgsrc: '../static/img/people/',
                totalTime: 4,
                studentTime: 15,
                toperInfo: {
                    dialogVisible: false,
                    toper: {},
                },
                studentInfo: {
                    dialogVisible: false,
                    Rs: [],
                    percent: 0
                },
                fakeEgg: {
                    Rs: {
                        "DuId": 37,
                        "UserId": 0,
                        "UserName": "郑伟",
                        "Sex": 1,
                        "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'});

            if (this.trueDate) {
                this.init();
            } else {
                // 彩蛋
                // this.OpenEgg(this.fakeEgg);
                // 1 2 4 6 9 10 13 16 21 24
                let Rs = fakeNews(33);
                this.giveClassName(Rs);
                this.students = Rs;
                // this.createNewStudent();
            }
        },
        watch: {
            '$route': function (val) {
                if (val.path == '/main') {
                    if (this.trueDate) {
                        this.init();
                    } else {
                        this.students = fakeNews(2);
                        this.giveClassName(this.students);
                        // this.createEgg(this.students[5]);
                    }
                } else {
                    clearInterval(this.mainTimer);
                    clearInterval(this.timer2);
                    clearInterval(this.timer3);
                }
            }
        },
        beforeDestroy() {
            clearInterval(this.mainTimer);
            clearInterval(this.timer2);
            clearInterval(this.timer3);
            this.mainTimer = null;
            this.timer2 = null;
            this.timer3 = null;
        },
        methods: {
            init() {
                // console.log(headTest);
                this.GetgetUserList();
                this.createEgg();
                this.createNewStudent();
                this.curgetClassStat();

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

                this.timer2 = setInterval(() => {
                    this.createEgg();
                }, 31000);

                this.timer3 = setInterval(() => {
                    this.createNewStudent();
                }, 6000);
            },
            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) {
                        // 欢迎新学生时不显示彩蛋
                        if (that.studentInfo.dialogVisible == true) {
                            console.log('正在显示新学生');
                            return false
                        } else {
                            this.OpenEgg(json);
                        }
                    } else {
                        // 并没有人破记录
                        if (json.Code == 999) return false;
                        if (json.Code != 999) that.$message.error(json.Memo + '[错误码]' + json.Code);
                    }
                })
            },
            // 欢迎新同学
            createNewStudent() {
                let that = this;
                let param = {
                    token: localStorage.token,
                    eqSn: localStorage.eqSn
                };
                let postdata = qs.stringify(param);
                getNewUser(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        console.log('来新生了');
                        // 显示彩蛋时不欢迎新学生
                        if (that.toperInfo.dialogVisible == true) {
                            console.log('正在显示彩蛋');
                            return false
                        } else {
                            that.OpenStudent(json.Rs);
                            // OpenStudent(json.Rs,that);
                        }
                    } else {
                        // 并没有人破记录
                        if (json.Code == 999) return false;
                        if (json.Code != 999) that.$message.error(json.Memo + '[错误码]' + json.Code);
                    }
                })
            },
            OpenEgg(msg) {
                this.toperInfo.toper = msg.Rs;
                this.toperInfo.dialogVisible = true;
                // 倒计时5秒自动关闭
                let that = this;
                this.totalTime = 30;
                let clock = window.setInterval(() => {
                    this.totalTime--;
                    if (parseInt(this.totalTime) < 0) {
                        that.toperInfo.dialogVisible = false;
                        clearInterval(clock);
                    }
                }, 1000)
            },
            OpenStudent(msg) {
                let that = this;
                that.studentInfo.Rs = msg;
                that.studentInfo.dialogVisible = true;
                this.studentInfo.percent = 0;
                // 倒计时5秒自动关闭
                this.studentTime = 6;
                let clock = window.setInterval(() => {
                    this.studentTime--;
                    let num = (6 - this.studentTime) / 6 * 100;
                    this.studentInfo.percent = parseInt(num) > 100 ? 100 : num;
                    console.log('num' + num);
                    if (parseInt(this.studentTime) <= 0) {
                        that.studentInfo.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;
                        that.giveClassName(json.Rs);
                    } else {
                        // 已下课
                        if (json.Code == '999') {
                            that.students = ""
                        } 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) {
                        // 没开课
                        if (json.ClassOn == 0) {
                            console.log("下课了");
                            // 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:
                                    that.$router.push({path: '/pk'});
                                    break;
                                case 3:
                                    that.$router.push({path: '/threepk'});
                                    break;
                            }
                        }
                    } else {
                        console.log("已上课");
                    }
                })
            },
            // 给每一个数据加类名，一次遍历全部赋值
            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 = 'twentyFour';
                            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);
                }
            },
            max100(val) {
                if (val <= 100) {
                    return val
                } else {
                    return 100
                }
            }
        },
        components: {
            Headside, levelIcon, newRecord, newStudent,power
        }
    }
</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: #059F00;
    }

    .yellow .centerLi {
        background: #DFB200 ;
    }

    .brown .centerLi {
        background: #EA8813;
    }

    .red .centerLi {
        background: #CF1122;
    }


    .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: 33rem;
        /*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;
    }

    .human .name div {
        float: left;
        width: 20%;
        text-align: left;
        text-indent: 0.1rem;
    }

    .human .name .nameMd {
        width: 60%;
        text-align: center;
        text-indent: 0;
    }

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

    .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: 2%;
        /*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: 2%;
    }

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

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

    .birth img.birthCrow {
        position: relative;
        top: -0.1rem;
        width: 1.2rem;
        height: 0.7rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: none;
    }

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

    .two .birth img.birthCrow {
        top: 0.1rem;
    }

    .three .birth img.birthCrow {
        top: 0.8rem;
    }

    .six .birth {
        top: -3.1rem;
    }

    .six .birth img.birthCrow {
        width: 0.8rem;
        height: 0.5rem;
        top: 1.2rem;
    }

    .six .birth img.birthText {
        top: 2rem;
        width: 1.5rem;
        height: 0.6rem;
    }

    .nine .birth {
        top: -3.1rem;
    }

    .nine .birth img.birthCrow {
        width: 0.8rem;
        height: 0.5rem;
        top: 1.6rem;
    }

    .nine .birth img.birthText {
        top: 2.1rem;
        width: 1.2rem;
        height: 0.5rem;
    }

    .ten .birth {
        top: -3.1rem;
    }

    .ten .birth img.birthCrow {
        width: 0.8rem;
        height: 0.5rem;
        top: 1.6rem;
    }

    .ten .birth img.birthText {
        top: 2.1rem;
        width: 1.2rem;
        height: 0.5rem;
    }

    .twelve .birth {
        top: -3.1rem;
    }

    .twelve .birth img.birthCrow {
        width: 0.6rem;
        height: 0.3rem;
        top: 2rem;
    }

    .twelve .birth img.birthText {
        top: 2.4rem;
        width: 1rem;
        height: 0.4rem;
    }

    .sixteen .birth {
        top: -3.1rem;
    }

    .sixteen .birth img.birthCrow {
        width: 0.6rem;
        height: 0.3rem;
        top: 2.1rem;
    }

    .sixteen .birth img.birthText {
        top: 2.45rem;
        width: 1rem;
        height: 0.4rem;
    }

    .twenty .birth {
        top: -3.1rem;
    }

    .twenty .birth img.birthCrow {
        width: 0.6rem;
        height: 0.3rem;
        top: 2.1rem;
    }

    .twenty .birth img.birthText {
        top: 2.45rem;
        width: 1rem;
        height: 0.4rem;
    }

    .twentyFour .birth {
        top: -3.1rem;
    }

    .twentyFour .birth img.birthCrow {
        width: 0.6rem;
        height: 0.3rem;
        top: 2.2rem;
    }

    .twentyFour .birth img.birthText {
        top: 2.5rem;
        width: 0.8rem;
        height: 0.3rem;
    }

</style>