flyLong/tv/src/views/Main.vue

<template>
  <div class="pages">
    <Headside></Headside>
    <div class="userList">
      <ul>
        <li v-for="(s,i) in students" :class="studentsClassName[i].name" v-show="students">
          <div class="ltLi" v-if="students.length == 1"></div>
          <div class="centerLi">
            <div class="topLi">
              <div class="cla">
                <span>{{ s.percent }}</span><s>%</s>
              </div>
              <div class="human">
                <!--                <img src="../static/img/head.png" height="300" width="300"/>-->
                <img :src="s.head" height="300" width="300"/>
                <span class="name">{{ s.name }}</span>
              </div>
              <div class="heartJump">
                <span>{{ s.heartJump }}</span><img src="../static/img/heart.png" width="53"/>
              </div>
            </div>
            <div class="bottomLi">
              <div class="btcla">
                卡路里 {{ s.calc }}
              </div>
              <div class="btck">
                步数 {{ s.step }}
              </div>
              <div class="step">
                CK {{ s.ck }}
              </div>
            </div>
          </div>
          <div class="rtLi" v-if="students.length == 1"></div>
        </li>
      </ul>
    </div>
    <div class="levelIcon">
      <ul>
        <li>
          <span class="cube">
             <div>
                  0%-<br>
            39%
             </div>
          </span>
          <em>激活放松</em>
        </li>
        <li>
          <span class="cube">
             <div>
             40%-<br>54%  </div>
          </span>
          <em>动态热身</em>
        </li>
        <li>
          <span class="cube">
             <div>
             55%-<br>69%  </div>
          </span>
          <em>脂肪燃烧</em>
        </li>
        <li>
          <span class="cube">
             <div>
             70%-<br>79%  </div>
          </span>
          <em>糖分消耗</em>
        </li>
        <li>
          <span class="cube">
             <div>
             80%-<br>89%  </div>
          </span>
          <em>心肺训练</em>
        </li>
        <li>
          <span class="cube">
             <div>
             ≥90%  </div>
          </span>
          <em>峰值锻炼</em>
        </li>
      </ul>
    </div>

    <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="36%"
        :show-close="false"
    >
      <div class="eggContainer">
        <h5>单次CK值（新个人记录）</h5>
        <div class="dgCenter">
          <div class="dghead">
<!--            <img src="../static/img/head.png" height="147" width="147"/>-->
            <img :src="dialogMsg.head" height="147" width="147"/>
            <s>{{dialogMsg.name}}</s>
          </div>
          <div class="score">
            <em>{{dialogMsg.ck}}</em>
            <span>
             打破了历史记录{{dialogMsg.topCk}}
        </span>
          </div>
        </div>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import Headside from '@/components/Headside'
import {getUserList} from '@/api/getApiRes'

let qs = require('qs');

export default {
  name: "Main",
  data() {
    return {
      thisClassName: '',
      studentsClassName: [],
      students: [],
      single: [],
      dialogVisible: false,
      dialogMsg: '',
    }
  },
  mounted() {
    // this.colorType(91);
    this.GetgetUserList()

  },
  methods: {
    // 启动一个成就彩蛋
    createEgg(msg) {
      this.OpenEgg(msg)
    },
    OpenEgg(msg) {
      this.dialogMsg = msg;
      this.dialogVisible = true;

      // 倒计时5秒自动关闭
      let that = this;
      let totalTime = 5
      let clock = window.setInterval(() => {
        totalTime--
        if (totalTime < 0) {
          totalTime = 5;
          that.dialogVisible = false;
        }
      }, 1000)
    },
    GetgetUserList() {
      let that = this;
      let param = {
        token: localStorage.token,
      };
      let postdata = qs.stringify(param);
      getUserList(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.students = json.Rs;

          that.giveClassName(json.Rs)
          // test 启动一个成就彩蛋
          this.createEgg(json.Rs[0]);
        } else {
          that.$message.error(json.Memo);
        }
      })
    },
    // 给每一个数据加类名，一次遍历全部赋值
    giveClassName(res) {
      let that = this;
      let numberClass = '';
      let colorClass = '';
      for (let i = 0; i < res.length; i++) {
        switch (true) {
          case  res.length == 1:
            numberClass = 'max';
            break
          case  res.length == 2:
            numberClass = 'two';
            break
          case  res.length <= 6 && res.length > 1:
            numberClass = 'six';
            break
          case  res.length <= 9 && res.length > 6:
            numberClass = 'nine';
            break
          case res.length <= 16 && res.length > 9:
            numberClass = 'sixteen';
            break
          case res.length > 16:
            numberClass = 'twenty';
            break
        }

        let per = parseInt(res[i].percent);
        switch (true) {
          case per >= 90:
            colorClass = 'red';
            break
          case per <= 89 && per > 80:
            colorClass = 'brown';
            break
          case per <= 79 && per > 70:
            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,
        }
      }
    },
  },
  components: {
    Headside
  }
}
</script>

<style scoped>
.pages {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  background: url("../static/img/mainBg.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

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

.userList {
  width: 96%;
  height: 80%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.userList {
  height: 100%;
}

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

.userList .max {
  width: 80%;
  height: 100%;
  overflow: visible;
  display: block;
  margin: 0 auto;
}

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

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

.max .centerLi {
  width: 90%;
  float: left;
  height: 545px;
  background: #028FE1;
}

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

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

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

.yellow .centerLi {
  background: #BACC01;
}

.brown .centerLi {
  background: #EA8813;
}

.red .centerLi {
  background: #CF1122;
}

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

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

.centerLi .cla {
  width: 30%;
  float: left;
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 175px;
  text-align: center;
  color: #fff;
  line-height: 360px;
}

.centerLi .cla s {
  position: relative;
  top: -100px;
  font-family: "PingFang SC";
  font-weight: 500;
  font-size: 54px;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

.centerLi .heartJump {
  width: 30%;
  float: right;
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 175px;
  text-align: center;
  color: #fff;
  line-height: 360px;
}

.centerLi .heartJump img {
  position: relative;
  top: -100px;
  font-family: "PingFang SC";
  font-weight: 500;
  font-size: 54px;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

.centerLi .human {
  width: 40%;
  float: left;
  padding-top: 3%;
  overflow: hidden;
}

.human img {
  overflow: hidden;
  display: block;
  margin: 0 auto;
  border-radius: 250px;
  border: 3px solid #fff;
}

.human .name {
  position: relative;
  top: -25px;
  width: 40%;
  height: 70px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  border-radius: 35px;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0.68;
  color: #fff;
  font-family: "PingFang SC";
  font-weight: 500;
  font-size: 43px;
  text-align: center;
  color: #fff;
}

.bottomLi {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 50px;
  text-align: left;
  color: #fff;
  text-align: center;
}

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

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

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

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

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

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

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

.levelIcon li span {
  width: 119px;
  height: 119px;
  overflow: hidden;
  float: left;
  background: url("../static/img/l1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top center;
  font-family: "PingFang SC";
  font-weight: normal;
  font-size: 22px;
  letter-spacing: -0.05em;
  text-align: center;
  color: #fff;
  line-height: 35px;

}

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

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

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

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

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

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

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

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

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

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

}

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

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

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

.long {
  width: 198px;
  position: relative;
  bottom: 198px;
  right: -70px;
  float: right;
  z-index: 222;
  overflow: visible;
}

/*two*/
.two {
  width: 48%;
  height: 475px;
  float: left;
  border: 2px solid #fff;
}

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

.two .centerLi .cla {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 180px;
  letter-spacing: -0.05em;
  height: 310px;
  line-height: 310px;
}

.two .centerLi .cla s {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 38px;
  letter-spacing: -0.05em;
  top: -120px;
}

.two .human {
  padding-top: 8%;
}

.two img {
  width: 280px;
  height: 280px;
}

.two .name {
  width: 290px;
  height: 60px;
  font-family: "PingFang SC";
  font-weight: 500;
  font-size: 40px;
  text-align: center;
  color: #fff;
  line-height: 60px;
}

.two .centerLi .heartJump {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 140px;
  letter-spacing: -0.05em;
  text-align: center;
  color: #fff;
  height: 310px;
  line-height: 310px;
}

.two .centerLi .heartJump img {
  width: 25px;
  height: 25px;
  top: -110px;
}

.two .bottomLi {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 40px;
  color: #fff;
  padding-bottom: 5px;
}


/*six*/
.six {
  width: 31%;
  float: left;
  margin-right: 2%;
  margin-bottom: 2%;
  border: 2px solid #fff;
}

.six:nth-child(3) {
  margin-right: 0
}

.six:nth-child(6) {
  margin-right: 0
}

.six .centerLi .cla {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 100px;
  letter-spacing: -0.05em;
  height: 220px;
  line-height: 220px;
}

.six .centerLi .cla s {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 40px;
  letter-spacing: -0.05em;
  top: -60px;
}

.six .human {
  padding-top: 6%;
}

.six img {
  width: 160px;
  height: 160px;
}

.six .name {
  width: 180px;
  height: 40px;
  font-family: "PingFang SC";
  font-weight: 500;
  font-size: 30px;
  text-align: center;
  color: #fff;
  line-height: 40px;
}

.six .centerLi .heartJump {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 100px;
  letter-spacing: -0.05em;
  text-align: center;
  color: #fff;
  height: 220px;
  line-height: 220px;
}

.six .centerLi .heartJump img {
  width: 25px;
  height: 25px;
  top: -60px;
}

.six .bottomLi {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 32px;
  color: #fff;
  padding-bottom: 15px;
}

/*nine*/
.nine {
  width: 31.5%;
  float: left;
  margin-right: 2%;
  margin-bottom: 2%;
  border: 2px solid #fff;
}

.nine:nth-child(3) {
  margin-right: 0
}

.nine:nth-child(6) {
  margin-right: 0
}

.nine:nth-child(9) {
  margin-right: 0
}

.nine .centerLi .cla {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 79px;
  letter-spacing: -0.05em;
  height: 150px;
  line-height: 150px;
}

.nine .centerLi .cla s {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 36px;
  letter-spacing: -0.05em;
  top: -60px;
}

.nine .human {
  padding-top: 2%;
}

.nine img {
  width: 100px;
  height: 100px;
}

.nine .name {
  width: 120px;
  height: 30px;
  font-family: "PingFang SC";
  font-weight: 500;
  font-size: 24px;
  text-align: center;
  color: #fff;
  line-height: 30px;
}

.nine .centerLi .heartJump {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 79px;
  letter-spacing: -0.05em;
  text-align: center;
  color: #fff;
  height: 150px;
  line-height: 150px;
}

.nine .centerLi .heartJump img {
  width: 25px;
  height: 25px;
  top: -60px;
}

.nine .bottomLi {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 24px;
  color: #fff;
  padding-bottom: 5px;
}

/*sixteen*/
.sixteen {
  width: 23.5%;
  float: left;
  margin-right: 0.3%;
  margin-bottom: 0.3%;
  border: 2px solid #fff;
}

.sixteen:nth-child(4) {
  margin-right: 0
}

.sixteen:nth-child(8) {
  margin-right: 0
}

.sixteen:nth-child(12) {
  margin-right: 0
}

.sixteen:nth-child(16) {
  margin-right: 0
}

.sixteen .centerLi .cla {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 49px;
  letter-spacing: -0.05em;
  height: 100px;
  line-height: 120px;
}

.sixteen .centerLi .cla s {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 30px;
  letter-spacing: -0.05em;
  top: -30px;
}

.sixteen .human {
  padding-top: 2%;
  height: 120px;
  overflow: hidden;
}

.sixteen img {
  width: 90px;
  height: 90px;
}

.sixteen .name {
  width: 100px;
  height: 26px;
  font-family: "PingFang SC";
  font-weight: 500;
  font-size: 20px;
  text-align: center;
  color: #fff;
  line-height: 26px;
}

.sixteen .centerLi .heartJump {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 49px;
  letter-spacing: -0.05em;
  text-align: center;
  color: #fff;
  height: 100px;
  line-height: 120px;
}

.sixteen .centerLi .heartJump img {
  width: 20px;
  height: 20px;
  top: -30px;
}

.sixteen .bottomLi {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 22px;
  color: #fff;
  padding-bottom: 5px;
}

/*twenty*/
.twenty {
  width: 19.5%;
  float: left;
  margin-right: 0.3%;
  margin-bottom: 0.3%;
  border: 2px solid #fff;
}

.twenty:nth-child(5) {
  margin-right: 0
}

.twenty:nth-child(10) {
  margin-right: 0
}

.twenty:nth-child(15) {
  margin-right: 0
}

.twenty:nth-child(20) {
  margin-right: 0
}

.twenty .centerLi .cla {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 40px;
  letter-spacing: -0.05em;
  height: 90px;
  line-height: 90px;
}

.twenty .centerLi .cla s {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 16px;
  letter-spacing: -0.05em;
  top: -20px;
}

.twenty .human {
  padding-top: 2%;
  height: 110px;
  overflow: hidden;
}

.twenty img {
  width: 90px;
  height: 90px;
}

.twenty .name {
  width: 80px;
  height: 24px;
  font-family: "PingFang SC";
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  color: #fff;
  line-height: 24px;
}

.twenty .centerLi .heartJump {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 40px;
  letter-spacing: -0.05em;
  text-align: center;
  color: #fff;
  height: 90px;
  line-height: 90px;
}

.twenty .centerLi .heartJump img {
  width: 14px;
  height: 14px;
  top: -20px;
}

.twenty .bottomLi {
  font-family: HeadLineA;
  font-weight: normal;
  font-size: 18px;
  color: #fff;
  padding-bottom: 5px;
}

/*成就彩蛋*/
/deep/ .el-dialog {
  background: url("../static/img/dialog.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
  min-height: 50%;
  box-shadow: none;
}

.eggContainer {
  width: 87%;
  overflow: hidden;
  margin: 0 auto;
  float: left;
}

.eggContainer h5 {
  font-family: Roboto;
  font-weight: normal;
  font-size: 36px;
  text-align: center;
  color: #fff;
  margin: 0;
  margin-bottom: 5%;
}

.eggContainer .dgCenter {
  width: 90%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.dgCenter .dghead {
  width: 40%;
  float: left;
}

.dghead img {
  width: 140px;
  height: 140px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  padding: 3px;
  border-radius: 250px;
  border: 2px solid #fff;
}

.dghead s {
  font-family: Roboto;
  font-weight: normal;
  font-size: 30px;
  text-align: center;
  color: #fff;
  font-style: normal;
  text-decoration: none;
  margin-top: 10px;
}

.score {
  width: 60%;
  float: right;
}

.score em {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  font-family: Roboto;
  font-weight: bold;
  font-size: 90px;
  text-align: center;
  color: #fff;
  font-style: normal;
  height: 150px;
  line-height: 150px;
}

.score span {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  font-family: Roboto;
  font-weight: normal;
  font-size: 30px;
  color: #fff;
  text-align: center;

}
</style>