sportCms/src/views/Class/ClassOnLine.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,
    QueryDemoVenueEquipInOlinClass,
    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: '',
            Memo: '',

        };
    },
    mounted() {
        this.init();
    },
    watch: {
        $route(to) {
            if (to.name != 'ClassOnLine') {
                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(getDate(0,0) + ' ' + 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);
            QueryDemoVenueEquipInOlinClass(postdata).then(res => {
                let json = res;
                if (json.Code == 0) {
                    that.loading = false;
                    if (json.Rs) {
                        that.EqSn = json.Rs[0].EqSn;
                        that.Memo = json.Rs[0].Memo;
                        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>