PK课

v2tv/src/Mock/index.js

@@ -393,8 +393,8 @@ if (t == 1) {
     // }
 
     // 0: 下课 团课/私教/PK 的排名
-    let LessonClass = 0;
-    let LessonDp = 1;
+    let LessonClass = 1;
+    let LessonDp = 2;
     // 1：团课/私教
     // 2：竞技课2PK
     // 3：竞技课threepk

v2tv/src/views/2pkRank2.vue

@@ -0,0 +1,663 @@
+<template>
+  <div :class="pageStyle">
+    <Headside></Headside>
+    <div class="tips">
+      {{ totalTime }}
+    </div>
+    <div class="rankContainer">
+      <div class="sumScore">
+        <div class="sumlt">
+                    <span class="sumCK">
+                        <em>{{ redSum }}</em><i>Ck</i>
+                    </span>
+          <span class="flagContainer">
+                        <img src="../assets/img/2pkRank/flag.svg" alt=""
+                             v-if="parseFloat(redSum) >= parseFloat(blueSum)">
+                    </span>
+          <span class="mineUniteName">
+                        红队
+                    </span>
+        </div>
+        <div class="summd"></div>
+        <div class="sumrt">
+                    <span class="mineUniteName">
+                        蓝队
+                    </span>
+          <span class="flagContainer">
+                        <img src="../assets/img/2pkRank/flag.svg" alt=""
+                             v-if="parseFloat(redSum) <= parseFloat(blueSum)">
+                    </span>
+          <span class="sumCK">
+                        <em>{{ blueSum }}</em><i>Ck</i>
+                    </span>
+        </div>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <li v-for="(s,i) in students.redUnite" :class="[{'redUnite':true},{'mvpli':i == 0}]">
+            <div>
+              <div class="head">
+                <img :src="s.Head" class="headImg" v-if="s.Head">
+                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
+                <img src="../assets/img/2pkRank/king.svg" class="king" alt="" v-if="redSum >= blueSum">
+              </div>
+              <div class="name">
+                {{ s.Name }}
+              </div>
+              <div class="CLEscore">
+                <!--                                <em>Cal</em>-->
+                <em>胜率</em>
+                <span>{{ s.success }}%</span>
+                <!--                                {{s.Cle|fmtInt}}-->
+              </div>
+              <div class="CKscore">
+                <em>CK</em>
+                {{ s.Ck|fmtFloat }}
+              </div>
+              <div class="record">
+                <img src="../assets/img/2pkRank/redMvp.svg" class="mvpImg" alt=""
+                     v-if="i == 0">
+              </div>
+            </div>
+          </li>
+        </el-col>
+        <!--CK-->
+        <el-col :span="12">
+          <li v-for="(s,i) in students.blueUnite"
+              :class="[{'blueUnite':true},{'mvpli':i == 0}]">
+            <div>
+              <div class="head">
+                <img :src="s.Head" class="headImg" v-if="s.Head">
+                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
+                <img src="../assets/img/2pkRank/king.svg" class="king" alt="" v-if="redSum <= blueSum">
+              </div>
+              <div class="name">
+                {{ s.Name }}
+              </div>
+              <div class="CLEscore">
+                <em>胜率</em>
+                <span>{{ s.success }}%</span>
+              </div>
+              <div class="CKscore">
+                <em>CK</em>
+                {{ s.Ck|fmtFloat }}
+              </div>
+              <div class="record">
+                <img src="../assets/img/2pkRank/blueMvp.svg" class="mvpImg" alt=""
+                     v-if="i == 0">
+              </div>
+            </div>
+          </li>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import Headside from '@/components/Headside'
+import '../libs/rem';
+import '../Global';
+import {
+  ClassUserRank,
+  AddPkInfo
+} from '@/api/getApiRes'
+
+let qs = require('qs');
+export default {
+  data() {
+    return {
+      eqSn: '30:9C:23:0C:8B:1E',
+      pageStyle: RandomBg(),
+      trueDate: true,//真实数据 true false
+      autoJump: true,//开启自动跳走
+      students: {
+        redUnite: [],
+        blueUnite: [],
+      },
+      rankTimer: null,
+      redSum: 0,
+      blueSum: 0,
+      totalTime: ''
+    }
+  },
+  mounted() {
+    let that = this;
+    if (this.trueDate) {
+      that.init();
+    } else {
+      let Rs = fakeNews(18, 2);
+      that.UniteBreak(Rs);
+    }
+  },
+  watch: {
+    '$route': function (val) {
+      if (val.path == '/2pkRank') {
+        if (this.trueDate) {
+          this.init();
+        } else {
+          let Rs = fakeNews(18, 2);
+          this.UniteBreak(Rs);
+        }
+
+      } else {
+        clearInterval(this.rankTimer);
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.rankTimer);
+    this.rankTimer = null;
+  },
+  methods: {
+    init() {
+      this.getClassUserRank();
+    },
+    // 分队展示
+    UniteBreak(Rs, PlanId) {
+      let that = this;
+      that.students.redUnite = [];
+      that.students.blueUnite = [];
+      Rs.map(function (item, t) {
+        if (item.GroupNo == 1) {
+          that.students.redUnite.push(item);
+        }
+        if (item.GroupNo == 2) {
+          that.students.blueUnite.push(item);
+        }
+      });
+      // 排序
+      that.students.redUnite = that.students.redUnite.sort(function (a, b) {
+        // return b.Cle - a.Cle;
+        return b.Ck - a.Ck;
+      });
+      that.students.blueUnite = that.students.blueUnite.sort(function (a, b) {
+        // return b.Cle - a.Cle;
+        return b.Ck - a.Ck;
+      });
+      that.calcSumCK(that.students, PlanId);
+    },
+    jumpWait(totalTime) {
+      // 倒计时60秒自动关闭
+      let that = this;
+      clearInterval(clock);
+      let clock = window.setInterval(() => {
+        totalTime--;
+        that.totalTime = totalTime;
+        if (parseInt(totalTime) <= 0) {
+          // 前往等待页面
+          that.$router.push({path: '/'});
+          // 计时器回收
+          clearInterval(clock);
+        }
+      }, 1000)
+    },
+    // 计算各队总分
+    calcSumCK(Rs, PlanId) {
+      let that = this;
+      let redSum = 0;
+      let blueSum = 0;
+      Rs.redUnite.map(function (item, t) {
+        redSum += parseFloat(item.Ck.toFixed(1));
+      });
+      Rs.blueUnite.map(function (item, t) {
+        blueSum += parseFloat(item.Ck.toFixed(1));
+        // that.successCalc(item);
+      });
+      that.redSum = redSum.toFixed(1);
+      that.blueSum = blueSum.toFixed(1);
+
+      // // 获取人数 计算人均CK
+      // let redHuman = 0;
+      // let blueHuman = 0;
+      // if (Rs.redUnite != '') {
+      //     redHuman = Rs.redUnite.length;
+      //     that.redSum = parseFloat(redSum / redHuman).toFixed(1);
+      // } else {
+      //     that.redSum = 0
+      // }
+      // if (Rs.blueUnite != '') {
+      //     blueHuman = Rs.blueUnite.length;
+      //     that.blueSum = parseFloat(blueSum / blueHuman).toFixed(1);
+      // } else {
+      //     that.blueSum = 0
+      // }
+
+      // 上报胜率结果
+      let groupNo = redSum >= blueSum ? 1 : 2;
+      that.PostAddPkInfo(PlanId, groupNo);
+      // 计算本场胜率
+      that.getWhoWin(Rs.redUnite, Rs.blueUnite, groupNo);
+    },
+    getWhoWin(redUnite, blueUnite, groupNo) {
+      let that = this;
+      if (groupNo == 1) {
+        redUnite.map(function (item, t) {
+          that.successCalc(item, 1);
+        });
+        blueUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+      } else {
+        redUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+        blueUnite.map(function (item, t) {
+          that.successCalc(item, 1);
+        });
+      }
+    },
+    // 插入胜率结果
+    successCalc(item, Victorl) {
+      // item.success = '胜' + (parseInt(item.PkSucessnum) + parseInt(Victorl)) + ' 总:' + (parseInt(item.PkTotalnum) + 1) + '结' + (parseFloat(parseInt(item.PkSucessnum) + parseInt(Victorl)) / (parseInt(item.PkTotalnum) + 1)) * 100
+      if (parseInt(item.PkTotalnum + Victorl) == 0) {
+        item.success = 0;
+      } else {
+        let res = (parseFloat(parseInt(item.PkSucessnum) + parseInt(Victorl)) / (parseInt(item.PkTotalnum) + 1)) * 100;
+        if (res >= 100) {
+          item.success = 100;
+        } else {
+          item.success = res.toFixed(1);
+        }
+      }
+    },
+    getClassUserRank() {
+      let that = this;
+      let param = {
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      ClassUserRank(postdata).then(res => {
+        let json = res;
+        that.students.redUnite = [];
+        that.students.blueUnite = [];
+        if (json.Code == 0) {
+          that.UniteBreak(json.Rs, json.Dp.PlanId);
+          let totalTime = 40;
+          let Studenlength = 0;
+          if (json.Rs) {
+            Studenlength = json.Rs.length;
+          }
+          // 根据人数多少显示停留时间
+          if (Studenlength > 3) {
+            totalTime = 60
+          } else {
+            totalTime = 40
+          }
+          this.jumpWait(totalTime);
+          // this.students.CkSort = json.Rs.CkSort;
+          // this.students.CalSort = json.Rs.CalSort;
+        } else {
+          this.students.CkSort = [];
+          this.students.CalSort = [];
+          this.jumpWait(10);
+          if (json.Code == '999') {
+            // that.$router.push({path: '/'});
+          } else {
+            // 已出错
+            that.$message.error(json.Memo);
+          }
+        }
+      })
+    },
+    // 竞技课程结果上传
+    PostAddPkInfo(dpId, groupNo) {
+
+      // 如果是演示版不上报比赛结果
+      if (runVersion == 'test') {
+        return false
+      }
+      let that = this;
+      let param = {
+        dpId: dpId,
+        groupNo: groupNo,
+      };
+      let postdata = qs.stringify(param);
+      AddPkInfo(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          console.log('竞技课程结果上传成功dpid:' + dpId + ' groupNo:' + groupNo);
+        } else {
+          console.log('code:' + json.Code + 'memo:' + json.Memo);
+          // that.$message.error(json.Memo);
+        }
+      })
+    }
+  },
+  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);
+        // return parseFloat(val).toFixed(3);
+      }
+    },
+  },
+  components: {
+    Headside
+  }
+}
+</script>
+
+<style scoped>
+@import "../assets/css/bg.css";
+
+@font-face {
+  font-family: vista;
+  src: url('../assets/font/vista.otf');
+}
+
+* {
+  font-family: vista;
+}
+
+.pages {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: vista;
+  overflow-y: scroll;
+}
+
+.rankContainer {
+  width: 96%;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  padding-top: 0.2rem;
+  overflow-y: scroll;
+}
+
+.sumScore {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  height: 1.4rem;
+  background: url("../assets/img/2pkRank/2pkTitle.svg");
+  background-size: 100%;
+  background-position: top center;
+  background-repeat: no-repeat;
+}
+
+li {
+  width: 100%;
+  height: 0.8rem;
+  display: block;
+  margin: 0 auto;
+  overflow: hidden;
+  margin-bottom: 0.06rem;
+}
+
+li .rows {
+  width: 100%;
+  height: 0.8rem;
+  /*background: #ee191d;*/
+  border-radius: 250rem;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  margin-top: 0.15rem;
+}
+
+li .head {
+  width: 0.6rem;
+  height: 0.7rem;
+  float: left;
+  margin-left: 0.1rem;
+  margin-top: 0.07rem;
+  overflow: visible;
+}
+
+li .head .headImg {
+  width: 100%;
+  height: 0.6rem;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  border: 0.04rem solid #fff;
+  border-radius: 33rem;
+}
+
+
+li .name {
+  width: 2rem;
+  font-weight: normal;
+  font-size: 0.4rem;
+  text-align: left;
+  color: #fff;
+  float: left;
+  margin-left: 0.2rem;
+  line-height: 0.8rem;
+}
+
+li .record {
+  position: relative;
+  top: -0.2rem;
+  float: right;
+  margin-right: 2%;
+  /*line-height: 0.8rem;*/
+}
+
+li .score {
+  font-weight: normal;
+  font-size: 0.4rem;
+  color: #fff;
+  float: right;
+  margin-right: 0.2rem;
+  line-height: 1rem;
+  text-align: right;
+  line-height: 0.8rem;
+}
+
+li .score em {
+  font-size: 0.2rem;
+}
+
+.sumlt {
+  width: 45%;
+  float: left;
+  color: #E4FF00;
+}
+
+.sumrt {
+  width: 45%;
+  float: right;
+  color: #fff;
+}
+
+.summd {
+  width: 10%;
+  float: left;
+  height: 1rem;
+}
+
+.sumlt .sumCK {
+  width: 30%;
+  float: left;
+  margin-left: 30%;
+}
+
+.sumCK em {
+  font-size: 0.6rem;
+}
+
+.sumCK i {
+  font-size: 0.24rem;
+}
+
+.sumlt .flagContainer {
+  width: 10%;
+  float: left;
+  margin-left: 5%;
+}
+
+.flagContainer img {
+  width: 1rem;
+  height: 1rem;
+}
+
+.sumlt .mineUniteName {
+  width: 20%;
+  float: right;
+  text-align: left;
+  font-size: 0.5rem;
+  line-height: 1.4rem;
+}
+
+
+.sumrt .sumCK {
+  width: 30%;
+  float: left;
+  margin-left: 0%;
+}
+
+.sumrt em {
+  font-size: 0.6rem;
+}
+
+.sumrt i {
+  font-size: 0.24rem;
+}
+
+.sumrt .flagContainer {
+  width: 10%;
+  float: left;
+  margin-right: 5%;
+}
+
+.sumrt .mineUniteName {
+  width: 18%;
+  float: left;
+  text-align: left;
+  font-size: 0.5rem;
+  line-height: 1.4rem;
+  margin-left: 8%;
+}
+
+li.redUnite {
+  width: 100%;
+  float: left;
+  background: rgba(207, 17, 34, 0.75);
+  color: #fff;
+
+}
+
+li .CLEscore {
+  width: 2.6rem;
+  float: left;
+  font-size: 0.5rem;
+  margin-left: 5%;
+  line-height: 0.8rem;
+  text-align: left;
+}
+
+li .CLEscore em {
+  font-size: 0.3rem;
+}
+
+li .CLEscore span {
+  padding-left: 0.1rem;
+  font-size: 0.6rem;
+  /*font-size: 12px;*/
+}
+
+li .CKscore {
+  /*width: 2rem;*/
+  float: left;
+  font-size: 0.6rem;
+  margin-left: 5%;
+  line-height: 0.8rem;
+  text-align: left;
+}
+
+li .CKscore em {
+  font-size: 0.3rem;
+}
+
+li .record img {
+  width: 0.7rem;
+  float: left;
+}
+
+li.blueUnite {
+  width: 99%;
+  float: left;
+  background: rgba(24, 15, 170, 0.75);
+  color: #fff;
+}
+
+li.mvpli {
+  padding-top: 0.15rem;
+  padding-bottom: 0.15rem;
+}
+
+li.mvpli .CLEscore {
+  font-size: 0.62rem;
+}
+
+li.mvpli .CKscore {
+  font-size: 0.62rem;
+}
+
+li.mvpli .head {
+  width: 0.7rem;
+  height: 0.8rem;
+}
+
+li.mvpli .head img {
+  height: 0.7rem;
+  margin-top: -0.05rem;
+}
+
+li.mvpli .name {
+  font-size: 0.5rem;
+}
+
+li .king {
+  width: 0.4rem;
+  height: 0.2rem;
+  float: left;
+  position: relative;
+  top: -0.7rem;
+  left: -0.1rem;
+}
+
+li.mvpli .head img.king {
+  top: -1rem;
+}
+
+.tips {
+  position: absolute;
+  right: 3%;
+  top: 1rem;
+  font-size: 0.4rem;
+  color: #fff;
+}
+
+/deep/ .el-col {
+  min-height: 1rem;
+}
+</style>

v2tv/src/views/3pkRank2.vue

@@ -0,0 +1,858 @@
+<template>
+  <div :class="pageStyle">
+    <Headside></Headside>
+    <div class="tips">
+      {{ totalTime }}
+    </div>
+    <div class="rankContainer">
+      <div class="sumScore">
+        <div class="sumlt">
+          <img src="../assets/img/3pkRank/rank1.svg" alt="" class="rankIcon" v-if="red.rank == 1">
+          <img src="../assets/img/3pkRank/rank2.svg" alt="" class="rankIcon" v-if="red.rank == 2">
+          <img src="../assets/img/3pkRank/rank3.svg" alt="" class="rankIcon" v-if="red.rank == 3">
+          <span class="mineUniteName">
+                          <em>
+                            红队
+                        </em>
+                        <span class="sumCK">
+                            <em>{{ redSum }}</em><i>Ck</i>
+                        </span>
+                    </span>
+          <span class="flagContainer">
+                            <img src="../assets/img/2pkRank/flag.svg" alt="" v-if="red.rank == 1">
+                        </span>
+        </div>
+        <div class="pkIconContainer">
+          <img src="../assets/img/3pkRank/pk.svg" alt="" class="pkIcon">
+        </div>
+        <div class="summd">
+          <img src="../assets/img/3pkRank/rank1.svg" alt="" class="rankIcon" v-if="blue.rank == 1">
+          <img src="../assets/img/3pkRank/rank2.svg" alt="" class="rankIcon" v-if="blue.rank == 2">
+          <img src="../assets/img/3pkRank/rank3.svg" alt="" class="rankIcon" v-if="blue.rank == 3">
+          <span class="mineUniteName">
+
+                         <em>
+                            蓝队
+                        </em>
+
+                        <span class="sumCK">
+                            <em>{{ blueSum }}</em><i>Ck</i>
+                        </span>
+                    </span>
+          <span class="flagContainer">
+                            <img src="../assets/img/2pkRank/flag.svg" alt="" v-if="blue.rank == 1">
+                        </span>
+        </div>
+        <div class="pkIconContainer">
+          <img src="../assets/img/3pkRank/pk.svg" alt="" class="pkIcon">
+        </div>
+        <div class="sumrt">
+          <img src="../assets/img/3pkRank/rank1.svg" alt="" class="rankIcon" v-if="yellow.rank == 1">
+          <img src="../assets/img/3pkRank/rank2.svg" alt="" class="rankIcon" v-if="yellow.rank == 2">
+          <img src="../assets/img/3pkRank/rank3.svg" alt="" class="rankIcon" v-if="yellow.rank == 3">
+          <span class="mineUniteName">
+                        <em>
+                            黄队
+                        </em>
+                        <span class="sumCK">
+                            <em>{{ yellowSum }}</em><i>Ck</i>
+                        </span>
+                    </span>
+          <span class="flagContainer">
+                            <img src="../assets/img/2pkRank/flag.svg" alt="" v-if="yellow.rank == 1">
+                        </span>
+        </div>
+      </div>
+      <div class="list">
+        <div class="part">
+          <li v-for="(s,i) in students.redUnite" :class="[{'redUnite':true},{'mvpli':i == 0}]">
+            <div>
+              <div class="head">
+                <img :src="s.Head" class="headImg" v-if="s.Head">
+                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
+                <img src="../assets/img/2pkRank/king.svg" class="king" alt="" v-if="red.rank == 1">
+              </div>
+              <div class="name">
+                {{ s.Name }}
+              </div>
+              <div class="CLEscore">
+                <!--                                <em>Cal</em>-->
+                <!--                                {{s.Cle|fmtInt}}-->
+                <em>胜率</em>
+                <span>{{ s.success }}%</span>
+              </div>
+              <div class="CKscore">
+                <em>CK</em>
+                {{ s.Ck|fmtFloat }}
+              </div>
+              <div class="record">
+                <img src="../assets/img/3pkRank/redMvp.svg" class="mvpImg" alt=""
+                     v-if="i == 0">
+              </div>
+            </div>
+          </li>
+        </div>
+        <div class="part">
+          <li v-for="(s,i) in students.blueUnite" :class="[{'blueUnite':true},{'mvpli':i == 0}]">
+            <div>
+              <div class="head">
+                <img :src="s.Head" class="headImg" v-if="s.Head">
+                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
+                <img src="../assets/img/2pkRank/king.svg" class="king" alt="" v-if="blue.rank == 1">
+              </div>
+              <div class="name">
+                {{ s.Name }}
+              </div>
+              <div class="CLEscore">
+                <em>胜率</em>
+                <span>{{ s.success }}%</span>
+              </div>
+              <div class="CKscore">
+                <em>CK</em>
+                {{ s.Ck|fmtFloat }}
+              </div>
+              <div class="record">
+                <img src="../assets/img/3pkRank/blueMvp.svg" class="mvpImg" alt=""
+                     v-if="i == 0">
+              </div>
+            </div>
+          </li>
+        </div>
+        <div class="part">
+          <li v-for="(s,i) in students.yellowUnite" :class="[{'yellowUnite':true},{'mvpli':i == 0}]">
+            <div>
+              <div class="head">
+                <img :src="s.Head" class="headImg" v-if="s.Head">
+                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
+                <img src="../assets/img/2pkRank/king.svg" class="king" alt="" v-if="yellow.rank == 1">
+              </div>
+              <div class="name">
+                {{ s.Name }}
+              </div>
+              <div class="CLEscore">
+                <em>胜率</em>
+                <span>{{ s.success }}%</span>
+              </div>
+              <div class="CKscore">
+                <em>CK</em>
+                {{ s.Ck|fmtFloat }}
+              </div>
+              <div class="record">
+                <img src="../assets/img/3pkRank/yellowMvp.svg" class="mvpImg" alt=""
+                     v-if="i == 0">
+              </div>
+            </div>
+          </li>
+        </div>
+      </div>
+
+      <!--blue-->
+      <!--yellow-->
+    </div>
+  </div>
+</template>
+
+<script>
+import Headside from '@/components/Headside'
+import '../libs/rem';
+import '../Global';
+import {
+  ClassUserRank,
+  AddPkInfo
+} from '@/api/getApiRes'
+
+let qs = require('qs');
+export default {
+  data() {
+    return {
+      eqSn: '30:9C:23:0C:8B:1E',
+      pageStyle: RandomBg(),
+      trueDate: true,//真实数据 true false
+      autoJump: true,//开启自动跳走
+      students: {
+        redUnite: [],
+        blueUnite: [],
+        yellowUnite: [],
+      },
+      red: {
+        rank: 0,
+      },
+      blue: {
+        rank: 0,
+      },
+      yellow: {
+        rank: 0,
+      },
+      rankTimer: null,
+      redSum: 0,
+      blueSum: 0,
+      yellowSum: 0,
+      totalTime: ''
+    }
+  },
+  mounted() {
+    let that = this;
+    if (this.trueDate) {
+      that.init();
+    } else {
+      let Rs = fakeNews(27, 3);
+      that.UniteBreak(Rs);
+    }
+
+  },
+  watch: {
+    '$route': function (val) {
+      let that = this;
+      if (val.path == '/3pkRank') {
+        if (this.trueDate) {
+          that.init();
+        } else {
+          let Rs = fakeNews(18, 3);
+          that.UniteBreak(Rs);
+        }
+
+      } else {
+        clearInterval(this.autoJump);
+        clearInterval(this.rankTimer);
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.rankTimer);
+    this.rankTimer = null;
+  },
+  methods: {
+    init() {
+      this.getClassUserRank();
+    },
+    jumpWait(totalTime) {
+      // 倒计时60秒自动关闭
+      let that = this;
+      let clock = window.setInterval(() => {
+        totalTime--;
+        that.totalTime = totalTime;
+        if (parseInt(totalTime) <= 0) {
+          // 前往等待页面
+          that.$router.push({path: '/'});
+          // 计时器回收
+          clearInterval(clock);
+        }
+      }, 1000)
+    },
+    // 分队展示
+    UniteBreak(Rs, PlanId) {
+      let that = this;
+      that.students.redUnite = [];
+      that.students.blueUnite = [];
+      that.students.yellowUnite = [];
+      console.log(!Rs);
+
+      Rs.map(function (item, t) {
+        if (item.GroupNo == 1) {
+          that.students.redUnite.push(item);
+        }
+        if (item.GroupNo == 2) {
+          that.students.blueUnite.push(item);
+        }
+        if (item.GroupNo == 3) {
+          that.students.yellowUnite.push(item);
+        }
+      });
+
+
+      // 排序
+      that.students.redUnite = that.students.redUnite.sort(function (a, b) {
+        // return b.Cle - a.Cle;
+        return b.Ck - a.Ck;
+      });
+      that.students.blueUnite = that.students.blueUnite.sort(function (a, b) {
+        // return b.Cle - a.Cle;
+        return b.Ck - a.Ck;
+      });
+      that.students.yellowUnite = that.students.yellowUnite.sort(function (a, b) {
+        // return b.Cle - a.Cle;
+        return b.Ck - a.Ck;
+      });
+
+      that.calcSumCK(that.students, PlanId);
+
+    },
+    // 计算各队总分
+    calcSumCK(Rs, PlanId) {
+      let that = this;
+      let redSum = 0;
+      let blueSum = 0;
+      let yellowSum = 0;
+      Rs.redUnite.map(function (item, t) {
+        redSum += parseFloat(item.Ck);
+        that.successCalc(item);
+      });
+      Rs.blueUnite.map(function (item, t) {
+        blueSum += parseFloat(item.Ck);
+        that.successCalc(item);
+      });
+      Rs.yellowUnite.map(function (item, t) {
+        yellowSum += parseFloat(item.Ck);
+        that.successCalc(item);
+      });
+      that.redSum = redSum.toFixed(1);
+      that.blueSum = blueSum.toFixed(1);
+      that.yellowSum = yellowSum.toFixed(1);
+
+      // 获取人数 计算人均CK
+      // let redHuman = 0;
+      // let blueHuman = 0;
+      // let yellowHuman = 0;
+      // if (Rs.redUnite != '') {
+      //     redHuman = Rs.redUnite.length;
+      //     that.redSum = parseFloat(redSum / redHuman).toFixed(1);
+      // } else {
+      //     that.redSum = 0
+      // }
+      //
+      // if (Rs.blueUnite != '') {
+      //     blueHuman = Rs.blueUnite.length;
+      //     that.blueSum = parseFloat(blueSum / blueHuman).toFixed(1);
+      // } else {
+      //     that.blueSum = 0
+      // }
+      // if (Rs.yellowUnite != '') {
+      //     yellowHuman = Rs.yellowUnite.length;
+      //     that.yellowSum = parseFloat(yellowSum / yellowHuman).toFixed(1);
+      // } else {
+      //     that.yellowSum = 0
+      // }
+
+      let res = [
+        {name: "red", val: that.redSum},
+        {name: "blue", val: that.blueSum},
+        {name: "yellow", val: that.yellowSum},
+      ];
+      that.getUnitRank(res, PlanId, Rs);
+    },
+    getWhoWin(redUnite, blueUnite, yellowUnite, groupNo) {
+      let that = this;
+      if (groupNo == 1) {
+        redUnite.map(function (item, t) {
+          that.successCalc(item, 1);
+        });
+        blueUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+        yellowUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+      } else if (groupNo == 2) {
+        redUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+        blueUnite.map(function (item, t) {
+          that.successCalc(item, 1);
+        });
+        yellowUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+      } else if (groupNo == 3) {
+        redUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+        blueUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+        yellowUnite.map(function (item, t) {
+          that.successCalc(item, 1);
+        });
+      }
+    },
+    // 插入胜率结果
+    successCalc(item, Victorl) {
+      // item.success = '胜' + (parseInt(item.PkSucessnum) + parseInt(Victorl)) + ' 总:' + (parseInt(item.PkTotalnum) + 1) + '结' + (parseFloat(parseInt(item.PkSucessnum) + parseInt(Victorl)) / (parseInt(item.PkTotalnum) + 1)) * 100
+
+      if (parseInt(item.PkTotalnum + Victorl) == 0) {
+        item.success = 0;
+      } else {
+        let res = (parseFloat(parseInt(item.PkSucessnum) + parseInt(Victorl)) / (parseInt(item.PkTotalnum) + 1)) * 100;
+        if (res >= 100) {
+          item.success = 100;
+        } else {
+          item.success = res.toFixed(1);
+        }
+      }
+    },
+    // 结果排序
+    getUnitRank(res, PlanId, Rs) {
+      let that = this;//这个that不要删
+      let sum = res.sort(function (a, b) {
+        return b.val - a.val;
+      });
+      sum.map(function (item, i) {
+        eval("that." + item['name'] + ".rank = i+1");
+      });
+
+      // 上报胜率结果
+
+      let groupNo = 0;
+      console.log('name' + sum[0].name);
+      switch (sum[0].name) {
+        case "red":
+          groupNo = 1;
+          break;
+        case "blue":
+          groupNo = 2;
+          break;
+        case "yellow":
+          groupNo = 3;
+          break
+      }
+      // 上报本场胜率
+      that.PostAddPkInfo(PlanId, groupNo);
+      // 计算本场胜率
+      that.getWhoWin(Rs.redUnite, Rs.blueUnite, Rs.yellowUnite, groupNo);
+    },
+    getClassUserRank() {
+      let that = this;
+      let param = {
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      ClassUserRank(postdata).then(res => {
+        let json = res;
+        that.students.redUnite = [];
+        that.students.blueUnite = [];
+        that.students.yellowUnite = [];
+        if (json.Code == 0) {
+          that.UniteBreak(json.Rs, json.Dp.PlanId);
+
+          let totalTime = 40;
+          let Studenlength = 0;
+          if (json.Rs) {
+            Studenlength = json.Rs.length;
+          }
+          // 根据人数多少显示停留时间
+          if (Studenlength > 3) {
+            totalTime = 60
+          } else {
+            totalTime = 40;
+          }
+          this.jumpWait(totalTime);
+
+          // this.students.CkSort = json.Rs.CkSort;
+          // this.students.CalSort = json.Rs.CalSort;
+        } else {
+          this.jumpWait(10);
+          if (json.Code == '999') {
+            // that.$router.push({path: '/'});
+          } else {
+            // 已出错
+            that.$message.error(json.Memo);
+          }
+        }
+      })
+    },
+    // 竞技课程结果上传
+    PostAddPkInfo(dpId, groupNo) {
+      console.log(dpId, groupNo);
+      // 如果是演示版不上报比赛结果
+      if (runVersion == 'test') {
+        return false
+      }
+      let that = this;
+      let param = {
+        dpId: dpId,
+        groupNo: groupNo,
+      };
+      let postdata = qs.stringify(param);
+      AddPkInfo(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          console.log('竞技课程结果上传成功dpid:' + dpId + ' groupNo:' + groupNo);
+        } else {
+          console.log(json.Memo);
+          // that.$message.error(json.Memo);
+        }
+      })
+    }
+  },
+  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);
+        // return parseFloat(val).toFixed(3);
+      }
+    },
+  },
+  components: {
+    Headside
+  }
+}
+</script>
+
+<style scoped>
+@import "../assets/css/bg.css";
+
+@font-face {
+  font-family: vista;
+  src: url('../assets/font/vista.otf');
+}
+
+* {
+  font-family: vista;
+}
+
+.pages {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: vista;
+  background: url("../assets/img/threepk/threepkbg.png");
+  background-position: top center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  overflow-y: scroll;
+}
+
+.rankContainer {
+  width: 96%;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  overflow-y: scroll;
+}
+
+.sumScore {
+  width: 90%;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  height: 1.4rem;
+  background-size: 100%;
+  background-position: top center;
+  background-repeat: no-repeat;
+}
+
+.pkIconContainer {
+  width: 20%;
+  float: left;
+}
+
+.pkIconContainer img {
+  width: 1.5rem;
+  height: 1.5rem;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+li {
+  width: 90%;
+  height: 0.8rem;
+  display: block;
+  margin: 0 auto;
+  overflow: hidden;
+  margin-bottom: 0.06rem;
+}
+
+li .rows {
+  width: 100%;
+  height: 0.8rem;
+  /*background: #ee191d;*/
+  border-radius: 250rem;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  margin-top: 0.15rem;
+}
+
+li .head {
+  width: 0.6rem;
+  height: 0.7rem;
+  float: left;
+  margin-left: 0.1rem;
+  margin-top: 0.07rem;
+  overflow: visible;
+}
+
+li .head .headImg {
+  width: 100%;
+  height: 0.6rem;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  border: 0.04rem solid #fff;
+  border-radius: 33rem;
+}
+
+
+li .name {
+  width: 1.2rem;
+  font-weight: normal;
+  font-size: 0.3rem;
+  text-align: left;
+  color: #fff;
+  float: left;
+  margin-left: 0.2rem;
+  line-height: 0.8rem;
+}
+
+li .record {
+  position: relative;
+  top: -0.2rem;
+  float: right;
+  margin-right: 2%;
+  /*line-height: 0.8rem;*/
+}
+
+li .score {
+  font-weight: normal;
+  font-size: 0.4rem;
+  color: #fff;
+  float: right;
+  margin-right: 0.2rem;
+  line-height: 1rem;
+  text-align: right;
+  line-height: 0.8rem;
+}
+
+li .score em {
+  font-size: 0.2rem;
+}
+
+.sumlt {
+  width: 20%;
+  float: left;
+  color: #fff;
+  height: 1.2rem;
+  background: url("../assets/img/3pkRank/redtit.svg");
+  background-size: 100%;
+  background-position: top center;
+  background-repeat: no-repeat;
+  margin-top: 0.5rem;
+  overflow: visible;
+}
+
+.summd {
+  width: 20%;
+  float: left;
+  color: #fff;
+  height: 1.2rem;
+  background: url("../assets/img/3pkRank/bluetit.svg");
+  background-size: 100%;
+  background-position: top center;
+  background-repeat: no-repeat;
+  margin-top: 0.5rem;
+  overflow: visible;
+}
+
+.sumrt {
+  width: 20%;
+  float: left;
+  color: #fff;
+  height: 1.2rem;
+  background: url("../assets/img/3pkRank/yellowtit.svg");
+  background-size: 100%;
+  background-position: top center;
+  background-repeat: no-repeat;
+  margin-top: 0.5rem;
+  overflow: visible;
+}
+
+.sumCK {
+  float: right;
+  font-size: 0.3rem;
+  text-align: right;
+}
+
+.mineUniteName {
+  width: 69%;
+  height: 0.6rem;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  text-align: left;
+  font-size: 0.35rem;
+}
+
+.mineUniteName em {
+  float: left;
+}
+
+.sumCK em {
+  font-size: 0.35rem;
+}
+
+.sumCK i {
+  float: right;
+  font-size: 0.24rem;
+  margin-top: 0.1rem;
+}
+
+.flagContainer {
+  position: relative;
+  top: -1rem;
+  float: none;
+  right: -1.6rem;
+  display: inline-block;
+}
+
+.flagContainer img {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.rankIcon {
+  position: relative;
+  float: left;
+  width: 0.3rem;
+  top: -0.1rem;
+  left: 0.3rem;
+}
+
+.list {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.list .part {
+  width: 33.333%;
+  height: 100%;
+  min-height: 1rem;
+  float: left;
+}
+
+
+li.redUnite {
+  width: 96%;
+  float: left;
+  background: rgba(207, 17, 34, 0.75);
+  color: #fff;
+  margin-bottom: 0.07rem;
+  overflow: hidden;
+}
+
+li.blueUnite {
+  width: 96%;
+  margin: 0 auto;
+  margin-bottom: 0.05rem;
+  background: rgba(24, 15, 170, 0.75);
+  color: #fff;
+}
+
+li.yellowUnite {
+  width: 96%;
+  float: right;
+  background: rgba(228, 196, 25, 0.75);
+  color: #fff;
+}
+
+
+li .CLEscore {
+  width: 1.65rem;
+  float: left;
+  font-size: 0.4rem;
+  margin-left: 1%;
+  line-height: 0.8rem;
+  text-align: left;
+}
+
+li .CLEscore em {
+  font-size: 0.3rem;
+  /*font-size: 0;*/
+}
+
+li .CLEscore span {
+  padding-left: 0.1rem;
+  font-size: 0.3rem;
+  /*font-size: 12px;*/
+}
+
+li .CKscore {
+  /*width: 1.6rem;*/
+  float: left;
+  font-size: 0.4rem;
+  margin-left: 2%;
+  line-height: 0.8rem;
+  text-align: left;
+}
+
+li .CKscore em {
+  font-size: 0.3rem;
+}
+
+li .record img {
+  width: 0.7rem;
+  float: left;
+}
+
+li.mvpli {
+  padding-top: 0.15rem;
+  padding-bottom: 0.15rem;
+}
+
+li.mvpli .CLEscore {
+  font-size: 0.4rem;
+}
+
+li.mvpli .CKscore {
+  font-size: 0.4rem;
+}
+
+li.mvpli .head {
+  width: 0.7rem;
+  height: 0.8rem;
+}
+
+li.mvpli .head img {
+  height: 0.7rem;
+  margin-top: -0.05rem;
+}
+
+li.mvpli .name {
+  font-size: 0.3rem;
+}
+
+li .king {
+  width: 0.4rem;
+  height: 0.2rem;
+  float: left;
+  position: relative;
+  top: -0.7rem;
+  left: -0.1rem;
+}
+
+li.mvpli .head img.king {
+  top: -1rem;
+}
+
+.tips {
+  position: absolute;
+  right: 3%;
+  top: 1rem;
+  font-size: 0.4rem;
+  color: #fff;
+}
+</style>

v2tv/src/views/Rank.vue

@@ -6,10 +6,12 @@
         <img src="../assets/imgs/rank/fire.svg" alt="">
         <h5>卡路里排名</h5>
       </div>
-      <div class="md">本轮训练排名</div>
       <div class="rt">
-        <h5>CK排名</h5>
         <img src="../assets/imgs/rank/ck.svg" alt="">
+        <h5>CK排名</h5>
+      </div>
+      <div class="md">
+        <span>本轮训练排名</span>
       </div>
     </div>
     <div class="listContainer">
@@ -20,23 +22,58 @@
             <span>成员</span>
             <span>卡路里</span>
           </div>
-          <li v-for="(s,i) in students.CalSort" v-if="i <= 7">
+          <li v-for="(s,i) in students.CalSort" v-if="i <= 7"
+              :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+            <div class="gary">
+              <em>{{ i + 1 }}</em>
+              <div class="head">
+                <img :src="s.Head" alt="" v-if="s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
+                <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head"
+                     :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
+              </div>
+              <span class="names">{{ s.Name }}</span>
+              <span class="glory">
+                <img src="../assets/imgs/rank/cr.png" alt="">
+                <img src="../assets/imgs/rank/mr.png" alt="">
+                <img src="../assets/imgs/rank/pb.png" alt="">
+              </span>
+              <span class="score">
+                 {{ s.Cle|fmtInt }}
+                <!--                  {{ s.Ck|fmtFloat }}-->
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="rt">
+        <ul>
+          <div class="ltTitle">
+            <span>排名</span>
+            <span>成员</span>
+            <span>CK</span>
+          </div>
+          <li v-for="(s,i) in students.CkSort" v-if="i <= 7"
+              :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
             <div class="gary">
               <em>{{ i + 1 }}</em>
-              <img :src="s.Head" alt="" v-if="s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
-              <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head"
-                   :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
-              <span class="names">{{ s.UserName }}</span>
+              <div class="head">
+                <img :src="s.Head" alt="" v-if="s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
+                <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head"
+                     :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
+              </div>
+              <span class="names">{{ s.Name }}</span>
               <span class="glory">
                 <img src="../assets/imgs/rank/cr.png" alt="">
                 <img src="../assets/imgs/rank/mr.png" alt="">
                 <img src="../assets/imgs/rank/pb.png" alt="">
               </span>
+              <span class="score">
+                                  {{ s.Ck|fmtFloat }}
+              </span>
             </div>
           </li>
         </ul>
       </div>
-      <div class="rt"></div>
     </div>
     <div class="icons">
       <img src="../assets/imgs/rank/icons.svg" alt="">
@@ -48,6 +85,7 @@
 import Headside from '@/components/Headside'
 import {ClassUserRank} from "@/api/getApiRes";
 
+let qs = require('qs');
 export default {
   data() {
     return {
@@ -60,9 +98,44 @@ export default {
         CalSort: [],
       },
       rankTimer: null,
-      totalTime: ''
+      totalTime: '',
+      Listate: [
+        {state: false},
+        {state: false},
+        {state: false},
+        {state: false},
+        {state: false},
+        {state: false},
+        {state: false},
+        {state: false},
+      ],
     }
   },
+  mounted() {
+    this.init();
+    this.cardPlay();
+  },
+  watch: {
+    '$route': function (val) {
+      if (val.path == '/rank') {
+        if (this.trueDate) {
+          this.init();
+        } else {
+          // this.rankTimer  = setInterval(() => {
+          this.students.CkSort = fakeNews(5);
+          this.students.CalSort = fakeNews(5);
+          // }, 5000);
+        }
+      } else {
+        clearInterval(this.autoJump);
+        clearInterval(this.rankTimer);
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.rankTimer);
+    this.rankTimer = null;
+  },
   methods: {
     init() {
       this.getClassUserRank();
@@ -76,6 +149,7 @@ export default {
       ClassUserRank(postdata).then(res => {
         let json = res;
         if (json.Code == 0) {
+          console.log(json);
           let totalTime = 40;
           let Studenlength = 0;
           if (json.Rs) {
@@ -113,6 +187,37 @@ export default {
         }
       })
     },
+    jumpWait(totalTime) {
+      // 倒计时60秒自动关闭
+      let that = this;
+      clearInterval(clock);
+      let clock = window.setInterval(() => {
+        totalTime--;
+        that.totalTime = totalTime;
+        if (parseInt(totalTime) <= 0) {
+          // 前往等待页面
+          that.$router.push({path: '/'});
+          // 计时器回收
+          clearInterval(clock);
+        }
+      }, 1000)
+    },
+    cardPlay() {
+      let that = this;
+      // 重置一下状态
+      that.Listate.map(function (t) {
+        t.state = false;
+      })
+      let timeScope = 400;
+      let timeLong;
+      let row;
+      for (let i = 0; i < 8; i++) {
+        timeLong = parseInt(i * timeScope);
+        that.timer = setTimeout(() => {   //设置延迟执行
+          that.Listate[i].state = true;
+        }, timeLong)
+      }
+    },
   },
   filters: {
     fmtNum(val) {
@@ -168,28 +273,209 @@ export default {
     @include cube;
     width: 80%;
     height: 0.75rem;
-    margin-top: 0.5rem;
-    border-radius: 250rem;
+    margin-top: 0.7rem;
+    overflow: visible;
+
+    h5 {
+      float: left;
+      width: 80%;
+      margin: 0;
+      text-align: center;
+      color: #fff;
+      font-size: 0.5rem;
+      font-weight: normal;
+    }
 
     .lt {
       width: 50%;
+      height: 0.75rem;
       float: left;
       background: url("../../src/assets/imgs/rank/redTitel.png");
+      background-repeat: no-repeat;
+      background-position: top center;
+      background-size: 100%;
+      border-radius: 250rem;
+
+      img {
+        width: 0.51rem;
+        float: left;
+      }
     }
 
     .rt {
       width: 50%;
+      height: 0.75rem;
       float: right;
+      background: url("../../src/assets/imgs/rank/redTitel.png");
+      background-repeat: no-repeat;
+      background-position: top center;
+      background-size: 100%;
+      border-radius: 250rem;
+
+      img {
+        width: 0.8rem;
+        float: right;
+      }
+
+      h5 {
+        float: right;
+      }
     }
 
     .md {
-      @include cube;
+      position: relative;
       width: 3rem;
+      height: 0.75rem;
+      margin: 0 auto;
       background: url("../../src/assets/imgs/rank/titleBg.png");
       background-repeat: no-repeat;
       background-position: top center;
       background-size: 100% 100%;
+
+      span {
+        @include cube;
+        position: relative;
+        bottom: 0.65rem;
+        color: #fff;
+        text-align: center;
+        font-size: 0.35rem;
+      }
+    }
+  }
+}
+
+.listContainer {
+  @include cube;
+  width: 80%;
+  padding-top: 0.5rem;
+
+  .lt {
+    width: 47%;
+    float: left;
+  }
+
+  .rt {
+    width: 47%;
+    float: right;
+  }
+
+  .ltTitle {
+    @include cube;
+
+    span {
+      float: left;
+      color: #fff;
+      font-size: 0.3rem;
+
+      &:nth-child(1) {
+        margin-right: 1.5rem;
+      }
+
+      &:last-child {
+        float: right;
+      }
+    }
+  }
+
+  ul {
+    @include cube;
+
+    li {
+      @include cube;
+      height: 0.7rem;
+      padding-top: 0.2rem;
+
+      .gary {
+        @include cube;
+        height: 0.6rem;
+        margin-bottom: 0.3rem;
+        background: url("../assets/imgs/rank/row.png");
+        background-repeat: no-repeat;
+        background-position: top center;
+        background-size: 100% 100%;
+        overflow: visible;
+      }
+
+      em {
+        width: 0.6rem;
+        height: 0.6rem;
+        float: left;
+        background: url("../assets/imgs/rank/rowTitle.png");
+        background-repeat: no-repeat;
+        background-position: top center;
+        background-size: 100% 100%;
+        text-align: left;
+        text-indent: 0.1rem;
+        font-size: 0.4rem;
+        font-weight: bold;
+        text-decoration: none;
+        font-style: normal;
+        color: white;
+        line-height: 0.6rem;
+      }
+
+      .head {
+        position: relative;
+        bottom: 0.4rem;
+        float: left;
+        margin-left: 0.3rem;
+
+        img {
+          width: 0.6rem;
+          border-radius: 250rem;
+
+          &.girl {
+            border: 0.05rem solid #EA26EA;
+          }
+
+          &.boy {
+            border: 0.05rem solid #39B6FF;
+          }
+        }
+      }
+
+      .names {
+        float: left;
+        color: white;
+        font-size: 0.3rem;
+        line-height: 0.6rem;
+        margin-left: 0.4rem;
+      }
+
+      .glory {
+        float: left;
+        margin-left: 0.4rem;
+
+        img {
+          float: right;
+          width: 0.6rem;
+          margin-left: 0.2rem;
+          margin-top: 0.1rem;
+        }
+      }
+
+      .score {
+        float: right;
+        color: #FFE61F;
+        font-size: 0.3rem;
+        line-height: 0.6rem;
+        font-family: Arial;
+        font-weight: bold;
+        font-style: italic;
+        text-align: center;
+      }
     }
   }
 }
+
+.icons {
+  @include cube;
+  position: absolute;
+  bottom: 0.2rem;
+
+  img {
+    @include cube;
+    width: 40%;
+  }
+}
 </style>

v2tv/src/views/pk.vue

@@ -1,1724 +1,174 @@
 <template>
-    <div class="pages">
-        <Headside></Headside>
-        <div class="pk-detail-con">
-            <img src="../assets/img/pk/redGood.svg" class="lp_icon"/>
-            <div class="progress">
-                <div class="progress-bar" :style="{width: pkVal}">
-                    <i class="lightning"></i>
-                </div>
-            </div>
-            <img src="../assets/img/pk/blueGood.svg" class="rp_icon"/>
+  <div class="pages">
+    <Headside></Headside>
+    <div class="pageTitle">
+    </div>
+    <div class="progressContainer">
+      <div class="valueDisplay">
+        <div class="lt">
+            <span>
+              <em>CK 238.3</em>
+            </span>
         </div>
-
-        <div class="pk_container">
-            <div class="lt">
-                <ul>
-                    <li :class="RedstudentsClassName" v-for="(s,i) in students.redUnite">
-                        <div class="bg">
-                            <h5>
-                                <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>
-                            </h5>
-                            <div class="user">
-                                <div class="ult">
-                                    <em>
-                                        <div v-if="s.RealHr != 0">{{ s.ActivePercent |max100}}</div>
-                                        <div class="plus" v-if="s.ActivePercent == 0 && s.RealHr == 0">---</div>
-                                        <s>%</s>
-                                    </em>
-                                </div>
-                                <div class="umd">
-                                    <div class="circle">
-                                        <img :class="s.sportLevel" :src="s.Head" alt="" v-if="s.Head">
-                                        <img :class="s.sportLevel" src="../static/img/people/flyhead.png" alt=""
-                                             v-if="!s.Head">
-                                    </div>
-                                    <!-- 生日快乐 -->
-                                    <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 class="urt">
-                                    <em class="fastJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) > 90">{{
-                                        s.RealHr }}</em>
-                                    <em class="slowJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) <= 90">{{
-                                        s.RealHr }}</em>
-                                    <em class="plus" v-if="s.RealHr == 0"> --- </em>
-                                    <img src="../static/img/heart.svg" class=""/>
-                                </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="md">
-                <div class="partInfo">
-                        <span class="title rtitle">
-                        <img src="../assets/img/pk/redFlag.svg"/>
-                        CK
-                        </span>
-
-                    <span class="title btitle">
-                        <img src="../assets/img/pk/blueFlag.svg"/>
-                        CK
-                        </span>
-                </div>
-                <div class="cubelist">
-                    <div class="cubes rcube">
-                        <em>红队</em>
-                    </div>
-                    <img class="vs" src="../assets/img/pk/vs.svg"/>
-                    <div class="cubes bcube">
-                        <em>蓝队</em>
-                    </div>
-                </div>
-                <div class="teamScore">
-                    <div class="lt">{{redSum}}</div>
-                    <div class="rt">{{blueSum}}</div>
-                </div>
-
-                <div class="bottomInfo">
-                    <span class="names">
-                        {{PlanName}}
-                    </span>
-                    <div class="teacher">
-                        <span v-if="Teacher"> 教练：{{Teacher}}</span>
-                        <span>人数：{{num}} </span>
-                    </div>
-                    <div class="classTime">
-                        {{classInfo.endTime}}
-                    </div>
-                </div>
-            </div>
-            <div class="rt">
-                <ul>
-                    <li :class="BluestudentsClassName" v-for="(s,i) in students.blueUnite">
-                        <div class="bg">
-                            <h5>
-                                <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>
-                            </h5>
-                            <div class="user">
-                                <div class="ult">
-                                    <em>
-                                        <div v-if="s.RealHr != 0">
-                                            {{ s.ActivePercent |max100 }}
-                                        </div>
-                                        <div class="plus" v-if="s.ActivePercent == 0&& s.RealHr == 0">
-                                            ---
-                                        </div>
-                                        <s>%</s>
-                                    </em>
-                                </div>
-                                <div class="umd">
-                                    <div class="circle">
-                                        <img :class="s.sportLevel" :src="s.Head" alt="" v-if="s.Head">
-                                        <img :class="s.sportLevel" 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="urt">
-                                    <em class="fastJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) > 90">{{
-                                        s.RealHr }}</em>
-                                    <em class="slowJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) <= 90">{{
-                                        s.RealHr }}</em>
-                                    <em class="plus" v-if="s.RealHr == 0"> --- </em>
-                                    <img src="../static/img/heart.svg" class=""/>
-                                </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="rt">
+              <span>
+              <em>CK 222.1</em>
+            </span>
         </div>
-        <newRecord :toper-info="toperInfo"></newRecord>
-        <newStudent :student-info="studentInfo"></newStudent>
+        <div class="md">
+          <img src="../assets/imgs/pk/vs.png" alt="">
+        </div>
+      </div>
+      <div class="lineContianer">
+        <div class="lt">
+            <span>
+              <em>8人红队</em>
+            </span>
+        </div>
+        <div class="rt">
+             <span>
+              <em>蓝队队8人</em>
+            </span>
+        </div>
+      </div>
     </div>
+    <div class="userPart">
+      <div class="lt">
+        <div class="bottomLine redBottom"></div>
+      </div>
+      <div class="md">
+        00:30:12
+      </div>
+      <div class="rt">
+        <div class="bottomLine blueBottom"></div>
+      </div>
+    </div>
+    <div class="icons">
+      <img src="../assets/imgs/pk/icons.png" alt="">
+    </div>
+  </div>
 </template>
-
 <script>
-    import '../libs/rem';
-    import Headside from '@/components/Headside'
-    import newRecord from '@/components/newRecord'
-    import newStudent from '@/components/newStudent'
-    import power from '@/components/power'
-    import {
-        getHello,
-        getClassStat,
-        getRecordBreak,
-        getNewUser
-    } from '@/api/getApiRes'
-    import '../libs/rem';
-
-    let qs = require('qs');
-    export default {
-        data() {
-            return {
-                trueDate: true,//真实数据 true false
-                studentsClassName: [],
-                students: {
-                    redUnite: [],
-                    blueUnite: [],
-                },
-                redSum: 0,
-                blueSum: 0,
-                pkVal: '50%',
-                RedstudentsClassName: '',
-                BluestudentsClassName: '',
-                PlanName: '',
-                num: 0,
-                Teacher: '',
-                classInfo: {
-                    name: '竞技课程',
-                    num: '0',
-                    btTime: '2020-11-13 09:00:00',//时间戳
-                    endTime: '00:00:00',
-                    redSum: 0,
-                    blueSum: 0,
-                },
-                totalTime: 30,
-                studentTime: 15,
-                toperInfo: {
-                    dialogVisible: false,
-                    toper: {},
-                },
-                studentInfo: {
-                    dialogVisible: false,
-                    Rs: [],
-                    percent: 0
-                },
-            }
-        },
-        mounted() {
-            let that = this;
-            if (this.trueDate) {
-                this.init();
-
-                // this.PkEgg = setInterval(() => {
-                //     this.createEgg();
-                // }, 6000);
-
-            } else {
-                // 虚假的数据
-                let json = {
-                    "Code": "0",
-                    "Memo": "Success",
-                    "Dp": {
-                        "PlanId": 182,
-                        "ShopId": 1,
-                        "SvId": 1,
-                        "PlanName": "齐源大厦浏览器显示2020-12-02日08:40开始的竞技游戏",
-                        "Status": 2,
-                        "BeginTime": "17:15:18",
-                        "EndTime": 0,
-                        "ClassType": 2,
-                        "PkNum": 2
-                    }
-                };
-                // 载入课程信息
-                let Dp = json.Dp;
-                that.ReadLessonInfo(Dp);
-                // 载入学生信息
-                let Rs = fakeNews(14, 2);
-                that.UniteBreak(Rs);
-
-                // 人口总数
-                that.num = json.Rs ? json.Rs.length : 0;
-                this.ClacClassTime();
-            }
-        },
-        watch: {
-            '$route': function (val) {
-                let that = this;
-                if (val.path == '/pk') {
-                    if (this.trueDate) {
-                        this.init();
-                        // this.PkEgg = setInterval(() => {
-                        //     this.createEgg();
-                        // }, 6000);
-
-                    } else {
-                        let Rs = fakeNews(16);
-                        that.UniteBreak(Rs);
-                    }
-                } else {
-                    clearInterval(this.PkTimer);
-                    clearInterval(this.PkEgg);
-                    clearInterval(this.timer2);
-                    clearInterval(this.timer3);
-                    this.PkTimer = null;
-                    this.PkEgg = null;
-                    this.timer2 = null;
-                    this.timer3 = null;
-                }
-            }
-        },
-        beforeDestroy() {
-            clearInterval(this.PkTimer);
-            clearInterval(this.PkEgg);
-            clearInterval(this.timer2);
-            clearInterval(this.timer3);
-            this.PkTimer = null;
-            this.PkEgg = null;
-            this.timer2 = null;
-            this.timer3 = null;
-        },
-        methods: {
-            init() {
-                this.GetgetUserList();
-                this.createEgg();
-                this.createNewStudent();
-
-                this.PkTimer = setInterval(() => {
-                    this.GetgetUserList();
-                    this.ClacClassTime();
-                    this.curgetClassStat();
-                }, 1000);
-
-                this.timer2 = setInterval(() => {
-                    this.createEgg();
-                }, 31000);
-
-                this.timer3 = setInterval(() => {
-                    this.createNewStudent();
-                }, 6000);
-            },
-            // 启动一个成就彩蛋
-            createEgg() {
-                let that = this;
-                let param = {
-                    token: localStorage.token,
-                    eqSn: localStorage.eqSn
-                };
-                let postdata = qs.stringify(param);
-                getRecordBreak(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        // 欢迎新学生时不显示彩蛋
-                        if (that.studentInfo.dialogVisible == true) {
-                            console.log('正在显示新学生');
-                            return false
-                        } else {
-                            this.OpenEgg(json);
-                        }
-                    } else {
-                        // 并没有人破记录
-                        if (json.Code == 999) return false;
-                        if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
-                    }
-                })
-            },
-            // 欢迎新同学
-            createNewStudent() {
-                let that = this;
-                let param = {
-                    token: localStorage.token,
-                    eqSn: localStorage.eqSn
-                };
-                let postdata = qs.stringify(param);
-                getNewUser(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        console.log('来新生了');
-                        // 显示彩蛋时不欢迎新学生
-                        if (that.toperInfo.dialogVisible == true) {
-                            console.log('正在显示彩蛋');
-                            return false
-                        } else {
-                            that.OpenStudent(json.Rs);
-                        }
-                    } else {
-                        // 并没有人破记录
-                        if (json.Code == 999) return false;
-                        if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
-                    }
-                })
-            },
-            OpenEgg(msg) {
-                this.toperInfo.toper = msg.Rs;
-                this.toperInfo.dialogVisible = true;
-                // 倒计时5秒自动关闭
-                let that = this;
-                this.totalTime = 30;
-                let clock = window.setInterval(() => {
-                    this.totalTime--;
-                    if (parseInt(this.totalTime) < 0) {
-                        that.toperInfo.dialogVisible = false;
-                        clearInterval(clock);
-                    }
-                }, 1000)
-            },
-            OpenStudent(msg) {
-                let that = this;
-                that.studentInfo.Rs = msg;
-                that.studentInfo.dialogVisible = true;
-                this.studentInfo.percent = 0;
-                // 倒计时5秒自动关闭
-                this.studentTime = 15;
-                let clock = window.setInterval(() => {
-                    this.studentTime--;
-                    let num = (15 - this.studentTime) / 15 * 100;
-                    this.studentInfo.percent = parseInt(num) > 100 ? 100 : num;
-                    console.log('num' + num);
-                    if (parseInt(this.studentTime) <= 0) {
-                        that.studentInfo.dialogVisible = false;
-                        clearInterval(clock);
-                    }
-                }, 1000)
-            },
-            // 载入课程信息
-            ReadLessonInfo(Dp) {
-                this.PlanName = Dp.PlanName;
-                this.BeginTime = Dp.BeginTime;
-                this.Teacher = Dp.Teacher;
-            },
-            // 分队展示
-            UniteBreak(Rs) {
-                let that = this;
-                that.students.redUnite = [];
-                that.students.blueUnite = [];
-                if (!Rs) {
-                    that.students.redUnite = [];
-                    that.students.blueUnite = [];
-                } else {
-                    Rs.map(function (item, t) {
-                        item.sportLevel = sportLevel(item.ActivePercent);
-                        if (item.GroupNo == 1) {
-                            that.students.redUnite.push(item);
-                        }
-                        if (item.GroupNo == 2) {
-                            that.students.blueUnite.push(item);
-                        }
-                    })
-                }
-                that.giveClassName(that.students.redUnite, 1);
-                that.giveClassName(that.students.blueUnite, 2);
-                that.calcSumCK(that.students);
-            },
-            // 计算各队总分
-            calcSumCK(Rs) {
-                let that = this;
-                let redSum = 0;
-                let blueSum = 0;
-
-                // that.redSum
-                Rs.redUnite.map(function (item, t) {
-                    redSum += parseFloat(item.Ck.toFixed(1));
-                });
-                Rs.blueUnite.map(function (item, t) {
-                    blueSum += parseFloat(item.Ck.toFixed(1));
-                });
-                that.redSum = redSum.toFixed(1);
-                that.blueSum = blueSum.toFixed(1);
-
-
-
-                // 进度条 FormatCk
-                let redFmtSum = 0;
-                let blueFmtSum = 0;
-                Rs.redUnite.map(function (item, t) {
-                    redFmtSum += parseFloat(item.FormatCk);
-                });
-                Rs.blueUnite.map(function (item, t) {
-                    blueFmtSum +=  parseFloat(item.FormatCk);
-                });
-
-                // pkVal
-                let sumMax = parseFloat(redFmtSum) + parseFloat(blueFmtSum);
-
-                // 当为0时均分
-                if (sumMax == 0) {
-                    that.pkVal = '50%';
-                } else {
-                    // 限制最大
-                    let pkval = parseInt((redFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((redFmtSum / sumMax) * 100);
-                    console.log(pkval);
-                    that.pkVal = pkval + '%';
-                }
-
-                // // 获取人数 计算人均CK
-                // let redHuman = 0;
-                // let blueHuman = 0;
-                // if (Rs.redUnite != '') {
-                //     redHuman = Rs.redUnite.length;
-                //     that.redSum = parseFloat(redSum / redHuman).toFixed(1);
-                // } else {
-                //     that.redSum = 0
-                // }
-                // if (Rs.blueUnite != '') {
-                //     blueHuman = Rs.blueUnite.length;
-                //     that.blueSum = parseFloat(blueSum / blueHuman).toFixed(1);
-                // } else {
-                //     that.blueSum = 0
-                // }
-                // that.redSum = redSum;
-                // that.blueSum = blueSum;
-
-                // // pkVal ***进度条对比按照人均显示
-                // let sumMax = parseFloat(that.redSum) + parseFloat(that.blueSum);
-                // // 当为0时均分
-                // if (sumMax == 0) {
-                //     that.pkVal = '50%';
-                // } else {
-                //     // 限制最大
-                //     let pkval = parseInt((that.redSum / sumMax) * 100) > 100 ? 100 : parseInt((that.redSum / sumMax) * 100);
-                //     that.pkVal = pkval + '%';
-                // }
-            },
-            // 获取上课学生信息
-            GetgetUserList() {
-                let that = this;
-                let param = {
-                    token: localStorage.token,
-                    eqSn: localStorage.eqSn
-                };
-                // this.giveClassName(this.Bluestudents,2);
-                let postdata = qs.stringify(param);
-                getHello(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        if (!json.Dp) {
-                            // that.$message.error('没有获取到课程信息');
-                            return false
-                        } else {
-                            that.ReadLessonInfo(json.Dp);
-                        }
-                        that.UniteBreak(json.Rs);
-                        // 人口总数
-                        that.num = json.Rs.length ? json.Rs.length : 0;
-                        this.ClacClassTime();
-                    } else {
-                        // 已下课
-                        console.log(json.Code);
-                        if (json.Code == '999') {
-                            // that.$router.push({path: '/2pkRank'});
-                        } else {
-                            // 已出错
-                            that.$message.error(json.Memo);
-                        }
-                    }
-                })
-            },
-            // 动态计算排版
-            giveClassName(res, type) {
-                let that = this;
-                let numberClass = '';
-                switch (true) {
-                    case  parseInt(res.length) <= 2 && parseInt(res.length) > 0:
-                        numberClass = 'two';
-                        break;
-                    case  parseInt(res.length) == 3:
-                        numberClass = 'three';
-                        break;
-                    case  parseInt(res.length) <= 4 && parseInt(res.length) > 2:
-                        numberClass = 'four';
-                        break;
-                    case  parseInt(res.length) <= 6 && parseInt(res.length) > 4:
-                        numberClass = 'four';
-                        break;
-                    case  parseInt(res.length) > 6:
-                        numberClass = 'eight';
-                        break;
-                }
-                if (type == 1) {
-                    that.RedstudentsClassName = numberClass;
-                } else {
-                    that.BluestudentsClassName = numberClass;
-                }
-            },
-            // 计算团队竞技课持续时间
-            ClacClassTime() {
-                let BeginTime = new Date(globalcurrent() + ' ' + this.BeginTime);//结束时间
-                let nowDate = new Date();
-                let date = new Date(nowDate - BeginTime - 8 * 60 * 60 * 1000);//减掉东八区时区问题
-
-                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
-                let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
-                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
-                this.classInfo.endTime = h + m + s;
-            },
-            // 当前课程状态
-            curgetClassStat() {
-                let that = this;
-                let param = {
-                    token: localStorage.token,
-                    eqSn: localStorage.eqSn
-                };
-                let postdata = qs.stringify(param);
-                getClassStat(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        // 没开课
-                        if (json.ClassOn == 0) {
-                            console.log("xiakele ");
-                            // 0: 下课 团课/私教 排名
-                            // 1：团课/私教 todo
-                            // 2：竞技课2PK
-                            // 3：竞技课3PK
-                            that.$router.push({path: '/2pkRank'});
-                            switch (parseInt(json.dp)) {
-                                case 2:
-                                    that.$router.push({path: '/2pkRank'});
-                                    break;
-                            }
-                        }
-                    } else {
-                        // that.$message.error(json.Memo);
-                    }
-                })
-            },
-        },
-        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: {
-            Headside, newRecord, newStudent, power
-        }
-    }
+import '../libs/rem';
+import Headside from '@/components/Headside'
+import newRecord from '@/components/newRecord'
+import newStudent from '@/components/newStudent'
+
+let qs = require('qs');
+export default {
+  data() {
+    return {
+      trueDate: true,//真实数据 true false
+      studentsClassName: [],
+      students: {
+        redUnite: [],
+        blueUnite: [],
+      },
+      redSum: 0,
+      blueSum: 0,
+      pkVal: '50%',
+      RedstudentsClassName: '',
+      BluestudentsClassName: '',
+      PlanName: '',
+      num: 0,
+      Teacher: '',
+      classInfo: {
+        name: '竞技课程',
+        num: '0',
+        btTime: '2020-11-13 09:00:00',//时间戳
+        endTime: '00:00:00',
+        redSum: 0,
+        blueSum: 0,
+      },
+      totalTime: 30,
+      studentTime: 15,
+      toperInfo: {
+        dialogVisible: false,
+        toper: {},
+      },
+      studentInfo: {
+        dialogVisible: false,
+        Rs: [],
+        percent: 0
+      },
+    }
+  },
+  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: {
+    Headside, newRecord, newStudent
+  }
+}
 </script>
-
-<style scoped>
-    @import "../assets/css/bg.css";
-
-    .pages {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        background-color: #028fe1;
-        background: url("../static/img/pkBg.png");
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-      overflow-y: scroll;
-    }
-
-    * {
-        font-family: vista;
-    }
-
-
-    ul, li {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    em {
-        font-style: normal;
-    }
-
-
-    .pk-detail-con {
-        position: relative;
-        top: 0.5rem;
-        width: 98%;
-        height: 0.6rem;
-        display: block;
-        margin: 0 auto;
-        overflow: visible;
-    }
-
-    .progress {
-        width: 100%;
-        height: 0.3rem;
-        overflow: visible;
-        background-color: #04A6EE;
-        border-radius: 19px;
-        background-image: url("../static/img/pk/blue.png");
-        /*background-image: linear-gradient(45deg, #60b7ff 25%, #0a84e9 0, #0a84e9 50%, #60b7ff 0, #60b7ff 75%, #0a84e9 0);*/
-        /*background-size: 40px 40px;*/
-    }
-
-    .progress-bar {
-        height: 0.3rem;
-        text-align: left;
-        background-color: #F75E07;
-        -moz-transition: width .6s ease;
-        -webkit-transition: width .6s ease;
-        transition: width .6s ease;
-        background-image: url("../static/img/pk/red.png");
-
-        /*background-image: linear-gradient(45deg, #ff9960 25%, #f75e07 0, #f75e07 50%, #ff9960 0, #ff9960 75%, #f75e07 0);*/
-        /*background-size: 40px 40px;*/
-    }
-
-    .progress, .progress-bar {
-
-        /*background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);*/
-        /*background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);*/
-        /*background-image: linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);*/
-    }
-
-    .lightning {
-        position: relative;
-        top: -0.5rem;
-        width: 1rem;
-        height: 1.3rem;
-        float: right;
-        margin-right: -0.5rem;
-        background: url("../static/img/pk/light.png") no-repeat center;
-        background-size: cover;
-
-    }
-
-    .lp_icon {
-        position: absolute;
-        left: -0.1rem;
-        top: -0.3rem;
-        width: 0.8rem;
-        height: 0.8rem;
-        float: left;
-    }
-
-    .rp_icon {
-        position: absolute;
-        right: 0;
-        top: -0.3rem;
-        width: 0.8rem;
-        height: 0.8rem;
-        float: right;
-    }
-
-    .pk_container {
-        width: 98%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .pk_container .lt {
-        width: 35%;
-        float: left;
-    }
-
-    .pk_container .rt {
-        width: 35%;
-        float: right;
-    }
-
-    .pk_container .md {
-        width: 30%;
-        float: left;
-    }
-
-    .pk_container ul {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        padding-top: 0.01rem;
-    }
-
-    .pk_container li {
-        overflow: hidden;
-        color: #fff;
-        margin-bottom: 0.1rem;
-    }
-
-    .pk_container .lt li {
-        overflow: hidden;
-    }
-
-    .pk_container .rt li {
-        overflow: hidden;
-    }
-
-    .pk_container .lt .bg {
-        border: 2px solid rgba(255, 143, 122, 0.5);
-        background: rgba(194, 36, 6, 0.5);
-    }
-
-    .pk_container .rt .bg {
-        border: 2px solid rgba(80, 115, 255, 0.5);
-        background: rgba(0, 30, 152, 0.5);
-    }
-
-
-    .pk_container li .bg > h5 {
-        font-family: vista;
-        font-weight: 500;
-        font-size: 0.3rem;
-        text-align: center;
-        color: #fff;
-        margin: 0;
-        margin-top: 0.1rem;
-        margin-bottom: 0.1rem;
-    }
-
-    .bg > h5 div {
-        float: left;
-        width: 20%;
-        text-align: left;
-        text-indent: 0.1rem;
-    }
-
-    .bg > h5 .nameMd {
-        width: 60%;
-        text-align: center;
-        text-indent: 0;
-    }
-
-    .pk_container li .user {
-        width: 100%;
-        overflow: visible;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .pk_container .user .ult {
-        width: 33.333%;
-        float: left;
-        overflow: visible;
-        flex-direction: column;
-    }
-
-    .pk_container .user .umd {
-        width: 33.333%;
-        float: left;
-        overflow: visible;
-        flex-direction: column
-    }
-
-    .pk_container .user .urt {
-        width: 33.333%;
-        float: right;
-        flex-direction: column;
-    }
-
-    .centerLi .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: mymove 3s infinite;
-        -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
-        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-    }
-
-    .user .ult span {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        font-family: "Source Han Sans CN";
-        font-weight: normal;
-        font-size: 0.3rem;
-        text-align: center;
-    }
-
-    .user .ult em {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .user .ult em div {
-        width: 80%;
-        overflow: hidden;
-        float: right;
-        text-align: right;
-        padding-right: 0.3rem;
-        font-size: 0.8rem;
-        line-height: 1.8rem;
-    }
-
-    .user .ult s {
-        position: relative;
-        top: -1.2rem;
-        right: 0rem;
-        float: right;
-        font-family: HeadLineA;
-        font-weight: normal;
-        font-size: 0.3rem;
-        text-align: center;
-        text-decoration: none;
-    }
-
-    .circle {
-        width: 1.7rem;
-        height: 1.7rem;
-        overflow: visible;
-        display: block;
-        margin: 0 auto;
-        border-radius: 33rem;
-        padding-top: 0.09rem;
-    }
-
-    .user .umd img {
-        width: 1.5rem;
-        height: 1.5rem;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        /*border-radius: 33rem;*/
-        border-radius: 33rem;
-        border: 0.1rem solid #B9CB01;
-    }
-
-
-    .urt img {
-        position: relative;
-        right: 0.1rem;
-        top: -1.2rem;
-        width: 0.35rem;
-        height: 0.35rem;
-        float: right;
-    }
-
-    .urt em {
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        font-family: HeadLineA;
-        font-weight: normal;
-        font-size: 0.7rem;
-        letter-spacing: -0.05em;
-        text-align: right;
-        font-style: normal;
-        line-height: 1.8rem;
-        padding-right: 25%;
-    }
-
-    .bottomLi {
-        width: 98%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        font-weight: normal;
-        color: #fff;
-        text-align: center;
-        font-size: 0.4rem;
-        text-indent: 0.2rem;
-    }
-
-    .bottomLi img {
-        /*width: 0.24rem;*/
-        /*height: 0.24rem;*/
-        float: left;
-        margin-left: 10%;
-    }
-
-    .bottomLi span {
-        float: left;
-        text-align: left;
-    }
-
-    .bottomLi .btcla {
-        width: 30%;
-        float: left;
-        text-align: left;
-    }
-
-    .bottomLi .btck {
-        width: 40%;
-        float: left;
-        text-align: left;
-    }
-
-    .bottomLi .step {
-        width: 30%;
-        float: right;
-        text-align: left;
-    }
-
-    @keyframes mymove {
-        0% {
-            transform: scale(1); /*开始为原始大小*/
-        }
-        25% {
-            transform: scale(1.2); /*放大1.1倍*/
-        }
-        50% {
-            transform: scale(1);
-        }
-        75% {
-            transform: scale(1.2);
-        }
-
-    }
-
-    @-webkit-keyframes mymove /*Safari and Chrome*/
-    {
-        0% {
-            transform: scale(1); /*开始为原始大小*/
-        }
-        25% {
-            transform: scale(1.2); /*放大1.1倍*/
-        }
-        50% {
-            transform: scale(1);
-        }
-        75% {
-            transform: scale(1.2);
-        }
-    }
-
-
-    .md {
-        width: 30%;
-        overflow: hidden;
-        float: left;
-    }
-
-    .partInfo {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        padding-top: 1rem;
-    }
-
-    .partInfo .rp, .partInfo .bp {
-        width: 50%;
-        float: left;
-    }
-
-    .partInfo .title {
-        width: 33%;
-        overflow: hidden;
-        display: block;
-        margin: 0;
-        font-size: 0.4rem;
-        color: #fff;
-        text-align: left;
-    }
-
-    .rtitle {
-        float: left;
-        padding-left: 0.25rem;
-    }
-
-    .partInfo .btitle {
-        width: 30%;
-        float: right;
-    }
-
-    .partInfo .title img {
-        width: 0.4rem;
-        float: left;
-        margin-right: 0.2rem;
-    }
-
-    .cubelist {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .cubelist .cubes {
-        width: 33%;
-        height: 2rem;
-        overflow: hidden;
-        float: left;
-        background-position: top center;
-
-    }
-
-    .cubelist .vs {
-        width: 33%;
-        height: 2rem;
-        overflow: hidden;
-        float: left;
-    }
-
-    .cubelist .cubes em {
-        width: 80%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        text-align: center;
-        font-size: 0.3rem;
-        font-style: normal;
-        color: #fff;
-        line-height: 2rem;
-    }
-
-    .cubes.rcube {
-        background: url("../static/img/pk/rcube.png");
-        background-size: 100% 100%;
-    }
-
-    .cubes.bcube {
-        background: url("../static/img/pk/bcube.png");
-        background-size: 100% 100%;
-    }
-
-    .teamScore {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .teamScore div {
-        width: 50%;
-        float: left;
-        text-align: center;
-        color: #fff;
-        font-size: 0.6rem;
-    }
-
-    .bottomInfo {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .bottomInfo .names {
-        width: 98%;
-        height: 0.6rem;
-        border-radius: 36px;
-        background: #0925b4;
-        border: 2px solid rgba(255, 255, 255, 0.5);
-        font-size: 0.4rem;
-        font-family: Roboto;
-        font-weight: normal;
-        text-align: center;
-        color: #e1ff00;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-top: 0.2rem;
-    }
-
-    .teacher {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-top: 0.1rem;
-        margin-bottom: 0.1rem;
-        color: #fff;
-        font-size: 0.3rem;
-    }
-
-    .teacher span {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .classTime {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        color: #fff;
-        text-align: center;
-    }
-
-    .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: mymove 1s infinite;
-        -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
-        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-    }
-
-    .slowJump {
-        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: mymove 3s infinite;
-        -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
-        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-    }
-
-    /*two*/
-    .pk_container li.two {
-        width: 90%;
-        overflow: hidden;
-        display: block;
-    }
-
-    .two .bottomLi {
-        width: 98%;
-        font-size: 0.35rem;
-        margin-top: 0.3rem;
-        text-align: center;
-    }
-
-    .two .bottomLi img {
-        width: 0.4rem;
-        height: 0.4rem;
-        margin-top: 0.15rem;
-    }
-
-    .two .bottomLi .btck img {
-        width: 0.4rem;
-        margin-top: 0.1rem;
-    }
-
-    .two .bottomLi span {
-        line-height: 0.8rem;
-        text-indent: 0.1rem;
-    }
-
-    .two .bottomLi .btcla {
-        width: 30%;
-    }
-
-    .two .bottomLi .btck {
-        width: 33%;
-        padding-left: 3%;
-    }
-
-    .two .bottomLi .step {
-        width: 28%;
-        padding-right: 0%;
-    }
-
-    .two .cla em.plus {
-        position: relative;
-        left: -0.3rem
-    }
-
-    .two .lhj span.plus {
-        position: relative;
-        left: 1.3rem
-    }
-
-    .two .bottomLi .btck img {
-        width: 0.5rem;
-        height: 0.5rem;
-        margin-top: 0.12rem;
-    }
-
-    .two .urt img {
-        width: 0.3rem;
-        height: 0.3rem;
-    }
-
-    /*three*/
-
-    .pk_container li.three {
-        width: 90%;
-        overflow: hidden;
-        display: block;
-    }
-
-    .three .bottomLi {
-        width: 98%;
-        font-size: 0.35rem;
-        margin-top: 0rem;
-        text-align: center;
-    }
-
-    .three .circle {
-        width: 1.2rem;
-        height: 1.2rem;
-    }
-
-    .three .circle img {
-        width: 0.9rem;
-        height: 0.9rem;
-    }
-
-    .three .user {
-        height: 1.2rem;
-        overflow: hidden;
-    }
-
-    .three .ult em div {
-        line-height: 1.2rem;
-    }
-
-    .three .user .ult em {
-        height: 1rem;
-    }
-
-    .three .urt em {
-        line-height: 1.2rem;
-    }
-
-    .three .user .urt {
-        height: 1rem;
-    }
-
-    .three .bottomLi img {
-        width: 0.4rem;
-        height: 0.4rem;
-        margin-top: 0.15rem;
-    }
-
-    .three .bottomLi .btck img {
-        width: 0.4rem;
-        margin-top: 0.1rem;
-    }
-
-    .three .bottomLi span {
-        line-height: 0.8rem;
-        text-indent: 0.1rem;
-    }
-
-    .three .bottomLi .btcla {
-        width: 30%;
-    }
-
-    .three .bottomLi .btck {
-        width: 33%;
-        padding-left: 3%;
-    }
-
-    .three .bottomLi .step {
-        width: 28%;
-        padding-right: 0%;
-    }
-
-    .three .cla em.plus {
-        position: relative;
-        left: -0.3rem
-    }
-
-    .three .lhj span.plus {
-        position: relative;
-        left: 1.3rem
-    }
-
-    .three .bottomLi .btck img {
-        width: 0.5rem;
-        height: 0.5rem;
-        margin-top: 0.12rem;
-    }
-
-
-    /*four*/
-    .pk_container .four {
-        width: 49%;
-        float: left;
-        /*margin-top: 0.4rem;*/
-        /*margin-bottom: 0.5rem;*/
-    }
-
-    .four .bg {
-        width: 96%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .pk_container li.four .bg > h5 {
-        font-size: 0.25rem;
-    }
-
-    .four .user .ult span {
-        font-size: 0.2rem;
-    }
-
-    .four .user .ult em div {
-        width: 90%;
-        font-size: 0.5rem;
-        line-height: 1.1rem;
-        padding-right: 0.2rem;
-    }
-
-    .four .user .ult s {
-        font-size: 0.2rem;
-        line-height: 1rem;
-        height: 1rem;
-        overflow: hidden;
-    }
-
-    .four .user .ult em {
-        height: 1.1rem;
-    }
-
-    .four .circle {
-        width: 1rem;
-        height: 1rem;
-    }
-
-    .four .user .umd img {
-        width: 0.8rem;
-        height: 0.8rem;
-    }
-
-    .four .urt img {
-        width: 0.15rem;
-        height: 0.15rem;
-        top: -0.8rem;
-    }
-
-    .four .urt em {
-        font-size: 0.4rem;
-        line-height: 1.1rem;
-    }
-
-    .four .bottomLi {
-        width: 100%;
-        text-indent: 0.1rem;
-        font-size: 0.2rem;
-    }
-
-    .four .bottomLi img {
-        width: 0.2rem;
-        height: 0.2rem;
-    }
-
-    .four .bottomLi span {
-        width: 60%;
-    }
-
-    .four .user {
-        height: 1.2rem;
-        overflow: hidden;
-    }
-
-    /*six*/
-
-
-    /*eight*/
-    .eight {
-        width: 49%;
-        float: left;
-    }
-
-    .eight .bg {
-        width: 96%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .pk_container li.eight .bg > h5 {
-        font-size: 0.25rem;
-        margin: 0.01rem 0;
-    }
-
-    .eight .user .ult span {
-        font-size: 0.2rem;
-
-    }
-
-    .eight .user .ult em div {
-        width: 90%;
-        margin-right: 0rem;
-        font-size: 0.5rem;
-        line-height: 1rem;
-        padding-right: 0.2rem;
-    }
-
-    .eight .user .ult s {
-        font-size: 0.2rem;
-        line-height: 1rem;
-    }
-
-    .eight .circle {
-        width: 1rem;
-        height: 1rem;
-    }
-
-    .eight .user .umd img {
-        width: 0.8rem;
-        height: 0.8rem;
-    }
-
-    .eight .urt img {
-        width: 0.15rem;
-        height: 0.15rem;
-        top: -0.8rem;
-    }
-
-    .eight .urt em {
-        font-size: 0.4rem;
-        line-height: 1rem;
-    }
-
-    .eight .user .ult em {
-        height: 1.1rem;
-    }
-
-    .eight .bottomLi {
-        width: 100%;
-        text-indent: 0.1rem;
-        font-size: 0.2rem;
-    }
-
-    .eight .bottomLi img {
-        width: 0.2rem;
-        height: 0.2rem;
-    }
-
-    .eight .bottomLi span {
-        width: 60%;
-    }
-
-    .eight .user {
-        height: 1.2rem;
-        overflow: hidden;
-    }
-
-    .eight .bg h5 {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .eight .nameMd {
-        font-size: 0.22rem;
-    }
-
-    .pk_container .rt li {
-        float: right;
-    }
-
-    /*color*/
-    .user .umd img.blue {
-        border-color: #028FE1;
-    }
-
-    .user .umd img.violet {
-        border-color: #6D26FA;
-    }
-
-    .user .umd img.green {
-        border-color: #059F00;
-    }
-
-    .user .umd img.yellow {
-        border-color: #B5C700;
-    }
-
-    .user .umd img.brown {
-        border-color: #EA8813;
-    }
-
-    .user .umd img.red {
-        border-color: #CF1122;
-    }
-
-    .birth {
-        position: relative;
-        top: -2rem;
-        width: 1.7rem;
-        height: 1px;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .birth img.birthCrow {
-        position: relative;
-        top: 0.2rem;
-        width: 1.1rem;
-        height: 0.4rem;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        border: none;
-    }
-
-    .birth img.birthText {
-        position: relative;
-        top: 1rem;
-        width: 1.6rem;
-        height: 0.6rem;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        border: none;
-    }
-
-    .three .birth img.birthCrow {
-        top: 0.7rem;
-        width: 0.8rem;
-        height: 0.3rem;
-    }
-
-    .three .birth img.birthText {
-        top: 1.1rem;
-        width: 1.3rem;
-        height: 0.6rem;
-    }
-
-    .four .birth {
-        width: 1rem;
-    }
-
-    .four .birth img.birthCrow {
-        top: 0.9rem;
-        width: 0.7rem;
-        height: 0.3rem;
-    }
-
-    .four .birth img.birthText {
-        top: 1.3rem;
-        width: 1rem;
-        height: 0.4rem;
-    }
-
-    .eight .birth {
-        width: 1rem;
-    }
-
-    .eight .birth img.birthCrow {
-        top: 0.9rem;
-        width: 0.7rem;
-        height: 0.3rem;
-    }
-
-    .eight .birth img.birthText {
-        top: 1.3rem;
-        width: 1rem;
-        height: 0.4rem;
-    }
-
-    /*isPrivate*/
-    .isPrivate {
-        position: relative;
-        float: right;
-        right: -0.4rem;
-        width: 55%;
-        height: 1px;
-        display: block;
-        margin: 0 auto;
-        overflow: visible;
-    }
-
-    .isPrivate i {
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-top: 0.2rem;
-        width: 0.8rem !important;
-        height: 0.8rem !important;
-        border: none !important;
-        background: url("../static/img/privateSign.svg");
-        background-size: 100% 100%;
-        background-position: top center;
-    }
-
-    .two .isPrivate {
-        top: -2rem;
-    }
-
-    .three .isPrivate {
-        top: -1.45rem;
-        right: -0.15rem;
-    }
-
-    .three .isPrivate i {
-        width: 0.5rem !important;
-        height: 0.5rem !important;
-    }
-
-    .four .isPrivate {
-        top: -1.25rem;
-        right: -0.27rem;
-    }
-
-    .four .isPrivate i {
-        width: 0.4rem !important;
-        height: 0.4rem !important;
-    }
-
-    .eight .isPrivate {
-        top: -1.25rem;
-        right: -0.22rem;
-    }
-
-    .eight .isPrivate i {
-        width: 0.4rem !important;
-        height: 0.4rem !important;
-    }
+<style lang="scss" scoped>
+
+@mixin cube {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+@mixin bg {
+  height: 100%;
+  background-color: #333;
+  background-repeat: no-repeat;
+  background-position: top center;
+  background-size: 100% 100%;
+}
+
+.pages {
+  background: url("../assets/imgs/pk/pkbg.png");
+  @include bg;
+
+  .pageTitle {
+    background: url("../assets/imgs/pk/pageTitle.svg");
+    background-repeat: no-repeat;
+    background-position: top center;
+    background-size: 100% 100%;
+    @include cube;
+    width: 2rem;
+    height: 1rem;
+  }
+}
+
+.icons {
+  @include cube;
+  position: absolute;
+  bottom: 0.2rem;
+
+  img {
+    @include cube;
+    width: 40%;
+  }
+}
 </style>

v2tv/src/views/pk2.vue

@@ -0,0 +1,1726 @@
+<template>
+  <div class="pages">
+    <Headside></Headside>
+    <div class="pk-detail-con">
+      <img src="../assets/img/pk/redGood.svg" class="lp_icon"/>
+      <div class="progress">
+        <div class="progress-bar" :style="{width: pkVal}">
+          <i class="lightning"></i>
+        </div>
+      </div>
+      <img src="../assets/img/pk/blueGood.svg" class="rp_icon"/>
+    </div>
+
+    <div class="pk_container">
+      <div class="lt">
+        <ul>
+          <li :class="RedstudentsClassName" v-for="(s,i) in students.redUnite">
+            <div class="bg">
+              <h5>
+                <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>
+              </h5>
+              <div class="user">
+                <div class="ult">
+                  <em>
+                    <div v-if="s.RealHr != 0">{{ s.ActivePercent |max100 }}</div>
+                    <div class="plus" v-if="s.ActivePercent == 0 && s.RealHr == 0">---</div>
+                    <s>%</s>
+                  </em>
+                </div>
+                <div class="umd">
+                  <div class="circle">
+                    <img :class="s.sportLevel" :src="s.Head" alt="" v-if="s.Head">
+                    <img :class="s.sportLevel" src="../static/img/people/flyhead.png" alt=""
+                         v-if="!s.Head">
+                  </div>
+                  <!-- 生日快乐 -->
+                  <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 class="urt">
+                  <em class="fastJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) > 90">{{
+                      s.RealHr
+                    }}</em>
+                  <em class="slowJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) <= 90">{{
+                      s.RealHr
+                    }}</em>
+                  <em class="plus" v-if="s.RealHr == 0"> --- </em>
+                  <img src="../static/img/heart.svg" class=""/>
+                </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="md">
+        <div class="partInfo">
+                        <span class="title rtitle">
+                        <img src="../assets/img/pk/redFlag.svg"/>
+                        CK
+                        </span>
+
+          <span class="title btitle">
+                        <img src="../assets/img/pk/blueFlag.svg"/>
+                        CK
+                        </span>
+        </div>
+        <div class="cubelist">
+          <div class="cubes rcube">
+            <em>红队</em>
+          </div>
+          <img class="vs" src="../assets/img/pk/vs.svg"/>
+          <div class="cubes bcube">
+            <em>蓝队</em>
+          </div>
+        </div>
+        <div class="teamScore">
+          <div class="lt">{{ redSum }}</div>
+          <div class="rt">{{ blueSum }}</div>
+        </div>
+
+        <div class="bottomInfo">
+                    <span class="names">
+                        {{ PlanName }}
+                    </span>
+          <div class="teacher">
+            <span v-if="Teacher"> 教练：{{ Teacher }}</span>
+            <span>人数：{{ num }} </span>
+          </div>
+          <div class="classTime">
+            {{ classInfo.endTime }}
+          </div>
+        </div>
+      </div>
+      <div class="rt">
+        <ul>
+          <li :class="BluestudentsClassName" v-for="(s,i) in students.blueUnite">
+            <div class="bg">
+              <h5>
+                <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>
+              </h5>
+              <div class="user">
+                <div class="ult">
+                  <em>
+                    <div v-if="s.RealHr != 0">
+                      {{ s.ActivePercent |max100 }}
+                    </div>
+                    <div class="plus" v-if="s.ActivePercent == 0&& s.RealHr == 0">
+                      ---
+                    </div>
+                    <s>%</s>
+                  </em>
+                </div>
+                <div class="umd">
+                  <div class="circle">
+                    <img :class="s.sportLevel" :src="s.Head" alt="" v-if="s.Head">
+                    <img :class="s.sportLevel" 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="urt">
+                  <em class="fastJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) > 90">{{
+                      s.RealHr
+                    }}</em>
+                  <em class="slowJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) <= 90">{{
+                      s.RealHr
+                    }}</em>
+                  <em class="plus" v-if="s.RealHr == 0"> --- </em>
+                  <img src="../static/img/heart.svg" class=""/>
+                </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>
+    <newRecord :toper-info="toperInfo"></newRecord>
+    <newStudent :student-info="studentInfo"></newStudent>
+  </div>
+</template>
+
+<script>
+import '../libs/rem';
+import Headside from '@/components/Headside'
+import newRecord from '@/components/newRecord'
+import newStudent from '@/components/newStudent'
+import power from '@/components/power'
+import {
+  getHello,
+  getClassStat,
+  getRecordBreak,
+  getNewUser
+} from '@/api/getApiRes'
+
+let qs = require('qs');
+export default {
+  data() {
+    return {
+      trueDate: true,//真实数据 true false
+      studentsClassName: [],
+      students: {
+        redUnite: [],
+        blueUnite: [],
+      },
+      redSum: 0,
+      blueSum: 0,
+      pkVal: '50%',
+      RedstudentsClassName: '',
+      BluestudentsClassName: '',
+      PlanName: '',
+      num: 0,
+      Teacher: '',
+      classInfo: {
+        name: '竞技课程',
+        num: '0',
+        btTime: '2020-11-13 09:00:00',//时间戳
+        endTime: '00:00:00',
+        redSum: 0,
+        blueSum: 0,
+      },
+      totalTime: 30,
+      studentTime: 15,
+      toperInfo: {
+        dialogVisible: false,
+        toper: {},
+      },
+      studentInfo: {
+        dialogVisible: false,
+        Rs: [],
+        percent: 0
+      },
+    }
+  },
+  mounted() {
+    let that = this;
+    if (this.trueDate) {
+      this.init();
+
+      // this.PkEgg = setInterval(() => {
+      //     this.createEgg();
+      // }, 6000);
+
+    } else {
+      // 虚假的数据
+      let json = {
+        "Code": "0",
+        "Memo": "Success",
+        "Dp": {
+          "PlanId": 182,
+          "ShopId": 1,
+          "SvId": 1,
+          "PlanName": "齐源大厦浏览器显示2020-12-02日08:40开始的竞技游戏",
+          "Status": 2,
+          "BeginTime": "17:15:18",
+          "EndTime": 0,
+          "ClassType": 2,
+          "PkNum": 2
+        }
+      };
+      // 载入课程信息
+      let Dp = json.Dp;
+      that.ReadLessonInfo(Dp);
+      // 载入学生信息
+      let Rs = fakeNews(14, 2);
+      that.UniteBreak(Rs);
+
+      // 人口总数
+      that.num = json.Rs ? json.Rs.length : 0;
+      this.ClacClassTime();
+    }
+  },
+  watch: {
+    '$route': function (val) {
+      let that = this;
+      if (val.path == '/pk') {
+        if (this.trueDate) {
+          this.init();
+          // this.PkEgg = setInterval(() => {
+          //     this.createEgg();
+          // }, 6000);
+
+        } else {
+          let Rs = fakeNews(16);
+          that.UniteBreak(Rs);
+        }
+      } else {
+        clearInterval(this.PkTimer);
+        clearInterval(this.PkEgg);
+        clearInterval(this.timer2);
+        clearInterval(this.timer3);
+        this.PkTimer = null;
+        this.PkEgg = null;
+        this.timer2 = null;
+        this.timer3 = null;
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.PkTimer);
+    clearInterval(this.PkEgg);
+    clearInterval(this.timer2);
+    clearInterval(this.timer3);
+    this.PkTimer = null;
+    this.PkEgg = null;
+    this.timer2 = null;
+    this.timer3 = null;
+  },
+  methods: {
+    init() {
+      this.GetgetUserList();
+      this.createEgg();
+      this.createNewStudent();
+
+      this.PkTimer = setInterval(() => {
+        this.GetgetUserList();
+        this.ClacClassTime();
+        this.curgetClassStat();
+      }, 1000);
+
+      this.timer2 = setInterval(() => {
+        this.createEgg();
+      }, 31000);
+
+      this.timer3 = setInterval(() => {
+        this.createNewStudent();
+      }, 6000);
+    },
+    // 启动一个成就彩蛋
+    createEgg() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getRecordBreak(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 欢迎新学生时不显示彩蛋
+          if (that.studentInfo.dialogVisible == true) {
+            console.log('正在显示新学生');
+            return false
+          } else {
+            this.OpenEgg(json);
+          }
+        } else {
+          // 并没有人破记录
+          if (json.Code == 999) return false;
+          if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
+        }
+      })
+    },
+    // 欢迎新同学
+    createNewStudent() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getNewUser(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          console.log('来新生了');
+          // 显示彩蛋时不欢迎新学生
+          if (that.toperInfo.dialogVisible == true) {
+            console.log('正在显示彩蛋');
+            return false
+          } else {
+            that.OpenStudent(json.Rs);
+          }
+        } else {
+          // 并没有人破记录
+          if (json.Code == 999) return false;
+          if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
+        }
+      })
+    },
+    OpenEgg(msg) {
+      this.toperInfo.toper = msg.Rs;
+      this.toperInfo.dialogVisible = true;
+      // 倒计时5秒自动关闭
+      let that = this;
+      this.totalTime = 30;
+      let clock = window.setInterval(() => {
+        this.totalTime--;
+        if (parseInt(this.totalTime) < 0) {
+          that.toperInfo.dialogVisible = false;
+          clearInterval(clock);
+        }
+      }, 1000)
+    },
+    OpenStudent(msg) {
+      let that = this;
+      that.studentInfo.Rs = msg;
+      that.studentInfo.dialogVisible = true;
+      this.studentInfo.percent = 0;
+      // 倒计时5秒自动关闭
+      this.studentTime = 15;
+      let clock = window.setInterval(() => {
+        this.studentTime--;
+        let num = (15 - this.studentTime) / 15 * 100;
+        this.studentInfo.percent = parseInt(num) > 100 ? 100 : num;
+        console.log('num' + num);
+        if (parseInt(this.studentTime) <= 0) {
+          that.studentInfo.dialogVisible = false;
+          clearInterval(clock);
+        }
+      }, 1000)
+    },
+    // 载入课程信息
+    ReadLessonInfo(Dp) {
+      this.PlanName = Dp.PlanName;
+      this.BeginTime = Dp.BeginTime;
+      this.Teacher = Dp.Teacher;
+    },
+    // 分队展示
+    UniteBreak(Rs) {
+      let that = this;
+      that.students.redUnite = [];
+      that.students.blueUnite = [];
+      if (!Rs) {
+        that.students.redUnite = [];
+        that.students.blueUnite = [];
+      } else {
+        Rs.map(function (item, t) {
+          item.sportLevel = sportLevel(item.ActivePercent);
+          if (item.GroupNo == 1) {
+            that.students.redUnite.push(item);
+          }
+          if (item.GroupNo == 2) {
+            that.students.blueUnite.push(item);
+          }
+        })
+      }
+      that.giveClassName(that.students.redUnite, 1);
+      that.giveClassName(that.students.blueUnite, 2);
+      that.calcSumCK(that.students);
+    },
+    // 计算各队总分
+    calcSumCK(Rs) {
+      let that = this;
+      let redSum = 0;
+      let blueSum = 0;
+
+      // that.redSum
+      Rs.redUnite.map(function (item, t) {
+        redSum += parseFloat(item.Ck.toFixed(1));
+      });
+      Rs.blueUnite.map(function (item, t) {
+        blueSum += parseFloat(item.Ck.toFixed(1));
+      });
+      that.redSum = redSum.toFixed(1);
+      that.blueSum = blueSum.toFixed(1);
+
+
+      // 进度条 FormatCk
+      let redFmtSum = 0;
+      let blueFmtSum = 0;
+      Rs.redUnite.map(function (item, t) {
+        redFmtSum += parseFloat(item.FormatCk);
+      });
+      Rs.blueUnite.map(function (item, t) {
+        blueFmtSum += parseFloat(item.FormatCk);
+      });
+
+      // pkVal
+      let sumMax = parseFloat(redFmtSum) + parseFloat(blueFmtSum);
+
+      // 当为0时均分
+      if (sumMax == 0) {
+        that.pkVal = '50%';
+      } else {
+        // 限制最大
+        let pkval = parseInt((redFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((redFmtSum / sumMax) * 100);
+        console.log(pkval);
+        that.pkVal = pkval + '%';
+      }
+
+      // // 获取人数 计算人均CK
+      // let redHuman = 0;
+      // let blueHuman = 0;
+      // if (Rs.redUnite != '') {
+      //     redHuman = Rs.redUnite.length;
+      //     that.redSum = parseFloat(redSum / redHuman).toFixed(1);
+      // } else {
+      //     that.redSum = 0
+      // }
+      // if (Rs.blueUnite != '') {
+      //     blueHuman = Rs.blueUnite.length;
+      //     that.blueSum = parseFloat(blueSum / blueHuman).toFixed(1);
+      // } else {
+      //     that.blueSum = 0
+      // }
+      // that.redSum = redSum;
+      // that.blueSum = blueSum;
+
+      // // pkVal ***进度条对比按照人均显示
+      // let sumMax = parseFloat(that.redSum) + parseFloat(that.blueSum);
+      // // 当为0时均分
+      // if (sumMax == 0) {
+      //     that.pkVal = '50%';
+      // } else {
+      //     // 限制最大
+      //     let pkval = parseInt((that.redSum / sumMax) * 100) > 100 ? 100 : parseInt((that.redSum / sumMax) * 100);
+      //     that.pkVal = pkval + '%';
+      // }
+    },
+    // 获取上课学生信息
+    GetgetUserList() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      // this.giveClassName(this.Bluestudents,2);
+      let postdata = qs.stringify(param);
+      getHello(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          if (!json.Dp) {
+            // that.$message.error('没有获取到课程信息');
+            return false
+          } else {
+            that.ReadLessonInfo(json.Dp);
+          }
+          that.UniteBreak(json.Rs);
+          // 人口总数
+          that.num = json.Rs.length ? json.Rs.length : 0;
+          this.ClacClassTime();
+        } else {
+          // 已下课
+          console.log(json.Code);
+          if (json.Code == '999') {
+            // that.$router.push({path: '/2pkRank'});
+          } else {
+            // 已出错
+            that.$message.error(json.Memo);
+          }
+        }
+      })
+    },
+    // 动态计算排版
+    giveClassName(res, type) {
+      let that = this;
+      let numberClass = '';
+      switch (true) {
+        case  parseInt(res.length) <= 2 && parseInt(res.length) > 0:
+          numberClass = 'two';
+          break;
+        case  parseInt(res.length) == 3:
+          numberClass = 'three';
+          break;
+        case  parseInt(res.length) <= 4 && parseInt(res.length) > 2:
+          numberClass = 'four';
+          break;
+        case  parseInt(res.length) <= 6 && parseInt(res.length) > 4:
+          numberClass = 'four';
+          break;
+        case  parseInt(res.length) > 6:
+          numberClass = 'eight';
+          break;
+      }
+      if (type == 1) {
+        that.RedstudentsClassName = numberClass;
+      } else {
+        that.BluestudentsClassName = numberClass;
+      }
+    },
+    // 计算团队竞技课持续时间
+    ClacClassTime() {
+      let BeginTime = new Date(globalcurrent() + ' ' + this.BeginTime);//结束时间
+      let nowDate = new Date();
+      let date = new Date(nowDate - BeginTime - 8 * 60 * 60 * 1000);//减掉东八区时区问题
+
+      let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
+      let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
+      let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+      this.classInfo.endTime = h + m + s;
+    },
+    // 当前课程状态
+    curgetClassStat() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getClassStat(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 没开课
+          if (json.ClassOn == 0) {
+            console.log("xiakele ");
+            // 0: 下课 团课/私教 排名
+            // 1：团课/私教 todo
+            // 2：竞技课2PK
+            // 3：竞技课3PK
+            that.$router.push({path: '/2pkRank'});
+            switch (parseInt(json.dp)) {
+              case 2:
+                that.$router.push({path: '/2pkRank'});
+                break;
+            }
+          }
+        } else {
+          // that.$message.error(json.Memo);
+        }
+      })
+    },
+  },
+  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: {
+    Headside, newRecord, newStudent, power
+  }
+}
+</script>
+
+<style scoped>
+@import "../assets/css/bg.css";
+
+.pages {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  background-color: #028fe1;
+  background: url("../static/img/pkBg.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  overflow-y: scroll;
+}
+
+* {
+  font-family: vista;
+}
+
+
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+em {
+  font-style: normal;
+}
+
+
+.pk-detail-con {
+  position: relative;
+  top: 0.5rem;
+  width: 98%;
+  height: 0.6rem;
+  display: block;
+  margin: 0 auto;
+  overflow: visible;
+}
+
+.progress {
+  width: 100%;
+  height: 0.3rem;
+  overflow: visible;
+  background-color: #04A6EE;
+  border-radius: 19px;
+  background-image: url("../static/img/pk/blue.png");
+  /*background-image: linear-gradient(45deg, #60b7ff 25%, #0a84e9 0, #0a84e9 50%, #60b7ff 0, #60b7ff 75%, #0a84e9 0);*/
+  /*background-size: 40px 40px;*/
+}
+
+.progress-bar {
+  height: 0.3rem;
+  text-align: left;
+  background-color: #F75E07;
+  -moz-transition: width .6s ease;
+  -webkit-transition: width .6s ease;
+  transition: width .6s ease;
+  background-image: url("../static/img/pk/red.png");
+
+  /*background-image: linear-gradient(45deg, #ff9960 25%, #f75e07 0, #f75e07 50%, #ff9960 0, #ff9960 75%, #f75e07 0);*/
+  /*background-size: 40px 40px;*/
+}
+
+.progress, .progress-bar {
+
+  /*background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);*/
+  /*background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);*/
+  /*background-image: linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);*/
+}
+
+.lightning {
+  position: relative;
+  top: -0.5rem;
+  width: 1rem;
+  height: 1.3rem;
+  float: right;
+  margin-right: -0.5rem;
+  background: url("../static/img/pk/light.png") no-repeat center;
+  background-size: cover;
+
+}
+
+.lp_icon {
+  position: absolute;
+  left: -0.1rem;
+  top: -0.3rem;
+  width: 0.8rem;
+  height: 0.8rem;
+  float: left;
+}
+
+.rp_icon {
+  position: absolute;
+  right: 0;
+  top: -0.3rem;
+  width: 0.8rem;
+  height: 0.8rem;
+  float: right;
+}
+
+.pk_container {
+  width: 98%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.pk_container .lt {
+  width: 35%;
+  float: left;
+}
+
+.pk_container .rt {
+  width: 35%;
+  float: right;
+}
+
+.pk_container .md {
+  width: 30%;
+  float: left;
+}
+
+.pk_container ul {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding-top: 0.01rem;
+}
+
+.pk_container li {
+  overflow: hidden;
+  color: #fff;
+  margin-bottom: 0.1rem;
+}
+
+.pk_container .lt li {
+  overflow: hidden;
+}
+
+.pk_container .rt li {
+  overflow: hidden;
+}
+
+.pk_container .lt .bg {
+  border: 2px solid rgba(255, 143, 122, 0.5);
+  background: rgba(194, 36, 6, 0.5);
+}
+
+.pk_container .rt .bg {
+  border: 2px solid rgba(80, 115, 255, 0.5);
+  background: rgba(0, 30, 152, 0.5);
+}
+
+
+.pk_container li .bg > h5 {
+  font-family: vista;
+  font-weight: 500;
+  font-size: 0.3rem;
+  text-align: center;
+  color: #fff;
+  margin: 0;
+  margin-top: 0.1rem;
+  margin-bottom: 0.1rem;
+}
+
+.bg > h5 div {
+  float: left;
+  width: 20%;
+  text-align: left;
+  text-indent: 0.1rem;
+}
+
+.bg > h5 .nameMd {
+  width: 60%;
+  text-align: center;
+  text-indent: 0;
+}
+
+.pk_container li .user {
+  width: 100%;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+}
+
+.pk_container .user .ult {
+  width: 33.333%;
+  float: left;
+  overflow: visible;
+  flex-direction: column;
+}
+
+.pk_container .user .umd {
+  width: 33.333%;
+  float: left;
+  overflow: visible;
+  flex-direction: column
+}
+
+.pk_container .user .urt {
+  width: 33.333%;
+  float: right;
+  flex-direction: column;
+}
+
+.centerLi .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: mymove 3s infinite;
+  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+}
+
+.user .ult span {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: "Source Han Sans CN";
+  font-weight: normal;
+  font-size: 0.3rem;
+  text-align: center;
+}
+
+.user .ult em {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.user .ult em div {
+  width: 80%;
+  overflow: hidden;
+  float: right;
+  text-align: right;
+  padding-right: 0.3rem;
+  font-size: 0.8rem;
+  line-height: 1.8rem;
+}
+
+.user .ult s {
+  position: relative;
+  top: -1.2rem;
+  right: 0rem;
+  float: right;
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 0.3rem;
+  text-align: center;
+  text-decoration: none;
+}
+
+.circle {
+  width: 1.7rem;
+  height: 1.7rem;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  border-radius: 33rem;
+  padding-top: 0.09rem;
+}
+
+.user .umd img {
+  width: 1.5rem;
+  height: 1.5rem;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  /*border-radius: 33rem;*/
+  border-radius: 33rem;
+  border: 0.1rem solid #B9CB01;
+}
+
+
+.urt img {
+  position: relative;
+  right: 0.1rem;
+  top: -1.2rem;
+  width: 0.35rem;
+  height: 0.35rem;
+  float: right;
+}
+
+.urt em {
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 0.7rem;
+  letter-spacing: -0.05em;
+  text-align: right;
+  font-style: normal;
+  line-height: 1.8rem;
+  padding-right: 25%;
+}
+
+.bottomLi {
+  width: 98%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-weight: normal;
+  color: #fff;
+  text-align: center;
+  font-size: 0.4rem;
+  text-indent: 0.2rem;
+}
+
+.bottomLi img {
+  /*width: 0.24rem;*/
+  /*height: 0.24rem;*/
+  float: left;
+  margin-left: 10%;
+}
+
+.bottomLi span {
+  float: left;
+  text-align: left;
+}
+
+.bottomLi .btcla {
+  width: 30%;
+  float: left;
+  text-align: left;
+}
+
+.bottomLi .btck {
+  width: 40%;
+  float: left;
+  text-align: left;
+}
+
+.bottomLi .step {
+  width: 30%;
+  float: right;
+  text-align: left;
+}
+
+@keyframes mymove {
+  0% {
+    transform: scale(1); /*开始为原始大小*/
+  }
+  25% {
+    transform: scale(1.2); /*放大1.1倍*/
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.2);
+  }
+
+}
+
+@-webkit-keyframes mymove /*Safari and Chrome*/
+{
+  0% {
+    transform: scale(1); /*开始为原始大小*/
+  }
+  25% {
+    transform: scale(1.2); /*放大1.1倍*/
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.2);
+  }
+}
+
+
+.md {
+  width: 30%;
+  overflow: hidden;
+  float: left;
+}
+
+.partInfo {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding-top: 1rem;
+}
+
+.partInfo .rp, .partInfo .bp {
+  width: 50%;
+  float: left;
+}
+
+.partInfo .title {
+  width: 33%;
+  overflow: hidden;
+  display: block;
+  margin: 0;
+  font-size: 0.4rem;
+  color: #fff;
+  text-align: left;
+}
+
+.rtitle {
+  float: left;
+  padding-left: 0.25rem;
+}
+
+.partInfo .btitle {
+  width: 30%;
+  float: right;
+}
+
+.partInfo .title img {
+  width: 0.4rem;
+  float: left;
+  margin-right: 0.2rem;
+}
+
+.cubelist {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.cubelist .cubes {
+  width: 33%;
+  height: 2rem;
+  overflow: hidden;
+  float: left;
+  background-position: top center;
+
+}
+
+.cubelist .vs {
+  width: 33%;
+  height: 2rem;
+  overflow: hidden;
+  float: left;
+}
+
+.cubelist .cubes em {
+  width: 80%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+  font-size: 0.3rem;
+  font-style: normal;
+  color: #fff;
+  line-height: 2rem;
+}
+
+.cubes.rcube {
+  background: url("../static/img/pk/rcube.png");
+  background-size: 100% 100%;
+}
+
+.cubes.bcube {
+  background: url("../static/img/pk/bcube.png");
+  background-size: 100% 100%;
+}
+
+.teamScore {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.teamScore div {
+  width: 50%;
+  float: left;
+  text-align: center;
+  color: #fff;
+  font-size: 0.6rem;
+}
+
+.bottomInfo {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.bottomInfo .names {
+  width: 98%;
+  height: 0.6rem;
+  border-radius: 36px;
+  background: #0925b4;
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  font-size: 0.4rem;
+  font-family: Roboto;
+  font-weight: normal;
+  text-align: center;
+  color: #e1ff00;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-top: 0.2rem;
+}
+
+.teacher {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-top: 0.1rem;
+  margin-bottom: 0.1rem;
+  color: #fff;
+  font-size: 0.3rem;
+}
+
+.teacher span {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.classTime {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  color: #fff;
+  text-align: center;
+}
+
+.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: mymove 1s infinite;
+  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+}
+
+.slowJump {
+  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: mymove 3s infinite;
+  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+}
+
+/*two*/
+.pk_container li.two {
+  width: 90%;
+  overflow: hidden;
+  display: block;
+}
+
+.two .bottomLi {
+  width: 98%;
+  font-size: 0.35rem;
+  margin-top: 0.3rem;
+  text-align: center;
+}
+
+.two .bottomLi img {
+  width: 0.4rem;
+  height: 0.4rem;
+  margin-top: 0.15rem;
+}
+
+.two .bottomLi .btck img {
+  width: 0.4rem;
+  margin-top: 0.1rem;
+}
+
+.two .bottomLi span {
+  line-height: 0.8rem;
+  text-indent: 0.1rem;
+}
+
+.two .bottomLi .btcla {
+  width: 30%;
+}
+
+.two .bottomLi .btck {
+  width: 33%;
+  padding-left: 3%;
+}
+
+.two .bottomLi .step {
+  width: 28%;
+  padding-right: 0%;
+}
+
+.two .cla em.plus {
+  position: relative;
+  left: -0.3rem
+}
+
+.two .lhj span.plus {
+  position: relative;
+  left: 1.3rem
+}
+
+.two .bottomLi .btck img {
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-top: 0.12rem;
+}
+
+.two .urt img {
+  width: 0.3rem;
+  height: 0.3rem;
+}
+
+/*three*/
+
+.pk_container li.three {
+  width: 90%;
+  overflow: hidden;
+  display: block;
+}
+
+.three .bottomLi {
+  width: 98%;
+  font-size: 0.35rem;
+  margin-top: 0rem;
+  text-align: center;
+}
+
+.three .circle {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
+.three .circle img {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.three .user {
+  height: 1.2rem;
+  overflow: hidden;
+}
+
+.three .ult em div {
+  line-height: 1.2rem;
+}
+
+.three .user .ult em {
+  height: 1rem;
+}
+
+.three .urt em {
+  line-height: 1.2rem;
+}
+
+.three .user .urt {
+  height: 1rem;
+}
+
+.three .bottomLi img {
+  width: 0.4rem;
+  height: 0.4rem;
+  margin-top: 0.15rem;
+}
+
+.three .bottomLi .btck img {
+  width: 0.4rem;
+  margin-top: 0.1rem;
+}
+
+.three .bottomLi span {
+  line-height: 0.8rem;
+  text-indent: 0.1rem;
+}
+
+.three .bottomLi .btcla {
+  width: 30%;
+}
+
+.three .bottomLi .btck {
+  width: 33%;
+  padding-left: 3%;
+}
+
+.three .bottomLi .step {
+  width: 28%;
+  padding-right: 0%;
+}
+
+.three .cla em.plus {
+  position: relative;
+  left: -0.3rem
+}
+
+.three .lhj span.plus {
+  position: relative;
+  left: 1.3rem
+}
+
+.three .bottomLi .btck img {
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-top: 0.12rem;
+}
+
+
+/*four*/
+.pk_container .four {
+  width: 49%;
+  float: left;
+  /*margin-top: 0.4rem;*/
+  /*margin-bottom: 0.5rem;*/
+}
+
+.four .bg {
+  width: 96%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.pk_container li.four .bg > h5 {
+  font-size: 0.25rem;
+}
+
+.four .user .ult span {
+  font-size: 0.2rem;
+}
+
+.four .user .ult em div {
+  width: 90%;
+  font-size: 0.5rem;
+  line-height: 1.1rem;
+  padding-right: 0.2rem;
+}
+
+.four .user .ult s {
+  font-size: 0.2rem;
+  line-height: 1rem;
+  height: 1rem;
+  overflow: hidden;
+}
+
+.four .user .ult em {
+  height: 1.1rem;
+}
+
+.four .circle {
+  width: 1rem;
+  height: 1rem;
+}
+
+.four .user .umd img {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.four .urt img {
+  width: 0.15rem;
+  height: 0.15rem;
+  top: -0.8rem;
+}
+
+.four .urt em {
+  font-size: 0.4rem;
+  line-height: 1.1rem;
+}
+
+.four .bottomLi {
+  width: 100%;
+  text-indent: 0.1rem;
+  font-size: 0.2rem;
+}
+
+.four .bottomLi img {
+  width: 0.2rem;
+  height: 0.2rem;
+}
+
+.four .bottomLi span {
+  width: 60%;
+}
+
+.four .user {
+  height: 1.2rem;
+  overflow: hidden;
+}
+
+/*six*/
+
+
+/*eight*/
+.eight {
+  width: 49%;
+  float: left;
+}
+
+.eight .bg {
+  width: 96%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.pk_container li.eight .bg > h5 {
+  font-size: 0.25rem;
+  margin: 0.01rem 0;
+}
+
+.eight .user .ult span {
+  font-size: 0.2rem;
+
+}
+
+.eight .user .ult em div {
+  width: 90%;
+  margin-right: 0rem;
+  font-size: 0.5rem;
+  line-height: 1rem;
+  padding-right: 0.2rem;
+}
+
+.eight .user .ult s {
+  font-size: 0.2rem;
+  line-height: 1rem;
+}
+
+.eight .circle {
+  width: 1rem;
+  height: 1rem;
+}
+
+.eight .user .umd img {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.eight .urt img {
+  width: 0.15rem;
+  height: 0.15rem;
+  top: -0.8rem;
+}
+
+.eight .urt em {
+  font-size: 0.4rem;
+  line-height: 1rem;
+}
+
+.eight .user .ult em {
+  height: 1.1rem;
+}
+
+.eight .bottomLi {
+  width: 100%;
+  text-indent: 0.1rem;
+  font-size: 0.2rem;
+}
+
+.eight .bottomLi img {
+  width: 0.2rem;
+  height: 0.2rem;
+}
+
+.eight .bottomLi span {
+  width: 60%;
+}
+
+.eight .user {
+  height: 1.2rem;
+  overflow: hidden;
+}
+
+.eight .bg h5 {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.eight .nameMd {
+  font-size: 0.22rem;
+}
+
+.pk_container .rt li {
+  float: right;
+}
+
+/*color*/
+.user .umd img.blue {
+  border-color: #028FE1;
+}
+
+.user .umd img.violet {
+  border-color: #6D26FA;
+}
+
+.user .umd img.green {
+  border-color: #059F00;
+}
+
+.user .umd img.yellow {
+  border-color: #B5C700;
+}
+
+.user .umd img.brown {
+  border-color: #EA8813;
+}
+
+.user .umd img.red {
+  border-color: #CF1122;
+}
+
+.birth {
+  position: relative;
+  top: -2rem;
+  width: 1.7rem;
+  height: 1px;
+  display: block;
+  margin: 0 auto;
+}
+
+.birth img.birthCrow {
+  position: relative;
+  top: 0.2rem;
+  width: 1.1rem;
+  height: 0.4rem;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  border: none;
+}
+
+.birth img.birthText {
+  position: relative;
+  top: 1rem;
+  width: 1.6rem;
+  height: 0.6rem;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  border: none;
+}
+
+.three .birth img.birthCrow {
+  top: 0.7rem;
+  width: 0.8rem;
+  height: 0.3rem;
+}
+
+.three .birth img.birthText {
+  top: 1.1rem;
+  width: 1.3rem;
+  height: 0.6rem;
+}
+
+.four .birth {
+  width: 1rem;
+}
+
+.four .birth img.birthCrow {
+  top: 0.9rem;
+  width: 0.7rem;
+  height: 0.3rem;
+}
+
+.four .birth img.birthText {
+  top: 1.3rem;
+  width: 1rem;
+  height: 0.4rem;
+}
+
+.eight .birth {
+  width: 1rem;
+}
+
+.eight .birth img.birthCrow {
+  top: 0.9rem;
+  width: 0.7rem;
+  height: 0.3rem;
+}
+
+.eight .birth img.birthText {
+  top: 1.3rem;
+  width: 1rem;
+  height: 0.4rem;
+}
+
+/*isPrivate*/
+.isPrivate {
+  position: relative;
+  float: right;
+  right: -0.4rem;
+  width: 55%;
+  height: 1px;
+  display: block;
+  margin: 0 auto;
+  overflow: visible;
+}
+
+.isPrivate i {
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-top: 0.2rem;
+  width: 0.8rem !important;
+  height: 0.8rem !important;
+  border: none !important;
+  background: url("../static/img/privateSign.svg");
+  background-size: 100% 100%;
+  background-position: top center;
+}
+
+.two .isPrivate {
+  top: -2rem;
+}
+
+.three .isPrivate {
+  top: -1.45rem;
+  right: -0.15rem;
+}
+
+.three .isPrivate i {
+  width: 0.5rem !important;
+  height: 0.5rem !important;
+}
+
+.four .isPrivate {
+  top: -1.25rem;
+  right: -0.27rem;
+}
+
+.four .isPrivate i {
+  width: 0.4rem !important;
+  height: 0.4rem !important;
+}
+
+.eight .isPrivate {
+  top: -1.25rem;
+  right: -0.22rem;
+}
+
+.eight .isPrivate i {
+  width: 0.4rem !important;
+  height: 0.4rem !important;
+}
+</style>