竞技结果

v2tv/src/Mock/index.js

@@ -393,8 +393,8 @@ if (t == 1) {
     // }
 
     // 0: 下课 团课/私教/PK 的排名
-    let LessonClass = 2;
-    let LessonDp = 2;
+    let LessonClass = 0;
+    let LessonDp = 0;
     // 1：团课/私教
     // 2：竞技课2PK
     // 3：竞技课threepk
@@ -408,7 +408,7 @@ if (t == 1) {
         // 上2队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 2));
         Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(1, 2));
-        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(1, 1,));
+        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(8, 1,));
         Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(8, 1,));
     } else if (LessonClass == 3) {
         // 上3队PK课

v2tv/src/assets/imgs/pkRank/title.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="222" height="45"
+     viewBox="0 0 222 45">
+    <defs>
+        <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+            <stop offset="0" stop-color="#ff6200"/>
+            <stop offset="0.291" stop-color="#ff6200"/>
+            <stop offset="1" stop-color="#fcab4c"/>
+        </linearGradient>
+    </defs>
+    <g id="组_742" data-name="组 742" transform="translate(-828 -81)">
+        <rect id="矩形_173" data-name="矩形 173" width="17" height="35" rx="8.5" transform="translate(828 84)"
+              fill="url(#linear-gradient)"/>
+        <text id="竞技结果" transform="translate(1050 121)" fill="#dbdbdb" font-size="45"
+              font-family="SourceHanSansCN-Heavy, Source Han Sans CN" font-weight="800">
+            <tspan x="-180" y="0">竞技结果</tspan>
+        </text>
+    </g>
+</svg>

v2tv/src/components/threestudent.vue

@@ -0,0 +1,828 @@
+<template>
+  <ul :class="[{'many':students.length >= 2}]">
+    <li v-for="(s,i) in students" :class="s.className">
+      <div class="centerLi">
+        <div class="power" v-if="s.RealHr != 0">
+          <power :cur-power="s.PowerPercent"></power>
+        </div>
+        <div class="userinfo">
+          <div class="lt">
+            <span>
+              <em v-if="s.RealHr != 0">{{ s.ActivePercent |max100 }}</em>
+              <s>%</s>
+            </span>
+          </div>
+          <div class="md">
+            <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">
+              <div class="names">
+              <span>
+                  {{ s.Name }}
+              </span>
+              </div>
+            </div>
+            <img src="../assets/imgs/student/star.svg" class="IsPrivate" alt="IsPrivate" v-if="s.IsPrivate == 1">
+            <img src="../assets/imgs/student/birthday.png" class="IsBirthday" alt="IsBirthday" v-if="s.IsBirthday == 1">
+          </div>
+          <div class="rt">
+            <span>
+              <div :class="[{'heartJump':true}]">
+                 <div class="heartImgContainer">
+                     <img src="../assets/imgs/student/heart.svg" class=""/>
+                 </div>
+                                        <span class="fastJump" v-if="s.RealHr != 0"
+                                              v-show="parseInt(s.ActivePercent) > 90">{{ s.RealHr }}</span>
+                <em class="normalJump" v-if="s.RealHr != 0"
+                    v-show="parseInt(s.ActivePercent) <= 90 && parseInt(s.ActivePercent) > 30">
+                                            {{ s.RealHr }}</em>
+                <em class="slowJump" v-if="s.RealHr != 0"
+                    v-show="parseInt(s.ActivePercent) <= 30">{{ s.RealHr }}</em>
+                <em class="plus" v-if="s.RealHr == 0">
+                                        ---
+                                    </em>
+              </div>
+            </span>
+          </div>
+        </div>
+        <div class="userSport">
+          <span>
+            <img src="../assets/imgs/student/calc.svg" class=""/>
+            <em>{{ s.Cle |fmtInt }}</em>
+          </span>
+          <span>
+            <img src="../assets/imgs/student/sport.svg" class=""/>
+            <em>{{ s.PureCalorieNoVo2 |fmtInt }}</em>
+          </span>
+          <span>
+            <img src="../assets/imgs/student/ck.svg" class=""/>
+            <em>{{ s.Ck |fmtFloat }}</em>
+          </span>
+        </div>
+      </div>
+    </li>
+    <li v-for="(s,i) in studentsFake" :class="FakeclassName" v-show="students"
+        v-if="students.length > 0">
+      <div class="fakePart"></div>
+    </li>
+  </ul>
+</template>
+<script>
+import power from '@/components/power'
+
+export default {
+  data() {
+    return {
+      studentsFake: [],
+      FakeclassName: ''
+    }
+  },
+  props: ['students'],
+  watch: {
+    'students': {
+      // 自动计算补全空白处
+      handler(newName, oldName) {
+        if (!newName) {
+          console.log('没有传入学生数据');
+        }
+        let sum = 0;
+        let that = this;
+        sum = newName.length;
+        that.studentsFake = 0;
+        if (sum <= 2) {
+          that.studentsFake = 0;
+        }
+        if (sum >= 3) {
+          that.studentsFake = 8 - sum;
+        }
+        if (sum >= 8) {
+          that.studentsFake = 0
+        }
+
+        let numberClass = '';
+        let colorClass = '';
+        for (let i = 0; i < sum; i++) {
+          switch (true) {
+            case  sum == 1:
+              numberClass = 'max';
+              break;
+            case  sum == 2:
+              numberClass = 'two';
+              break;
+            case   sum > 2:
+              numberClass = 'twentyFive';
+              break;
+          }
+          let per = parseInt(newName[i].ActivePercent);
+          switch (true) {
+            case per >= 90:
+              colorClass = 'red';
+              break;
+            case per <= 89 && per > 79:
+              colorClass = 'brown';
+              break;
+            case per <= 79 && per > 69:
+              colorClass = 'yellow';
+              break;
+            case per <= 69 && per > 54:
+              colorClass = 'green';
+              break;
+            case per <= 54 && per > 39:
+              colorClass = 'violet';
+              break;
+            case per <= 39:
+              colorClass = 'blue';
+              break
+          }
+
+          newName[i].className = numberClass + ' ' + colorClass;
+          that.FakeclassName = numberClass + ' ' + colorClass;
+        }
+
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  filters: {
+    fmtNum(val) {
+      if (val == 0) {
+        return '--'
+      } else {
+        if (parseInt(val) < 0) return 0;
+        if (parseInt(val) > 0) return val
+      }
+    },
+    fmtFloat(val) {
+      if (val == 0) {
+        return '0.0'
+      } else {
+        return parseFloat(val).toFixed(1);
+      }
+    },
+    fmtInt(val) {
+      if (val == 0) {
+        return '0'
+      } else {
+        // return parseFloat(val).toFixed(2);
+        return parseInt(val);
+      }
+    },
+    max100(val) {
+      if (val <= 100) {
+        return val
+      } else {
+        return 100
+      }
+    }
+  },
+  components: {
+    power
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+
+@mixin cube {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+em, i, ul, li, s {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-style: normal;
+  text-decoration: none;
+}
+
+ul {
+  @include cube;
+  width: 96%;
+  display: inline-flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  flex-grow: 1;
+
+  &.many {
+    justify-content: space-between;
+  }
+}
+
+.blue .centerLi {
+  background: #028fe1;
+}
+
+.violet .centerLi {
+  background: #6d26fa;
+}
+
+.green .centerLi {
+  background: #059f00;
+}
+
+.yellow .centerLi {
+  background: #dfb200;
+}
+
+.brown .centerLi {
+  background: #ea8813;
+}
+
+.red .centerLi {
+  background: #cf1122;
+}
+
+.slowJump {
+  animation: moveAct 3s infinite;
+  -webkit-animation: moveAct 3s infinite; /*Safari and Chrome*/
+  animation-direction: alternate; /*轮流反向播放动画。*/
+  animation-timing-function: ease-in-out; /*动画的速度曲线*/
+  /* Safari 和 Chrome */
+  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+}
+
+.normalJump {
+  animation: moveAct 2s infinite;
+  -webkit-animation: moveAct 2s infinite; /*Safari and Chrome*/
+  animation-direction: alternate; /*轮流反向播放动画。*/
+  animation-timing-function: ease-in-out; /*动画的速度曲线*/
+  /* Safari 和 Chrome */
+  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+}
+
+.fastJump {
+  animation: moveAct 1s infinite;
+  -webkit-animation: moveAct 1s infinite; /*Safari and Chrome*/
+  animation-direction: alternate; /*轮流反向播放动画。*/
+  animation-timing-function: ease-in-out; /*动画的速度曲线*/
+  /* Safari 和 Chrome */
+  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+}
+
+@keyframes moveAct {
+  0% {
+    transform: scale(1); /*开始为原始大小*/
+  }
+  25% {
+    transform: scale(1.1); /*放大1.1倍*/
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.1);
+  }
+}
+
+@-webkit-keyframes moveAct /*Safari and Chrome*/
+{
+  0% {
+    transform: scale(1); /*开始为原始大小*/
+  }
+  25% {
+    transform: scale(1.1); /*放大1.1倍*/
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.1);
+  }
+}
+
+.centerLi {
+  width: 99.8%;
+  height: 100%;
+  overflow: hidden;
+  float: left;
+  color: #fff;
+  border-radius: 0.1rem;
+}
+
+
+.userinfo {
+  @include cube;
+
+
+  .lt {
+    width: 35%;
+    float: left;
+
+    span {
+      float: right;
+      margin-top: 16%;
+
+      em {
+        color: white;
+        font-size: 1.5rem;
+        font-weight: bold;
+      }
+
+      s {
+        font-size: 0.4rem;
+        float: right;
+        text-align: right;
+        margin-top: 0.25rem;
+      }
+    }
+  }
+
+  .md {
+    width: 30%;
+    float: left;
+    padding-top: 3%;
+    height: 3rem;
+
+    .head {
+      @include cube;
+      height: 3rem;
+
+      img {
+        @include cube;
+        width: 2.6rem;
+        border-radius: 250rem;
+
+        &.girl {
+          border: 0.05rem solid #EA26EA;
+        }
+
+        &.boy {
+          border: 0.05rem solid #39B6FF;
+        }
+      }
+    }
+
+    .names {
+      @include cube;
+      width: 2rem;
+      background: rgba(0, 0, 0, 0.49);
+      font-size: 0.3rem;
+      text-align: center;
+      padding: 3% 1%;
+      border-radius: 250rem;
+      position: relative;
+      bottom: 0.4rem;
+    }
+  }
+
+  .rt {
+    width: 35%;
+    float: right;
+
+    .heartJump {
+      width: 100%;
+      float: right;
+      margin-top: 20%;
+
+      span {
+        float: right;
+      }
+    }
+
+    > span {
+      width: 100%;
+      text-align: right;
+      float: right;
+      font-size: 1.3rem;
+      font-weight: bold;
+      padding-right: 20%;
+    }
+
+    em {
+      color: white;
+      width: 80%;
+      float: right;
+      text-align: right;
+    }
+
+    s {
+      font-size: 0.4rem;
+      float: right;
+      text-align: right;
+      margin-top: 0.25rem;
+    }
+
+    .heartImgContainer {
+      width: 20%;
+      height: 2rem;
+      float: right;
+    }
+
+    img {
+      width: 0.5rem;
+      float: right;
+      margin-right: 20%;
+      margin-top: 10%;
+    }
+  }
+}
+
+.userSport {
+  @include cube;
+
+  span {
+    width: 33.333%;
+    display: inline-block;
+
+    img {
+      width: 0.4rem;
+      margin-right: 0.2rem;
+    }
+
+    em {
+      display: inline;
+      font-size: 0.45rem;
+      text-align: center;
+    }
+  }
+}
+
+.IsPrivate {
+  width: 0.6rem;
+  float: right;
+  position: relative;
+  bottom: 2.8rem;
+}
+
+.max {
+  width: 12rem;
+  height: 3.5rem;
+  margin-top: 20%;
+
+  .IsPrivate {
+    bottom: 2.2rem;
+  }
+
+  .userinfo {
+    height: 2.2rem;
+  }
+
+  .lt span em {
+    font-size: 0.8rem;
+  }
+
+  .userinfo .head {
+    height: 2rem;
+
+    img {
+      width: 1.8rem;
+    }
+  }
+
+  .md {
+    height: 2rem;
+
+    .names {
+      width: 1.6rem;
+      font-size: 0.2rem;
+    }
+  }
+
+  .rt span {
+    font-size: 0.7rem;
+    padding-right: 5%;
+
+    .heartJump {
+      margin-top: 25%;
+    }
+
+    img {
+      width: 0.4rem;
+      margin-right: 10%;
+    }
+  }
+
+  .userSport {
+    line-height: 0.5rem;
+  }
+}
+
+.two {
+  width: 9rem;
+  height: 3rem;
+  margin-top: 0.2rem;
+
+  .IsPrivate {
+    bottom: 2.2rem;
+  }
+
+  .userinfo {
+    height: 2.1rem;
+  }
+
+  .lt span em {
+    font-size: 0.8rem;
+  }
+
+  .userinfo .head {
+    height: 1.9rem;
+
+    img {
+      width: 1.8rem;
+    }
+  }
+
+  .md {
+    height: 2.1rem;
+
+    .names {
+      width: 1.6rem;
+      font-size: 0.2rem;
+    }
+  }
+
+  .rt span {
+    font-size: 0.7rem;
+    padding-right: 5%;
+
+    .heartJump {
+      margin-top: 25%;
+    }
+
+    img {
+      width: 0.4rem;
+      margin-right: 10%;
+    }
+  }
+
+  .userSport {
+    line-height: 0.2rem;
+
+    img {
+      width: 0.3rem;
+    }
+
+    em {
+      font-size: 0.35rem;
+    }
+  }
+}
+
+.three {
+  width: 9.5rem;
+  height: 4rem;
+  margin-top: 0.3rem;
+
+  .lt span em {
+    font-size: 1.2rem;
+  }
+
+  .md {
+    height: 2.5rem;
+  }
+
+  .userinfo .head {
+    height: 2.6rem;
+
+    img {
+      width: 2.2rem;
+    }
+  }
+
+  .rt span {
+    font-size: 1rem;
+    padding-right: 10%;
+
+    img {
+      width: 0.4rem;
+      margin-right: 10%;
+    }
+  }
+
+  .userSport {
+    line-height: 0.5rem;
+  }
+}
+
+
+.five {
+  width: 6.3rem;
+  height: 2.8rem;
+  margin-top: 0.3rem;
+
+  .lt span {
+    margin-top: 10%;
+
+    em {
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+  }
+
+  .userinfo {
+    height: 1.9rem;
+  }
+
+  .userinfo .head {
+    height: 1.7rem;
+
+    img {
+      width: 1.5rem;
+    }
+
+    .names {
+      width: 1.4rem;
+    }
+  }
+
+  .md .IsPrivate {
+    width: 0.5rem;
+    bottom: 1.9rem;
+  }
+
+  .rt span {
+    font-size: 0.7rem;
+    padding-right: 5%;
+
+    img {
+      width: 0.3rem;
+      margin-right: 10%;
+    }
+  }
+
+  .userSport {
+    line-height: 0.15rem;
+
+    img {
+      width: 0.3rem;
+    }
+
+    em {
+      font-size: 0.3rem;
+    }
+  }
+}
+
+
+.sixteen {
+  width: 4.7rem;
+  height: 2.15rem;
+  margin-top: 0.2rem;
+
+  .lt span {
+    margin-top: 3%;
+    line-height: 1rem;
+
+    em {
+      font-size: 0.55rem;
+    }
+
+    s {
+      font-size: 0.25rem;
+      margin-top: -0.1rem;
+    }
+  }
+
+  .md {
+    padding-top: 0;
+  }
+
+  .userinfo {
+    height: 1.33rem;
+  }
+
+  .userinfo .head {
+    height: 1.4rem;
+
+    img {
+      width: 1.3rem;
+    }
+
+    .names {
+      width: 1.2rem;
+      font-size: 0.2rem;
+    }
+  }
+
+  .md {
+    height: 1.5rem;
+
+    .IsPrivate {
+      width: 0.3rem;
+      bottom: 1.45rem;
+    }
+  }
+
+  .rt span {
+    line-height: 0.8rem;
+    font-size: 0.55rem;
+    padding-right: 5%;
+
+    img {
+      width: 0.25rem;
+      margin-right: 5%;
+    }
+
+    .heartJump {
+      margin-top: 20%;
+    }
+  }
+
+  .userSport {
+    line-height: 0.01rem;
+
+    img {
+      width: 0.2rem;
+    }
+
+    em {
+      font-size: 0.2rem;
+    }
+  }
+}
+
+.twentyFive {
+  width: 3.18rem;
+  height: 1.6rem;
+  margin-top: 0.04rem;
+
+  .lt span {
+    margin-top: 3%;
+    line-height: 0.5rem;
+
+    em {
+      font-size: 0.4rem;
+    }
+
+    s {
+      font-size: 0.2rem;
+      margin-top: -0.1rem;
+    }
+  }
+
+  .md {
+    padding-top: 0;
+  }
+
+  .userinfo {
+    height: 0.8rem;
+  }
+
+  .userinfo .head {
+    height: 0.9rem;
+
+    img {
+      width: 0.7rem;
+    }
+
+    .names {
+      width: 0.8rem;
+      font-size: 0.15rem;
+      bottom: 0.3rem;
+    }
+  }
+
+  .md {
+    height: 1.1rem;
+
+    .IsPrivate {
+      width: 0.2rem;
+      bottom: 0.9rem;
+    }
+  }
+
+  .rt span {
+    line-height: 0.8rem;
+    font-size: 0.45rem;
+    padding-right: 5%;
+
+    img {
+      width: 0.2rem;
+      margin-right: 5%;
+    }
+
+    .heartJump {
+      margin-top: 10%;
+    }
+  }
+
+  .userSport {
+    line-height: 0.01rem;
+
+    img {
+      width: 0.2rem;
+    }
+
+    em {
+      font-size: 0.2rem;
+    }
+  }
+}
+
+.fakePart {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.13);
+  border-radius: 0.1rem;
+}
+
+</style>

v2tv/src/views/2pkRank.vue

@@ -1,146 +1,153 @@
 <template>
-  <div :class="pageStyle">
+  <div class="content">
     <Headside></Headside>
-    <div class="tips">
-      {{ totalTime }}
+    <div class="pages" v-if="pages == 1">
+      <div class="pageTitle">
+      </div>
+      <div class="pkResult">
+        <div class="lt">
+          <span class="level">
+            <img src="../assets/imgs/pkRank/trophy.png" alt="">
+                <h5>红队胜</h5>
+                <h5>第二名</h5>
+          </span>
+
+        </div>
+        <div class="rt">
+
+        </div>
+      </div>
     </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 class="pages" v-if="pages == 2">
+      <div class="sumTitle">
+        <div class="lt">
+          <img src="../assets/imgs/rank/fire.svg" alt="">
+          <h5>卡路里排名</h5>
         </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 class="rt">
+          <img src="../assets/imgs/rank/ck.svg" alt="">
+          <h5>CK排名</h5>
+        </div>
+        <div class="md">
+          <span>本轮训练排名</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 class="listContainer">
+        <div class="lt">
+          <ul>
+            <div class="ltTitle">
+              <span>排名</span>
+              <span>成员</span>
+              <span>卡路里</span>
             </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">
+            <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>
-        </el-col>
-      </el-row>
+            <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>
+                <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>
+      <div class="icons">
+        <img src="../assets/imgs/rank/icons.svg" alt="">
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import Headside from '@/components/Headside'
-import '../libs/rem';
-import '../Global';
-import {
-  ClassUserRank,
-  AddPkInfo
-} from '@/api/getApiRes'
+import {ClassUserRank} from "@/api/getApiRes";
 
 let qs = require('qs');
 export default {
   data() {
     return {
+      pages: 1,
       eqSn: '30:9C:23:0C:8B:1E',
       pageStyle: RandomBg(),
       trueDate: true,//真实数据 true false
       autoJump: true,//开启自动跳走
       students: {
-        redUnite: [],
-        blueUnite: [],
+        CkSort: [],
+        CalSort: [],
       },
       rankTimer: null,
-      redSum: 0,
-      blueSum: 0,
-      totalTime: ''
+      totalTime: '',
+      Listate: [
+        {state: false},
+        {state: false},
+        {state: false},
+        {state: false},
+        {state: false},
+        {state: false},
+        {state: false},
+        {state: false},
+      ],
     }
   },
   mounted() {
-    let that = this;
-    if (this.trueDate) {
-      that.init();
-    } else {
-      let Rs = fakeNews(18, 2);
-      that.UniteBreak(Rs);
-    }
+    this.init();
+    this.cardPlay();
   },
   watch: {
     '$route': function (val) {
-      if (val.path == '/2pkRank') {
+      if (val.path == '/rank') {
         if (this.trueDate) {
           this.init();
         } else {
-          let Rs = fakeNews(18, 2);
-          this.UniteBreak(Rs);
+          // this.rankTimer  = setInterval(() => {
+          this.students.CkSort = fakeNews(5);
+          this.students.CalSort = fakeNews(5);
+          // }, 5000);
         }
-
       } else {
+        clearInterval(this.autoJump);
         clearInterval(this.rankTimer);
       }
     }
@@ -153,114 +160,6 @@ export default {
     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 = {
@@ -269,10 +168,8 @@ export default {
       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);
+          console.log(json);
           let totalTime = 40;
           let Studenlength = 0;
           if (json.Rs) {
@@ -285,12 +182,22 @@ export default {
             totalTime = 40
           }
           this.jumpWait(totalTime);
-          // this.students.CkSort = json.Rs.CkSort;
-          // this.students.CalSort = json.Rs.CalSort;
+          let CkSort = json.Rs;
+          let CalSort = deepClone(json.Rs);
+          let Rs = json.Rs;
+          if (Rs != '') {
+            // 排序
+            that.students.CkSort = json.Rs.sort(function (a, b) {
+              return b.Ck - a.Ck;
+            });
+
+            that.students.CalSort = CalSort.sort(function (a, b) {
+              return b.Cle - a.Cle;
+            });
+          }
         } else {
           this.students.CkSort = [];
           this.students.CalSort = [];
-          this.jumpWait(10);
           if (json.Code == '999') {
             // that.$router.push({path: '/'});
           } else {
@@ -300,29 +207,37 @@ export default {
         }
       })
     },
-    // 竞技课程结果上传
-    PostAddPkInfo(dpId, groupNo) {
-
-      // 如果是演示版不上报比赛结果
-      if (runVersion == 'test') {
-        return false
-      }
+    jumpWait(totalTime) {
+      // 倒计时60秒自动关闭
       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);
+      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) {
@@ -345,7 +260,6 @@ export default {
         return '0'
       } else {
         return parseInt(val);
-        // return parseFloat(val).toFixed(3);
       }
     },
   },
@@ -355,309 +269,243 @@ export default {
 }
 </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;
+<style lang="scss" scoped>
+@mixin bg {
+  height: 100%;
+  background-color: #333;
   background-repeat: no-repeat;
+  background-position: top center;
+  background-size: 100% 100%;
 }
 
-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 {
+@mixin cube {
   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;
-}
+.content {
+  background: url("../../src/assets/imgs/pkRank/bg.png");
+  @include bg;
 
+  .pageTitle {
+    background: url("../assets/imgs/pkRank/title.svg");
+    background-repeat: no-repeat;
+    background-position: top center;
+    background-size: 100% 100%;
+    @include cube;
+    width: 2rem;
+    height: 0.5rem;
+  }
 
-.sumrt .sumCK {
-  width: 30%;
-  float: left;
-  margin-left: 0%;
-}
+  .sumTitle {
+    @include cube;
+    width: 80%;
+    height: 0.75rem;
+    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;
+    }
 
-.sumrt em {
-  font-size: 0.6rem;
-}
+    .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;
+      }
+    }
 
-.sumrt i {
-  font-size: 0.24rem;
-}
+    .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;
+      }
 
-.sumrt .flagContainer {
-  width: 10%;
-  float: left;
-  margin-right: 5%;
-}
+      h5 {
+        float: right;
+      }
+    }
 
-.sumrt .mineUniteName {
-  width: 18%;
-  float: left;
-  text-align: left;
-  font-size: 0.5rem;
-  line-height: 1.4rem;
-  margin-left: 8%;
+    .md {
+      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;
+      }
+    }
+  }
 }
 
-li.redUnite {
-  width: 100%;
-  float: left;
-  background: rgba(207, 17, 34, 0.75);
-  color: #fff;
+.listContainer {
+  @include cube;
+  width: 80%;
+  padding-top: 0.5rem;
 
-}
+  .lt {
+    width: 47%;
+    float: left;
+  }
 
-li .CLEscore {
-  width: 2.6rem;
-  float: left;
-  font-size: 0.5rem;
-  margin-left: 5%;
-  line-height: 0.8rem;
-  text-align: left;
-}
+  .rt {
+    width: 47%;
+    float: right;
+  }
 
-li .CLEscore em {
-  font-size: 0.3rem;
-}
+  .ltTitle {
+    @include cube;
 
-li .CLEscore span {
-  padding-left: 0.1rem;
-  font-size: 0.6rem;
-  /*font-size: 12px;*/
-}
+    span {
+      float: left;
+      color: #fff;
+      font-size: 0.3rem;
 
-li .CKscore {
-  /*width: 2rem;*/
-  float: left;
-  font-size: 0.6rem;
-  margin-left: 5%;
-  line-height: 0.8rem;
-  text-align: left;
-}
+      &:nth-child(1) {
+        margin-right: 1.5rem;
+      }
 
-li .CKscore em {
-  font-size: 0.3rem;
-}
+      &:last-child {
+        float: right;
+      }
+    }
+  }
 
-li .record img {
-  width: 0.7rem;
-  float: left;
-}
+  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;
+      }
 
-li.blueUnite {
-  width: 99%;
-  float: left;
-  background: rgba(24, 15, 170, 0.75);
-  color: #fff;
-}
+      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;
+      }
 
-li.mvpli {
-  padding-top: 0.15rem;
-  padding-bottom: 0.15rem;
-}
+      .head {
+        position: relative;
+        bottom: 0.4rem;
+        float: left;
+        margin-left: 0.3rem;
 
-li.mvpli .CLEscore {
-  font-size: 0.62rem;
-}
+        img {
+          width: 0.6rem;
+          border-radius: 250rem;
 
-li.mvpli .CKscore {
-  font-size: 0.62rem;
-}
+          &.girl {
+            border: 0.05rem solid #EA26EA;
+          }
 
-li.mvpli .head {
-  width: 0.7rem;
-  height: 0.8rem;
-}
+          &.boy {
+            border: 0.05rem solid #39B6FF;
+          }
+        }
+      }
 
-li.mvpli .head img {
-  height: 0.7rem;
-  margin-top: -0.05rem;
-}
+      .names {
+        float: left;
+        color: white;
+        font-size: 0.3rem;
+        line-height: 0.6rem;
+        margin-left: 0.4rem;
+      }
 
-li.mvpli .name {
-  font-size: 0.5rem;
-}
+      .glory {
+        float: left;
+        margin-left: 0.4rem;
 
-li .king {
-  width: 0.4rem;
-  height: 0.2rem;
-  float: left;
-  position: relative;
-  top: -0.7rem;
-  left: -0.1rem;
-}
+        img {
+          float: right;
+          width: 0.6rem;
+          margin-left: 0.2rem;
+          margin-top: 0.1rem;
+        }
+      }
 
-li.mvpli .head img.king {
-  top: -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;
+      }
+    }
+  }
 }
 
-.tips {
+.icons {
+  @include cube;
   position: absolute;
-  right: 3%;
-  top: 1rem;
-  font-size: 0.4rem;
-  color: #fff;
-}
+  bottom: 0.2rem;
 
-/deep/ .el-col {
-  min-height: 1rem;
+  img {
+    @include cube;
+    width: 40%;
+  }
 }
-</style>
+</style>

v2tv/src/views/2pkRank3.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/pk.vue

@@ -11,7 +11,7 @@
             </span>
         </div>
         <div class="rt">
-              <span>
+              <span :style="{'left': BlueFlag+'%'}">
               <em>CK {{ blueSum }}</em>
             </span>
         </div>
@@ -21,14 +21,15 @@
       </div>
       <div class="lineContianer">
         <div class="lt">
-            <span>
-              <em>{{ redPeron }}人红队</em>
+            <span :style="{'width':RedProgress+'%'}">
             </span>
+          <em>{{ redPeron }}人红队</em>
         </div>
+
         <div class="rt">
-             <span>
-              <em>蓝队{{ bluePerson }}人</em>
+              <span :style="{'width':BlueProgress+'%'}">
             </span>
+          <em>蓝队{{ bluePerson }}人</em>
         </div>
       </div>
     </div>
@@ -38,7 +39,7 @@
         <div class="bottomLine redBottom"></div>
       </div>
       <div class="md">
-        00:30:12
+        {{ classInfo.endTime }}
       </div>
       <div class="rt">
         <pkstudent :students="students.blueUnite"></pkstudent>
@@ -48,6 +49,10 @@
     <div class="icons">
       <img src="../assets/imgs/pk/icons.png" alt="">
     </div>
+    <!--    突破纪录-->
+    <newRecord :toper-info="toperInfo"></newRecord>
+    <!--    欢迎新同学-->
+    <newStudent :student-info="studentInfo"></newStudent>
   </div>
 </template>
 <script>
@@ -114,6 +119,9 @@ export default {
         percent: 0
       },
       Redflag: 0,
+      BlueFlag: 0,
+      RedProgress: 25,
+      BlueProgress: 25,
     }
   },
   watch: {
@@ -134,19 +142,19 @@ export default {
       this.createNewStudent();
 
       // todo
-      // this.PkTimer = setInterval(() => {
-      //   this.GetgetUserList();
-      //   this.ClacClassTime();
-      //   this.curgetClassStat();
-      // }, 1000);
-      //
-      // this.timer2 = setInterval(() => {
-      //   this.createEgg();
-      // }, 31000);
-      //
-      // this.timer3 = setInterval(() => {
-      //   this.createNewStudent();
-      // }, 6000);
+      this.PkTimer = setInterval(() => {
+        this.GetgetUserList();
+        this.ClacClassTime();
+        this.curgetClassStat();
+      }, 1000);
+
+      this.timer2 = setInterval(() => {
+        this.createEgg();
+      }, 31000);
+
+      this.timer3 = setInterval(() => {
+        this.createNewStudent();
+      }, 6000);
     },
     // 启动一个成就彩蛋
     createEgg() {
@@ -280,6 +288,7 @@ export default {
       // 进度条 FormatCk
       let redFmtSum = 0;
       let blueFmtSum = 0;
+      let pkval = 0;
       Rs.redUnite.map(function (item, t) {
         redFmtSum += parseFloat(item.FormatCk);
       });
@@ -287,17 +296,28 @@ export default {
         blueFmtSum += parseFloat(item.FormatCk);
       });
 
-      // pkVal
-      let sumMax = parseFloat(redFmtSum) + parseFloat(blueFmtSum);
+      let sumMax = 0;
+      if (Rs.redUnite) {
+        sumMax = (Rs.redUnite.length + Rs.blueUnite.length) * 1000;
+      }
 
       // 当为0时均分
-      if (sumMax == 0) {
+      if (redFmtSum == 0) {
         that.Redflag = 0;
+        that.RedProgress = 25;
       } else {
         // 限制最大
-        let pkval = parseInt((redFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((redFmtSum / sumMax) * 100);
-        console.log(pkval);
-        that.Redflag = 100 - pkval - 20;
+        that.Redflag = parseInt((redFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((redFmtSum / sumMax) * 100);
+        that.RedProgress = that.Redflag + 18
+      }
+
+      if (blueFmtSum == 0) {
+        that.BlueFlag = 0;
+        that.BlueProgress = 25;
+      } else {
+        // 限制最大
+        that.BlueFlag = parseInt((blueFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((blueFmtSum / sumMax) * 100);
+        that.BlueProgress = that.BlueFlag + 18
       }
 
     },
@@ -572,12 +592,17 @@ export default {
       width: 4rem;
       float: right;
       background: linear-gradient(#d11122 0%, rgba(209, 17, 34, 0.23) 100%);
+    }
 
-      em {
-        float: right;
-        text-align: right;
-        margin-right: 1rem;
-      }
+    em {
+      position: relative;
+      float: right;
+      right: -1.5rem;
+      width: 1.6rem;
+      color: white;
+      text-align: right;
+      font-size: 0.3rem;
+      font-style: normal;
     }
   }
 
@@ -589,24 +614,23 @@ export default {
       width: 4rem;
       float: left;
       background: linear-gradient(#4cbbfc 0%, rgba(0, 125, 198, 0.17) 100%);
-
-      em {
-        float: left;
-        text-align: left;
-        margin-left: 1rem;
-      }
     }
-  }
-
-  span {
-    height: 0.5rem;
 
     em {
+      position: relative;
+      float: left;
+      left: -1.5rem;
+      width: 1.6rem;
       color: white;
+      text-align: right;
       font-size: 0.3rem;
       font-style: normal;
     }
   }
+
+  span {
+    height: 0.5rem;
+  }
 }
 
 .userPart {
@@ -659,7 +683,7 @@ export default {
     color: white;
     text-align: center;
     font-size: 0.4rem;
-    padding-top: 11%;
+    padding-top: 18%;
   }
 }
 

v2tv/src/views/threepk.vue

@@ -1,316 +1,119 @@
 <template>
   <div class="pages">
     <Headside></Headside>
-    <div class="pk-detail-con">
-      <div class="progress">
-        <div class="progress-bar" :style="{width: pkVal}">
-          <i class="lightning"></i>
+    <div class="pageTitle">
+      <em>
+        {{ classInfo.endTime }}
+      </em>
+    </div>
+    <div class="progressContainer">
+      <div class="valueDisplay">
+        <div class="lt">
+            <span :style="{'left': Redflag+'%'}">
+              <em>CK {{ redSum }}</em>
+            </span>
         </div>
-        <div class="right-bar" :style="{width: yellowVal}">
-          <i class="lightning"></i>
+        <div class="md">
+          <span :style="{'left': BlueFlag+'%'}">
+              <em>CK {{ blueSum }}</em>
+            </span>
         </div>
-      </div>
-    </div>
-    <div class="lessonInfo">
-      <div class="lt">
-        <div class="bottomInfo">
-                    <span class="names">
-                        {{ PlanName }}
-                    </span>
-          <div class="teacher">
-            <span v-if="Teacher"> 教练：{{ Teacher }}</span>
-            <span>人数：{{ num }}</span>
-          </div>
-
+        <div class="rt">
+              <span :style="{'left': yellowFlag+'%'}">
+              <em>CK {{ yellowSum }}</em>
+            </span>
         </div>
       </div>
-      <div class="md">
-        <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>
-          <img class="vs" src="../assets/img/pk/vs.svg"/>
-          <div class="cubes ycube">
-            <em>黄队</em>
-          </div>
+      <div class="lineContianer">
+        <div class="lt">
+            <span :style="{'width':RedProgress+'%'}">
+            </span>
+          <em>红队{{ redPeron }}人</em>
         </div>
-        <div class="teamScore">
-          <div class="lt">{{ redSum }} <em>CK</em></div>
-          <div class="md">{{ blueSum }} <em>CK</em></div>
-          <div class="rt">{{ yellowSum }} <em>CK</em></div>
+        <div class="md">
+          <img class="vsIcon leftVs" src="../assets/imgs/pk/vs.png" alt="">
+          <span :style="{'width':RedProgress+'%'}">
+            </span>
+          <em>蓝队{{ bluePerson }}人</em>
+          <img class="vsIcon rightVs" src="../assets/imgs/pk/vs.png" alt="">
         </div>
-      </div>
-      <div class="rt">
-        <div class="classTime">
-          {{ classInfo.endTime }}
+        <div class="rt">
+              <span :style="{'width':yellowProgress+'%'}">
+            </span>
+          <em>黄队{{ yellowPerson }}人</em>
         </div>
       </div>
     </div>
-    <div class="pk_container">
-      <div class="pl_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 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 class="userPart">
+      <div class="lt">
+        <threestudent :students="students.redUnite"></threestudent>
+        <div class="bottomLine redBottom"></div>
       </div>
-      <div class="pl_md">
-        <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 class="md">
+        <threestudent :students="students.blueUnite"></threestudent>
+        <div class="bottomLine blueBottom"></div>
       </div>
-      <div class="pl_rt">
-        <ul>
-          <li :class="YellowstudentsClassName" v-for="(s,i) in students.yellowUnite">
-            <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"
-                         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 class="rt">
+        <threestudent :students="students.yellowUnite"></threestudent>
+        <div class="bottomLine yellowBottom"></div>
       </div>
     </div>
+    <div class="icons">
+      <img src="../assets/imgs/pk/icons.png" alt="">
+    </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 {
+import threestudent from '@/components/threestudent'
+
+import
+{
   getHello,
   getClassStat,
   getRecordBreak,
   getNewUser
 } from '@/api/getApiRes'
-import '../libs/rem';
-import power from '@/components/power'
 
-let qs = require('qs');
+import '../Global'
 
+let qs = require('qs');
 export default {
   data() {
     return {
-      trueDate: true,//启用真实数据 true / false
-      RedstudentsClassName: '',
-      BluestudentsClassName: '',
-      YellowstudentsClassName: '',
-      studentsClassName: [],
-      redSum: 0,
-      blueSum: 0,
-      yellowSum: 0,
-      pkVal: '33.33%',
-      yellowVal: '33.33%',
+      trueDate: true,//真实数据 true false
+      studentsClassName: [
+        {name: 'max'}
+      ],
       students: {
         redUnite: [],
         blueUnite: [],
         yellowUnite: [],
       },
+      thisClassName: '',
+      redSum: 0,
+      blueSum: 0,
+      yellowSum: 0,
+      redPeron: 0,
+      bluePerson: 0,
+      yellowPerson: 0,
+      pkVal: '50%',
+      RedstudentsClassName: [
+        {name: 'max'}
+      ],
+      BluestudentsClassName: [
+        {name: 'max'}
+      ],
       PlanName: '',
-      Teacher: '',
       num: 0,
+      Teacher: '',
       classInfo: {
         name: '竞技课程',
         num: '0',
@@ -330,98 +133,128 @@ export default {
         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(21, 3);
-      that.UniteBreak(Rs);
-
-      // 人口总数
-      that.num = Rs ? Rs.length + 1 : 0;
-      this.ClacClassTime();
+      Redflag: 0,
+      BlueFlag: 0,
+      yellowFlag: 0,
+      RedProgress: 25,
+      BlueProgress: 25,
+      yellowProgress: 25,
     }
   },
   watch: {
     '$route': function (val) {
-      if (val.path == '/threepk') {
-        if (this.trueDate) {
-          this.init();
-
-          // this.PkEgg = setInterval(() => {
-          //     this.createEgg();
-          // }, 6000);
-
-        } else {
-          let Rs = fakeNews(16, 3);
-          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;
+      let that = this;
+      if (val.path == '/pk') {
+        this.init();
       }
     }
   },
-  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;
+  mounted() {
+    this.init();
   },
   methods: {
     init() {
-      this.PkTimer = setInterval(() => {
-        this.GetgetUserList();
-        this.curgetClassStat();
-      }, 1000);
       this.GetgetUserList();
-
-      this.timer2 = setInterval(() => {
-        this.createEgg();
-      }, 31000);
-
-      this.timer3 = setInterval(() => {
-        this.createNewStudent();
-      }, 6000);
+      this.createEgg();
+      this.createNewStudent();
+
+      // todo
+      // 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) {
@@ -434,11 +267,9 @@ export default {
       let that = this;
       that.students.redUnite = [];
       that.students.blueUnite = [];
-      that.students.yellowUnite = [];
       if (!Rs) {
         that.students.redUnite = [];
         that.students.blueUnite = [];
-        that.students.yellowUnite = [];
       } else {
         Rs.map(function (item, t) {
           item.sportLevel = sportLevel(item.ActivePercent);
@@ -452,7 +283,6 @@ export default {
             that.students.yellowUnite.push(item);
           }
         })
-
       }
       that.giveClassName(that.students.redUnite, 1);
       that.giveClassName(that.students.blueUnite, 2);
@@ -465,16 +295,18 @@ export default {
       let redSum = 0;
       let blueSum = 0;
       let yellowSum = 0;
+
       // that.redSum
       Rs.redUnite.map(function (item, t) {
-        redSum += parseFloat(item.Ck.toFixed(1))
+        redSum += parseFloat(item.Ck.toFixed(1));
       });
       Rs.blueUnite.map(function (item, t) {
-        blueSum += parseFloat(item.Ck.toFixed(1))
+        blueSum += parseFloat(item.Ck.toFixed(1));
       });
       Rs.yellowUnite.map(function (item, t) {
-        yellowSum += parseFloat(item.Ck.toFixed(1))
+        yellowSum += parseFloat(item.Ck.toFixed(1));
       });
+
       that.redSum = redSum.toFixed(1);
       that.blueSum = blueSum.toFixed(1);
       that.yellowSum = yellowSum.toFixed(1);
@@ -483,67 +315,49 @@ export default {
       let redFmtSum = 0;
       let blueFmtSum = 0;
       let yellowFmtSum = 0;
+      let pkval = 0;
       Rs.redUnite.map(function (item, t) {
-        redFmtSum += item.FormatCk
+        redFmtSum += parseFloat(item.FormatCk);
       });
       Rs.blueUnite.map(function (item, t) {
-        blueFmtSum += item.FormatCk
+        blueFmtSum += parseFloat(item.FormatCk);
       });
       Rs.yellowUnite.map(function (item, t) {
-        yellowFmtSum += item.FormatCk
+        yellowFmtSum += parseFloat(item.FormatCk);
       });
 
-      // pkVal
-      let sumMax = redFmtSum + blueFmtSum + yellowFmtSum;
+      let sumMax = 0;
+      if (Rs.redUnite) {
+        sumMax = (Rs.redUnite.length + Rs.blueUnite.length + Rs.yellowUnite.length) * 1000;
+      }
 
       // 当为0时均分
-      if (sumMax == 0) {
-        that.pkVal = '33.33%';
-        that.yellowVal = '33.33%';
+      if (redFmtSum == 0) {
+        that.Redflag = 0;
+        that.RedProgress = 22;
       } else {
         // 限制最大
-        let pkval = parseInt((redFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((redFmtSum / sumMax) * 100);
-        let yellowVal = parseInt((yellowFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((yellowFmtSum / sumMax) * 100);
-        that.pkVal = pkval.toFixed(1) + '%';
-        that.yellowVal = yellowVal.toFixed(1) + '%';
+        that.Redflag = parseInt((redFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((redFmtSum / sumMax) * 100);
+        that.RedProgress = that.Redflag + 28
       }
 
-      // 获取人数 计算人均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
-      // }
+      if (blueFmtSum == 0) {
+        that.BlueFlag = 0;
+        that.BlueProgress = 22;
+      } else {
+        // 限制最大
+        that.BlueFlag = parseInt((blueFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((blueFmtSum / sumMax) * 100);
+        that.BlueProgress = that.BlueFlag + 28
+      }
 
-      // let sumMax = parseFloat(that.redSum) + parseFloat(that.blueSum) + parseFloat(that.yellowSum);
-      // // 当为0时均分
-      // if (sumMax == 0) {
-      //     that.pkVal = '50%';
-      //     that.yellowVal = '33.33%';
-      // } else {
-      //     // 限制最大
-      //     let pkval = parseInt((that.redSum / sumMax) * 100) > 100 ? 100 : parseInt((that.redSum / sumMax) * 100);
-      //     let yellowVal = parseInt((that.yellowSum / sumMax) * 100) > 100 ? 100 : parseInt((that.yellowSum / sumMax) * 100);
-      //     that.pkVal = pkval + '%';
-      //     that.yellowVal = yellowVal + '%';
-      // }
+      if (yellowFmtSum == 0) {
+        that.yellowFlag = 0;
+        that.yellowProgress = 22;
+      } else {
+        // 限制最大
+        that.yellowFlag = parseInt((yellowFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((blueFmtSum / sumMax) * 100);
+        that.yellowProgress = that.yellowFlag + 28
+      }
     },
     // 获取上课学生信息
     GetgetUserList() {
@@ -562,7 +376,7 @@ export default {
           } else {
             that.ReadLessonInfo(json.Dp);
           }
-
+          // 学生分队展示
           that.UniteBreak(json.Rs);
           // 人口总数
           that.num = json.Rs.length ? json.Rs.length : 0;
@@ -571,7 +385,7 @@ export default {
           // 已下课
           console.log(json.Code);
           if (json.Code == '999') {
-            // that.$router.push({path: '/3pkRank'});
+            // that.$router.push({path: '/2pkRank'});
           } else {
             // 已出错
             that.$message.error(json.Memo);
@@ -579,32 +393,58 @@ export default {
         }
       })
     },
-    // 动态计算排版
     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) <= 4 && parseInt(res.length) >= 3:
-          numberClass = 'four';
-          break;
-        case  parseInt(res.length) <= 6 && parseInt(res.length) > 4:
-          numberClass = 'eight';
-          break;
-        case  parseInt(res.length) > 6:
-          numberClass = 'eight';
-          break;
+      let colorClass = '';
+
+      for (let i = 0; i < parseInt(res.length); i++) {
+        switch (true) {
+          case  parseInt(res.length) == 1:
+            numberClass = 'max';
+            break;
+          case  parseInt(res.length) == 2:
+            numberClass = 'two';
+            break;
+          case   parseInt(res.length) > 2:
+            numberClass = 'twentyFive';
+            break;
+        }
+        let per = parseInt(res[i].ActivePercent);
+        switch (true) {
+          case per >= 90:
+            colorClass = 'red';
+            break;
+          case per <= 89 && per > 79:
+            colorClass = 'brown';
+            break;
+          case per <= 79 && per > 69:
+            colorClass = 'yellow';
+            break;
+          case per <= 69 && per > 54:
+            colorClass = 'green';
+            break;
+          case per <= 54 && per > 39:
+            colorClass = 'violet';
+            break;
+          case per <= 39:
+            colorClass = 'blue';
+            break
+        }
+
+        that.studentsClassName[i] = {
+          name: numberClass + ' ' + colorClass,
+        }
       }
       if (type == 1) {
-        that.RedstudentsClassName = numberClass;
-      }
-      if (type == 2) {
-        that.BluestudentsClassName = numberClass;
-      }
-      if (type == 3) {
-        that.YellowstudentsClassName = numberClass;
+        // that.RedstudentsClassName = that.studentsClassName;
+        that.redPeron = parseInt(res.length);
+      } else if (type == 2) {
+        // that.BluestudentsClassName = that.studentsClassName;
+        that.bluePerson = parseInt(res.length)
+      } else if (type == 3) {
+        // that.BluestudentsClassName = that.studentsClassName;
+        that.yellowPerson = parseInt(res.length)
       }
     },
     // 计算团队竞技课持续时间
@@ -618,112 +458,6 @@ export default {
       let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
       this.classInfo.endTime = h + m + s;
     },
-    // // 计算双方对抗强度加总
-    // CalcTeamCk() {
-    //     let that = this;
-    //     let Redsum = 0;
-    //     let Bluesum = 0;
-    //     let sumMax = 0;
-    //     if (that.Redstudents) {
-    //         that.Redstudents.map(function (i) {
-    //             Redsum = parseFloat(Redsum) + parseFloat(i.Ck)
-    //         });
-    //     }
-    //     if (that.Bluestudents) {
-    //         that.Bluestudents.map(function (i) {
-    //             Bluesum = parseFloat(Bluesum) + parseFloat(i.Ck)
-    //         });
-    //     }
-    //     that.classInfo.redSum = parseFloat(Redsum).toFixed(1);
-    //     that.classInfo.blueSum = parseFloat(Bluesum).toFixed(1);
-    //
-    //     sumMax = parseFloat(Redsum) + parseFloat(Bluesum);
-    //     that.classInfo.pkVal = (that.classInfo.redSum / sumMax) * 100 + '%';
-    // },
-
-    // 启动一个成就彩蛋
-    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)
-    },
     // 当前课程状态
     curgetClassStat() {
       let that = this;
@@ -737,19 +471,15 @@ export default {
         if (json.Code == 0) {
           // 没开课
           if (json.ClassOn == 0) {
-            console.log("已下课");
+            console.log("xiakele ");
             // 0: 下课 团课/私教 排名
             // 1：团课/私教 todo
             // 2：竞技课2PK
             // 3：竞技课3PK
-            that.$router.push({path: '/3pkRank'});
-            console.log('json.dp' + json.dp);
+            that.$router.push({path: '/2pkRank'});
             switch (parseInt(json.dp)) {
               case 2:
-                that.$router.push({path: '/3pkRank'});
-                break;
-              case 3:
-                that.$router.push({path: '/3pkRank'});
+                that.$router.push({path: '/2pkRank'});
                 break;
             }
           }
@@ -790,1141 +520,285 @@ export default {
       }
     }
   },
-
   components: {
-    Headside, newRecord, newStudent, power
+    Headside, newRecord, newStudent, threestudent
   }
 }
 </script>
-<style scoped>
-@import "../assets/css/bg.css";
+<style lang="scss" scoped>
 
-.pages {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+@mixin cube {
   width: 100%;
   overflow: hidden;
   display: block;
   margin: 0 auto;
-  background-color: #028fe1;
-  background: url("../assets/img/threepk/threepkbg.png");
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  overflow-y: scroll;
 }
 
-* {
-  font-family: vista;
+@mixin bg {
+  height: 100%;
+  background-color: #333;
+  background-repeat: no-repeat;
+  background-position: top center;
+  background-size: 100% 100%;
 }
 
+.pages {
+  background: url("../assets/imgs/three/threeBg.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;
+    overflow: visible;
+
+    em {
+      position: relative;
+      top: 0.2rem;
+      left: 3.6rem;
+      float: right;
+      color: white;
+      font-size: 0.3rem;
+      font-style: normal;
+    }
+  }
 
-ul, li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
+  .progressContainer {
+    .valueDisplay {
+      @include cube;
+      width: 98%;
+      height: 2rem;
+      overflow: hidden;
+      margin-top: 0.4rem;
+
+      .lt {
+        width: 33.33%;
+        float: left;
+
+        span {
+          background: url("../assets/imgs/three/redFlag.png");
+          background-repeat: no-repeat;
+          background-position: top center;
+          background-size: 100%;
+        }
+      }
 
-em {
-  font-style: normal;
-}
+      .md {
+        width: 33.33% !important;
+        float: left;
 
+        span {
+          background: url("../assets/imgs/pk/blueFlag.png");
+          background-repeat: no-repeat;
+          background-position: top center;
+          background-size: 100%;
+        }
+      }
 
-.pk-detail-con {
-  /*position: absolute;*/
-  position: relative;
-  top: 0rem;
-  width: 100%;
-  height: 0.6rem;
-  display: block;
-  margin: 0 auto;
-  padding-top: 0.35rem;
-  overflow: hidden;
-}
+      .rt {
+        width: 33.33%;
+        float: left;
 
-.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 {
-  float: left;
-  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-size: 40px 40px;
-  /*background-image: linear-gradient(45deg, #ff9960 25%, #f75e07 0, #f75e07 50%, #ff9960 0, #ff9960 75%, #f75e07 0);*/
-  /*background-size: 40px 40px;*/
-}
-
-.right-bar {
-  float: right;
-  position: relative;
-  right: 0;
-  top: 0rem;
-  height: 0.3rem;
-  text-align: right;
-  background-color: #DBB900;
-  -moz-transition: width .6s ease;
-  -webkit-transition: width .6s ease;
-  transition: width .6s ease;
-  background-image: url("../static/img/pk/red.png");
-  background-size: 40px 40px;
-}
-
-.progress, .progress-bar {
-  /*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: 100%;
+        span {
+          background: url("../assets/imgs/three/yellowFlag.png");
+          background-repeat: no-repeat;
+          background-position: top center;
+          background-size: 100%;
+        }
+      }
 
+      span {
+        position: relative;
+        top: 0.1rem;
+        width: 1.9rem;
+        height: 0.9rem;
+        float: left;
+
+        em {
+          @include cube;
+          font-size: 0.3rem;
+          color: white;
+          text-align: center;
+          font-style: normal;
+          line-height: 0.5rem;
+        }
+      }
+    }
+  }
 }
 
-.right-bar .lightning {
+.lineContianer {
   position: relative;
-  top: -0.5rem;
-  width: 1rem;
-  height: 1.3rem;
-  margin-right: -0.5rem;
-  background: url("../static/img/pk/light.png") no-repeat center;
-  background-size: 100%;
-  left: -0.4rem;
-  float: left;
-}
-
-.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;
-}
-
-.lessonInfo {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-}
-
-.lessonInfo .lt {
-  width: 30%;
-  float: left;
-}
-
-.lessonInfo .md {
-  width: 40%;
-  float: left;
-}
-
-.lessonInfo .rt {
-  width: 30%;
-  float: right;
-}
-
-.bottomInfo {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-}
-
-.bottomInfo .names {
-  width: 70%;
-  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;
-  color: #fff;
-  font-size: 0.3rem;
-  padding-top: 0.2rem;
-}
-
-.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;
-}
-
-.cubelist {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-}
-
-.cubelist .cubes {
-  width: 20%;
-  height: 1.5rem;
-  overflow: hidden;
-  float: left;
-  background-position: top center;
-
-}
-
-.cubelist .vs {
-  width: 20%;
-  height: 0.6rem;
-  overflow: hidden;
-  float: left;
-  padding-top: 0.4rem;
-}
-
-.cubelist .cubes em {
-  width: 80%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  text-align: center;
-  font-size: 0.2rem;
-  font-style: normal;
-  color: #fff;
-  line-height: 1.5rem;
-}
-
-.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%;
-}
-
-.cubes.ycube {
-  background: url("../static/img/pk/ycube.png");
-  background-size: 100% 100%;
-}
-
-.teamScore {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-}
-
-.lessonInfo .teamScore div {
-  width: 25%;
-  float: left;
-  color: #fff;
-  font-size: 0.4rem;
-  text-align: left;
-}
-
-.lessonInfo .teamScore .md {
-  width: 50%;
-  text-align: center;
-}
-
-.lessonInfo .teamScore .rt {
-  float: right;
-  text-align: right;
-}
-
-.lessonInfo .teamScore em {
-  font-size: 0.2rem;
-}
-
-.pk_container {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-}
-
-.pk_container .pl_lt {
-  width: 33.333%;
-  float: left;
-}
-
-.pk_container .pl_rt {
-  width: 33.333%;
-  float: right;
-}
-
-.pk_container .pl_md {
-  width: 33.333%;
-  float: left;
-}
-
-
-.pk_container ul {
+  @include cube;
   width: 98%;
-  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 .pl_lt .bg {
-  border: 2px solid rgba(255, 143, 122, 0.5);
-  background: rgba(194, 36, 6, 0.5);
-}
-
-.pk_container .pl_md .bg {
-  border: 2px solid rgba(80, 115, 255, 0.5);
-  background: rgba(0, 30, 152, 0.5);
-}
-
-.pk_container .pl_rt .bg {
-  border: 2px solid rgba(255, 239, 149, 0.5);
-  /*background: rgba(255, 230, 0, 0.5);*/
-  /*background: rgba(233, 192, 12, 0.9);*/
-  background: rgba(245, 195, 0, 0.9);
-}
-
-
-.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: hidden;
-  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;
+  bottom: 1rem;
+  z-index: 222;
   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;
-}
+  .lt {
+    width: 33.33%;
+    float: left;
 
-.user .ult em div {
-  width: 80%;
-  overflow: hidden;
-  float: right;
-  text-align: right;
-  padding-right: 0.3rem;
-  font-size: 0.8rem;
-  line-height: 1.6rem;
-}
+    span {
+      width: 4rem;
+      float: left;
+      border-radius: 3px;
+      background: linear-gradient(#d11122 0%, rgba(209, 17, 34, 0.23) 100%);
 
-.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.73rem;
-  height: 1.73rem;
-  overflow: visible;
-  display: block;
-  margin: 0 auto;
-  border-radius: 33rem;
-  padding-top: 0.09rem;
-}
+    }
 
-.user .umd img {
-  width: 1.45rem;
-  height: 1.45rem;
-  overflow: visible;
-  display: block;
-  margin: 0 auto;
-  border-radius: 33rem;
-  border: 0.1rem solid #B9CB01;
-}
+    em {
+      position: relative;
+      float: left;
+      left: -1.5rem;
+      width: 1.6rem;
+      color: white;
+      text-align: right;
+      font-size: 0.3rem;
+      font-style: normal;
+    }
+  }
 
+  .md {
+    width: 33.33%;
+    float: left;
+    overflow: visible;
 
-.urt img {
-  position: relative;
-  right: 0.1rem;
-  top: -1.2rem;
-  width: 0.35rem;
-  height: 0.35rem;
-  float: right;
-}
+    span {
+      width: 4rem;
+      float: left;
+      background: linear-gradient(#4cbbfc 0%, rgba(0, 125, 198, 0.17) 100%);
+    }
 
-.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.5rem;
-  padding-right: 25%;
-}
+    em {
+      position: relative;
+      float: left;
+      left: -1.5rem;
+      width: 1.6rem;
+      color: white;
+      text-align: right;
+      font-size: 0.3rem;
+      font-style: normal;
+    }
 
-.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;
-}
+    img {
+      position: absolute;
+      width: 1.2rem;
+      float: left;
+      left: 30%;
+      overflow: visible;
 
-.bottomLi img {
-  float: left;
-  margin-left: 10%;
-}
+      &.rightVs {
+        float: right;
+        left: 64%;
+      }
+    }
 
-.bottomLi span {
-  float: left;
-  text-align: left;
-}
+  }
 
-.bottomLi .btcla {
-  width: 30%;
-  float: left;
-  text-align: left;
-}
+  .rt {
+    width: 33.33%;
+    float: right;
 
-.bottomLi .btck {
-  width: 40%;
-  float: left;
-  text-align: left;
-}
-
-.bottomLi .step {
-  width: 30%;
-  float: right;
-  text-align: left;
-}
+    span {
+      width: 4rem;
+      float: left;
+      border-radius: 3px;
+      background: linear-gradient(#fccd4c 0%, rgba(255, 228, 15, 0.26) 100%);
+    }
 
-@keyframes mymove {
-  0% {
-    transform: scale(1); /*开始为原始大小*/
-  }
-  25% {
-    transform: scale(1.2); /*放大1.1倍*/
-  }
-  50% {
-    transform: scale(1);
-  }
-  75% {
-    transform: scale(1.2);
+    em {
+      position: relative;
+      float: left;
+      left: -1.5rem;
+      width: 1.6rem;
+      color: white;
+      text-align: right;
+      font-size: 0.3rem;
+      font-style: normal;
+    }
   }
 
-}
-
-@-webkit-keyframes mymove /*Safari and Chrome*/
-{
-  0% {
-    transform: scale(1); /*开始为原始大小*/
-  }
-  25% {
-    transform: scale(1.2); /*放大1.1倍*/
-  }
-  50% {
-    transform: scale(1);
+  span {
+    height: 0.5rem;
   }
-  75% {
-    transform: scale(1.2);
-  }
-}
-
-.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 {
-  float: left;
-  margin-right: 0.2rem;
-}
-
-.cubelist {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-}
-
-.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;
-}
-
-
-.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 {
+.userPart {
+  @include cube;
   width: 100%;
-  overflow: hidden;
-  display: block;
-}
-
-.pk_container li.two .user {
-  height: 1.75rem;
-  overflow: hidden;
-}
-
-.two .bottomLi {
-  width: 98%;
-  font-size: 0.35rem;
-  margin-top: 0rem;
-  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: 26%;
-  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;
-}
-
-/*three*/
-
-.pk_container li.three {
-  width: 90%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  margin-bottom: 0.1rem;
-  float: none;
-}
-
-.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 .urt em {
-  line-height: 1.2rem;
-}
-
-.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%;
-  margin-right: 0;
-  font-size: 0.5rem;
-  line-height: 1rem;
-  padding-right: 0.2rem;
-}
-
-.four .user .ult s {
-  font-size: 0.2rem;
-  line-height: 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: 1rem;
-}
-
-.four .bottomLi {
-  width: 100%;
-  text-indent: 0.1rem;
-  font-size: 0.2rem;
-}
-
-.four .bottomLi img {
-  width: 0.2rem;
-  height: 0.2rem;
-}
+  bottom: 1rem;
+  height: 6.5rem;
+
+  .lt {
+    @include cube;
+    position: relative;
+    width: 33.33%;
+    height: 100%;
+    float: left;
+
+    .bottomLine {
+      position: absolute;
+      bottom: 0;
+      @include cube;
+      height: 0.25rem;
+      border-radius: 18px;
+      opacity: 0.8;
+      background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(209, 17, 34, 0.62) 100%);
 
-.four .bottomLi span {
-  width: 60%;
-}
-
-.four .user {
-  height: 1.2rem;
-  overflow: hidden;
-}
-
-.four .nameMd {
-  font-size: 0.2rem;
-}
-
-/*six*/
-
-
-/*eight*/
-.eight {
-  width: 50%;
-  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%;
-  padding-right: 0.2rem;
-  margin-right: 0rem;
-  font-size: 0.4rem;
-  line-height: 0.8rem;
-}
-
-.eight .user .ult s {
-  font-size: 0.2rem;
-  line-height: 1.3rem;
-}
-
-.eight .circle {
-  width: 1rem;
-  height: 1rem;
-}
-
-.eight .user .umd img {
-  width: 0.5rem;
-  height: 0.5rem;
-}
-
-.eight .urt img {
-  width: 0.15rem;
-  height: 0.15rem;
-  top: -0.6rem;
-  right: 0.2rem;
-}
-
-.eight .urt em {
-  font-size: 0.3rem;
-  line-height: 0.8rem;
-  padding-right: 45%;
-}
-
-.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: 0.85rem;
-  overflow: hidden;
-}
-
-.eight .nameMd {
-  font-size: 0.2rem;
-}
-
-/*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.4rem;
-  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: 0.8rem;
-  height: 0.35rem;
-}
-
-.eight .birth {
-  width: 1rem;
-}
-
-.eight .birth img.birthCrow {
-  top: 1.25rem;
-  width: 0.5rem;
-  height: 0.2rem;
-}
-
-.eight .birth img.birthText {
-  top: 1.5rem;
-  width: 0.7rem;
-  height: 0.3rem;
-}
-
-/*isPrivate*/
-.isPrivate {
-  position: relative;
-  float: right;
-  right: -0.35rem;
-  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.4rem;
-  right: -0.1rem;
-}
-
-.three .isPrivate i {
-  width: 0.6rem !important;
-  height: 0.6rem !important;
-}
+    }
+  }
 
-.four .isPrivate {
-  top: -1.28rem;
-  right: -0.27rem;
-}
+  .md {
+    @include cube;
+    position: relative;
+    width: 33.33%;
+    height: 100%;
+    float: left;
+
+    .bottomLine {
+      position: absolute;
+      bottom: 0;
+      @include cube;
+      height: 0.25rem;
+      border-radius: 18px;
+      opacity: 0.8;
+      background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 134, 232, 0.62) 100%);
+    }
+  }
 
-.four .isPrivate i {
-  width: 0.4rem !important;
-  height: 0.4rem !important;
+  .rt {
+    @include cube;
+    position: relative;
+    width: 33.33%;
+    height: 100%;
+    float: right;
+
+    .bottomLine {
+      position: absolute;
+      bottom: 0;
+      @include cube;
+      height: 0.25rem;
+      border-radius: 18px;
+      opacity: 0.8;
+      background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(216, 191, 0, 0.9) 100%);
+    }
+  }
 }
 
-.eight .isPrivate {
-  top: -1rem;
-  right: -0.1rem;
-}
+.icons {
+  @include cube;
+  position: absolute;
+  bottom: 0.2rem;
 
-.eight .isPrivate i {
-  width: 0.4rem !important;
-  height: 0.4rem !important;
+  img {
+    @include cube;
+    width: 40%;
+  }
 }
-
 </style>

v2tv/src/views/threepk2.vue

@@ -0,0 +1,1930 @@
+<template>
+  <div class="pages">
+    <Headside></Headside>
+    <div class="pk-detail-con">
+      <div class="progress">
+        <div class="progress-bar" :style="{width: pkVal}">
+          <i class="lightning"></i>
+        </div>
+        <div class="right-bar" :style="{width: yellowVal}">
+          <i class="lightning"></i>
+        </div>
+      </div>
+    </div>
+    <div class="lessonInfo">
+      <div class="lt">
+        <div class="bottomInfo">
+                    <span class="names">
+                        {{ PlanName }}
+                    </span>
+          <div class="teacher">
+            <span v-if="Teacher"> 教练：{{ Teacher }}</span>
+            <span>人数：{{ num }}</span>
+          </div>
+
+        </div>
+      </div>
+      <div class="md">
+        <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>
+          <img class="vs" src="../assets/img/pk/vs.svg"/>
+          <div class="cubes ycube">
+            <em>黄队</em>
+          </div>
+        </div>
+        <div class="teamScore">
+          <div class="lt">{{ redSum }} <em>CK</em></div>
+          <div class="md">{{ blueSum }} <em>CK</em></div>
+          <div class="rt">{{ yellowSum }} <em>CK</em></div>
+        </div>
+      </div>
+      <div class="rt">
+        <div class="classTime">
+          {{ classInfo.endTime }}
+        </div>
+      </div>
+    </div>
+    <div class="pk_container">
+      <div class="pl_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 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="pl_md">
+        <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="pl_rt">
+        <ul>
+          <li :class="YellowstudentsClassName" v-for="(s,i) in students.yellowUnite">
+            <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"
+                         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 {
+  getHello,
+  getClassStat,
+  getRecordBreak,
+  getNewUser
+} from '@/api/getApiRes'
+import '../libs/rem';
+import power from '@/components/power'
+
+let qs = require('qs');
+
+export default {
+  data() {
+    return {
+      trueDate: true,//启用真实数据 true / false
+      RedstudentsClassName: '',
+      BluestudentsClassName: '',
+      YellowstudentsClassName: '',
+      studentsClassName: [],
+      redSum: 0,
+      blueSum: 0,
+      yellowSum: 0,
+      pkVal: '33.33%',
+      yellowVal: '33.33%',
+      students: {
+        redUnite: [],
+        blueUnite: [],
+        yellowUnite: [],
+      },
+      PlanName: '',
+      Teacher: '',
+      num: 0,
+      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(21, 3);
+      that.UniteBreak(Rs);
+
+      // 人口总数
+      that.num = Rs ? Rs.length + 1 : 0;
+      this.ClacClassTime();
+    }
+  },
+  watch: {
+    '$route': function (val) {
+      if (val.path == '/threepk') {
+        if (this.trueDate) {
+          this.init();
+
+          // this.PkEgg = setInterval(() => {
+          //     this.createEgg();
+          // }, 6000);
+
+        } else {
+          let Rs = fakeNews(16, 3);
+          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.PkTimer = setInterval(() => {
+        this.GetgetUserList();
+        this.curgetClassStat();
+      }, 1000);
+      this.GetgetUserList();
+
+      this.timer2 = setInterval(() => {
+        this.createEgg();
+      }, 31000);
+
+      this.timer3 = setInterval(() => {
+        this.createNewStudent();
+      }, 6000);
+    },
+    // 载入课程信息
+    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 = [];
+      that.students.yellowUnite = [];
+      if (!Rs) {
+        that.students.redUnite = [];
+        that.students.blueUnite = [];
+        that.students.yellowUnite = [];
+      } 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);
+          }
+          if (item.GroupNo == 3) {
+            that.students.yellowUnite.push(item);
+          }
+        })
+
+      }
+      that.giveClassName(that.students.redUnite, 1);
+      that.giveClassName(that.students.blueUnite, 2);
+      that.giveClassName(that.students.yellowUnite, 3);
+      that.calcSumCK(that.students);
+    },
+    // 计算各队总分
+    calcSumCK(Rs) {
+      let that = this;
+      let redSum = 0;
+      let blueSum = 0;
+      let yellowSum = 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))
+      });
+      Rs.yellowUnite.map(function (item, t) {
+        yellowSum += parseFloat(item.Ck.toFixed(1))
+      });
+      that.redSum = redSum.toFixed(1);
+      that.blueSum = blueSum.toFixed(1);
+      that.yellowSum = yellowSum.toFixed(1);
+
+      // 进度条 FormatCk
+      let redFmtSum = 0;
+      let blueFmtSum = 0;
+      let yellowFmtSum = 0;
+      Rs.redUnite.map(function (item, t) {
+        redFmtSum += item.FormatCk
+      });
+      Rs.blueUnite.map(function (item, t) {
+        blueFmtSum += item.FormatCk
+      });
+      Rs.yellowUnite.map(function (item, t) {
+        yellowFmtSum += item.FormatCk
+      });
+
+      // pkVal
+      let sumMax = redFmtSum + blueFmtSum + yellowFmtSum;
+
+      // 当为0时均分
+      if (sumMax == 0) {
+        that.pkVal = '33.33%';
+        that.yellowVal = '33.33%';
+      } else {
+        // 限制最大
+        let pkval = parseInt((redFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((redFmtSum / sumMax) * 100);
+        let yellowVal = parseInt((yellowFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((yellowFmtSum / sumMax) * 100);
+        that.pkVal = pkval.toFixed(1) + '%';
+        that.yellowVal = yellowVal.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 sumMax = parseFloat(that.redSum) + parseFloat(that.blueSum) + parseFloat(that.yellowSum);
+      // // 当为0时均分
+      // if (sumMax == 0) {
+      //     that.pkVal = '50%';
+      //     that.yellowVal = '33.33%';
+      // } else {
+      //     // 限制最大
+      //     let pkval = parseInt((that.redSum / sumMax) * 100) > 100 ? 100 : parseInt((that.redSum / sumMax) * 100);
+      //     let yellowVal = parseInt((that.yellowSum / sumMax) * 100) > 100 ? 100 : parseInt((that.yellowSum / sumMax) * 100);
+      //     that.pkVal = pkval + '%';
+      //     that.yellowVal = yellowVal + '%';
+      // }
+    },
+    // 获取上课学生信息
+    GetgetUserList() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      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: '/3pkRank'});
+          } 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) <= 4 && parseInt(res.length) >= 3:
+          numberClass = 'four';
+          break;
+        case  parseInt(res.length) <= 6 && parseInt(res.length) > 4:
+          numberClass = 'eight';
+          break;
+        case  parseInt(res.length) > 6:
+          numberClass = 'eight';
+          break;
+      }
+      if (type == 1) {
+        that.RedstudentsClassName = numberClass;
+      }
+      if (type == 2) {
+        that.BluestudentsClassName = numberClass;
+      }
+      if (type == 3) {
+        that.YellowstudentsClassName = 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;
+    },
+    // // 计算双方对抗强度加总
+    // CalcTeamCk() {
+    //     let that = this;
+    //     let Redsum = 0;
+    //     let Bluesum = 0;
+    //     let sumMax = 0;
+    //     if (that.Redstudents) {
+    //         that.Redstudents.map(function (i) {
+    //             Redsum = parseFloat(Redsum) + parseFloat(i.Ck)
+    //         });
+    //     }
+    //     if (that.Bluestudents) {
+    //         that.Bluestudents.map(function (i) {
+    //             Bluesum = parseFloat(Bluesum) + parseFloat(i.Ck)
+    //         });
+    //     }
+    //     that.classInfo.redSum = parseFloat(Redsum).toFixed(1);
+    //     that.classInfo.blueSum = parseFloat(Bluesum).toFixed(1);
+    //
+    //     sumMax = parseFloat(Redsum) + parseFloat(Bluesum);
+    //     that.classInfo.pkVal = (that.classInfo.redSum / sumMax) * 100 + '%';
+    // },
+
+    // 启动一个成就彩蛋
+    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)
+    },
+    // 当前课程状态
+    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("已下课");
+            // 0: 下课 团课/私教 排名
+            // 1：团课/私教 todo
+            // 2：竞技课2PK
+            // 3：竞技课3PK
+            that.$router.push({path: '/3pkRank'});
+            console.log('json.dp' + json.dp);
+            switch (parseInt(json.dp)) {
+              case 2:
+                that.$router.push({path: '/3pkRank'});
+                break;
+              case 3:
+                that.$router.push({path: '/3pkRank'});
+                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("../assets/img/threepk/threepkbg.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: absolute;*/
+  position: relative;
+  top: 0rem;
+  width: 100%;
+  height: 0.6rem;
+  display: block;
+  margin: 0 auto;
+  padding-top: 0.35rem;
+  overflow: hidden;
+}
+
+.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 {
+  float: left;
+  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-size: 40px 40px;
+  /*background-image: linear-gradient(45deg, #ff9960 25%, #f75e07 0, #f75e07 50%, #ff9960 0, #ff9960 75%, #f75e07 0);*/
+  /*background-size: 40px 40px;*/
+}
+
+.right-bar {
+  float: right;
+  position: relative;
+  right: 0;
+  top: 0rem;
+  height: 0.3rem;
+  text-align: right;
+  background-color: #DBB900;
+  -moz-transition: width .6s ease;
+  -webkit-transition: width .6s ease;
+  transition: width .6s ease;
+  background-image: url("../static/img/pk/red.png");
+  background-size: 40px 40px;
+}
+
+.progress, .progress-bar {
+  /*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: 100%;
+
+}
+
+.right-bar .lightning {
+  position: relative;
+  top: -0.5rem;
+  width: 1rem;
+  height: 1.3rem;
+  margin-right: -0.5rem;
+  background: url("../static/img/pk/light.png") no-repeat center;
+  background-size: 100%;
+  left: -0.4rem;
+  float: left;
+}
+
+.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;
+}
+
+.lessonInfo {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.lessonInfo .lt {
+  width: 30%;
+  float: left;
+}
+
+.lessonInfo .md {
+  width: 40%;
+  float: left;
+}
+
+.lessonInfo .rt {
+  width: 30%;
+  float: right;
+}
+
+.bottomInfo {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.bottomInfo .names {
+  width: 70%;
+  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;
+  color: #fff;
+  font-size: 0.3rem;
+  padding-top: 0.2rem;
+}
+
+.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;
+}
+
+.cubelist {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.cubelist .cubes {
+  width: 20%;
+  height: 1.5rem;
+  overflow: hidden;
+  float: left;
+  background-position: top center;
+
+}
+
+.cubelist .vs {
+  width: 20%;
+  height: 0.6rem;
+  overflow: hidden;
+  float: left;
+  padding-top: 0.4rem;
+}
+
+.cubelist .cubes em {
+  width: 80%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+  font-size: 0.2rem;
+  font-style: normal;
+  color: #fff;
+  line-height: 1.5rem;
+}
+
+.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%;
+}
+
+.cubes.ycube {
+  background: url("../static/img/pk/ycube.png");
+  background-size: 100% 100%;
+}
+
+.teamScore {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.lessonInfo .teamScore div {
+  width: 25%;
+  float: left;
+  color: #fff;
+  font-size: 0.4rem;
+  text-align: left;
+}
+
+.lessonInfo .teamScore .md {
+  width: 50%;
+  text-align: center;
+}
+
+.lessonInfo .teamScore .rt {
+  float: right;
+  text-align: right;
+}
+
+.lessonInfo .teamScore em {
+  font-size: 0.2rem;
+}
+
+.pk_container {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.pk_container .pl_lt {
+  width: 33.333%;
+  float: left;
+}
+
+.pk_container .pl_rt {
+  width: 33.333%;
+  float: right;
+}
+
+.pk_container .pl_md {
+  width: 33.333%;
+  float: left;
+}
+
+
+.pk_container ul {
+  width: 98%;
+  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 .pl_lt .bg {
+  border: 2px solid rgba(255, 143, 122, 0.5);
+  background: rgba(194, 36, 6, 0.5);
+}
+
+.pk_container .pl_md .bg {
+  border: 2px solid rgba(80, 115, 255, 0.5);
+  background: rgba(0, 30, 152, 0.5);
+}
+
+.pk_container .pl_rt .bg {
+  border: 2px solid rgba(255, 239, 149, 0.5);
+  /*background: rgba(255, 230, 0, 0.5);*/
+  /*background: rgba(233, 192, 12, 0.9);*/
+  background: rgba(245, 195, 0, 0.9);
+}
+
+
+.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: hidden;
+  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.6rem;
+}
+
+.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.73rem;
+  height: 1.73rem;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  border-radius: 33rem;
+  padding-top: 0.09rem;
+}
+
+.user .umd img {
+  width: 1.45rem;
+  height: 1.45rem;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  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.5rem;
+  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 {
+  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);
+  }
+}
+
+.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 {
+  float: left;
+  margin-right: 0.2rem;
+}
+
+.cubelist {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.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;
+}
+
+
+.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: 100%;
+  overflow: hidden;
+  display: block;
+}
+
+.pk_container li.two .user {
+  height: 1.75rem;
+  overflow: hidden;
+}
+
+.two .bottomLi {
+  width: 98%;
+  font-size: 0.35rem;
+  margin-top: 0rem;
+  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: 26%;
+  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;
+}
+
+/*three*/
+
+.pk_container li.three {
+  width: 90%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-bottom: 0.1rem;
+  float: none;
+}
+
+.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 .urt em {
+  line-height: 1.2rem;
+}
+
+.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%;
+  margin-right: 0;
+  font-size: 0.5rem;
+  line-height: 1rem;
+  padding-right: 0.2rem;
+}
+
+.four .user .ult s {
+  font-size: 0.2rem;
+  line-height: 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: 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;
+}
+
+.four .nameMd {
+  font-size: 0.2rem;
+}
+
+/*six*/
+
+
+/*eight*/
+.eight {
+  width: 50%;
+  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%;
+  padding-right: 0.2rem;
+  margin-right: 0rem;
+  font-size: 0.4rem;
+  line-height: 0.8rem;
+}
+
+.eight .user .ult s {
+  font-size: 0.2rem;
+  line-height: 1.3rem;
+}
+
+.eight .circle {
+  width: 1rem;
+  height: 1rem;
+}
+
+.eight .user .umd img {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+.eight .urt img {
+  width: 0.15rem;
+  height: 0.15rem;
+  top: -0.6rem;
+  right: 0.2rem;
+}
+
+.eight .urt em {
+  font-size: 0.3rem;
+  line-height: 0.8rem;
+  padding-right: 45%;
+}
+
+.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: 0.85rem;
+  overflow: hidden;
+}
+
+.eight .nameMd {
+  font-size: 0.2rem;
+}
+
+/*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.4rem;
+  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: 0.8rem;
+  height: 0.35rem;
+}
+
+.eight .birth {
+  width: 1rem;
+}
+
+.eight .birth img.birthCrow {
+  top: 1.25rem;
+  width: 0.5rem;
+  height: 0.2rem;
+}
+
+.eight .birth img.birthText {
+  top: 1.5rem;
+  width: 0.7rem;
+  height: 0.3rem;
+}
+
+/*isPrivate*/
+.isPrivate {
+  position: relative;
+  float: right;
+  right: -0.35rem;
+  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.4rem;
+  right: -0.1rem;
+}
+
+.three .isPrivate i {
+  width: 0.6rem !important;
+  height: 0.6rem !important;
+}
+
+.four .isPrivate {
+  top: -1.28rem;
+  right: -0.27rem;
+}
+
+.four .isPrivate i {
+  width: 0.4rem !important;
+  height: 0.4rem !important;
+}
+
+.eight .isPrivate {
+  top: -1rem;
+  right: -0.1rem;
+}
+
+.eight .isPrivate i {
+  width: 0.4rem !important;
+  height: 0.4rem !important;
+}
+
+</style>