student 组件重构

v2tv/src/Mock/index.js

@@ -120,7 +120,7 @@ let getUserList = function () {
 let testStudent = function (num, team, mustbeTeamOne) {
     let item = [];
     let group = team == 2 ? "@integer(1, 2)" : "@integer(1, 3)";
-    group = 1;
+    // group = 1;
     if (mustbeTeamOne) {
         group = mustbeTeamOne;
     }
@@ -408,8 +408,8 @@ 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(2, 1,));
-        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(2, 1,));
+        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(1, 1,));
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(8, 1,));
     } else if (LessonClass == 3) {
         // 上3队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 3));

v2tv/src/components/pkstudent.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.75rem;
+  height: 1.8rem;
+  margin-top: 0.07rem;
+
+  .lt span {
+    margin-top: 3%;
+    line-height: 0.5rem;
+
+    em {
+      font-size: 0.5rem;
+    }
+
+    s {
+      font-size: 0.2rem;
+      margin-top: -0.1rem;
+    }
+  }
+
+  .md {
+    padding-top: 0;
+  }
+
+  .userinfo {
+    height: 1rem;
+  }
+
+  .userinfo .head {
+    height: 1.1rem;
+
+    img {
+      width: 0.9rem;
+    }
+
+    .names {
+      width: 0.8rem;
+      font-size: 0.15rem;
+      bottom: 0.3rem;
+    }
+  }
+
+  .md {
+    height: 1.1rem;
+
+    .IsPrivate {
+      width: 0.25rem;
+      bottom: 1.1rem;
+    }
+  }
+
+  .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/pk.vue

@@ -6,13 +6,13 @@
     <div class="progressContainer">
       <div class="valueDisplay">
         <div class="lt">
-            <span>
-              <em>CK 238.3</em>
+            <span :style="{'right': Redflag+'%'}">
+              <em>CK {{ redSum }}</em>
             </span>
         </div>
         <div class="rt">
               <span>
-              <em>CK 222.1</em>
+              <em>CK {{ blueSum }}</em>
             </span>
         </div>
         <div class="md">
@@ -22,25 +22,26 @@
       <div class="lineContianer">
         <div class="lt">
             <span>
-              <em>8人红队</em>
+              <em>{{ redPeron }}人红队</em>
             </span>
         </div>
         <div class="rt">
              <span>
-              <em>蓝队8人</em>
+              <em>蓝队{{ bluePerson }}人</em>
             </span>
         </div>
       </div>
     </div>
     <div class="userPart">
       <div class="lt">
-        <student :students="students.redUnite" :students-class-name="RedstudentsClassName"></student>
+        <pkstudent :students="students.redUnite"></pkstudent>
         <div class="bottomLine redBottom"></div>
       </div>
       <div class="md">
         00:30:12
       </div>
       <div class="rt">
+        <pkstudent :students="students.blueUnite"></pkstudent>
         <div class="bottomLine blueBottom"></div>
       </div>
     </div>
@@ -54,7 +55,7 @@ import '../libs/rem';
 import Headside from '@/components/Headside'
 import newRecord from '@/components/newRecord'
 import newStudent from '@/components/newStudent'
-import student from '@/components/student'
+import pkstudent from '@/components/pkstudent'
 
 import
 {
@@ -81,9 +82,15 @@ export default {
       thisClassName: '',
       redSum: 0,
       blueSum: 0,
+      redPeron: 0,
+      bluePerson: 0,
       pkVal: '50%',
-      RedstudentsClassName: '',
-      BluestudentsClassName: '',
+      RedstudentsClassName: [
+        {name: 'max'}
+      ],
+      BluestudentsClassName: [
+        {name: 'max'}
+      ],
       PlanName: '',
       num: 0,
       Teacher: '',
@@ -106,6 +113,7 @@ export default {
         Rs: [],
         percent: 0
       },
+      Redflag: 0,
     }
   },
   watch: {
@@ -161,7 +169,7 @@ export default {
         } else {
           // 并没有人破记录
           if (json.Code == 999) return false;
-          if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
+          if (json.Code != 999) that.$message.error(json.Memo + '[错误码]' + json.Code);
         }
       })
     },
@@ -187,7 +195,7 @@ export default {
         } else {
           // 并没有人破记录
           if (json.Code == 999) return false;
-          if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
+          if (json.Code != 999) that.$message.error(json.Memo + '[错误码]' + json.Code);
         }
       })
     },
@@ -284,42 +292,14 @@ export default {
 
       // 当为0时均分
       if (sumMax == 0) {
-        that.pkVal = '50%';
+        that.Redflag = 0;
       } else {
         // 限制最大
         let pkval = parseInt((redFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((redFmtSum / sumMax) * 100);
         console.log(pkval);
-        that.pkVal = pkval + '%';
+        that.Redflag = 100 - pkval - 20;
       }
 
-      // // 获取人数 计算人均CK
-      // let redHuman = 0;
-      // let blueHuman = 0;
-      // if (Rs.redUnite != '') {
-      //     redHuman = Rs.redUnite.length;
-      //     that.redSum = parseFloat(redSum / redHuman).toFixed(1);
-      // } else {
-      //     that.redSum = 0
-      // }
-      // if (Rs.blueUnite != '') {
-      //     blueHuman = Rs.blueUnite.length;
-      //     that.blueSum = parseFloat(blueSum / blueHuman).toFixed(1);
-      // } else {
-      //     that.blueSum = 0
-      // }
-      // that.redSum = redSum;
-      // that.blueSum = blueSum;
-
-      // // pkVal ***进度条对比按照人均显示
-      // let sumMax = parseFloat(that.redSum) + parseFloat(that.blueSum);
-      // // 当为0时均分
-      // if (sumMax == 0) {
-      //     that.pkVal = '50%';
-      // } else {
-      //     // 限制最大
-      //     let pkval = parseInt((that.redSum / sumMax) * 100) > 100 ? 100 : parseInt((that.redSum / sumMax) * 100);
-      //     that.pkVal = pkval + '%';
-      // }
     },
     // 获取上课学生信息
     GetgetUserList() {
@@ -359,30 +339,16 @@ export default {
       let that = this;
       let numberClass = '';
       let colorClass = '';
+
       for (let i = 0; i < parseInt(res.length); i++) {
         switch (true) {
           case  parseInt(res.length) == 1:
-            numberClass = 'twentyFive';
+            numberClass = 'max';
             break;
           case  parseInt(res.length) == 2:
             numberClass = 'two';
             break;
-          case  parseInt(res.length) <= 4 && parseInt(res.length) > 2:
-            numberClass = 'three';
-            break;
-          case  parseInt(res.length) <= 9 && parseInt(res.length) > 4:
-            numberClass = 'five';
-            break;
-          case  parseInt(res.length) <= 9 && parseInt(res.length) > 6:
-            numberClass = 'nine';
-            break;
-          case parseInt(res.length) <= 16 && parseInt(res.length) > 9:
-            numberClass = 'sixteen';
-            break;
-          case parseInt(res.length) <= 25 && parseInt(res.length) > 16:
-            numberClass = 'twentyFive';
-            break;
-          case parseInt(res.length) >= 26:
+          case   parseInt(res.length) > 2:
             numberClass = 'twentyFive';
             break;
         }
@@ -411,13 +377,13 @@ export default {
         that.studentsClassName[i] = {
           name: numberClass + ' ' + colorClass,
         }
-
-        if (type == 1) {
-          that.RedstudentsClassName = that.studentsClassName;
-        } else {
-          that.BluestudentsClassName = that.studentsClassName;
-        }
-
+      }
+      if (type == 1) {
+        that.RedstudentsClassName = that.studentsClassName;
+        that.redPeron = parseInt(res.length);
+      } else {
+        that.BluestudentsClassName = that.studentsClassName;
+        that.bluePerson = parseInt(res.length)
       }
     },
     // 计算团队竞技课持续时间
@@ -494,7 +460,7 @@ export default {
     }
   },
   components: {
-    Headside, newRecord, newStudent, student
+    Headside, newRecord, newStudent, pkstudent
   }
 }
 </script>
@@ -646,23 +612,43 @@ export default {
 .userPart {
   @include cube;
   width: 88%;
+  position: relative;
+  bottom: 1rem;
+  height: 7.45rem;
 
   .lt {
+    @include cube;
+    position: relative;
     width: 45%;
-    min-height: 6rem;
+    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%);
+
     }
   }
 
   .rt {
+    @include cube;
+    position: relative;
     width: 45%;
-    min-height: 6rem;
+    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(0, 134, 232, 0.62) 100%);
     }
   }
@@ -675,13 +661,6 @@ export default {
     font-size: 0.4rem;
     padding-top: 11%;
   }
-
-  .bottomLine {
-    @include cube;
-    height: 0.75rem;
-    border-radius: 18px;
-    opacity: 0.8;
-  }
 }
 
 .icons {