flyLong/pc/src/views/online.vue

<template>
    <div class="context bgStyle1" id="online">
        <div class="change">
            <div class="basicInfo">
                <em>课程名：{{PlanName}} </em>
                <em>学员数：{{Num}} </em>
                <em>教练：{{Teacher}} </em>
                <!--<em>（在线：{{classInfo.online}}人 离线：{{classInfo.offline}}人） </em>-->
                <em>当前时间：{{classInfo.endTime}} </em>
                <!--拿到eqsn才能获取数据-->
                <em class="room">区域列表 </em>
                <select  id="regionSelect" v-model="VenueId" placeholder="请选择区域" @change="queryEqsnByVenueId">
                    <option value=""> 请选择区域</option>
                    <option :value="item.SvId"  v-for="item in VenueOption"> {{item.Name}}</option>
                </select>
                <!--<el-select v-model="VenueId" placeholder="请选择区域" @change="queryEqsnByVenueId">-->
                    <!--<el-option-->
                            <!--v-for="item in VenueOption"-->
                            <!--:key="item.SvId"-->
                            <!--:label="item.Name"-->
                            <!--:value="item.SvId">-->
                    <!--</el-option>-->
                <!--</el-select>-->
            </div>

            <el-button @click="full_screen" v-if="!screen_full" icon="el-icon-full-screen" type="primary">全屏</el-button>
            <el-button @click="cancle_screen" v-else icon="el-icon-full-screen" type="primary">缩小</el-button>
            <!--<el-button v-if="classState == 0" @click="" type="success">上课</el-button>-->
            <!--<el-button v-else @click="" type="danger">下课</el-button>-->
            <el-button @click="showRank" type="warning">排行榜</el-button>
            <!--<el-button @click="">隐藏信息 todo</el-button>-->
        </div>
        <div :class="[{'userList':true},{'bigUserList':bigUserList}]">
            <ul :class="[{'bigUserList':bigUserList}]">
                <li v-if="students.length == 0">
                    <h5 style="color: #fff;font-size: 3rem">暂无学生加入当前课程</h5>
                </li>
                <li v-for="(s,i) in students" :class="studentsClassName[i].name" v-show="students"
                    v-if="students.length > 0">
                    <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.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 class="isPrivate" v-if="s.IsPrivate == 1">
                                        <i></i>
                                    </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>
                </li>
            </ul>
        </div>
        <!--图示-->
        <div class="bottom">
            <levelIcon></levelIcon>
        </div>
        <!--排行榜-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogMemberVisible" width="1366px">
            <userRank :rank-info="rankInfo"></userRank>
            <br>
            <div class="dialogFooter">
                <el-button size="small" @click="dialogMemberVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import levelIcon from '@/components/levelIcon'
    import power from '@/components/power'
    import userRank from '@/components/userRank'
    import Global from '../Global.js'
    import {
        QueryShopVenue,
        QueryVenueEquip,
        getHello,
        CalorieStatsQuery,
        ClassUserRank,
    } from "../api/getApiRes";

    let qs = require('qs');
    export default {
        data() {
            return {
                classInfo: {
                    name: '',
                    len: '',
                    online: 0,
                    offline: 0,
                    time: '00：00：00',
                    endTime: '00：00：00',
                },
                VenueId: '',//所选区域
                classState: 0,//0 下课 1上课
                students: [],
                VenueOption: [],
                studentsClassName: [],
                rankInfo: [],
                screen_full: false,
                bigUserList: false,
                dialogMemberVisible: false,//false
                dialogTitle: '排行榜',
                EqSn: '',
                PlanName: '',
                BeginTime: '',
                Num: '',
                Teacher: '',

            };
        },
        mounted() {
            this.init();
        },
        watch: {
            $route(to) {
                if (to.name != 'online') {
                    this.clearRem();
                    clearInterval(this.mainTimer);//页面销毁时清除定时器
                } else {
                    this.setRem();
                    this.getVenueQuery();
                    this.queryEqsnByVenueId();
                }
            },
            // EqSn(to){
            //     console.log(to);
            //     clearInterval(this.mainTimer);//页面销毁时清除定时器
            //     if(to){
            //         this.mainTimer = setInterval(() => {
            //             this.GetgetUserList();
            //         }, 1000);
            //     }
            // }
        },
        destroyed() {
            clearInterval(this.mainTimer);//页面销毁时清除定时器
        },
        methods: {
            init() {
                // this.getList(26);
                this.getVenueQuery();
            },
            getClassUserRank() {
                let that = this;
                let param = {
                    eqSn:that.EqSn
                };
                let postdata = qs.stringify(param);

                ClassUserRank(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        if (json.Rs) {
                            that.rankInfo = json.Rs;
                        }else{
                            that.rankInfo = [];
                        }
                    } else {
                        if (json.Code == '999') {
                            // that.$router.push({path: '/'});
                        } else {
                            // 已出错
                            that.$message.error(json.Memo);
                        }
                    }
                })
            },
            // 载入课程信息
            ReadLessonInfo(Dp) {
                this.PlanName = Dp.PlanName;
                this.BeginTime = Dp.BeginTime;
                this.Teacher = Dp.Teacher;
                this.Num = this.students.length;
            },
            // 计算团队竞技课持续时间
            ClacClassTime() {
                let BeginTime = new Date(globalcurrent() + ' ' + this.BeginTime);//结束时间
                let nowDate = new Date();
                let date = new Date(nowDate - BeginTime - 8 * 60 * 60 * 1000);//减掉东八区时区问题

                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                this.classInfo.endTime = h + m + s;
            },
            clearRem() {
                // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
                let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
                //得到html的Dom元素
                let htmlDom = document.getElementsByTagName('html')[0];
                htmlDom.style.fontSize = '14px'
            },
            setRem() {
                // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
                let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
                //得到html的Dom元素
                let htmlDom = document.getElementsByTagName('html')[0];
                //设置根元素字体大小
                htmlDom.style.fontSize = htmlWidth / 140 + 'px';
            },
            // 全屏显示
            full_screen() {
                let that = this;
                this.screen_full = true;
                let elem = document.getElementById("online");
                this.full_state = true;
                if (elem.webkitRequestFullScreen) {
                    elem.webkitRequestFullScreen();
                    that.full_rule();
                } else if (elem.mozRequestFullScreen) {
                    elem.mozRequestFullScreen();
                    that.full_rule();
                } else if (elem.requestFullScreen) {
                    elem.requestFullscreen();
                    that.full_rule();
                } else {
                    this.screen_full = false;
                    notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
                }
            },
            // 取消全屏
            cancle_screen() {
                let that = this;
                this.screen_full = false;
                this.full_state = false;
                var elem = document;
                if (elem.webkitCancelFullScreen) {
                    elem.webkitCancelFullScreen();
                    that.cancle_full_rule();
                } else if (elem.mozCancelFullScreen) {
                    elem.mozCancelFullScreen();
                    that.cancle_full_rule();
                } else if (elem.cancelFullScreen) {
                    elem.cancelFullScreen();
                    that.cancle_full_rule();
                } else if (elem.exitFullscreen) {
                    elem.exitFullscreen();
                    that.cancle_full_rule();
                } else {
                    this.screen_full = true;
                    notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
                }
            },
            // 打开排行榜
            showRank() {
                if (this.rankInfo.length == 0) {
                    this.$message.error('暂无排名数据');
                    return false
                } else {
                    this.dialogMemberVisible = true;
                }
            },
            // 获取演示区域
            getVenueQuery() {
                let that = this;
                that.loading = true;
                let param = {
                    key: localStorage.ServiceKey,
                    shopId: localStorage.ServiceId,
                };
                let postdata = qs.stringify(param);
                QueryShopVenue(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.loading = false;
                        if (json.Rs) {
                            that.VenueOption = json.Rs;

                        } else {
                            that.VenueOption = [];
                        }
                    } else {
                        if (!localStorage.ServiceKey) {
                            that.$message.error('还未与心率系统对接，请联系管理员');
                        } else {
                            that.$message.error(json.Memo + ' 错误码：' + json.Code);
                        }
                    }
                })
            },
            // 获取演示设备eqsn
            queryEqsnByVenueId() {
                let that = this;
                that.loading = true;
                if(!that.VenueId){
                    return false
                }
                let param = {
                    key: localStorage.ServiceKey,
                    shopId: localStorage.ServiceId,
                    svId: that.VenueId,
                    eqType: 3//设备类型 1 电视盒子 2 演示对应中间件 3 演示客户端
                };
                let postdata = qs.stringify(param);
                QueryVenueEquip(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.loading = false;
                        if (json.Rs) {
                            that.EqSn = json.Rs[0].EqSn;
                            clearInterval(this.mainTimer);//页面销毁时清除定时器
                            that.GetgetUserList();
                            if (that.EqSn) {
                                this.mainTimer = setInterval(() => {
                                    this.GetgetUserList();
                                }, 1000);
                            }

                        } else {
                            that.$message.error('当前区域没有设置显示设备');
                            that.students = [];
                            that.rankInfo = [];
                            this.PlanName = '';
                            this.BeginTime = '';
                            this.Teacher = '';
                            this.Num = '0';
                            this.classInfo.endTime = "00:00:00";
                            clearInterval(this.mainTimer);//页面销毁时清除定时器
                            return false
                        }
                    } else {
                        that.$message.error(json.Memo + ' 错误码：' + json.Code);
                    }
                })
            },
            GetgetUserList() {
                let that = this;
                let param = {
                    token: localStorage.token,
                    eqSn: that.EqSn
                };
                let postdata = qs.stringify(param);
                // CalorieStatsQuery(postdata).then(res => {
                getHello(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        if (!json.Dp) {
                            // that.$message.error('没有获取到课程信息');
                            this.PlanName = '';
                            this.BeginTime = '';
                            this.Teacher = '';
                        } else {
                            that.ReadLessonInfo(json.Dp);
                        }
                        that.students = json.Rs;
                        that.rankInfo = json.Rs;
                        that.giveClassName(json.Rs);
                        that.ClacClassTime();
                    } else {
                        // 已下课
                        if (json.Code == '999') {
                            that.students = "";
                            that.rankInfo = "";
                            // this.PlanName = '';
                            // this.BeginTime = '';
                            // this.Teacher = '';
                            that.getClassUserRank();
                        } else {
                            // 已出错
                            that.$message.error(json.Memo);
                        }
                    }
                })
            },
            getList(len) {
                let rs = {};
                for (var i = 0; i < len; i++) {
                    rs = {
                        Age: 13,
                        AvgHr: 0,
                        BeginTime: 1608188579,
                        Ck: "99",
                        Cle: "159",
                        DuId: 119,
                        EndTime: 0,
                        GroupNo: 1,
                        Head: "http://192.168.0.2/gc.png",
                        Height: 160,
                        HrId: 41,
                        IsBirthday: 0,
                        IsBreaking: 0,
                        IsNewUser: 0,
                        MaxHr: 80,
                        PowerPercent: "80",
                        Name: "西门吹雪",
                        PkSucessnum: '1',//胜场数
                        PkTotalnum: '1',//总场数
                        PlanId: 60,
                        PureCalorieNoVo2: "500",
                        Sex: 1,
                        Sn: "22735",
                        StaticHr: 60,
                        Steps: "1280",
                        SvId: 20,
                        UserId: 104,
                        UserMd5: "55661a861f8fae20dd505b2b4575dc0e",
                        Weight: 50,
                        ActivePercent: 70,
                        bmrMSjRmrcb: 66.00000000000001,
                        FormatCk: "12",
                        isAlive: true,
                        isFinish: false,
                        isOver: false,
                        IsPrivate: 1,
                        lastPushDataTime: 1608188947175,
                        lastUpdateTime: 1608188945184,
                        queuePushData: [],
                        RealHr: "100",
                        vo2Max: "123"
                    };
                    this.students.push(rs);
                    this.rankInfo.push(rs);
                }
                this.giveClassName(this.students);
            },
            // 给每一个数据加类名，一次遍历全部赋值
            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:
                            this.bigUserList = true;
                            numberClass = 'twentyFour';
                            break;
                        case parseInt(res.length) >= 31:
                            this.bigUserList = true;
                            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 > 69:
                            colorClass = 'yellow';
                            break;
                        case per <= 69 && 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 parseInt(val);
                }
            },
            max100(val) {
                if (val <= 100) {
                    return val
                } else {
                    return 100
                }
            }
        },
        components: {
            levelIcon, power, userRank
        }
    }
</script>

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

    .context {
        border-radius: 12px;
        height: 820px;
        overflow-y: scroll;
        display: block;
        margin: 0 auto;
        background-color: #fff !important;
        padding: 5px;
    }

    .context::-webkit-scrollbar { /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    .context::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #535353;
    }

    .context::-webkit-scrollbar-track { /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        background: #EDEDED;
    }

    .panel /deep/ h5 {
        margin: 0;
        text-align: left;
        font-size: 18px;
        font-weight: normal;
        padding-bottom: 10px;
        border-bottom: 1px solid #F0F2F5;
        margin-bottom: 10px;
    }

    .change {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-top: 10px;
        padding-bottom: 0px;
    }

    .el-button--primary {
        margin-right: 10px;
        margin-left: 10px;
    }

    .change button {
        float: right;
        margin-right: 10px;
        cursor: pointer;
    }

    .basicInfo {
        float: left;
        font-size: 1rem;
        line-height: 2rem;
        color: #fff;
        padding-left: 1%;
        padding-top: 10px;
    }

    .userList {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        min-height: 42rem;
        margin-top: 1rem;
    }

    em {
        font-style: normal;
    }

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

    ul {
        width: 100%;
        height: 100%;
        min-height: 42rem;
        overflow: hidden;
        margin: 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

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

    .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%;
        height: auto;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 1.2rem;
        font-weight: normal !important;
        color: #fff;
        text-align: left;
        line-height: 3rem;
    }

    .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: 40rem;
        height: 20rem;
    }

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


    .max .human .name {
        font-size: 2rem;
        height: 5rem;
        line-height: 4rem;
    }

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

    .max .cla {
        width: 12rem;
        height: 8rem;
        top: -10rem;
        left: 0;
        font-size: 8rem;
    }

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

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

    .max .lhj span {
        width: 12rem;
        height: 8rem;
        top: -8rem;
        left: 10rem;
        font-size: 6rem;
    }

    .max .rhj img {
        width: 2rem;
        top: -8rem;
        right: 1rem;
    }

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

    .max .topLi {
        height: 16rem;
    }

    .max .bottomLi {
        height: 6rem;
        line-height: 6rem;
        font-size: 2rem;
        text-align: center;
    }

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

    .max .bottomLi img {
        width: 2rem;
        height: 2rem;
        margin-top: 0.4rem;
    }

    .max .bottomLi span {
        line-height: 3rem;
        text-indent: 1rem;
    }

    .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: 8.75rem
    }

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

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

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

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


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

    .two .centerLi {
        height: 100%;
        /*border: 1px solid #fff;*/
    }

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

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

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

    .two .cla {
        width: 12rem;
        height: 8rem;
        top: -9rem;
        left: 0;
        font-size: 2rem;
    }

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

    .two .cla em {
        font-size: 5rem;
        left: 4rem;
    }

    .two .lhj span {
        width: 12rem;
        height: 8rem;
        top: -9rem;
        left: 10rem;
        font-size: 5rem;
    }

    .two .rhj img {
        width: 1.6rem;
        top: -9rem;
        right: 2.5rem;
    }

    .two .topLi {
        height: 16rem;
    }

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

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

    .two .bottomLi span {
        line-height: 3rem;
        text-indent: 1rem;
    }

    .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: 9rem
    }

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

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


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

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

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

    .three .human img {
        width: 9rem;
        height: 9rem;
        margin-top: 1rem;
    }

    .three .cla {
        width: 11rem;
        height: 8rem;
        top: -8rem;
        left: 0;
        font-size: 2rem;
    }

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

    .three .cla em {
        font-size: 5rem;
        left: 4rem;
    }

    .three .lhj span {
        width: 12rem;
        height: 8rem;
        top: -8rem;
        left: 7rem;
        font-size: 4.4rem;
    }

    .three .rhj img {
        width: 1.4rem;
        top: -8rem;
        right: 2rem;
    }

    .three .topLi {
        height: 13rem;
    }

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


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

    .three .bottomLi span {
        line-height: 3.2rem;
        text-indent: 1rem;
    }

    .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: 8rem
    }

    .three .bottomLi .btck img {
        width: 2.4rem;
        height: 2.4rem;
        margin-top: 0.2rem;
    }

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

    .three /deep/ .powerContainer img {
        width: 2rem;
    }

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

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

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

    .six .human img {
        width: 7rem;
        height: 7rem;
        margin-top: 0.4rem;
    }

    .six .cla {
        width: 8rem;
        height: 8rem;
        top: -8rem;
        left: 0;
        font-size: 6rem;
    }

    .six .lcla span {
        font-size: 2rem;
        top: -6.5rem;
        float: left;
        left: -0.2rem;
    }

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

    .six .lhj span {
        width: 8rem;
        height: 8rem;
        top: -6.5rem;
        left: 11rem;
        font-size: 4rem;
    }

    .six .rhj img {
        width: 1.4rem;
        top: -7rem;
        right: 2rem;
    }

    .six .topLi {
        height: 10.9rem;
    }

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

    .six .bottomLi img {
        width: 1.8rem;
        margin-top: 0.5rem;
    }

    .six .bottomLi .btcla img {
        width: 1.4rem;
        margin-top: 0.5rem;
    }

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

    .six .bottomLi span {
        line-height: 3.2rem;
        text-indent: 0.5rem;
    }

    .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: -1.2rem
    }

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

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


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

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

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

    .nine .human img {
        width: 6rem;
        height: 6rem;
        margin-top: 0.4rem;
    }

    .nine .cla {
        width: 8rem;
        height: 8rem;
        top: -5.5rem;
        left: 0;
        font-size: 4rem;
    }

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

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

    .nine .lhj span {
        width: 7rem;
        height: 8rem;
        top: -5.5rem;
        left: 12rem;
        font-size: 4rem;
    }

    .nine .rhj img {
        width: 1rem;
        top: -5.5rem;
        right: 3rem;
    }

    .nine .topLi {
        height: 10rem;
    }

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


    .nine .bottomLi img {
        width: 1.6rem;
        height: 1.6rem;
        margin-top: 0.6rem;
    }

    .nine .bottomLi span {
        line-height: 3.2rem;
        text-indent: 0.4rem;
    }

    .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: -1.2rem
    }

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

    .nine .bottomLi .btck img {
        width: 2rem;
        height: 2rem;
        margin-top: 0.4rem;
    }

    .nine /deep/ .powerContainer img {
        width: 1.2rem;
    }

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

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

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

    .ten .human img {
        width: 6rem;
        height: 6rem;
        margin-top: 0.6rem;
    }

    .ten .cla {
        width: 5rem;
        height: 4rem;
        top: -5rem;
        left: 2rem;
        font-size: 1rem;
    }

    .ten .lcla span {
        font-size: 1.5rem;
        top: -5rem;
        float: left;
        left: 2rem;
    }

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

    .ten .lhj span {
        width: 4rem;
        height: 4rem;
        top: -5rem;
        left: 9.5rem;
        font-size: 4rem;
    }

    .ten .rhj img {
        width: 1rem;
        top: -4.5rem;
        right: 0.5rem;
    }

    .ten .topLi {
        height: 9rem;
    }

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

    .ten .bottomLi img {
        width: 1.5em;
        height: 1.5rem;
        margin-top: 0.9rem;
    }

    .ten .bottomLi span {
        line-height: 3.2rem;
        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: -1.2rem
    }

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

    .ten .btck img {
        width: 1.8rem;
        height: 1.8rem;
        margin-top: 0.65rem;
    }

    .ten /deep/ .powerContainer img {
        width: 1.2rem;
        margin-left: 1rem;
    }

    /*twelve*/
    .twelve {
        width: 20rem;
        height: 11rem;
        float: left;
        overflow: hidden;
        margin-bottom: 1.2rem
    }

    .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: 1.5rem;
        font-size: 1rem;
        line-height: 1.5rem;
        margin-bottom: 0.5rem;
    }

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

    .twelve .cla {
        width: 4rem;
        height: 4rem;
        top: -4rem;
        left: 1.5rem;
    }

    .twelve .lcla span {
        font-size: 1rem;
        top: -4rem;
        float: left;
        left: 1.5rem;
    }

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

    .twelve .lhj span {
        width: 1.2rem;
        height: 1.2rem;
        top: -4.2rem;
        left: 8.1rem;
        font-size: 3rem;
    }

    .twelve .rhj img {
        width: 1rem;
        top: -4rem;
        right: 0.5rem;
    }

    .twelve .topLi {
        height: 8rem;
    }

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

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

    .twelve .bottomLi span {
        line-height: 3.2rem;
        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: 3.2rem
    }

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

    .twelve .btck img {
        width: 1.7rem;
        height: 1.7rem;
        margin-top: 0.6rem;
    }

    .twelve /deep/ .powerContainer img {
        width: 1.2rem;
        margin-left: 1rem;
    }

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

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

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

    }

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

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

    .sixteen .lcla span {
        font-size: 1rem;
        top: -3.5rem;
        float: left;
        left: 5rem;
    }

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

    .sixteen .lhj span {
        width: 1rem;
        height: 1.8rem;
        top: -4rem;
        left: 11rem;
        font-size: 3rem;
    }

    .sixteen .rhj img {
        width: 1rem;
        top: -4rem;
        right: 0.5rem;
    }

    .sixteen .topLi {
        height: 8rem;
    }

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

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

    .sixteen .bottomLi span {
        line-height: 2.2rem;
        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: 1.6rem;
        height: 1.6rem;
    }

    .sixteen /deep/ .powerContainer img {
        width: 1.2rem;
        margin-left: 1rem;
    }

    /*twenty*/
    .twenty {
        width: 20rem;
        height: 8rem;
        float: left;
        overflow: hidden;
        margin-bottom: 0.1rem
    }

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

    .twenty .human .name {
        width: 100%;
        height: 2.1rem;
        font-size: 1rem;
        line-height: 2rem;
        margin-bottom: 0.1rem;
    }

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

    .twenty .cla {
        width: 0.95rem;
        height: 1.4rem;
        top: -3.5rem;
        left: 3rem;
        font-size: 0.8rem;
    }

    .twenty .lcla span {
        font-size: 1rem;
        top: -3.5rem;
        float: left;
        left: 5.2rem;
    }

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

    .twenty .lhj span {
        width: 0.85rem;
        height: 2rem;
        top: -3.5rem;
        left: 11rem;
        font-size: 3rem;
    }

    .twenty .rhj img {
        width: 1rem;
        top: -3.5rem;
        right: 0.5rem;
    }

    .twenty .topLi {
        height: 6rem;
    }

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

    .twenty .bottomLi img {
        width: 1.2rem;
        height: 1.2rem;
        margin-top: 0.8rem;
    }

    .twenty .bottomLi span {
        line-height: 3rem;
        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: 3.2rem
    }

    .twenty /deep/ .powerContainer img {
        width: 1rem;
        margin-left: 1.5rem;
    }

    .bigUserList {
        min-height: 58rem
    }

    /*twentyFour*/
    .twentyFour {
        width: 20rem;
        height: 9rem;
        float: left;
        overflow: hidden;
        margin-bottom: 0.1rem
    }

    .twentyFour .centerLi {
        width: 96%;
        height: 100%;
        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: 1.6rem;
        font-size: 1rem;
        line-height: 1.6rem;
    }

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

    .twentyFour .cla {
        width: 0.9rem;
        height: 1.4rem;
        top: -4rem;
        left: 2.2rem;
        font-size: 1rem;
    }

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

    .twentyFour .cla em {
        font-size: 3rem;
        left: 5rem;
    }

    .twentyFour .lhj span {
        width: 0.75rem;
        height: 2rem;
        top: -4rem;
        left: 11rem;
        font-size: 3rem;
    }

    .twentyFour .rhj img {
        width: 1rem;
        top: -4rem;
        right: 0.5rem;
    }

    .twentyFour .topLi {
        height: 7.5rem;
    }

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

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

    .twentyFour .bottomLi span {
        line-height: 1.4rem;
        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: 3.2rem;
        line-height: 0.45rem;
    }

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

    .twentyFour .bottomLi .step img {
        margin-top: 0.16rem;
    }

    .twentyFour /deep/ .powerContainer img {
        width: 1rem;
        margin-left: 1.6rem;
    }

    /*生日*/

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

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

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

    .two .birth img.birthCrow {
        top: -1rem;
    }

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

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

    .six .birth img.birthCrow {
        width: 4rem;
        height: 2rem;
        top: 0rem;
    }

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

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

    .nine .birth img.birthCrow {
        width: 3rem;
        height: 1.5rem;
        top: 1.6rem;
    }

    .nine .birth img.birthText {
        top: 4.5rem;
        width: 4rem;
        height: 2rem;
    }

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

    .ten .birth img.birthCrow {
        width: 4rem;
        height: 2rem;
        top: 1.6rem;
    }

    .ten .birth img.birthText {
        top: 5rem;
        width: 4rem;
        height: 2rem;
    }

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

    .twelve .birth img.birthCrow {
        width: 3rem;
        height: 1.5rem;
        top: 2rem;
    }

    .twelve .birth img.birthText {
        top: 5rem;
        width: 3rem;
        height: 1.6rem;
    }

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

    .sixteen .birth img.birthCrow {
        width: 2rem;
        height: 0.8rem;
        top: 2.5rem;
    }

    .sixteen .birth img.birthText {
        top: 4.5rem;
        width: 3rem;
        height: 1.6rem;
    }

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

    .twenty .birth img.birthCrow {
        width: 2rem;
        height: 0.8rem;
        top: 2.1rem;
    }

    .twenty .birth img.birthText {
        top: 4.45rem;
        width: 2rem;
        height: 0.8rem;
    }

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

    .twentyFour .birth img.birthCrow {
        width: 2.5rem;
        height: 1rem;
        top: 2.4rem;
    }

    .twentyFour .birth img.birthText {
        top: 5.5rem;
        width: 3rem;
        height: 1.7rem;
    }

    /*isPrivate*/
    .isPrivate {
        position: relative;
        float: right;
        top: -10rem;
        width: 75%;
        height: 1px;
        display: block;
        margin: 0 auto;
        overflow: visible;
    }

    .isPrivate i {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 0.1rem;
        width: 3rem !important;
        height: 3rem !important;
        border: none !important;
        background: url("../static/img/privateSign.svg");
        background-size: 100% 100%;
        background-position: top center;
    }

    .two .isPrivate {
        top: -11rem;
    }

    .three .isPrivate {
        top: -10rem;
        left: -0.1rem;
    }

    .six .isPrivate {
        top: -8rem;
        left: -1rem;
    }

    .six .isPrivate i {
        width: 3.2rem !important;
        height: 3.2rem !important;
    }

    .nine .isPrivate {
        top: -7rem;
        left: -1rem;
    }

    .nine .isPrivate i {
        width: 3rem !important;
        height: 3rem !important;
    }

    .ten .isPrivate {
        top: -7rem;
    }

    .ten .isPrivate i {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    .twelve .isPrivate {
        top: -5.8rem;
    }

    .twelve .isPrivate i {
        width: 2.1rem !important;
        height: 2.1rem !important;
    }

    .sixteen .isPrivate {
        top: -4.5rem;
        left: -0.1rem;
    }

    .sixteen .isPrivate i {
        width: 2rem !important;
        height: 2rem !important;
    }

    .twenty .isPrivate {
        top: -4rem;
        left: -0.5rem;
    }

    .twenty .isPrivate i {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    .twentyFour .isPrivate {
        top: -5.5rem;
    }

    .twentyFour .isPrivate i {
        width: 2rem !important;
        height: 2rem !important;
    }

    .bottom {
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /deep/ .el-dialog {
        background-color: #028fe1;
        background: url("../static/img/bg/bg_1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #fff;
    }

    /deep/ .el-dialog__title {
        color: #fff;
        font-size: 2rem;
    }

    /deep/ .el-input__inner {
        background-color: inherit;
        color: #fff;
    }

    .el-select-dropdown__item {
        padding-left: 10px !important;
    }

    .el-scrollbar {
        padding-left: 10px !important;
    }

    .selected {
        padding-left: 10px !important;
    }
    .room {
        margin-left: 10px;
    }
    #regionSelect {
        height: 25px;
        line-height: 25px;
        background-color: inherit;
        color: #fff;
    }
    #regionSelect option {
        color: #000;
    }
    /deep/ .el-dialog__body .el-col {
        width: 50%;
    }
</style>