flyLong/v2tv/src/components/student.vue

<template>
  <ul>
    <li v-for="(s,i) in students" :class="studentsClassName[i].name" v-show="students"
        v-if="students.length > 0">
      <div class="ltLi" v-if="students.length == 1"></div>
      <div class="centerLi">
        <div class="topLi">
          <div class="human">
                                <span class="name">
                                    <div class="nameLt">
                                        <i class="el-icon-male" v-if="s.Sex == 1"></i>
                                        <i class="el-icon-female" v-if="s.Sex == 2"></i>
                                    </div>
                                    <div class="nameMd">{{ s.Name }}</div>
                                    <div class="namert" v-if="s.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>
      <div class="rtLi" v-if="students.length == 1"></div>
      <img src="../static/img/long.png" class="longIcon" v-if="students.length == 1"/>
    </li>

  </ul>
</template>

<script>
import power from '@/components/power'

export default {
  props: ['students', 'studentsClassName'],
  filters: {
    fmtNum(val) {
      if (val == 0) {
        return '--'
      } else {
        if (parseInt(val) < 0) return 0;
        if (parseInt(val) > 0) return val
      }
    },
    fmtFloat(val) {
      if (val == 0) {
        return '0.0'
      } else {
        return parseFloat(val).toFixed(1);
      }
    },
    fmtInt(val) {
      if (val == 0) {
        return '0'
      } else {
        // return parseFloat(val).toFixed(2);
        return parseInt(val);
      }
    },
    max100(val) {
      if (val <= 100) {
        return val
      } else {
        return 100
      }
    }
  },
  components: {
    power
  }
}
</script>

<style scoped>

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

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

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

.green .centerLi {
  background: #059F00;
}

.yellow .centerLi {
  background: #DFB200;
}

.brown .centerLi {
  background: #EA8813;
}

.red .centerLi {
  background: #CF1122;
}


.slowJump {
  animation: mymove 3s infinite;
  -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
  animation-direction: alternate; /*轮流反向播放动画。*/
  animation-timing-function: ease-in-out; /*动画的速度曲线*/
  /* Safari 和 Chrome */
  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
}

.normalJump {
  animation: mymove 2s infinite;
  -webkit-animation: mymove 2s infinite; /*Safari and Chrome*/
  animation-direction: alternate; /*轮流反向播放动画。*/
  animation-timing-function: ease-in-out; /*动画的速度曲线*/
  /* Safari 和 Chrome */
  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
}

.fastJump {
  animation: mymove 1s infinite;
  -webkit-animation: mymove 1s infinite; /*Safari and Chrome*/
  animation-direction: alternate; /*轮流反向播放动画。*/
  animation-timing-function: ease-in-out; /*动画的速度曲线*/
  /* Safari 和 Chrome */
  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
}

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

}

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


/*userList*/

.userList {
  width: 100%;
  /*min-height: 76%;*/
  /*height: 76%;*/
  overflow: hidden;
  overflow-y: scroll;
  display: block;
  margin: 0.1rem auto;
}

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

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

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

}

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

s {
  text-decoration: none;
}

em {
  font-style: normal;
}

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

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

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

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

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

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

.cla em {
  text-align: right;
}

.heartJump {
  position: relative;
}

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

.rhj {
  float: right;
}

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.max .topLi {
  height: 4.5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

.two .topLi {
  height: 4.2rem;
}

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.six .topLi {
  height: 2.6rem;
}

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

.nine .topLi {
  height: 2rem;
}

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ten .topLi {
  height: 1.85rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.twelve .topLi {
  height: 1.65rem;
}

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

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

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

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

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

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

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

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

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

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


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

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

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

}

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

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

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

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

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

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

.sixteen .topLi {
  height: 1.4rem;
}

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

.twenty .topLi {
  height: 1.35rem;
}

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

.twentyFour .topLi {
  height: 1.19rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*isPrivate*/
.isPrivate {
  position: relative;
  float: right;
  top: -3.3rem;
  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: 1rem !important;
  height: 1rem !important;
  border: none !important;
  background: url("../static/img/privateSign.svg");
  background-size: 100% 100%;
  background-position: top center;
}

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

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

.six .isPrivate {
  top: -1.9rem;
}

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

.nine .isPrivate {
  top: -1.4rem;
  left: -0.1rem;
}

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

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

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

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

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

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

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

.twenty .isPrivate {
  top: -1rem;
}

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

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

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


</style>