ver: 2.1.2

src/Global.js

@@ -13,9 +13,10 @@ companyInfo = {
 runVersion = 'normal';
 
 // headapi = process.env.NODE_ENV === 'development' ? '/api/' : '../';
+// headapi = '/api/';
 // headapi = 'http://192.168.0.62:9000/';//从郑伟那里获得数据源
-headapi = 'http://192.168.0.3:9000/';//从郑伟那里获得数据源
-// headapi = 'http://192.168.0.10:8080/';//实际场馆默认数据源
+// headapi = 'http://192.168.0.3:9000/';//从郑伟那里获得数据源
+headapi = 'http://221.214.111.254:9000/';//实际场馆默认数据源
 
 // 七牛云imgsrc
 imgUrl = "http://qjzpcd34v.hb-bkt.clouddn.com";

src/Mock/index.js

@@ -138,19 +138,19 @@ let testStudent = function (num, team, mustbeTeamOne) {
             Head: require('../static/img/testhead.png'),
             Height: 160,
             HrId: 41,
-            IsBirthday: 0,
-            IsBreaking: 0,
+            IsBirthday: 1,
+            IsBreaking: 1,
             IsNewUser: 0,
             MaxHr: 80,
             PowerPercent: "@integer(10, 100)",
             // PowerPercent: "100",
-            // Name: "@cname",
-            Name: "姜泽志",
+            Name: "@cname",
+            // Name: "姜泽志",
             PkSucessnum: '1',//胜场数
             PkTotalnum: '1',//总场数
             PlanId: 60,
             PureCalorieNoVo2: "@integer(1, 999)",
-            Sex: 1,
+            Sex: "@integer(1, 2)",
             Sn: "22735",
             StaticHr: 60,
             Steps: "@float(1,9999,0,1)",
@@ -165,7 +165,7 @@ let testStudent = function (num, team, mustbeTeamOne) {
             isAlive: true,
             isFinish: false,
             isOver: false,
-            IsPrivate: 1,
+            IsPrivate: 0,
             lastPushDataTime: 1608188947175,
             lastUpdateTime: 1608188945184,
             queuePushData: [],
@@ -262,30 +262,34 @@ let UserRankingQuery = function (num) {
         item1.push({
             "UserName": "@cname",
             // UserName: "赵沂",
+            "Sex":  "@integer(1, 2)",
             "Values": "@integer(1000, 9999)",
-            "Head": require('../static/img/testhead.png')
+            "Head": require('../static/img/testhead.png'),
+            "IsBreaking": "@integer(0, 1)"
         })
     }
     for (var i = 0; i < num; i++) {
         item2.push({
             "UserName": "@cname",
             // UserName: "赵沂",
+            "Sex":  "@integer(1, 2)",
             "Values": "@float(10,99,1,1)",
-            "Head": require('../static/img/testhead.png')
+            "Head": require('../static/img/testhead.png'),
+            "IsBreaking": "@integer(0, 1)"
         })
     }
     let Rs = [
         {
-            Title: '月度卡路里排行榜',
+            Title: '月卡路里排行榜',
             Result: item1,
         }, {
-            Title: '月度CK排行榜',
+            Title: '月CK排行榜',
             Result: item2,
         }, {
-            Title: '今日卡路里排行榜',
+            Title: '周卡路里排行榜',
             Result: item1,
         }, {
-            Title: '今日CK排行榜',
+            Title: '周CK排行榜',
             Result: item2,
         }
     ];
@@ -393,7 +397,8 @@ if (t == 1) {
     Mock.mock('/api/getUserList', 'post', getUserList());
 
     // let Mockapi = 'http://192.168.0.10:8080/';
-    let Mockapi = 'http://192.168.0.62:9000/';
+    // let Mockapi = 'http://192.168.0.62:9000/';
+    let Mockapi = 'http://221.214.111.254:9000/';
 
     // if (runVersion == 'test') {
     let curheadapi = 'http://cal.beswell.com:85/DataTransfer/';
@@ -403,8 +408,8 @@ if (t == 1) {
     // }
 
     // 0: 下课 团课/私教/PK 的排名
-    let LessonClass = 1;
-    let LessonDp = 0;
+    let LessonClass = 0;
+    let LessonDp = 2;
     // 1：团课/私教
     // 2：竞技课2PK
     // 3：竞技课threepk
@@ -415,19 +420,19 @@ if (t == 1) {
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 1));
         Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(1, 1));
         Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(1, 1));//true
-        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(6, 2)); //
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(17, 2)); //
     } else if (LessonClass == 2) {
         // 上2队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 2));
         Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(1, 2));
         Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(9, 1,));
-        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(8, 1,));
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(5, 1,));
     } else if (LessonClass == 3) {
         // 上3队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 3));
         Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(1, 3));
         Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(2, 3,));
-        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(12, 3,));
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(13, 3,));
         Mock.mock(curheadapi + 'ClassUserRank', 'post', testStudent(1, 2));
         Mock.mock(Mockapi + 'ClassUserRank', 'post', testStudent(1, 3));
     } else if (LessonClass == 0) {
@@ -471,10 +476,10 @@ if (t == 1) {
     Mock.mock(Mockapi + 'UserRankingQuery', 'post', UserRankingQuery(8));
     // 新同学 0 999
     Mock.mock(curheadapi + 'getNewUser', 'post', getNewUser(999, 2));
-    Mock.mock(Mockapi + 'getNewUser', 'post', getNewUser(999, 1));
+    Mock.mock(Mockapi + 'getNewUser', 'post', getNewUser(0, 12));
     // 彩蛋 0 999
     Mock.mock(curheadapi + 'getRecordBreak', 'post', getRecordBreak(999));
-    Mock.mock(Mockapi + 'getRecordBreak', 'post', getRecordBreak(999));
+    Mock.mock(Mockapi + 'getRecordBreak', 'post', getRecordBreak(0));
 }
 
 export default Mock;

src/api/getApiRes.js

@@ -102,24 +102,31 @@ export function UserRankingQuery(postdata) {
 // 11-20 新增
 // 课堂记录排名 下课后查询当堂课程人员排名
 export function ClassUserRank(postdata) {
-    let url = headapi + 'ClassUserRank';
-    // console.log(url);
+    let url = headapi + 'ClassUserRank';    
     return getApiBasic(url, postdata);
 }
 
 
 // 用查询最新wgt 般本
 export function QueryVueFramework(postdata) {
-    // let url = 'http://cal.beswell.com:85/v1/Sensors/QueryVueFrameworkV2';
-    let url = 'http://192.168.0.3:19096/v1/Sensors/QueryVueFrameworkV2';
+    let url = 'http://cal.beswell.com:85/v1/Sensors/QueryVueFrameworkV2';
+    // let url = 'http://192.168.0.3:19096/v1/Sensors/QueryVueFrameworkV2';
+    // let url = 'http://192.168.0.60:19096/v1/Sensors/QueryVueFrameworkV2';
     return getApiBasic(url, postdata);
 }
 // 下载最新wgt 般本
-export function DownloadVueFramework(postdata) {
-    // let url = 'http://cal.beswell.com:85/v1/Sensors/DownloadVueFrameworkV2';
-    let url = 'http://192.168.0.3:19096/v1/Sensors/DownloadVueFrameworkV2';
-    return getApiBasic(url, postdata);
+export function DownloadVueFramework() {
+    let url = 'http://cal.beswell.com:85/v1/Sensors/DownloadVueFrameworkV2?vfType=3';
+    // let url = 'http://192.168.0.3:19096/v1/Sensors/DownloadVueFrameworkV2?vfType=3';
+    // let url = 'http://192.168.0.60:19096/v1/Sensors/DownloadVueFrameworkV2?vfType=3';
+    return url;
 }
+// // 下载最新wgt 般本
+// export function DownloadVueFramework(postdata) {
+//     // let url = 'http://cal.beswell.com:85/v1/Sensors/DownloadVueFrameworkV2';
+//     let url = 'http://192.168.0.3:19096/v1/Sensors/DownloadVueFrameworkV2';
+//     return getApiBasic(url, postdata);
+// }
 
 // 12/13 欢迎新同学
 export function getNewUser(postdata) {

src/assets/imgs/pk/icons2.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="335" height="37" viewBox="0 0 335 37">
+  <g id="组_792" data-name="组 792" transform="translate(-276 -764)">
+    <g id="矩形_243" data-name="矩形 243" transform="translate(276 764)" fill="rgba(255,255,255,0.27)" stroke="#707070" stroke-width="1">
+      <rect width="53" height="37" rx="8" stroke="none"/>
+      <rect x="0.5" y="0.5" width="52" height="36" rx="7.5" fill="none"/>
+    </g>
+    <text id="CR" transform="translate(302 791)" font-size="25" font-family="SegoeUI, Segoe UI"><tspan x="-15.216" y="0">CR</tspan></text>
+    <text id="场馆纪录" transform="translate(380 791)" fill="#585858" font-size="22" font-family="MicrosoftJhengHeiUIRegular, Microsoft JhengHei UI"><tspan x="-44" y="0">场馆纪录</tspan></text>
+    <g id="矩形_243-2" data-name="矩形 243" transform="translate(463 764)" fill="rgba(255,255,255,0.27)" stroke="#707070" stroke-width="1">
+      <rect width="53" height="37" rx="8" stroke="none"/>
+      <rect x="0.5" y="0.5" width="52" height="36" rx="7.5" fill="none"/>
+    </g>
+    <text id="PB" transform="translate(489 791)" font-size="25" font-family="SegoeUI, Segoe UI"><tspan x="-14.166" y="0">PB</tspan></text>
+    <text id="个人最佳" transform="translate(567 791)" fill="#585858" font-size="22" font-family="YuGothicUI-Regular, Yu Gothic UI"><tspan x="-44" y="0">个人最佳</tspan></text>
+  </g>
+</svg>

src/assets/imgs/rank/icons2.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="335" height="37" viewBox="0 0 335 37">
+  <g id="组_792" data-name="组 792" transform="translate(-276 -764)">
+    <g id="矩形_243" data-name="矩形 243" transform="translate(276 764)" fill="rgba(255,255,255,0.27)" stroke="#707070" stroke-width="1">
+      <rect width="53" height="37" rx="8" stroke="none"/>
+      <rect x="0.5" y="0.5" width="52" height="36" rx="7.5" fill="none"/>
+    </g>
+    <text id="CR" transform="translate(302 791)" font-size="25" font-family="SegoeUI, Segoe UI"><tspan x="-15.216" y="0">CR</tspan></text>
+    <text id="场馆纪录" transform="translate(380 791)" fill="#585858" font-size="22" font-family="MicrosoftJhengHeiUIRegular, Microsoft JhengHei UI"><tspan x="-44" y="0">场馆纪录</tspan></text>
+    <g id="矩形_243-2" data-name="矩形 243" transform="translate(463 764)" fill="rgba(255,255,255,0.27)" stroke="#707070" stroke-width="1">
+      <rect width="53" height="37" rx="8" stroke="none"/>
+      <rect x="0.5" y="0.5" width="52" height="36" rx="7.5" fill="none"/>
+    </g>
+    <text id="PB" transform="translate(489 791)" font-size="25" font-family="SegoeUI, Segoe UI"><tspan x="-14.166" y="0">PB</tspan></text>
+    <text id="个人最佳" transform="translate(567 791)" fill="#585858" font-size="22" font-family="YuGothicUI-Regular, Yu Gothic UI"><tspan x="-44" y="0">个人最佳</tspan></text>
+  </g>
+</svg>

src/assets/imgs/wait/classNum.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26">
+  <path id="排除_20" data-name="排除 20" d="M1977,2287h-16a5.006,5.006,0,0,1-5-5v-16a5.006,5.006,0,0,1,5-5h16a5.006,5.006,0,0,1,5,5v16A5.005,5.005,0,0,1,1977,2287Zm-14.728-19.455a1.289,1.289,0,0,0-1.273,1.272v12.723a1.29,1.29,0,0,0,1.273,1.273h13.995a1.291,1.291,0,0,0,1.273-1.273v-12.723a1.291,1.291,0,0,0-1.273-1.272H1975v-.954a1.6,1.6,0,0,0-1.591-1.59h-.635a1.6,1.6,0,0,0-1.59,1.59v.954h-3.818v-.954a1.6,1.6,0,0,0-1.59-1.59h-.636a1.6,1.6,0,0,0-1.59,1.59v.954Zm13.995,14h-13.995v-10.179h13.995v10.178Zm-10.049-5.726a.3.3,0,0,0-.219.09l-.457.457a.3.3,0,0,0-.089.219.336.336,0,0,0,.089.229l2.863,2.863a.338.338,0,0,0,.457,0l5.089-5.089a.336.336,0,0,0,.089-.229.3.3,0,0,0-.089-.219l-.457-.457a.3.3,0,0,0-.219-.09.332.332,0,0,0-.229.09l-4.414,4.414-2.187-2.187A.332.332,0,0,0,1966.218,2275.815Zm7.187-6.043h-.635a.307.307,0,0,1-.319-.318v-2.863a.308.308,0,0,1,.319-.319h.635a.307.307,0,0,1,.318.319v2.863a.305.305,0,0,1-.318.318Zm-7.634,0h-.636a.305.305,0,0,1-.318-.318v-2.863a.311.311,0,0,1,.089-.229.314.314,0,0,1,.229-.09h.636a.308.308,0,0,1,.319.319v2.863a.306.306,0,0,1-.319.318Z" transform="translate(-1956 -2261)" fill="#ffeb50"/>
+</svg>

src/assets/imgs/wait/icons2.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="335" height="37" viewBox="0 0 335 37">
+  <g id="组_792" data-name="组 792" transform="translate(-276 -764)">
+    <g id="矩形_243" data-name="矩形 243" transform="translate(276 764)" fill="rgba(255,255,255,0.27)" stroke="#707070" stroke-width="1">
+      <rect width="53" height="37" rx="8" stroke="none"/>
+      <rect x="0.5" y="0.5" width="52" height="36" rx="7.5" fill="none"/>
+    </g>
+    <text id="CR" transform="translate(302 791)" font-size="25" font-family="SegoeUI, Segoe UI"><tspan x="-15.216" y="0">CR</tspan></text>
+    <text id="场馆纪录" transform="translate(380 791)" fill="#585858" font-size="22" font-family="MicrosoftJhengHeiUIRegular, Microsoft JhengHei UI"><tspan x="-44" y="0">场馆纪录</tspan></text>
+    <g id="矩形_243-2" data-name="矩形 243" transform="translate(463 764)" fill="rgba(255,255,255,0.27)" stroke="#707070" stroke-width="1">
+      <rect width="53" height="37" rx="8" stroke="none"/>
+      <rect x="0.5" y="0.5" width="52" height="36" rx="7.5" fill="none"/>
+    </g>
+    <text id="PB" transform="translate(489 791)" font-size="25" font-family="SegoeUI, Segoe UI"><tspan x="-14.166" y="0">PB</tspan></text>
+    <text id="个人最佳" transform="translate(567 791)" fill="#585858" font-size="22" font-family="YuGothicUI-Regular, Yu Gothic UI"><tspan x="-44" y="0">个人最佳</tspan></text>
+  </g>
+</svg>

src/components/Headside.vue

@@ -4,7 +4,7 @@
       <img @click="showConsole()" src="../assets/imgs/headside/logo.svg" alt="">
     </div>
     <div class="rt">
-      <p @click="showUuid()">版本{{ version }}</p>
+      <p @click="showUuid()">版本 {{ version }}</p>
       <span>{{ nowTime }}</span>
       <span>{{ nowWeeks }}</span>
       <span>{{ nowDay }}</span>

src/components/actionScore.vue

@@ -12,7 +12,7 @@
           <div class="ltTitle">
             <span v-for="item in actionList">{{ item.name }}</span>
           </div>
-          <li v-for="(item,index) in memberList" v-if="index <= 7"
+          <li v-for="(item,index) in memberList" v-if="index <= 7" v-show="Listate[index].state"
               :class="[{ 'box animate__animated animate__flipInX': Listate[index].state }]">
             <div class="gary">
               <em>{{ index + 1 }}</em>
@@ -165,15 +165,16 @@ export default {
       that.Listate.map(function (t) {
         t.state = false;
       })
-      let timeScope = 400;
+      let timeScope = 100;  //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)
-      }
+      that.timer = setTimeout(() => {   //设置延迟执行
+        for (let i = 0; i < 8; i++) {
+          timeLong = parseInt(i * timeScope);
+          that.timer = setTimeout(() => {   //设置延迟执行
+            that.Listate[i].state = true;
+          }, timeLong)
+        }
+      }, 60);
     },
   },
   filters: {
@@ -361,6 +362,7 @@ export default {
 
         img {
           width: 0.65rem;
+          height: 0.65rem;
           border-radius: 250rem;
 
           &.girl {
@@ -419,7 +421,8 @@ export default {
 
   img {
     @include cube;
-    width: 40%;
+    // width: 40%;
+    width: 18%;
   }
 }
 </style>

src/components/newRecord.vue

@@ -17,8 +17,9 @@
             <em>{{ toperInfo.toper.Ck|fmtFloat }}</em>
           </div>
         </div>
-      </div>
+      </div>      
     </div>
+    <div v-show="toperInfo.totalTime > 0" class="countdown">{{toperInfo.totalTime}}</div>
   </el-dialog>
 
 </template>
@@ -107,6 +108,7 @@ export default {
       img {
         @include cube;
         width: 2.5rem;
+        height: 2.5rem;
         border-radius: 250rem;
 
         &.girl {
@@ -163,5 +165,13 @@ export default {
   }
 }
 
+.countdown {
+  width: 1.5rem;
+  position: relative;
+  font-size: 0.6rem;
+  color: #797979;
+  margin: 0 auto;
+  margin-top: 0.8rem;
+}
 
 </style>

src/components/newRecord2.vue

@@ -1,172 +0,0 @@
-<template>
-  <el-dialog title="" :visible.sync="toperInfo.dialogVisible" :close-on-click-modal="false">
-    <div class="eggContainer">
-      <div class="toper">
-        <!--<img v-bind:src="require('../static/img/people/' + toperInfo.toper.head)" alt="">-->
-        <img :src="toperInfo.toper.Head" alt="" v-if="toperInfo.toper.Head">
-        <img src="../static/img/people/flyhead.png" alt="" v-if="!toperInfo.toper.Head">
-        <span>{{ toperInfo.toper.UserName }}</span>
-      </div>
-      <div class="info">
-        <div class="lt">
-          <h5>{{ toperInfo.toper.CleTitle }}</h5>
-          <div class="detail">
-            <em>{{ toperInfo.toper.Cle|fmtInt }}</em>
-            <span>{{ toperInfo.toper.CleUnit }}</span>
-          </div>
-          <img class="icons" src="../static/img/newRecord/record_icon.svg"/>
-        </div>
-        <div class="rt">
-          <h5>{{ toperInfo.toper.CkTitle }}</h5>
-          <div class="detail">
-            <em>{{ toperInfo.toper.Ck|fmtFloat }}</em>
-            <span>{{ toperInfo.toper.CkUnit }}</span>
-          </div>
-          <img class="icons" src="../static/img/newRecord/record_icon.svg"/>
-        </div>
-      </div>
-    </div>
-  </el-dialog>
-
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      dialogTableVisible: true,
-      dialogFormVisible: false,
-    };
-  },
-  props: ['toperInfo'],
-  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'
-      } else {
-        return parseFloat(val).toFixed(1);
-      }
-    },
-    fmtInt(val) {
-      if (val == 0) {
-        return '0'
-      } else {
-        return parseInt(val);
-      }
-    },
-  },
-}
-</script>
-
-<style scoped>
-/*成就彩蛋*/
-/deep/ .el-dialog {
-  width: 22rem;
-  height: 6rem;
-  background: url("../static/img/newRecord/record.svg");
-  background-position: top center;
-  background-repeat: no-repeat;
-  background-size: 120% 100%;
-  box-shadow: none;
-  padding-bottom: 1rem;
-}
-
-.eggContainer {
-  width: 100%;
-  overflow: hidden;
-  margin: 0 auto;
-  float: left;
-}
-
-.toper {
-  width: 2.2rem;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  color: #fff;
-  font-size: 0.3rem;
-  line-height: 0.9rem;
-}
-
-.toper img {
-  width: 0.7rem;
-  height: 0.7rem;
-  float: left;
-  border-radius: 250px;
-  border: 2px dotted #fff;
-  padding: 0.1rem;
-}
-
-.info {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-}
-
-.info .lt {
-  width: 50%;
-  height: 4rem;
-  float: left;
-}
-
-.info .rt {
-  width: 50%;
-  height: 4rem;
-  float: left;
-}
-
-.info h5 {
-  width: 4rem;
-  height: 0.6rem;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  background: url("../static/img/newRecord/record_title.png");
-  background-repeat: no-repeat;
-  background-size: 100%;
-  background-position: top center;
-  font-family: vista;
-  font-weight: normal;
-  font-size: 0.3rem;
-  color: #333;
-  text-align: center;
-  line-height: 0.6rem;
-}
-
-.info .detail {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-}
-
-.detail em {
-  font-size: 1.8rem;
-  color: #fff;
-  font-style: normal;
-}
-
-.detail span {
-  color: #fff;
-  font-size: 0.3rem;
-  font-family: vista;
-}
-
-.info img {
-  position: relative;
-  width: 2rem;
-  height: 2rem;
-  float: left;
-  left: 0;
-  bottom: 1rem;
-}
-</style>

src/components/newStudent.vue

@@ -3,16 +3,16 @@
     <div :class="[{'newStudentContainer':true}]">
       <div class="info">
         <ul :class="[{'many':studentInfo.Rs.length > 6},{'two':studentInfo.Rs.length >= 2 && studentInfo.Rs.length  <= 6}]">
-          <li v-for="(s,i) in studentInfo.Rs" v-if="i < 12"
+          <li v-for="(s,i) in studentInfo.Rs" v-if="i < 10"
               :class="[{'bigLi':studentInfo.Rs.length <= 4},{'smallLi':studentInfo.Rs.length > 4}]">
             <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">
+            <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
             <span class="names">{{ s.Name }}</span>
           </li>
         </ul>
-
       </div>
     </div>
+    <div v-show="studentInfo.studentTime > 0" class="countdown">{{studentInfo.studentTime}}</div>
   </el-dialog>
 </template>
 
@@ -87,22 +87,24 @@ ul {
   justify-content: center;
   flex-wrap: wrap;
   flex-grow: 1;
-  padding-top: 15%;
+  padding-top: 18%;
 
   &.two {
     justify-content: space-around;
-    padding-top: 16%;
+    padding-top: 20%;
     width: 70%;
 
     .bigLi img {
       width: 1.9rem;
+      height: 1.9rem;
     }
   }
 
   &.many {
     justify-content: space-around;
     // justify-content: space-between;
-    padding-top: 11.5%;
+    padding-top: 13.5%;
+    width: 70%;
   }
 
   li {
@@ -112,6 +114,7 @@ ul {
     img {
       @include cube;
       width: 1.6rem;
+      height: 1.6rem;
       border-radius: 250rem;
 
       &.girl {
@@ -128,6 +131,7 @@ ul {
 
       img {
         width: 1.6rem;
+        height: 1.6rem;
       }
     }
 
@@ -136,6 +140,7 @@ ul {
 
       img {
         width: 2.3rem;
+        height: 2.3rem;
       }
     }
 
@@ -157,4 +162,12 @@ ul {
   }
 }
 
+.countdown {
+  width: 1.5rem;
+  position: relative;
+  font-size: 0.6rem;
+  color: #797979;
+  margin: 0 auto;
+  margin-top: 0.8rem;
+}
 </style>

src/components/newStudent2.vue

@@ -1,222 +0,0 @@
-<template>
-  <el-dialog title="" class="sss" :visible.sync="studentInfo.dialogVisible" :close-on-click-modal="false">
-    <div :class="[{'newStudentContainer1':bg == 0},{'newStudentContainer2':bg != 0}]">
-      <div class="info">
-        <span v-for="(s,i) in studentInfo.Rs" v-if="i < 8">{{ s.Name }}</span>
-      </div>
-      <div class="studentTips">
-                <span>
-                    欢迎新学员加入英泓小飞龙俱乐部
-                </span>
-        <span>
-                    欢迎入伙，以后你就是英泓小飞龙俱乐部的人啦，<i style="color: red">❤</i>！
-                </span>
-      </div>
-      <div class="progress">
-        <el-progress :percentage="studentInfo.percent" :show-text="false"></el-progress>
-      </div>
-    </div>
-    <img class="long" src="../static/img/newStudent/long.png" alt="">
-  </el-dialog>
-
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      percent: 0,
-      totalTime: 0,
-      sumTime: 4,
-      bg: 0,
-    };
-  },
-  props: ['studentInfo'],
-  watch: {
-    studentInfo: {
-      handler(newName, oldName) {
-        let that = this;
-        if (newName.Rs != '') {
-          if (newName.Rs.length > 3) {
-            that.bg = 0
-          } else {
-            that.bg = 1
-          }
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  }
-}
-</script>
-
-<style scoped>
-/*成就彩蛋*/
-/deep/ .el-dialog {
-  width: 80%;
-  height: 6rem;
-  background: none;
-  /*background: url("../static/img/newStudent/newStudent1.png");*/
-  /*background-position: top center;*/
-  /*background-repeat: no-repeat;*/
-  /*background-size: 100% 100%;*/
-  box-shadow: none;
-  border: none;
-  padding-bottom: 1rem;
-}
-
-/deep/ .el-dialog__header {
-  display: none;
-}
-
-.newStudentContainer1 {
-  height: 6rem;
-  margin-top: 0;
-  background: url("../static/img/newStudent/newStudent1.png");
-  background-position: top center;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-
-.newStudentContainer2 {
-  height: 6rem;
-  margin-top: 0;
-  background: url("../static/img/newStudent/newStudent2.png");
-  background-position: top center;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-
-.info .lt {
-  width: 50%;
-  height: 4rem;
-  float: left;
-}
-
-.info .rt {
-  width: 50%;
-  height: 4rem;
-  float: left;
-}
-
-.info h5 {
-  width: 4rem;
-  height: 0.6rem;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  background: url("../static/img/newRecord/record_title.png");
-  background-repeat: no-repeat;
-  background-size: 100%;
-  background-position: top center;
-  font-family: vista;
-  font-weight: normal;
-  font-size: 0.3rem;
-  color: #333;
-  text-align: center;
-  line-height: 0.6rem;
-}
-
-.info .detail {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-}
-
-.detail em {
-  font-size: 1.8rem;
-  color: #fff;
-  font-style: normal;
-}
-
-.detail span {
-  color: #fff;
-  font-size: 0.6rem;
-  font-family: vista;
-}
-
-.info img {
-  position: relative;
-  width: 2rem;
-  height: 2rem;
-  float: left;
-  left: 0;
-  bottom: 1rem;
-}
-
-.info {
-  width: 50%;
-  height: 2rem;
-  overflow: hidden;
-  display: flex;
-  margin: 0 auto;
-  padding-top: 2.9rem;
-  flex: 1;
-  flex-wrap: wrap;
-  /*justify-content: space-between;*/
-  justify-content: center;
-}
-
-.info span {
-  font-weight: 900;
-  font-size: 0.4rem;
-  text-align: center;
-  color: #FDED2E;
-  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.38);
-  /*margin-right: 1rem;*/
-  padding-left: 0.1rem;
-  padding-right: 0.1rem;
-  padding-bottom: 0rem;
-
-}
-
-.studentTips {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-}
-
-.studentTips span {
-  width: 100%;
-  height: 0.3rem;
-  overflow: hidden;
-  display: flex;
-  margin: 0 auto;
-  padding-top: 0.1rem;
-  text-align: center;
-  font-weight: 500;
-  font-size: 0.3rem;
-  color: #000;
-  align-items: center;
-  justify-content: center;
-}
-
-.progress {
-  position: relative;
-  top: 0.1rem;
-  width: 94%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-}
-
-/deep/ .el-progress-bar .el-progress-bar__outer {
-  height: 0.4rem;
-
-}
-
-/deep/ .el-progress-bar__inner {
-  background-color: #FFEE00;
-}
-
-.long {
-  position: relative;
-  float: right;
-  bottom: 1.6rem;
-  right: -0.5rem;
-  width: 1.5rem;
-}
-</style>

src/components/pkstudent.vue

@@ -2,20 +2,22 @@
   <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">
+        <!-- <div class="power" v-if="s.RealHr != 0"> -->
+        <div class="power">
           <power :cur-power="s.PowerPercent"></power>
         </div>
         <div class="userinfo">
           <div class="lt">
             <span>
               <em v-if="s.RealHr != 0">{{ s.ActivePercent |max100 }}</em>
+              <em v-else>---</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">
+              <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
               <div class="names">
               <span>
                   {{ s.Name }}
@@ -28,19 +30,17 @@
           <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>
+                <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>
+                    {{ 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>
+                <em v-else>---</em>
               </div>
             </span>
           </div>
@@ -50,14 +50,18 @@
             <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>
+          <span>
+            <img src="../assets/imgs/student/ei.svg" class=""/>
+            <em>{{ s.EI |fmtInt }}</em>
+          </span>
+          <!-- <span>
+            <img src="../assets/imgs/student/sport.svg" class=""/>
+            <em>{{ s.PureCalorieNoVo2 |fmtInt }}</em>
+          </span> -->
         </div>
       </div>
     </li>
@@ -350,6 +354,7 @@ ul {
       img {
         @include cube;
         width: 2.6rem;
+        height: 2.6rem;
         border-radius: 250rem;
 
         &.girl {
@@ -455,6 +460,14 @@ ul {
   bottom: 2.8rem;
 }
 
+.IsBirthday {
+  width: 1.1rem;
+  float: left;
+  position: relative;
+  bottom: 2.18rem;
+  left: 0.58rem;
+}
+
 .max {
   width: 12rem;
   height: 3.5rem;
@@ -477,6 +490,7 @@ ul {
 
     img {
       width: 1.8rem;
+      height: 1.8rem;
     }
   }
 
@@ -538,6 +552,7 @@ ul {
 
     img {
       width: 1.5rem;
+      height: 1.5rem;
       border-width: 2px !important;
     }
   }
@@ -584,6 +599,12 @@ ul {
     bottom: 2rem;
     right: 0.1rem;
   }
+      
+  .IsBirthday {
+    width: 0.9rem;
+    bottom: 2.05rem;
+    left: 0.68rem;
+  }
 }
 
 .three {
@@ -604,6 +625,7 @@ ul {
 
     img {
       width: 2.2rem;
+      height: 2.2rem;
     }
   }
 
@@ -646,6 +668,7 @@ ul {
 
     img {
       width: 1.5rem;
+      height: 1.5rem;
     }
 
     .names {
@@ -714,6 +737,7 @@ ul {
 
     img {
       width: 1.3rem;
+      height: 1.3rem;
     }
 
     .names {
@@ -791,6 +815,7 @@ ul {
 
     img {
       width: 0.9rem;
+      height: 0.9rem;
       border-width: 2px !important;
     }
 
@@ -843,6 +868,13 @@ ul {
       font-size: 0.2rem;
     }
   }
+
+  .IsBirthday {
+    width: 0.49rem;
+    bottom: 1.15rem;
+    left: 0.31rem;
+  }
+  
   /deep/ .powerContainer img {
     width: 0.25rem;
   }

src/components/student.vue

@@ -17,7 +17,7 @@
           <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">
+              <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
               <div class="names">
               <span>
                   {{ s.Name }}
@@ -43,9 +43,7 @@
                 <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>
+                <em v-else>---</em>
               </div>
             </span>
           </div>
@@ -438,6 +436,7 @@ ul {
       img {
         @include cube;
         width: 2.6rem;
+        height: 2.6rem;
         border-radius: 250rem;
 
         &.girl {
@@ -547,6 +546,14 @@ ul {
   right: 0.3rem;
 }
 
+.IsBirthday {
+  width: 1.7rem;
+  float: left;
+  position: relative;
+  bottom: 3.3rem;
+  left: 0.95rem;
+}
+
 .max {
   width: 12rem;
   height: 5.1rem;
@@ -620,6 +627,12 @@ ul {
     bottom: 2.65rem;
     right: 0rem;
   }
+    
+  .IsBirthday {
+    width: 1.4rem;
+    bottom: 2.9rem;
+    left: 0.67em;
+  }
 
   .names {
     width: 1.6rem !important;
@@ -675,6 +688,12 @@ ul {
     bottom: 2.65rem;
     right: 0.1rem;
   }
+    
+  .IsBirthday {
+    width: 1.4rem;
+    bottom: 2.8rem;
+    left: 0.72rem;
+  }
 
   .names {
     width: 1.6rem !important;
@@ -749,6 +768,12 @@ ul {
     right: -0.01rem !important;
     width: 0.4rem !important;
   }
+    
+  .IsBirthday {
+    width: 0.9rem;
+    bottom: 1.85rem;
+    left: 0.49rem;
+  }
 
   .names {
     width: 1.2rem !important;
@@ -778,9 +803,9 @@ ul {
     }
   }
 
-  .md {
-    padding-top: 0;
-  }
+  // .md {
+  //   padding-top: 0;
+  // }
 
   .userinfo {
     height: 1.33rem;
@@ -846,6 +871,12 @@ ul {
     bottom: 2.65rem;
     right: 0.05rem;
   }
+    
+  .IsBirthday {
+    width: 0.6rem;
+    bottom: 1.50rem;
+    left: 0.41rem;
+  }
 
   .names {
     width: 1rem !important;
@@ -879,7 +910,7 @@ ul {
   }
 
   .md {
-    padding-top: 0;
+    padding-top: 0.04rem;
   }
 
   .userinfo {
@@ -950,6 +981,12 @@ ul {
     bottom: 2.65rem;
     right: 0.05rem;
   }
+    
+  .IsBirthday {
+    width: 0.49rem;
+    bottom: 1.15rem;
+    left: 0.32rem;
+  }
 
   .names {
     width: 0.75rem !important;

src/components/student2.vue

@@ -1,1865 +0,0 @@
-<template>
-  <ul>
-    <li v-for="(s,i) in students" :class="studentsClassName[i].name" v-show="students"
-        v-if="students.length > 0">
-      <div class="ltLi" v-if="students.length == 1"></div>
-      <div class="centerLi">
-        <div class="topLi">
-          <div class="human">
-                                <span class="name">
-                                    <div class="nameLt">
-                                        <i class="el-icon-male" v-if="s.Sex == 1"></i>
-                                        <i class="el-icon-female" v-if="s.Sex == 2"></i>
-                                    </div>
-                                    <div class="nameMd">{{ s.Name }}</div>
-                                    <div class="namert" v-if="s.RealHr != 0">
-                                        <power :cur-power="s.PowerPercent"></power>
-                                    </div>
-                                </span>
-            <div class="head">
-              <img :src="s.Head" alt="" v-if="s.Head">
-              <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head">
-
-              <!-- 生日快乐 -->
-              <div class="birth" v-if="s.IsBirthday == 1">
-                <img src="../assets/img/birth/birthCrow.png" class="birthCrow"/>
-                <img src="../assets/img/birth/birthText.png" class="birthText"/>
-              </div>
-              <!--私有心率带-->
-              <div class="isPrivate" v-if="s.IsPrivate == 1">
-                <i></i>
-              </div>
-            </div>
-          </div>
-          <div class="cla">
-            <em v-if="s.RealHr != 0">{{ s.ActivePercent |max100 }}</em>
-            <em class="plus" v-if="s.ActivePercent == 0 && s.RealHr == 0">
-              ---
-            </em>
-          </div>
-          <div class="lcla">
-            <span>%</span>
-          </div>
-          <!--fastJump-->
-          <!--heartJump-->
-          <div>
-            <div class="lhj">
-              <div :class="[{'heartJump':true}]">
-                                        <span class="fastJump" v-if="s.RealHr != 0"
-                                              v-show="parseInt(s.ActivePercent) > 90">{{ s.RealHr }}</span>
-                <span class="normalJump" v-if="s.RealHr != 0"
-                      v-show="parseInt(s.ActivePercent) <= 90 && parseInt(s.ActivePercent) > 30">
-                                            {{ s.RealHr }}</span>
-                <span class="slowJump" v-if="s.RealHr != 0"
-                      v-show="parseInt(s.ActivePercent) <= 30">{{ s.RealHr }}</span>
-                <span class="plus" v-if="s.RealHr == 0">
-                                        ---
-                                    </span>
-              </div>
-            </div>
-            <div class="rhj">
-              <img src="../static/img/heart.svg" class=""/>
-            </div>
-          </div>
-        </div>
-        <div class="bottomLi">
-          <div class="btcla">
-            <img src="../static/img/s1.svg"/>
-            <span>{{ s.Cle |fmtInt }}</span>
-          </div>
-          <div class="btck">
-            <img src="../static/img/s2.svg"/>
-            <span>{{ s.PureCalorieNoVo2   |fmtInt }}</span>
-          </div>
-          <div class="step">
-            <img src="../static/img/ck.svg"/>
-            <span>{{ s.Ck  |fmtFloat }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="rtLi" v-if="students.length == 1"></div>
-      <img src="../static/img/long.png" class="longIcon" v-if="students.length == 1"/>
-    </li>
-
-  </ul>
-</template>
-
-<script>
-import power from '@/components/power'
-
-export default {
-  props: ['students', 'studentsClassName'],
-  filters: {
-    fmtNum(val) {
-      if (val == 0) {
-        return '--'
-      } else {
-        if (parseInt(val) < 0) return 0;
-        if (parseInt(val) > 0) return val
-      }
-    },
-    fmtFloat(val) {
-      if (val == 0) {
-        return '0.0'
-      } else {
-        return parseFloat(val).toFixed(1);
-      }
-    },
-    fmtInt(val) {
-      if (val == 0) {
-        return '0'
-      } else {
-        // return parseFloat(val).toFixed(2);
-        return parseInt(val);
-      }
-    },
-    max100(val) {
-      if (val <= 100) {
-        return val
-      } else {
-        return 100
-      }
-    }
-  },
-  components: {
-    power
-  }
-}
-</script>
-
-<style scoped>
-
-ul, li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.blue .centerLi {
-  background: #028FE1;
-}
-
-.violet .centerLi {
-  background: #6D26FA;
-}
-
-.green .centerLi {
-  background: #059F00;
-}
-
-.yellow .centerLi {
-  background: #DFB200;
-}
-
-.brown .centerLi {
-  background: #EA8813;
-}
-
-.red .centerLi {
-  background: #CF1122;
-}
-
-
-.slowJump {
-  animation: mymove 3s infinite;
-  -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
-  animation-direction: alternate; /*轮流反向播放动画。*/
-  animation-timing-function: ease-in-out; /*动画的速度曲线*/
-  /* Safari 和 Chrome */
-  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
-  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-}
-
-.normalJump {
-  animation: mymove 2s infinite;
-  -webkit-animation: mymove 2s infinite; /*Safari and Chrome*/
-  animation-direction: alternate; /*轮流反向播放动画。*/
-  animation-timing-function: ease-in-out; /*动画的速度曲线*/
-  /* Safari 和 Chrome */
-  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
-  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-}
-
-.fastJump {
-  animation: mymove 1s infinite;
-  -webkit-animation: mymove 1s infinite; /*Safari and Chrome*/
-  animation-direction: alternate; /*轮流反向播放动画。*/
-  animation-timing-function: ease-in-out; /*动画的速度曲线*/
-  /* Safari 和 Chrome */
-  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
-  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-}
-
-@keyframes mymove {
-  0% {
-    transform: scale(1); /*开始为原始大小*/
-  }
-  25% {
-    transform: scale(1.1); /*放大1.1倍*/
-  }
-  50% {
-    transform: scale(1);
-  }
-  75% {
-    transform: scale(1.1);
-  }
-
-}
-
-@-webkit-keyframes mymove /*Safari and Chrome*/
-{
-  0% {
-    transform: scale(1); /*开始为原始大小*/
-  }
-  25% {
-    transform: scale(1.1); /*放大1.1倍*/
-  }
-  50% {
-    transform: scale(1);
-  }
-  75% {
-    transform: scale(1.1);
-  }
-}
-
-
-/*userList*/
-
-.userList {
-  width: 100%;
-  /*min-height: 76%;*/
-  /*height: 76%;*/
-  overflow: hidden;
-  overflow-y: scroll;
-  display: block;
-  margin: 0.1rem auto;
-}
-
-.userList ul {
-  /*width: 100%;*/
-  height: 98%;
-  overflow: hidden;
-  display: block;
-  margin: 0.1rem;
-  margin-bottom: 0;
-  overflow-y: scroll;
-}
-
-.userList li {
-  display: block;
-  z-index: 666;
-}
-
-.centerLi {
-  width: 99.8%;
-  overflow: hidden;
-  float: left;
-  color: #fff;
-
-}
-
-.human img {
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  border: 2px solid #fff;
-  border-radius: 33rem;
-  /*box-shadow: 0px 0px 5px #fff;*/
-}
-
-s {
-  text-decoration: none;
-}
-
-em {
-  font-style: normal;
-}
-
-.cla {
-  position: relative;
-  float: left;
-  text-align: right;
-}
-
-.centerLi .human {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  padding: 0;
-}
-
-.human .name {
-  width: 100%;
-  display: block;
-  margin: 0 auto;
-  overflow: hidden;
-}
-
-.human .name div {
-  float: left;
-  width: 20%;
-  text-align: left;
-  text-indent: 0.1rem;
-}
-
-.human .name .nameMd {
-  width: 60%;
-  text-align: center;
-  text-indent: 0;
-}
-
-.lcla span {
-  position: relative;
-  float: left;
-}
-
-.cla em {
-  text-align: right;
-}
-
-.heartJump {
-  position: relative;
-}
-
-.lhj span {
-  position: relative;
-  text-align: right;
-  float: left;
-}
-
-.rhj {
-  float: right;
-}
-
-.rhj img {
-  position: relative;
-  float: right;
-}
-
-
-.bottomLi {
-  width: 96%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  margin-top: 0.3rem;
-  font-weight: normal !important;
-  color: #fff;
-  text-align: left;
-  line-height: 0.7rem;
-}
-
-.bottomLi img {
-  float: left;
-  margin-left: 10%;
-}
-
-.bottomLi .btcla {
-  width: 33.333%;
-  float: left;
-}
-
-.bottomLi .btck {
-  width: 33.333%;
-  float: left;
-}
-
-.bottomLi .step {
-  width: 33.333%;
-  float: right;
-}
-
-.bottomLi span {
-  float: left;
-  text-align: left;
-}
-
-.topLi {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  overflow: hidden;
-}
-
-/*max*/
-.max {
-  width: 12rem;
-  height: 5.6rem;
-  display: block;
-  margin: 0 auto;
-  margin-top: 1rem;
-}
-
-.max .centerLi {
-  width: 90%;
-  height: 100%;
-}
-
-.max .ltLi {
-  width: 5%;
-  height: 100%;
-  float: left;
-  background: url("../static/img/ltCube.png");
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-}
-
-.max .rtLi {
-  width: 5%;
-  height: 100%;
-  float: right;
-  background: url("../static/img/rtCube.png");
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-}
-
-.max .human .name {
-  font-size: 0.5rem;
-  height: 1rem;
-  line-height: 1rem;
-}
-
-.max .human img {
-  width: 3rem;
-  height: 3rem;
-}
-
-.max .cla {
-  width: 3rem;
-  height: 2rem;
-  top: -2.4rem;
-  left: 0;
-  font-size: 0.55rem;
-}
-
-.max .lcla span {
-  font-size: 0.7rem;
-  top: -2.4rem;
-  float: left;
-  left: 0;
-}
-
-.max .cla em {
-  font-size: 1.5rem;
-  left: 1rem;
-}
-
-.max .lhj span {
-  width: 3rem;
-  height: 2rem;
-  top: -2.4rem;
-  left: 3.4rem;
-  font-size: 1.5rem;
-}
-
-.max .rhj img {
-  width: 0.5rem;
-  top: -2.3rem;
-  right: 0.3rem;
-}
-
-.max .longIcon {
-  position: absolute;
-  width: 1.96rem;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  bottom: 2rem;
-  right: 3.5rem;
-}
-
-.max .topLi {
-  height: 4.5rem;
-}
-
-.max .bottomLi {
-  font-size: 0.5rem;
-  text-align: center;
-}
-
-.max .bottomLi .btck {
-  /*text-indent: 1.6rem;*/
-}
-
-.max .bottomLi img {
-  width: 0.5rem;
-  height: 0.5rem;
-  margin-top: 0.1rem;
-}
-
-.max .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.2rem;
-}
-
-.max .bottomLi .btck {
-  width: 29%;
-  padding-left: 1%;
-}
-
-.max .bottomLi .step {
-  width: 24%;
-  padding-right: 2%;
-}
-
-.max .cla em.plus {
-  position: relative;
-  left: -0.5rem
-}
-
-.max .lhj span.plus {
-  position: relative;
-  left: 2.75rem
-}
-
-.max .bottomLi .btcla img {
-  width: 0.5rem;
-  height: 0.5rem;
-}
-
-.max .bottomLi .btcla span {
-  text-indent: 0.1rem;
-}
-
-.max .bottomLi .btck span {
-  text-indent: 0.1rem;
-}
-
-.max .bottomLi .btck img {
-  width: 0.6rem;
-  height: 0.6rem;
-  margin-top: 0.05rem;
-}
-
-
-/*two*/
-.two {
-  width: 49%;
-  height: 5.33rem;
-  float: left;
-  overflow: hidden;
-  margin-top: 6%
-}
-
-.two .centerLi {
-  /*border: 1px solid #fff;*/
-}
-
-.two:nth-child(2) {
-  float: right;
-}
-
-.two .human .name {
-  width: 100%;
-  height: 1rem;
-  font-size: 0.5rem;
-  line-height: 1rem;
-}
-
-.two .human img {
-  width: 2.8rem;
-  height: 2.8rem;
-}
-
-.two .cla {
-  width: 2.9rem;
-  height: 2rem;
-  top: -2.4rem;
-  left: 0;
-  font-size: 0.5rem;
-}
-
-.two .lcla span {
-  font-size: 0.55rem;
-  top: -2.3rem;
-  float: left;
-  left: 0;
-}
-
-.two .cla em {
-  font-size: 1.3rem;
-  left: 1rem;
-}
-
-.two .lhj span {
-  width: 3rem;
-  height: 2rem;
-  top: -2.4rem;
-  left: 2.4rem;
-  font-size: 1.2rem;
-}
-
-.two .rhj img {
-  width: 0.45rem;
-  top: -2.2rem;
-  right: 0.3rem;
-}
-
-.two .topLi {
-  height: 4.2rem;
-}
-
-.two .bottomLi {
-  font-size: 0.4rem;
-  text-align: center;
-}
-
-.two .bottomLi img {
-  width: 0.5rem;
-  height: 0.5rem;
-  margin-top: 0.1rem;
-}
-
-.two .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.2rem;
-}
-
-.two .bottomLi .btck {
-  width: 29%;
-  padding-left: 0%;
-}
-
-.two .bottomLi .step {
-  width: 26%;
-  padding-right: 1%;
-}
-
-.two .cla em.plus {
-  position: relative;
-  left: -0.5rem
-}
-
-.two .lhj span.plus {
-  position: relative;
-  left: 2.2rem
-}
-
-.two .bottomLi .btck img {
-  width: 0.6rem;
-  height: 0.6rem;
-  margin-top: 0.05rem;
-}
-
-.two .bottomLi .btck span {
-  text-indent: 0.1rem;
-}
-
-
-/*three*/
-.three {
-  width: 50%;
-  height: 4rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 1%
-}
-
-.three .centerLi {
-  width: 96%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  float: none;
-}
-
-.three .human .name {
-  width: 100%;
-  height: 0.8rem;
-  font-size: 0.4rem;
-  line-height: 0.8rem;
-}
-
-.three .human img {
-  width: 2.1rem;
-  height: 2.1rem;
-  margin-top: 0.1rem;
-}
-
-.three .cla {
-  width: 2.9rem;
-  height: 2rem;
-  top: -1.8rem;
-  left: 0;
-  font-size: 0.4rem;
-}
-
-.three .lcla span {
-  font-size: 0.45rem;
-  top: -1.8rem;
-  float: left;
-  left: 0;
-}
-
-.three .cla em {
-  font-size: 1.2rem;
-  left: 1rem;
-}
-
-.three .lhj span {
-  width: 3rem;
-  height: 2rem;
-  top: -1.70rem;
-  left: 2.3rem;
-  font-size: 1.1rem;
-}
-
-.three .rhj img {
-  width: 0.4rem;
-  top: -1.7rem;
-  right: 0.4rem;
-}
-
-.three .topLi {
-  /*height: 3.26rem;*/
-  height: 3.18rem;
-}
-
-.three .bottomLi {
-  font-size: 0.4rem;
-  margin-top: 0rem;
-  text-align: center;
-}
-
-
-.three .bottomLi img {
-  width: 0.5rem;
-  height: 0.5rem;
-  margin-top: 0.1rem;
-}
-
-.three .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.2rem;
-}
-
-.three .bottomLi .btck {
-  width: 30%;
-  padding-left: 2%;
-}
-
-.three .bottomLi .step {
-  width: 25%;
-  padding-right: 2%;
-}
-
-.three .cla em.plus {
-  position: relative;
-  left: -0.5rem
-}
-
-.three .lhj span.plus {
-  position: relative;
-  left: 1.9rem
-}
-
-.three .bottomLi .btck img {
-  width: 0.6rem;
-  height: 0.6rem;
-  margin-top: 0.05rem;
-}
-
-.three .bottomLi .btck span {
-  text-indent: 0.1rem;
-}
-
-/*six*/
-.six {
-  width: 33.3333%;
-  height: 3.6rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 1%
-}
-
-.six .centerLi {
-  width: 98%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  float: none;
-}
-
-.six .human .name {
-  width: 100%;
-  height: 0.8rem;
-  font-size: 0.35rem;
-  line-height: 0.8rem;
-}
-
-.six .human img {
-  width: 1.6rem;
-  height: 1.6rem;
-  margin-top: 0.1rem;
-}
-
-.six .cla {
-  width: 2rem;
-  height: 2rem;
-  top: -1.3rem;
-  left: 0;
-  font-size: 0.3rem;
-}
-
-.six .lcla span {
-  font-size: 0.4rem;
-  top: -1.4rem;
-  float: left;
-  left: -0.05rem;
-}
-
-.six .cla em {
-  font-size: 0.9rem;
-  left: 1rem;
-}
-
-.six .lhj span {
-  width: 2rem;
-  height: 2rem;
-  top: -1.3rem;
-  left: 1.6rem;
-  font-size: 0.85rem;
-}
-
-.six .rhj img {
-  width: 0.3rem;
-  top: -1.3rem;
-  right: 0.2rem;
-}
-
-.six .topLi {
-  height: 2.6rem;
-}
-
-.six .bottomLi {
-  width: 98%;
-  font-size: 0.325rem;
-  margin-top: 0.3rem;
-  text-align: center;
-}
-
-.six .bottomLi img {
-  width: 0.4rem;
-  margin-top: 0.15rem;
-}
-
-.six .bottomLi .btcla img {
-  width: 0.3rem;
-  /*margin-top: 0.1rem;*/
-}
-
-.six .bottomLi .btck img {
-  width: 0.4rem;
-  margin-top: 0.1rem;
-}
-
-.six .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.1rem;
-}
-
-.six .bottomLi .btcla {
-  width: 30%;
-}
-
-.six .bottomLi .btck {
-  width: 33%;
-  padding-left: 3%;
-}
-
-.six .bottomLi .step {
-  width: 28%;
-  padding-right: 0%;
-}
-
-.six .cla em.plus {
-  position: relative;
-  left: -0.3rem
-}
-
-.six .lhj span.plus {
-  position: relative;
-  left: 1.3rem
-}
-
-.six .bottomLi .btck img {
-  width: 0.5rem;
-  height: 0.5rem;
-  margin-top: 0.12rem;
-}
-
-
-/*nine*/
-.nine {
-  width: 33.3333%;
-  height: 2.7rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 0.1rem
-}
-
-.nine .centerLi {
-  width: 98%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  float: none;
-}
-
-.nine .human .name {
-  width: 100%;
-  height: 0.6rem;
-  font-size: 0.3rem;
-  line-height: 0.6rem;
-}
-
-.nine .human img {
-  width: 1.2rem;
-  height: 1.2rem;
-  margin-top: 0.1rem;
-}
-
-.nine .cla {
-  width: 1.9rem;
-  height: 2rem;
-  top: -1.1rem;
-  left: 0;
-  font-size: 0.25rem;
-}
-
-.nine .lcla span {
-  font-size: 0.35rem;
-  top: -1.1rem;
-  float: left;
-  left: 0.05rem;
-}
-
-.nine .cla em {
-  font-size: 0.7rem;
-  left: 1rem;
-}
-
-.nine .lhj span {
-  width: 1.9rem;
-  height: 2rem;
-  top: -1.1rem;
-  left: 1.6rem;
-  font-size: 0.7rem;
-}
-
-.nine .rhj img {
-  width: 0.25rem;
-  top: -1.0rem;
-  right: 0.4rem;
-}
-
-.nine .topLi {
-  height: 2rem;
-}
-
-.nine .bottomLi {
-  width: 98%;
-  font-size: 0.3rem;
-  margin-top: 0.05rem;
-  text-align: center;
-}
-
-
-.nine .bottomLi img {
-  width: 0.35rem;
-  height: 0.35rem;
-  margin-top: 0.2rem;
-}
-
-.nine .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.1rem;
-}
-
-.nine .bottomLi .btcla {
-  width: 30%;
-}
-
-.nine .bottomLi .btck {
-  width: 32%;
-  padding-left: 5%;
-}
-
-.nine .bottomLi .step {
-  width: 28%;
-  padding-right: 0%;
-}
-
-.nine .cla em.plus {
-  position: relative;
-  left: -0.3rem
-}
-
-.nine .lhj span.plus {
-  position: relative;
-  left: 1.3rem
-}
-
-.nine .bottomLi .btck img {
-  width: 0.45rem;
-  height: 0.45rem;
-  margin-top: 0.15rem;
-}
-
-/*ten*/
-.ten {
-  width: 25%;
-  height: 2.6rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 0.2rem
-}
-
-.ten .centerLi {
-  width: 98%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  float: none;
-}
-
-.ten .human .name {
-  width: 100%;
-  height: 0.5rem;
-  font-size: 0.3rem;
-  line-height: 0.55rem;
-  margin-bottom: 0.1rem;
-}
-
-.ten .human img {
-  width: 1.1rem;
-  height: 1.1rem;
-  margin-top: 0.2rem;
-}
-
-.ten .cla {
-  width: 1.4rem;
-  height: 1.5rem;
-  top: -0.95rem;
-  left: 0;
-  font-size: 0.2rem;
-}
-
-.ten .lcla span {
-  font-size: 0.3rem;
-  top: -0.95rem;
-  float: left;
-  left: -0rem;
-}
-
-.ten .cla em {
-  font-size: 0.6rem;
-  left: 0.5rem;
-}
-
-.ten .lhj span {
-  width: 1.4rem;
-  height: 2.1rem;
-  top: -0.9rem;
-  left: 1.4rem;
-  font-size: 0.6rem;
-}
-
-.ten .rhj img {
-  width: 0.2rem;
-  top: -0.9rem;
-  right: 0.15rem;
-}
-
-.ten .topLi {
-  height: 1.85rem;
-}
-
-.ten .bottomLi {
-  width: 98%;
-  font-size: 0.25rem;
-  margin-top: 0.1rem;
-  text-align: center;
-}
-
-.ten .bottomLi img {
-  width: 0.3rem;
-  height: 0.3rem;
-  margin-top: 0.25rem;
-}
-
-.ten .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.1rem;
-}
-
-.ten .bottomLi .btcla {
-  width: 30%;
-}
-
-.ten .bottomLi .btck {
-  width: 32%;
-  padding-left: 3%;
-}
-
-.ten .bottomLi .step {
-  width: 29%;
-  padding-right: 0%;
-}
-
-.ten .cla em.plus {
-  position: relative;
-  left: -0.3rem
-}
-
-.ten .lhj span.plus {
-  position: relative;
-  left: 1.2rem;
-  line-height: 0.75rem;
-}
-
-.ten .btck img {
-  width: 0.4rem;
-  height: 0.4rem;
-  margin-top: 0.18rem;
-}
-
-/*twelve*/
-.twelve {
-  width: 20%;
-  height: 2.4rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 0.3rem
-}
-
-.twelve .centerLi {
-  width: 98%;
-  height: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  float: none;
-}
-
-.twelve .human .name {
-  width: 100%;
-  height: 0.5rem;
-  font-size: 0.25rem;
-  line-height: 0.7rem;
-  margin-bottom: 0.2rem;
-}
-
-.twelve .human img {
-  width: 0.9rem;
-  height: 0.9rem;
-}
-
-.twelve .cla {
-  width: 1.2rem;
-  height: 1.2rem;
-  top: -0.8rem;
-  left: -0.1rem;
-  font-size: 0.2rem;
-}
-
-.twelve .lcla span {
-  font-size: 0.25rem;
-  top: -0.8rem;
-  float: left;
-  left: -0.07rem;
-}
-
-.twelve .cla em {
-  font-size: 0.5rem;
-  left: 0.5rem;
-}
-
-.twelve .lhj span {
-  width: 1.2rem;
-  height: 1.2rem;
-  top: -0.8rem;
-  left: 0.9rem;
-  font-size: 0.5rem;
-}
-
-.twelve .rhj img {
-  width: 0.18rem;
-  top: -0.75rem;
-  right: 0.15rem;
-}
-
-.twelve .topLi {
-  height: 1.65rem;
-}
-
-.twelve .bottomLi {
-  width: 98%;
-  font-size: 0.225rem;
-  margin-top: 0.1rem;
-  text-align: center;
-}
-
-.twelve .bottomLi img {
-  width: 0.25rem;
-  height: 0.25rem;
-  margin-top: 0.25rem;
-}
-
-.twelve .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.1rem;
-}
-
-.twelve .bottomLi .btcla {
-  width: 30%;
-}
-
-.twelve .bottomLi .btck {
-  width: 32%;
-  padding-left: 2%;
-}
-
-.twelve .bottomLi .step {
-  width: 27%;
-  padding-right: 1%;
-}
-
-.twelve .cla em.plus {
-  position: relative;
-  left: -0.2rem
-}
-
-.twelve .lhj span.plus {
-  position: relative;
-  left: 0.8rem
-}
-
-.twelve .btck img {
-  width: 0.3rem;
-  height: 0.3rem;
-}
-
-.twelve .btck img {
-  width: 0.35rem;
-  height: 0.35rem;
-  margin-top: 0.22rem;
-}
-
-
-/*sixteen*/
-.sixteen {
-  width: 20%;
-  height: 1.95rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 0.1rem
-}
-
-.sixteen .centerLi {
-  width: 98%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  float: none;
-}
-
-.sixteen .human .name {
-  width: 100%;
-  height: 0.4rem;
-  font-size: 0.22rem;
-  line-height: 0.45rem;
-  margin-top: 0.1rem;
-  margin-bottom: 0.1rem;
-
-}
-
-.sixteen .human img {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
-.sixteen .cla {
-  width: 1.2rem;
-  height: 1.4rem;
-  top: -0.7rem;
-  left: 0;
-  font-size: 0.15rem;
-}
-
-.sixteen .lcla span {
-  font-size: 0.275rem;
-  top: -0.7rem;
-  float: left;
-  left: -0rem;
-}
-
-.sixteen .cla em {
-  font-size: 0.5rem;
-  left: 0.2rem;
-}
-
-.sixteen .lhj span {
-  width: 1rem;
-  height: 1.8rem;
-  top: -0.7rem;
-  left: 1rem;
-  font-size: 0.5rem;
-}
-
-.sixteen .rhj img {
-  width: 0.17rem;
-  top: -0.65rem;
-  right: 0.15rem;
-}
-
-.sixteen .topLi {
-  height: 1.4rem;
-}
-
-.sixteen .bottomLi {
-  width: 98%;
-  font-size: 0.2rem;
-  margin-top: -0.05rem;
-  text-align: center;
-}
-
-.sixteen .bottomLi img {
-  width: 0.25rem;
-  height: 0.25rem;
-  margin-top: 0.25rem;
-}
-
-.sixteen .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.1rem;
-}
-
-.sixteen .bottomLi .btcla {
-  width: 30%;
-}
-
-.sixteen .bottomLi .btck {
-  width: 32%;
-  padding-left: 3%;
-}
-
-.sixteen .bottomLi .step {
-  width: 27%;
-  padding-right: 2%;
-  /*text-align: center;*/
-}
-
-.sixteen .cla em.plus {
-  position: relative;
-  left: -0.2rem
-}
-
-.sixteen .lhj span.plus {
-  position: relative;
-  left: 0.9rem
-}
-
-.sixteen .btck img {
-  width: 0.3rem;
-  height: 0.3rem;
-}
-
-
-/*twenty*/
-.twenty {
-  width: 16.66667%;
-  height: 1.85rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 0.1rem
-}
-
-.twenty .centerLi {
-  width: 98%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  float: none;
-}
-
-.twenty .human .name {
-  width: 100%;
-  height: 0.4rem;
-  font-size: 0.22rem;
-  line-height: 0.5rem;
-  margin-bottom: 0.1rem;
-}
-
-.twenty .human img {
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-top: 0.15rem;
-}
-
-.twenty .cla {
-  width: 0.95rem;
-  height: 1.4rem;
-  top: -0.69rem;
-  left: 0;
-  font-size: 0.15rem;
-}
-
-.twenty .lcla span {
-  font-size: 0.225rem;
-  top: -0.65rem;
-  float: left;
-  left: 0rem;
-}
-
-.twenty .cla em {
-  font-size: 0.4rem;
-  left: 0.2rem;
-}
-
-.twenty .lhj span {
-  width: 0.85rem;
-  height: 2rem;
-  top: -0.65rem;
-  left: 0.9rem;
-  font-size: 0.4rem;
-}
-
-.twenty .rhj img {
-  width: 0.15rem;
-  top: -0.6rem;
-  right: 0.1rem;
-}
-
-.twenty .topLi {
-  height: 1.35rem;
-}
-
-.twenty .bottomLi {
-  width: 98%;
-  font-size: 0.2rem;
-  margin-top: -0.1rem;
-  text-align: center;
-}
-
-.twenty .bottomLi img {
-  width: 0.2rem;
-  height: 0.2rem;
-  margin-top: 0.275rem;
-}
-
-.twenty .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.05rem;
-}
-
-.twenty .bottomLi .btcla {
-  width: 30%;
-}
-
-.twenty .bottomLi .btck {
-  width: 32%;
-  padding-left: 3%;
-}
-
-.twenty .bottomLi .step {
-  width: 28%;
-  padding-right: 2%;
-}
-
-.twenty .cla em.plus {
-  position: relative;
-  left: -0.2rem
-}
-
-.twenty .lhj span.plus {
-  position: relative;
-  left: 0.8rem
-}
-
-
-/*twentyFour*/
-.twentyFour {
-  width: 16.6667%;
-  height: 1.6rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 0.1rem
-}
-
-.twentyFour .centerLi {
-  width: 96%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  /*border: 0.03rem solid rgba(255,255,255,0.1);*/
-  /*box-shadow:inset 0 0 6px rgba(0,0,0,0.4);*/
-  float: none;
-}
-
-.twentyFour .human .name {
-  width: 100%;
-  height: 0.4rem;
-  font-size: 0.2rem;
-  line-height: 0.4rem;
-}
-
-.twentyFour .human img {
-  width: 0.7rem;
-  height: 0.7rem;
-  margin-top: 0.05rem;
-}
-
-.twentyFour .cla {
-  width: 0.9rem;
-  height: 1.4rem;
-  top: -0.6rem;
-  left: 0;
-  font-size: 0.15rem;
-}
-
-.twentyFour .lcla span {
-  font-size: 0.2rem;
-  top: -0.65rem;
-  float: left;
-  left: -0rem;
-}
-
-.twentyFour .cla em {
-  font-size: 0.4rem;
-  left: 0.2rem;
-}
-
-.twentyFour .lhj span {
-  width: 0.75rem;
-  height: 2rem;
-  top: -0.57rem;
-  left: 1rem;
-  font-size: 0.4rem;
-}
-
-.twentyFour .rhj img {
-  width: 0.15rem;
-  top: -0.6rem;
-  right: 0.15rem;
-}
-
-.twentyFour .topLi {
-  height: 1.19rem;
-}
-
-.twentyFour .bottomLi {
-  width: 98%;
-  font-size: 0.17rem;
-  margin-top: 0rem;
-  text-align: center;
-}
-
-.twentyFour .bottomLi img {
-  width: 0.2rem;
-  height: 0.2rem;
-  margin-top: 0.15rem;
-}
-
-.twentyFour .bottomLi span {
-  line-height: 0.55rem;
-  text-indent: 0.05rem;
-}
-
-.twentyFour .bottomLi .btcla {
-  width: 30%;
-}
-
-.twentyFour .bottomLi .btck {
-  width: 32%;
-  padding-left: 2%;
-}
-
-.twentyFour .bottomLi .step {
-  width: 28%;
-  padding-right: 0%;
-}
-
-.twentyFour .cla em.plus {
-  position: relative;
-  left: -0.2rem
-}
-
-.twentyFour .lhj span.plus {
-  position: relative;
-  left: 0.8rem;
-  line-height: 0.45rem;
-}
-
-.twentyFour .btck img {
-  width: 0.25rem;
-  height: 0.25rem;
-  margin-top: 0.12rem;
-}
-
-.twentyFour .bottomLi .step img {
-  margin-top: 0.16rem;
-}
-
-.birth {
-  position: relative;
-  top: -3.3rem;
-  width: 40%;
-  height: 1px;
-  display: block;
-  margin: 0 auto;
-}
-
-.birth img.birthCrow {
-  position: relative;
-  top: -0.1rem;
-  width: 1.2rem;
-  height: 0.7rem;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  border: none;
-}
-
-.birth img.birthText {
-  position: relative;
-  top: 1.8rem;
-  width: 1.8rem;
-  height: 0.8rem;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  border: none;
-}
-
-.two .birth img.birthCrow {
-  top: 0.1rem;
-}
-
-.three .birth img.birthCrow {
-  top: 0.8rem;
-}
-
-.six .birth {
-  top: -3.1rem;
-}
-
-.six .birth img.birthCrow {
-  width: 0.8rem;
-  height: 0.5rem;
-  top: 1.2rem;
-}
-
-.six .birth img.birthText {
-  top: 2rem;
-  width: 1.5rem;
-  height: 0.6rem;
-}
-
-.nine .birth {
-  top: -3.1rem;
-}
-
-.nine .birth img.birthCrow {
-  width: 0.8rem;
-  height: 0.5rem;
-  top: 1.6rem;
-}
-
-.nine .birth img.birthText {
-  top: 2.1rem;
-  width: 1.2rem;
-  height: 0.5rem;
-}
-
-.ten .birth {
-  top: -3.1rem;
-}
-
-.ten .birth img.birthCrow {
-  width: 0.8rem;
-  height: 0.5rem;
-  top: 1.6rem;
-}
-
-.ten .birth img.birthText {
-  top: 2.1rem;
-  width: 1.2rem;
-  height: 0.5rem;
-}
-
-.twelve .birth {
-  top: -3.1rem;
-}
-
-.twelve .birth img.birthCrow {
-  width: 0.6rem;
-  height: 0.3rem;
-  top: 2rem;
-}
-
-.twelve .birth img.birthText {
-  top: 2.4rem;
-  width: 1rem;
-  height: 0.4rem;
-}
-
-.sixteen .birth {
-  top: -3.1rem;
-}
-
-.sixteen .birth img.birthCrow {
-  width: 0.6rem;
-  height: 0.3rem;
-  top: 2.1rem;
-}
-
-.sixteen .birth img.birthText {
-  top: 2.45rem;
-  width: 1rem;
-  height: 0.4rem;
-}
-
-.twenty .birth {
-  top: -3.1rem;
-}
-
-.twenty .birth img.birthCrow {
-  width: 0.6rem;
-  height: 0.3rem;
-  top: 2.1rem;
-}
-
-.twenty .birth img.birthText {
-  top: 2.45rem;
-  width: 1rem;
-  height: 0.4rem;
-}
-
-.twentyFour .birth {
-  top: -3.1rem;
-}
-
-.twentyFour .birth img.birthCrow {
-  width: 0.6rem;
-  height: 0.3rem;
-  top: 2.2rem;
-}
-
-.twentyFour .birth img.birthText {
-  top: 2.5rem;
-  width: 0.8rem;
-  height: 0.3rem;
-}
-
-/*isPrivate*/
-.isPrivate {
-  position: relative;
-  float: right;
-  top: -3.3rem;
-  width: 75%;
-  height: 1px;
-  display: block;
-  margin: 0 auto;
-  overflow: visible;
-}
-
-.isPrivate i {
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  margin-top: 0.1rem;
-  width: 1rem !important;
-  height: 1rem !important;
-  border: none !important;
-  background: url("../static/img/privateSign.svg");
-  background-size: 100% 100%;
-  background-position: top center;
-}
-
-.two .isPrivate {
-  top: -3.1rem;
-}
-
-.three .isPrivate {
-  top: -2.4rem;
-  left: -0.1rem;
-}
-
-.six .isPrivate {
-  top: -1.9rem;
-}
-
-.six .isPrivate i {
-  width: 0.8rem !important;
-  height: 0.8rem !important;
-}
-
-.nine .isPrivate {
-  top: -1.4rem;
-  left: -0.1rem;
-}
-
-.nine .isPrivate i {
-  width: 0.6rem !important;
-  height: 0.6rem !important;
-}
-
-.ten .isPrivate {
-  top: -1.4rem;
-}
-
-.ten .isPrivate i {
-  width: 0.6rem !important;
-  height: 0.6rem !important;
-}
-
-.twelve .isPrivate {
-  top: -1.15rem;
-}
-
-.twelve .isPrivate i {
-  width: 0.5rem !important;
-  height: 0.5rem !important;
-}
-
-.sixteen .isPrivate {
-  top: -1rem;
-  left: -0.1rem;
-}
-
-.sixteen .isPrivate i {
-  width: 0.4rem !important;
-  height: 0.4rem !important;
-}
-
-.twenty .isPrivate {
-  top: -1rem;
-}
-
-.twenty .isPrivate i {
-  width: 0.4rem !important;
-  height: 0.4rem !important;
-}
-
-.twentyFour .isPrivate {
-  top: -0.92rem;
-}
-
-.twentyFour .isPrivate i {
-  width: 0.4rem !important;
-  height: 0.4rem !important;
-}
-
-
-</style>

src/components/student3.vue

@@ -1,1950 +0,0 @@
-<template>
-  <ul>
-    <li v-for="(s,i) in students" :class="studentsClassName[i].name" v-show="students"
-        v-if="students.length > 0">
-      <div class="centerLi">
-        <div class="topLi">
-          <div class="human">
-              <span class="name">
-                  <div class="nameLt">
-                  </div>
-                <!--                  <div class="nameMd">{{ s.Name }}</div>-->
-                  <div class="namert" v-if="s.RealHr != 0">
-                      <power :cur-power="s.PowerPercent"></power>
-                  </div>
-              </span>
-            <div class="head">
-              <img :src="s.Head" alt="" v-if="s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
-              <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head">
-              <!-- 生日快乐 -->
-              <div class="birth" v-if="s.IsBirthday == 1">
-                <img src="../assets/img/birth/birthCrow.png" class="birthCrow"/>
-                <img src="../assets/img/birth/birthText.png" class="birthText"/>
-              </div>
-              <!--私有心率带-->
-              <div class="isPrivate" v-if="s.IsPrivate == 1">
-                <i></i>
-              </div>
-            </div>
-            <div class="names">
-              <span>
-                  {{ s.Name }}
-              </span>
-            </div>
-          </div>
-          <div class="cla">
-            <em v-if="s.RealHr != 0">{{ s.ActivePercent |max100 }}</em>
-            <em class="plus" v-if="s.ActivePercent == 0 && s.RealHr == 0">
-              ---
-            </em>
-          </div>
-          <div class="lcla">
-            <span>%</span>
-          </div>
-          <!--fastJump-->
-          <!--heartJump-->
-          <div>
-            <div class="lhj">
-              <div :class="[{'heartJump':true}]">
-                                        <span class="fastJump" v-if="s.RealHr != 0"
-                                              v-show="parseInt(s.ActivePercent) > 90">{{ s.RealHr }}</span>
-                <span class="normalJump" v-if="s.RealHr != 0"
-                      v-show="parseInt(s.ActivePercent) <= 90 && parseInt(s.ActivePercent) > 30">
-                                            {{ s.RealHr }}</span>
-                <span class="slowJump" v-if="s.RealHr != 0"
-                      v-show="parseInt(s.ActivePercent) <= 30">{{ s.RealHr }}</span>
-                <span class="plus" v-if="s.RealHr == 0">
-                                        ---
-                                    </span>
-              </div>
-            </div>
-            <div class="rhj">
-              <img src="../assets/imgs/student/heart.svg" class=""/>
-            </div>
-          </div>
-        </div>
-        <div class="bottomLi">
-          <div class="btcla">
-            <img src="../assets/imgs/student/calc.svg" class=""/>
-            <span>{{ s.Cle |fmtInt }}</span>
-          </div>
-          <div class="btck">
-            <img src="../assets/imgs/student/sport.svg" class=""/>
-            <span>{{ s.PureCalorieNoVo2   |fmtInt }}</span>
-          </div>
-          <div class="step">
-            <img src="../assets/imgs/student/ck.svg" class=""/>
-            <span>{{ s.Ck  |fmtFloat }}</span>
-          </div>
-        </div>
-      </div>
-    </li>
-    <li v-for="(s,i) in studentsFake" :class="studentsClassName[i].name" 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: 0
-    }
-  },
-  props: ['students', 'studentsClassName'],
-  watch: {
-    'studentsClassName': {
-      // 自动计算补全空白处
-      handler(newName, oldName) {
-        let sum = 0;
-        let that = this;
-        sum = newName.length;
-        console.log('sum', sum);
-        if (sum == 3) {
-          that.studentsFake = 1;
-        }
-        if (sum == 5) {
-          that.studentsFake = 1;
-        }
-        if (sum >= 7 && sum < 9) {
-          that.studentsFake = 9 - sum;
-        }
-        if (sum >= 10 && sum < 12) {
-          that.studentsFake = 12 - sum;
-        }
-        if (sum >= 13 && sum < 15) {
-          that.studentsFake = 15 - sum;
-        }
-      },
-      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>
-
-ul, li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.blue .centerLi {
-  border-radius: 16px;
-  background: linear-gradient(#007ec7 0%, #007dc6 33%, #4cbbfc 100%);
-  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
-}
-
-.violet .centerLi {
-  border-radius: 16px;
-  background: linear-gradient(#3500ac 0%, #3500ac 33%, #4c53fc 100%);
-  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
-}
-
-.green .centerLi {
-  border-radius: 16px;
-  background: linear-gradient(#05a200 0%, #05a200 30.05%, #31d92d 100%);
-  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
-
-}
-
-.yellow .centerLi {
-  border-radius: 16px;
-  background: linear-gradient(#ffb308 0%, #f5c600 33%, #ffe61f 100%);
-  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
-}
-
-.brown .centerLi {
-  border-radius: 16px;
-  background: linear-gradient(#ff6200 0%, #ff6200 34.48%, #ff9d2b 100%);
-  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
-
-}
-
-.red .centerLi {
-  border-radius: 16px;
-  background: linear-gradient(#d11122 0%, #d11122 48.28%, #ff3445 100%);
-  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.42);
-
-}
-
-
-.slowJump {
-  animation: mymove 3s infinite;
-  -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
-  animation-direction: alternate; /*轮流反向播放动画。*/
-  animation-timing-function: ease-in-out; /*动画的速度曲线*/
-  /* Safari 和 Chrome */
-  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
-  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-}
-
-.normalJump {
-  animation: mymove 2s infinite;
-  -webkit-animation: mymove 2s infinite; /*Safari and Chrome*/
-  animation-direction: alternate; /*轮流反向播放动画。*/
-  animation-timing-function: ease-in-out; /*动画的速度曲线*/
-  /* Safari 和 Chrome */
-  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
-  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-}
-
-.fastJump {
-  animation: mymove 1s infinite;
-  -webkit-animation: mymove 1s infinite; /*Safari and Chrome*/
-  animation-direction: alternate; /*轮流反向播放动画。*/
-  animation-timing-function: ease-in-out; /*动画的速度曲线*/
-  /* Safari 和 Chrome */
-  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
-  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-}
-
-@keyframes mymove {
-  0% {
-    transform: scale(1); /*开始为原始大小*/
-  }
-  25% {
-    transform: scale(1.1); /*放大1.1倍*/
-  }
-  50% {
-    transform: scale(1);
-  }
-  75% {
-    transform: scale(1.1);
-  }
-
-}
-
-@-webkit-keyframes mymove /*Safari and Chrome*/
-{
-  0% {
-    transform: scale(1); /*开始为原始大小*/
-  }
-  25% {
-    transform: scale(1.1); /*放大1.1倍*/
-  }
-  50% {
-    transform: scale(1);
-  }
-  75% {
-    transform: scale(1.1);
-  }
-}
-
-
-/*userList*/
-
-.userList {
-  width: 100%;
-  overflow: hidden;
-  overflow-y: scroll;
-  display: block;
-  margin: 0.1rem auto;
-}
-
-.userList ul {
-  height: 98%;
-  overflow: hidden;
-  display: block;
-  margin: 0.1rem;
-  margin-bottom: 0;
-  overflow-y: scroll;
-
-  li {
-    display: block;
-    z-index: 666;
-  }
-}
-
-.centerLi {
-  width: 99.8%;
-  overflow: hidden;
-  float: left;
-  color: #fff;
-
-}
-
-.human img {
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  border-radius: 33rem;
-}
-
-s {
-  text-decoration: none;
-}
-
-em {
-  font-style: normal;
-}
-
-.cla {
-  position: relative;
-  float: left;
-  text-align: right;
-}
-
-.centerLi .human {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  padding: 0;
-
-  .name {
-    width: 100%;
-    display: block;
-    margin: 0 auto;
-    overflow: hidden;
-
-    div {
-      float: left;
-      width: 20%;
-      text-align: left;
-      text-indent: 0.1rem;
-    }
-
-    .namert {
-      width: 40%;
-      float: right;
-    }
-  }
-}
-
-.lcla span {
-  position: relative;
-  float: left;
-}
-
-.cla em {
-  text-align: right;
-}
-
-.heartJump {
-  position: relative;
-}
-
-.lhj span {
-  position: relative;
-  text-align: right;
-  float: left;
-}
-
-.rhj {
-  float: right;
-
-  img {
-    position: relative;
-    float: right;
-  }
-}
-
-.bottomLi {
-  width: 96%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  margin-top: 0.3rem;
-  font-weight: normal !important;
-  color: #fff;
-  text-align: left;
-  line-height: 0.7rem;
-
-  img {
-    float: left;
-    margin-left: 10%;
-  }
-
-  .btcla {
-    width: 33.333%;
-    float: left;
-  }
-
-  .btck {
-    width: 33.333%;
-    float: left;
-  }
-
-  .step {
-    width: 33.333%;
-    float: right;
-  }
-
-  span {
-    float: left;
-    text-align: left;
-  }
-}
-
-.topLi {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  overflow: hidden;
-}
-
-/*max*/
-.max {
-  width: 12rem;
-  height: 5.6rem;
-  display: block;
-  margin: 0 auto;
-  margin-top: 1rem;
-
-  .centerLi {
-    width: 90%;
-    height: 100%;
-  }
-
-  .ltLi {
-    width: 5%;
-    height: 100%;
-    float: left;
-    background: url("../static/img/ltCube.png");
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-  }
-
-  .rtLi {
-    width: 5%;
-    height: 100%;
-    float: right;
-    background: url("../static/img/rtCube.png");
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-  }
-
-  .human .name {
-    font-size: 0.5rem;
-    height: 1rem;
-    line-height: 1rem;
-
-    img {
-      width: 3rem;
-      height: 3rem;
-    }
-  }
-
-  .cla {
-    width: 3rem;
-    height: 2rem;
-    top: -2.4rem;
-    left: 0;
-    font-size: 0.55rem;
-  }
-
-  .lcla span {
-    font-size: 0.7rem;
-    top: -2.4rem;
-    float: left;
-    left: 0;
-  }
-
-  .cla em {
-    font-size: 1.5rem;
-    left: 1rem;
-  }
-
-  .lhj span {
-    width: 3rem;
-    height: 2rem;
-    top: -2.4rem;
-    left: 3.4rem;
-    font-size: 1.5rem;
-  }
-
-  .rhj img {
-    width: 0.5rem;
-    top: -2.3rem;
-    right: 0.3rem;
-  }
-
-  .longIcon {
-    position: absolute;
-    width: 1.96rem;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    bottom: 2rem;
-    right: 3.5rem;
-  }
-
-  .topLi {
-    height: 4.5rem;
-  }
-
-  .bottomLi {
-    font-size: 0.5rem;
-    text-align: center;
-  }
-
-}
-
-
-.max .bottomLi img {
-  width: 0.5rem;
-  height: 0.5rem;
-  margin-top: 0.1rem;
-}
-
-.max .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.2rem;
-}
-
-.max .bottomLi .btck {
-  width: 29%;
-  padding-left: 1%;
-}
-
-.max .bottomLi .step {
-  width: 24%;
-  padding-right: 2%;
-}
-
-.max .cla em.plus {
-  position: relative;
-  left: -0.5rem
-}
-
-.max .lhj span.plus {
-  position: relative;
-  left: 2.75rem
-}
-
-.max .bottomLi .btcla img {
-  width: 0.5rem;
-  height: 0.5rem;
-}
-
-.max .bottomLi .btcla span {
-  text-indent: 0.1rem;
-}
-
-.max .bottomLi .btck span {
-  text-indent: 0.1rem;
-}
-
-.max .bottomLi .btck img {
-  width: 0.6rem;
-  height: 0.6rem;
-  margin-top: 0.05rem;
-}
-
-
-/*two*/
-.two {
-  width: 49%;
-  height: 5.33rem;
-  float: left;
-  overflow: hidden;
-  margin-top: 6%
-}
-
-.two .centerLi {
-  /*border: 1px solid #fff;*/
-}
-
-.two:nth-child(2) {
-  float: right;
-}
-
-.two .human .name {
-  width: 100%;
-  height: 1rem;
-  font-size: 0.5rem;
-  line-height: 1rem;
-}
-
-.two .human img {
-  width: 2.8rem;
-  height: 2.8rem;
-}
-
-.two .cla {
-  width: 2.9rem;
-  height: 2rem;
-  top: -2.4rem;
-  left: 0;
-  font-size: 0.5rem;
-}
-
-.two .lcla span {
-  font-size: 0.55rem;
-  top: -2.3rem;
-  float: left;
-  left: 0;
-}
-
-.two .cla em {
-  font-size: 1.3rem;
-  left: 1rem;
-}
-
-.two .lhj span {
-  width: 3rem;
-  height: 2rem;
-  top: -2.4rem;
-  left: 2.4rem;
-  font-size: 1.2rem;
-}
-
-.two .rhj img {
-  width: 0.45rem;
-  top: -2.2rem;
-  right: 0.3rem;
-}
-
-.two .topLi {
-  height: 4.2rem;
-}
-
-.two .bottomLi {
-  font-size: 0.4rem;
-  text-align: center;
-}
-
-.two .bottomLi img {
-  width: 0.5rem;
-  height: 0.5rem;
-  margin-top: 0.1rem;
-}
-
-.two .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.2rem;
-}
-
-.two .bottomLi .btck {
-  width: 29%;
-  padding-left: 0%;
-}
-
-.two .bottomLi .step {
-  width: 26%;
-  padding-right: 1%;
-}
-
-.two .cla em.plus {
-  position: relative;
-  left: -0.5rem
-}
-
-.two .lhj span.plus {
-  position: relative;
-  left: 2.2rem
-}
-
-.two .bottomLi .btck img {
-  width: 0.6rem;
-  height: 0.6rem;
-  margin-top: 0.05rem;
-}
-
-.two .bottomLi .btck span {
-  text-indent: 0.1rem;
-}
-
-
-/*three*/
-.three {
-  width: 50%;
-  height: 4rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 1%
-}
-
-.three .centerLi {
-  width: 96%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  float: none;
-}
-
-.three .human .name {
-  width: 100%;
-  height: 0.8rem;
-  font-size: 0.4rem;
-  line-height: 0.8rem;
-}
-
-.three .human img {
-  width: 2.1rem;
-  height: 2.1rem;
-  margin-top: 0.1rem;
-}
-
-.three .cla {
-  width: 2.9rem;
-  height: 2rem;
-  top: -1.8rem;
-  left: 0;
-  font-size: 0.4rem;
-}
-
-.three .lcla span {
-  font-size: 0.45rem;
-  top: -1.8rem;
-  float: left;
-  left: 0;
-}
-
-.three .cla em {
-  font-size: 1.2rem;
-  left: 1rem;
-}
-
-.three .lhj span {
-  width: 3rem;
-  height: 2rem;
-  top: -1.70rem;
-  left: 2.3rem;
-  font-size: 1.1rem;
-}
-
-.three .rhj img {
-  width: 0.4rem;
-  top: -1.7rem;
-  right: 0.4rem;
-}
-
-.three .topLi {
-  /*height: 3.26rem;*/
-  height: 3.18rem;
-}
-
-.three .bottomLi {
-  font-size: 0.4rem;
-  margin-top: 0rem;
-  text-align: center;
-}
-
-
-.three .bottomLi img {
-  width: 0.5rem;
-  height: 0.5rem;
-  margin-top: 0.1rem;
-}
-
-.three .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.2rem;
-}
-
-.three .bottomLi .btck {
-  width: 30%;
-  padding-left: 2%;
-}
-
-.three .bottomLi .step {
-  width: 25%;
-  padding-right: 2%;
-}
-
-.three .cla em.plus {
-  position: relative;
-  left: -0.5rem
-}
-
-.three .lhj span.plus {
-  position: relative;
-  left: 1.9rem
-}
-
-.three .bottomLi .btck img {
-  width: 0.6rem;
-  height: 0.6rem;
-  margin-top: 0.05rem;
-}
-
-.three .bottomLi .btck span {
-  text-indent: 0.1rem;
-}
-
-/*six*/
-.six {
-  width: 33.3333%;
-  height: 3.6rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 1%
-}
-
-.six .centerLi {
-  width: 98%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  float: none;
-}
-
-.six .human .name {
-  width: 100%;
-  height: 0.8rem;
-  font-size: 0.35rem;
-  line-height: 0.8rem;
-}
-
-.six .human img {
-  width: 1.6rem;
-  height: 1.6rem;
-  margin-top: 0.1rem;
-}
-
-.six .cla {
-  width: 2rem;
-  height: 2rem;
-  top: -1.3rem;
-  left: 0;
-  font-size: 0.3rem;
-}
-
-.six .lcla span {
-  font-size: 0.4rem;
-  top: -1.4rem;
-  float: left;
-  left: -0.05rem;
-}
-
-.six .cla em {
-  font-size: 0.9rem;
-  left: 1rem;
-}
-
-.six .lhj span {
-  width: 2rem;
-  height: 2rem;
-  top: -1.3rem;
-  left: 1.6rem;
-  font-size: 0.85rem;
-}
-
-.six .rhj img {
-  width: 0.3rem;
-  top: -1.3rem;
-  right: 0.2rem;
-}
-
-.six .topLi {
-  height: 2.6rem;
-}
-
-.six .bottomLi {
-  width: 98%;
-  font-size: 0.325rem;
-  margin-top: 0.3rem;
-  text-align: center;
-}
-
-.six .bottomLi img {
-  width: 0.4rem;
-  margin-top: 0.15rem;
-}
-
-.six .bottomLi .btcla img {
-  width: 0.3rem;
-  /*margin-top: 0.1rem;*/
-}
-
-.six .bottomLi .btck img {
-  width: 0.4rem;
-  margin-top: 0.1rem;
-}
-
-.six .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.1rem;
-}
-
-.six .bottomLi .btcla {
-  width: 30%;
-}
-
-.six .bottomLi .btck {
-  width: 33%;
-  padding-left: 3%;
-}
-
-.six .bottomLi .step {
-  width: 28%;
-  padding-right: 0%;
-}
-
-.six .cla em.plus {
-  position: relative;
-  left: -0.3rem
-}
-
-.six .lhj span.plus {
-  position: relative;
-  left: 1.3rem
-}
-
-.six .bottomLi .btck img {
-  width: 0.5rem;
-  height: 0.5rem;
-  margin-top: 0.12rem;
-}
-
-
-/*nine*/
-.nine {
-  width: 33.3333%;
-  height: 2.7rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 0.1rem
-}
-
-.nine .centerLi {
-  width: 98%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  float: none;
-}
-
-.nine .human .name {
-  width: 100%;
-  height: 0.6rem;
-  font-size: 0.3rem;
-  line-height: 0.6rem;
-}
-
-.nine .human img {
-  width: 1.2rem;
-  height: 1.2rem;
-  margin-top: 0.1rem;
-}
-
-.nine .cla {
-  width: 1.9rem;
-  height: 2rem;
-  top: -1.1rem;
-  left: 0;
-  font-size: 0.25rem;
-}
-
-.nine .lcla span {
-  font-size: 0.35rem;
-  top: -1.1rem;
-  float: left;
-  left: 0.05rem;
-}
-
-.nine .cla em {
-  font-size: 0.7rem;
-  left: 1rem;
-}
-
-.nine .lhj span {
-  width: 1.9rem;
-  height: 2rem;
-  top: -1.1rem;
-  left: 1.6rem;
-  font-size: 0.7rem;
-}
-
-.nine .rhj img {
-  width: 0.25rem;
-  top: -1.0rem;
-  right: 0.4rem;
-}
-
-.nine .topLi {
-  height: 2rem;
-}
-
-.nine .bottomLi {
-  width: 98%;
-  font-size: 0.3rem;
-  margin-top: 0.05rem;
-  text-align: center;
-}
-
-
-.nine .bottomLi img {
-  width: 0.35rem;
-  height: 0.35rem;
-  margin-top: 0.2rem;
-}
-
-.nine .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.1rem;
-}
-
-.nine .bottomLi .btcla {
-  width: 30%;
-}
-
-.nine .bottomLi .btck {
-  width: 32%;
-  padding-left: 5%;
-}
-
-.nine .bottomLi .step {
-  width: 28%;
-  padding-right: 0%;
-}
-
-.nine .cla em.plus {
-  position: relative;
-  left: -0.3rem
-}
-
-.nine .lhj span.plus {
-  position: relative;
-  left: 1.3rem
-}
-
-.nine .bottomLi .btck img {
-  width: 0.45rem;
-  height: 0.45rem;
-  margin-top: 0.15rem;
-}
-
-/*ten*/
-.ten {
-  width: 25%;
-  height: 2.6rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 0.2rem
-}
-
-.ten .centerLi {
-  width: 98%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  float: none;
-}
-
-.ten .human .name {
-  width: 100%;
-  height: 0.5rem;
-  font-size: 0.3rem;
-  line-height: 0.55rem;
-  margin-bottom: 0.1rem;
-}
-
-.ten .human img {
-  width: 1.1rem;
-  height: 1.1rem;
-  margin-top: 0.2rem;
-}
-
-.ten .cla {
-  width: 1.4rem;
-  height: 1.5rem;
-  top: -0.95rem;
-  left: 0;
-  font-size: 0.2rem;
-}
-
-.ten .lcla span {
-  font-size: 0.3rem;
-  top: -0.95rem;
-  float: left;
-  left: -0rem;
-}
-
-.ten .cla em {
-  font-size: 0.6rem;
-  left: 0.5rem;
-}
-
-.ten .lhj span {
-  width: 1.4rem;
-  height: 2.1rem;
-  top: -0.9rem;
-  left: 1.4rem;
-  font-size: 0.6rem;
-}
-
-.ten .rhj img {
-  width: 0.2rem;
-  top: -0.9rem;
-  right: 0.15rem;
-}
-
-.ten .topLi {
-  height: 1.85rem;
-}
-
-.ten .bottomLi {
-  width: 98%;
-  font-size: 0.25rem;
-  margin-top: 0.1rem;
-  text-align: center;
-}
-
-.ten .bottomLi img {
-  width: 0.3rem;
-  height: 0.3rem;
-  margin-top: 0.25rem;
-}
-
-.ten .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.1rem;
-}
-
-.ten .bottomLi .btcla {
-  width: 30%;
-}
-
-.ten .bottomLi .btck {
-  width: 32%;
-  padding-left: 3%;
-}
-
-.ten .bottomLi .step {
-  width: 29%;
-  padding-right: 0%;
-}
-
-.ten .cla em.plus {
-  position: relative;
-  left: -0.3rem
-}
-
-.ten .lhj span.plus {
-  position: relative;
-  left: 1.2rem;
-  line-height: 0.75rem;
-}
-
-.ten .btck img {
-  width: 0.4rem;
-  height: 0.4rem;
-  margin-top: 0.18rem;
-}
-
-/*twelve*/
-.twelve {
-  width: 20%;
-  height: 2.4rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 0.3rem
-}
-
-.twelve .centerLi {
-  width: 98%;
-  height: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  float: none;
-}
-
-.twelve .human .name {
-  width: 100%;
-  height: 0.5rem;
-  font-size: 0.25rem;
-  line-height: 0.7rem;
-  margin-bottom: 0.2rem;
-}
-
-.twelve .human img {
-  width: 0.9rem;
-  height: 0.9rem;
-}
-
-.twelve .cla {
-  width: 1.2rem;
-  height: 1.2rem;
-  top: -0.8rem;
-  left: -0.1rem;
-  font-size: 0.2rem;
-}
-
-.twelve .lcla span {
-  font-size: 0.25rem;
-  top: -0.8rem;
-  float: left;
-  left: -0.07rem;
-}
-
-.twelve .cla em {
-  font-size: 0.5rem;
-  left: 0.5rem;
-}
-
-.twelve .lhj span {
-  width: 1.2rem;
-  height: 1.2rem;
-  top: -0.8rem;
-  left: 0.9rem;
-  font-size: 0.5rem;
-}
-
-.twelve .rhj img {
-  width: 0.18rem;
-  top: -0.75rem;
-  right: 0.15rem;
-}
-
-.twelve .topLi {
-  height: 1.65rem;
-}
-
-.twelve .bottomLi {
-  width: 98%;
-  font-size: 0.225rem;
-  margin-top: 0.1rem;
-  text-align: center;
-}
-
-.twelve .bottomLi img {
-  width: 0.25rem;
-  height: 0.25rem;
-  margin-top: 0.25rem;
-}
-
-.twelve .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.1rem;
-}
-
-.twelve .bottomLi .btcla {
-  width: 30%;
-}
-
-.twelve .bottomLi .btck {
-  width: 32%;
-  padding-left: 2%;
-}
-
-.twelve .bottomLi .step {
-  width: 27%;
-  padding-right: 1%;
-}
-
-.twelve .cla em.plus {
-  position: relative;
-  left: -0.2rem
-}
-
-.twelve .lhj span.plus {
-  position: relative;
-  left: 0.8rem
-}
-
-.twelve .btck img {
-  width: 0.3rem;
-  height: 0.3rem;
-}
-
-.twelve .btck img {
-  width: 0.35rem;
-  height: 0.35rem;
-  margin-top: 0.22rem;
-}
-
-
-/*sixteen*/
-.sixteen {
-  width: 20%;
-  height: 1.95rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 0.1rem
-}
-
-.sixteen .centerLi {
-  width: 98%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  float: none;
-}
-
-.sixteen .human .name {
-  width: 100%;
-  height: 0.4rem;
-  font-size: 0.22rem;
-  line-height: 0.45rem;
-  margin-top: 0.1rem;
-  margin-bottom: 0.1rem;
-
-}
-
-.sixteen .human img {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
-.sixteen .cla {
-  width: 1.2rem;
-  height: 1.4rem;
-  top: -0.7rem;
-  left: 0;
-  font-size: 0.15rem;
-}
-
-.sixteen .lcla span {
-  font-size: 0.275rem;
-  top: -0.7rem;
-  float: left;
-  left: -0rem;
-}
-
-.sixteen .cla em {
-  font-size: 0.5rem;
-  left: 0.2rem;
-}
-
-.sixteen .lhj span {
-  width: 1rem;
-  height: 1.8rem;
-  top: -0.7rem;
-  left: 1rem;
-  font-size: 0.5rem;
-}
-
-.sixteen .rhj img {
-  width: 0.17rem;
-  top: -0.65rem;
-  right: 0.15rem;
-}
-
-.sixteen .topLi {
-  height: 1.4rem;
-}
-
-.sixteen .bottomLi {
-  width: 98%;
-  font-size: 0.2rem;
-  margin-top: -0.05rem;
-  text-align: center;
-}
-
-.sixteen .bottomLi img {
-  width: 0.25rem;
-  height: 0.25rem;
-  margin-top: 0.25rem;
-}
-
-.sixteen .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.1rem;
-}
-
-.sixteen .bottomLi .btcla {
-  width: 30%;
-}
-
-.sixteen .bottomLi .btck {
-  width: 32%;
-  padding-left: 3%;
-}
-
-.sixteen .bottomLi .step {
-  width: 27%;
-  padding-right: 2%;
-  /*text-align: center;*/
-}
-
-.sixteen .cla em.plus {
-  position: relative;
-  left: -0.2rem
-}
-
-.sixteen .lhj span.plus {
-  position: relative;
-  left: 0.9rem
-}
-
-.sixteen .btck img {
-  width: 0.3rem;
-  height: 0.3rem;
-}
-
-
-/*twenty*/
-.twenty {
-  width: 16.66667%;
-  height: 1.85rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 0.1rem
-}
-
-.twenty .centerLi {
-  width: 98%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  float: none;
-}
-
-.twenty .human .name {
-  width: 100%;
-  height: 0.4rem;
-  font-size: 0.22rem;
-  line-height: 0.5rem;
-  margin-bottom: 0.1rem;
-}
-
-.twenty .human img {
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-top: 0.15rem;
-}
-
-.twenty .cla {
-  width: 0.95rem;
-  height: 1.4rem;
-  top: -0.69rem;
-  left: 0;
-  font-size: 0.15rem;
-}
-
-.twenty .lcla span {
-  font-size: 0.225rem;
-  top: -0.65rem;
-  float: left;
-  left: 0rem;
-}
-
-.twenty .cla em {
-  font-size: 0.4rem;
-  left: 0.2rem;
-}
-
-.twenty .lhj span {
-  width: 0.85rem;
-  height: 2rem;
-  top: -0.65rem;
-  left: 0.9rem;
-  font-size: 0.4rem;
-}
-
-.twenty .rhj img {
-  width: 0.15rem;
-  top: -0.6rem;
-  right: 0.1rem;
-}
-
-.twenty .topLi {
-  height: 1.35rem;
-}
-
-.twenty .bottomLi {
-  width: 98%;
-  font-size: 0.2rem;
-  margin-top: -0.1rem;
-  text-align: center;
-}
-
-.twenty .bottomLi img {
-  width: 0.2rem;
-  height: 0.2rem;
-  margin-top: 0.275rem;
-}
-
-.twenty .bottomLi span {
-  line-height: 0.8rem;
-  text-indent: 0.05rem;
-}
-
-.twenty .bottomLi .btcla {
-  width: 30%;
-}
-
-.twenty .bottomLi .btck {
-  width: 32%;
-  padding-left: 3%;
-}
-
-.twenty .bottomLi .step {
-  width: 28%;
-  padding-right: 2%;
-}
-
-.twenty .cla em.plus {
-  position: relative;
-  left: -0.2rem
-}
-
-.twenty .lhj span.plus {
-  position: relative;
-  left: 0.8rem
-}
-
-
-/*twentyFour*/
-.twentyFour {
-  width: 16.6667%;
-  height: 1.6rem;
-  float: left;
-  overflow: hidden;
-  margin-bottom: 0.1rem
-}
-
-.twentyFour .centerLi {
-  width: 96%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*border: 1px solid #fff;*/
-  /*border: 0.03rem solid rgba(255,255,255,0.1);*/
-  /*box-shadow:inset 0 0 6px rgba(0,0,0,0.4);*/
-  float: none;
-}
-
-.twentyFour .human .name {
-  width: 100%;
-  height: 0.4rem;
-  font-size: 0.2rem;
-  line-height: 0.4rem;
-}
-
-.twentyFour .human img {
-  width: 0.7rem;
-  height: 0.7rem;
-  margin-top: 0.05rem;
-}
-
-.twentyFour .cla {
-  width: 0.9rem;
-  height: 1.4rem;
-  top: -0.6rem;
-  left: 0;
-  font-size: 0.15rem;
-}
-
-.twentyFour .lcla span {
-  font-size: 0.2rem;
-  top: -0.65rem;
-  float: left;
-  left: -0rem;
-}
-
-.twentyFour .cla em {
-  font-size: 0.4rem;
-  left: 0.2rem;
-}
-
-.twentyFour .lhj span {
-  width: 0.75rem;
-  height: 2rem;
-  top: -0.57rem;
-  left: 1rem;
-  font-size: 0.4rem;
-}
-
-.twentyFour .rhj img {
-  width: 0.15rem;
-  top: -0.6rem;
-  right: 0.15rem;
-}
-
-.twentyFour .topLi {
-  height: 1.19rem;
-}
-
-.twentyFour .bottomLi {
-  width: 98%;
-  font-size: 0.17rem;
-  margin-top: 0rem;
-  text-align: center;
-}
-
-.twentyFour .bottomLi img {
-  width: 0.2rem;
-  height: 0.2rem;
-  margin-top: 0.15rem;
-}
-
-.twentyFour .bottomLi span {
-  line-height: 0.55rem;
-  text-indent: 0.05rem;
-}
-
-.twentyFour .bottomLi .btcla {
-  width: 30%;
-}
-
-.twentyFour .bottomLi .btck {
-  width: 32%;
-  padding-left: 2%;
-}
-
-.twentyFour .bottomLi .step {
-  width: 28%;
-  padding-right: 0%;
-}
-
-.twentyFour .cla em.plus {
-  position: relative;
-  left: -0.2rem
-}
-
-.twentyFour .lhj span.plus {
-  position: relative;
-  left: 0.8rem;
-  line-height: 0.45rem;
-}
-
-.twentyFour .btck img {
-  width: 0.25rem;
-  height: 0.25rem;
-  margin-top: 0.12rem;
-}
-
-.twentyFour .bottomLi .step img {
-  margin-top: 0.16rem;
-}
-
-.birth {
-  position: relative;
-  top: -3.3rem;
-  width: 40%;
-  height: 1px;
-  display: block;
-  margin: 0 auto;
-}
-
-.birth img.birthCrow {
-  position: relative;
-  top: -0.1rem;
-  width: 1.2rem;
-  height: 0.7rem;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  border: none;
-}
-
-.birth img.birthText {
-  position: relative;
-  top: 1.8rem;
-  width: 1.8rem;
-  height: 0.8rem;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  border: none;
-}
-
-.two .birth img.birthCrow {
-  top: 0.1rem;
-}
-
-.three .birth img.birthCrow {
-  top: 0.8rem;
-}
-
-.six .birth {
-  top: -3.1rem;
-}
-
-.six .birth img.birthCrow {
-  width: 0.8rem;
-  height: 0.5rem;
-  top: 1.2rem;
-}
-
-.six .birth img.birthText {
-  top: 2rem;
-  width: 1.5rem;
-  height: 0.6rem;
-}
-
-.nine .birth {
-  top: -3.1rem;
-}
-
-.nine .birth img.birthCrow {
-  width: 0.8rem;
-  height: 0.5rem;
-  top: 1.6rem;
-}
-
-.nine .birth img.birthText {
-  top: 2.1rem;
-  width: 1.2rem;
-  height: 0.5rem;
-}
-
-.ten .birth {
-  top: -3.1rem;
-}
-
-.ten .birth img.birthCrow {
-  width: 0.8rem;
-  height: 0.5rem;
-  top: 1.6rem;
-}
-
-.ten .birth img.birthText {
-  top: 2.1rem;
-  width: 1.2rem;
-  height: 0.5rem;
-}
-
-.twelve .birth {
-  top: -3.1rem;
-}
-
-.twelve .birth img.birthCrow {
-  width: 0.6rem;
-  height: 0.3rem;
-  top: 2rem;
-}
-
-.twelve .birth img.birthText {
-  top: 2.4rem;
-  width: 1rem;
-  height: 0.4rem;
-}
-
-.sixteen .birth {
-  top: -3.1rem;
-}
-
-.sixteen .birth img.birthCrow {
-  width: 0.6rem;
-  height: 0.3rem;
-  top: 2.1rem;
-}
-
-.sixteen .birth img.birthText {
-  top: 2.45rem;
-  width: 1rem;
-  height: 0.4rem;
-}
-
-.twenty .birth {
-  top: -3.1rem;
-}
-
-.twenty .birth img.birthCrow {
-  width: 0.6rem;
-  height: 0.3rem;
-  top: 2.1rem;
-}
-
-.twenty .birth img.birthText {
-  top: 2.45rem;
-  width: 1rem;
-  height: 0.4rem;
-}
-
-.twentyFour .birth {
-  top: -3.1rem;
-}
-
-.twentyFour .birth img.birthCrow {
-  width: 0.6rem;
-  height: 0.3rem;
-  top: 2.2rem;
-}
-
-.twentyFour .birth img.birthText {
-  top: 2.5rem;
-  width: 0.8rem;
-  height: 0.3rem;
-}
-
-/*isPrivate*/
-.isPrivate {
-  position: relative;
-  float: right;
-  top: -3.3rem;
-  width: 75%;
-  height: 1px;
-  display: block;
-  margin: 0 auto;
-  overflow: visible;
-}
-
-.isPrivate i {
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  margin-top: 0.1rem;
-  width: 1rem !important;
-  height: 1rem !important;
-  border: none !important;
-  background: url("../static/img/privateSign.svg");
-  background-size: 100% 100%;
-  background-position: top center;
-}
-
-.two .isPrivate {
-  top: -3.1rem;
-}
-
-.three .isPrivate {
-  top: -2.4rem;
-  left: -0.1rem;
-}
-
-.six .isPrivate {
-  top: -1.9rem;
-}
-
-.six .isPrivate i {
-  width: 0.8rem !important;
-  height: 0.8rem !important;
-}
-
-.nine .isPrivate {
-  top: -1.4rem;
-  left: -0.1rem;
-}
-
-.nine .isPrivate i {
-  width: 0.6rem !important;
-  height: 0.6rem !important;
-}
-
-.ten .isPrivate {
-  top: -1.4rem;
-}
-
-.ten .isPrivate i {
-  width: 0.6rem !important;
-  height: 0.6rem !important;
-}
-
-.twelve .isPrivate {
-  top: -1.15rem;
-}
-
-.twelve .isPrivate i {
-  width: 0.5rem !important;
-  height: 0.5rem !important;
-}
-
-.sixteen .isPrivate {
-  top: -1rem;
-  left: -0.1rem;
-}
-
-.sixteen .isPrivate i {
-  width: 0.4rem !important;
-  height: 0.4rem !important;
-}
-
-.twenty .isPrivate {
-  top: -1rem;
-}
-
-.twenty .isPrivate i {
-  width: 0.4rem !important;
-  height: 0.4rem !important;
-}
-
-.twentyFour .isPrivate {
-  top: -0.92rem;
-}
-
-.twentyFour .isPrivate i {
-  width: 0.4rem !important;
-  height: 0.4rem !important;
-}
-
-.boy {
-  border: 0.03rem solid #39B6FF;
-}
-
-.girl {
-  border: 0.03rem solid #EA26EA;
-}
-
-.names {
-  position: relative;
-  bottom: 0.5rem;
-  left: 0;
-  right: 0;
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-
-  span {
-    width: 20%;
-    overflow: hidden;
-    display: block;
-    margin: 0 auto;
-    text-align: center;
-    font-size: 0.2rem;
-    color: #fff;
-    border-radius: 28.5px;
-    background-color: rgba(0, 0, 0, 0.63);
-    padding: 0.1rem 0;
-  }
-}
-
-.fakePart {
-  width: 100%;
-  height: 100%;
-  //background: url("../assets/imgs/stduents/fakepart.svg");
-  //background-size: 100% 100%;
-  //background-position: top center;
-  //background-repeat: no-repeat;
-  background-color: rgba(255, 255, 255, 0.13);
-  border-radius: 16px;
-}
-
-</style>

src/components/threestudent.vue

@@ -2,20 +2,22 @@
   <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">
+        <!-- <div class="power" v-if="s.RealHr != 0"> -->
+        <div class="power">
           <power :cur-power="s.PowerPercent"></power>
         </div>
         <div class="userinfo">
           <div class="lt">
             <span>
               <em v-if="s.RealHr != 0">{{ s.ActivePercent |max100 }}</em>
+              <em v-else>---</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">
+              <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
               <div class="names">
               <span>
                   {{ s.Name }}
@@ -38,9 +40,7 @@
                                             {{ 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>
+                <em v-else>---</em>
               </div>
             </span>
           </div>
@@ -50,14 +50,18 @@
             <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>
+          <span>
+            <img src="../assets/imgs/student/ei.svg" class=""/>
+            <em>{{ s.EI |fmtInt }}</em>
+          </span>
+          <!-- <span>
+            <img src="../assets/imgs/student/sport.svg" class=""/>
+            <em>{{ s.PureCalorieNoVo2 |fmtInt }}</em>
+          </span> -->          
         </div>
       </div>
     </li>
@@ -350,6 +354,7 @@ ul {
       img {
         @include cube;
         width: 2.6rem;
+        height: 2.6rem;
         border-radius: 250rem;
 
         &.girl {
@@ -454,6 +459,14 @@ ul {
   bottom: 2.9rem;
 }
 
+.IsBirthday {
+  width: 1.1rem;
+  float: left;
+  position: relative;
+  bottom: 2.18rem;
+  left: 0.4rem;
+}
+
 .max {
   width: 12rem;
   height: 3.5rem;
@@ -476,6 +489,7 @@ ul {
 
     img {
       width: 1.8rem;
+      height: 1.8rem;
     }
   }
 
@@ -546,6 +560,7 @@ ul {
 
     img {
       width: 1.8rem;
+      height: 1.8rem;
     }
   }
 
@@ -592,6 +607,12 @@ ul {
     bottom: 1.95rem;
     right: 0.0rem;
   }
+        
+  .IsBirthday {
+    width: 1.1rem;
+    bottom: 2.1rem;
+    left: 0.4rem;
+  }
 }
 
 .three {
@@ -612,6 +633,7 @@ ul {
 
     img {
       width: 2.2rem;
+      height: 2.2rem;
     }
   }
 
@@ -654,6 +676,7 @@ ul {
 
     img {
       width: 1.5rem;
+      height: 1.5rem;
     }
 
     .names {
@@ -722,6 +745,7 @@ ul {
 
     img {
       width: 1.3rem;
+      height: 1.3rem;
     }
 
     .names {
@@ -801,6 +825,7 @@ ul {
 
     img {
       width: 0.7rem;
+      height: 0.7rem;
     }
 
     .names {
@@ -848,6 +873,12 @@ ul {
     }
   }
 
+  .IsBirthday {
+    width: 0.46rem;
+    bottom: 0.95rem;
+    left: 0.24rem;
+  }
+
   /deep/ .powerContainer img {
     position: relative;
     right: -0.1rem;

src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import ElementUI from 'element-ui';
-// import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
+import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
 import animated from 'animate.css'
 import './plugins/axios'
 import 'default-passive-events'
@@ -18,7 +18,7 @@ if (process.env.NODE_ENV === 'development') {
     // 显示控制台
     // let vConsole = new VConsole();
     // 演示版本数据
-    // require('./Mock/index.js');
+    require('./Mock/index.js');
 } else {
     // let vConsole = new VConsole();
     // 演示版本数据

src/views/2pkRank.vue

@@ -8,20 +8,21 @@
       <div class="pkResult">
         <div class="lt">
           <span class="level">
-                <h5 class="winner" v-if="winner == 1">红队胜</h5>
-                <h5 class="loser" v-else>第二名</h5>
-                        <img src="../assets/imgs/pkRank/trophy.png" alt="">
+            <h5 class="winner" v-if="winner == 1">红队胜</h5>
+            <h5 class="loser" v-else>第二名</h5>
+            <img v-if="winner == 1" src="../assets/imgs/pkRank/trophy.png" alt="">
           </span>
           <span class="center">CK</span>
           <span class="ckValue">
-            <em class="winner" v-if="winner == 1">217.9</em>
-            <em class="loser" v-else>217.9</em>
+            <em class="winner" v-if="winner == 1">{{ redSumCk }}</em>
+            <em class="loser" v-else>{{ redSumCk }}</em>
           </span>
           <div class="mvp">
             <div class="head">
               <img :src="redMvp.Head" alt="" v-if="redMvp.Head"
-                   :class="[{'boy':redMvp.Sex == 1},{'girl':redMvp.Sex == 2}]">
-              <img src="../static/img/people/flyhead.png" alt="" v-if="!redMvp.Head">
+                  :class="[{'boy':redMvp.Sex == 1},{'girl':redMvp.Sex == 2}]">
+              <img src="../static/img/people/flyhead.png" alt="" v-if="!redMvp.Head" 
+                  :class="[{'boy':redMvp.Sex == 1},{'girl':redMvp.Sex == 2}]">
               <div class="names">
               <span>
                   {{ redMvp.Name }}
@@ -31,28 +32,29 @@
             <span class="mvpCode">最佳队员</span>
           </div>
           <div class="per">
-            人均卡路里 8392
+            人均卡路里 {{redAveCle}}
           </div>
           <div class="teamName">
             红队
           </div>
         </div>
         <div class="rt">
- <span class="level">
-                <h5 class="winner" v-if="winner == 2">蓝队胜</h5>
-                <h5 class="loser" v-else>第二名</h5>
-                        <img v-if="winner == 2" src="../assets/imgs/pkRank/trophy.png" alt="">
+          <span class="level">
+            <h5 class="winner" v-if="winner == 2">蓝队胜</h5>
+            <h5 class="loser" v-else>第二名</h5>
+            <img v-if="winner == 2" src="../assets/imgs/pkRank/trophy.png" alt="">
           </span>
           <span class="center">CK</span>
           <span class="ckValue">
-            <em class="winner" v-if="winner == 2">217.9</em>
-            <em class="loser" v-else>217.9</em>
+            <em class="winner" v-if="winner == 2">{{ blueSumCk }}</em>
+            <em class="loser" v-else>{{ blueSumCk }}</em>
           </span>
           <div class="mvp">
             <div class="head">
               <img :src="blueMvp.Head" alt="" v-if="blueMvp.Head"
-                   :class="[{'boy':blueMvp.Sex == 1},{'girl':blueMvp.Sex == 2}]">
-              <img src="../static/img/people/flyhead.png" alt="" v-if="!blueMvp.Head">
+                  :class="[{'boy':blueMvp.Sex == 1},{'girl':blueMvp.Sex == 2}]">
+              <img src="../static/img/people/flyhead.png" alt="" v-if="!blueMvp.Head"
+                  :class="[{'boy':blueMvp.Sex == 1},{'girl':blueMvp.Sex == 2}]">
               <div class="names">
               <span>
                   {{ blueMvp.Name }}
@@ -62,7 +64,7 @@
             <span class="mvpCode">最佳队员</span>
           </div>
           <div class="per">
-            人均卡路里 8392
+            人均卡路里 {{blueAveCle}}
           </div>
           <div class="teamName">
             蓝队
@@ -78,8 +80,8 @@
             <img v-show="winner == 1" src="../assets/imgs/pkRank/trophy.png" alt="">
             <span class="rowValue">
               <em>CK</em>
-              <s class="winnerSum" v-show="winner == 1">217.9</S>
-              <s class="loserSum" v-show="winner != 1">217.9</s>
+              <s class="winnerSum" v-show="winner == 1">{{ redSumCk }}</S>
+              <s class="loserSum" v-show="winner != 1">{{ redSumCk }}</s>
             </span>
           </div>
         </div>
@@ -92,12 +94,11 @@
             <img v-show="winner == 2" src="../assets/imgs/pkRank/trophy.png" alt="">
             <span class="rowValue">
               <em>CK</em>
-              <s class="winnerSum" v-show="winner == 2">217.9</S>
-              <s class="loserSum" v-show="winner != 2">217.9</s>
+              <s class="winnerSum" v-show="winner == 2">{{ blueSumCk }}</S>
+              <s class="loserSum" v-show="winner != 2">{{ blueSumCk }}</s>
             </span>
           </div>
         </div>
-
       </div>
       <div class="listContainer">
         <div class="lt">
@@ -107,7 +108,7 @@
               <span>成员</span>
               <span>CK</span>
             </div>
-            <li v-for="(s,i) in students.CalSort" v-if="i <= 7"
+            <li v-for="(s,i) in students.redUnite" v-if="i <= 7" v-show="Listate[i].state"
                 :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
               <div class="gary redrow">
                 <em>{{ i + 1 }}</em>
@@ -118,12 +119,12 @@
                 </div>
                 <span class="names">{{ s.Name }}</span>
                 <span class="glory">
-                <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
-                <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt="">
-                <img src="../assets/imgs/rank/pb.png" v-if="i == 2" alt="">
-              </span>
+                  <img src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
+                  <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
+                  <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->
+                  </span>
                 <span class="score">
-                                    {{ s.Ck|fmtFloat }}
+                  {{ s.Ck|fmtFloat }}
               </span>
               </div>
             </li>
@@ -136,7 +137,7 @@
               <span>成员</span>
               <span>CK</span>
             </div>
-            <li v-for="(s,i) in students.CkSort" v-if="i <= 7"
+            <li v-for="(s,i) in students.blueUnite" v-if="i <= 7" v-show="Listate[i].state"
                 :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
               <div class="gary bluerow">
                 <em>{{ i + 1 }}</em>
@@ -147,12 +148,12 @@
                 </div>
                 <span class="names">{{ s.Name }}</span>
                 <span class="glory">
-                <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
-                <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt="">
-                <img src="../assets/imgs/rank/pb.png" v-if="i == 2" alt="">
-              </span>
+                  <img src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
+                  <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
+                  <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->                
+                </span>
                 <span class="score">
-                                  {{ s.Ck|fmtFloat }}
+                  {{ s.Ck|fmtFloat }}
               </span>
               </div>
             </li>
@@ -160,15 +161,16 @@
         </div>
       </div>
       <div class="icons">
-        <img src="../assets/imgs/rank/icons.svg" alt="">
-      </div>
+        <img src="../assets/imgs/rank/icons2.svg" alt="">
+      </div>      
     </div>
-  </div>
+    <div v-show="totalTime > 0" class="countdown">{{totalTime}}</div>
+  </div>   
 </template>
 
 <script>
 import Headside from '@/components/Headside'
-import {ClassUserRank} from "@/api/getApiRes";
+import {ClassUserRank, AddPkInfo} from "@/api/getApiRes";
 
 let qs = require('qs');
 export default {
@@ -259,10 +261,19 @@ export default {
       trueDate: true,//真实数据 true false
       autoJump: true,//开启自动跳走
       students: {
-        CkSort: [],
-        CalSort: [],
+        redUnite: [],
+        blueUnite: [],
       },
       rankTimer: null,
+
+      redSumCk: 0,
+      redSumCle: 0,
+      redAveCle: 0,
+
+      blueSumCk: 0,
+      blueSumCle: 0,
+      blueAveCle: 0,
+
       totalTime: '',
       Listate: [
         {state: false},
@@ -277,31 +288,20 @@ export default {
     }
   },
   mounted() {
-    this.init();
-    this.cardPlay();
-    let pages = 1;
-    // 五秒后翻页
-    // this.rankTimer = setInterval(() => {
-    //   this.pages = 2;
-    //   if (pages == 1) {
-    this.cardPlay();
-    pages = 1;
-    //   }
-    // }, 5000);
+    this.init();    
   },
   watch: {
     '$route': function (val) {
-      if (val.path == '/rank') {
+      if (val.path == '/2pkRank') {
         if (this.trueDate) {
           this.init();
         } else {
           // this.rankTimer  = setInterval(() => {
-          this.students.CkSort = fakeNews(5);
-          this.students.CalSort = fakeNews(5);
+          // this.students.CkSort = fakeNews(5);
+          // this.students.CalSort = fakeNews(5);
           // }, 5000);
         }
       } else {
-        clearInterval(this.autoJump);
         clearInterval(this.rankTimer);
       }
     }
@@ -313,7 +313,20 @@ export default {
   methods: {
     init() {
       this.getClassUserRank();
-    },
+      this.cardPlay();
+      this.pages = 1;
+      // N秒后翻页
+      // this.rankTimer = setInterval(() => {
+      this.rankTimer = setTimeout(() => {
+        if (this.pages == 1) {
+          this.pages = 2;                   
+        }
+        else {
+          this.pages = 1;
+        }
+        this.cardPlay(); 
+      }, 10000);
+    },    
     getClassUserRank() {
       let that = this;
       let param = {
@@ -322,8 +335,12 @@ export default {
       let postdata = qs.stringify(param);
       ClassUserRank(postdata).then(res => {
         let json = res;
+        that.students.redUnite = [];
+        that.students.blueUnite = [];
         if (json.Code == 0) {
-          console.log(json);
+          // console.log("ClassUserRank: " + JSON.stringify(json));
+          that.UniteBreak(json.Rs, json.Dp.PlanId);
+
           let totalTime = 40;
           let Studenlength = 0;
           if (json.Rs) {
@@ -331,27 +348,15 @@ export default {
           }
           // 根据人数多少显示停留时间
           if (Studenlength > 3) {
-            totalTime = 60
-          } else {
             totalTime = 40
+          } else {
+            totalTime = 30
           }
           this.jumpWait(totalTime);
-          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 = [];
+          that.students.redUnite = [];
+          that.students.blueUnite = [];
+          this.jumpWait(10);
           if (json.Code == '999') {
             // that.$router.push({path: '/'});
           } else {
@@ -361,19 +366,149 @@ export default {
         }
       })
     },
+    // 分队展示
+    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.redMvp = that.students.redUnite[0];
+      that.blueMvp = that.students.blueUnite[0];
+      
+      that.calcSumCK(that.students, PlanId);
+    },
+    // 计算各队总分
+    calcSumCK(Rs, PlanId) {
+      let that = this;
+      let redSumCk = 0;
+      let redSumCle = 0;
+      let blueSumCk = 0;
+      let blueSumCle = 0;
+      Rs.redUnite.map(function (item, t) {
+        redSumCk += parseFloat(item.Ck);
+        redSumCle += parseFloat(item.Cle);
+      });
+      Rs.blueUnite.map(function (item, t) {
+        blueSumCk += parseFloat(item.Ck);
+        blueSumCle += parseFloat(item.Cle);
+        // that.successCalc(item);
+      });
+      that.redSumCk = redSumCk.toFixed(1);
+      that.redSumCle = redSumCle.toFixed(1);
+      that.blueSumCk = blueSumCk.toFixed(1);
+      that.blueSumCle = blueSumCle.toFixed(1);
+
+      // 获取人数 计算人均CK
+      let redHuman = 0;
+      let blueHuman = 0;
+      if (Rs.redUnite != '') {
+          redHuman = Rs.redUnite.length;
+          that.redAveCle = parseFloat(redSumCle / redHuman).toFixed(1);
+      } else {
+          that.redAveCle = 0
+      }
+      if (Rs.blueUnite != '') {
+          blueHuman = Rs.blueUnite.length;
+          that.blueAveCle = parseFloat(blueSumCle / blueHuman).toFixed(1);
+      } else {
+          that.blueAveCle = 0
+      }
+
+      // 上报胜率结果
+      let groupNo = redSumCk >= blueSumCk ? 1 : 2;
+      that.winner = groupNo;
+      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);
+        }
+      }
+    },
+    // 竞技课程结果上传
+    PostAddPkInfo(dpId, groupNo) {
+      let isViewMode = false;
+      // 如果是演示版不上报比赛结果
+      if (isViewMode) {
+        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('[PostAddPkInfo] 竞技课程结果上传失败! code:' + json.Code + ' memo:' + json.Memo);
+          // that.$message.error(json.Memo);
+        }
+      })
+    },
     jumpWait(totalTime) {
+      // return;  //debug时可以屏蔽本句，不进行跳转
       // 倒计时60秒自动关闭
       let that = this;
       clearInterval(clock);
-      let clock = window.setInterval(() => {
-        totalTime--;
+      let clock = window.setInterval(() => {        
         that.totalTime = totalTime;
         if (parseInt(totalTime) <= 0) {
           // 前往等待页面
-          // that.$router.push({path: '/'});
+          that.$router.push({path: '/'});
           // 计时器回收
           clearInterval(clock);
         }
+        totalTime--;
       }, 1000)
     },
     cardPlay() {
@@ -382,15 +517,16 @@ export default {
       that.Listate.map(function (t) {
         t.state = false;
       })
-      let timeScope = 400;
+      let timeScope = 100;  //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)
-      }
+      that.timer = setTimeout(() => {   //设置延迟执行
+        for (let i = 0; i < 8; i++) {
+          timeLong = parseInt(i * timeScope);
+          that.timer = setTimeout(() => {   //设置延迟执行
+            that.Listate[i].state = true;
+          }, timeLong)
+        }
+      }, 60);
     },
   },
   filters: {
@@ -536,6 +672,7 @@ export default {
           img {
             @include cube;
             width: 1.8rem;
+            height: 1.8rem;
             border-radius: 250rem;
 
             &.girl {
@@ -788,6 +925,7 @@ export default {
 
             img {
               width: 0.7rem;
+              height: 0.7rem;
               border-radius: 250rem;
 
               &.girl {
@@ -806,6 +944,8 @@ export default {
             font-size: 0.3rem;
             line-height: 0.6rem;
             margin-left: 0.4rem;
+            min-width: 3.5rem;
+            text-align: left;
           }
 
           .glory {
@@ -844,12 +984,18 @@ export default {
 
   img {
     @include cube;
-    width: 40%;
+    // width: 40%;
+    width: 18%;
   }
 }
 
-.pageDetail {
-  background: url("../../src/assets/imgs/pkRank/pkpage2bg.png");
-  @include bg;
+.countdown {
+  width: 1rem;
+  position: absolute;
+  font-size: 0.25rem;
+  color: white;
+  right: 0rem;
+  bottom: 0.2rem;
 }
+
 </style>

src/views/2pkRank2.vue

@@ -1,663 +0,0 @@
-<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>

src/views/2pkRank3.vue

@@ -1,663 +0,0 @@
-<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>

src/views/3pkRank.vue

@@ -6,93 +6,97 @@
       <div class="pageTitle">
       </div>
       <div class="pkResult">
-        <div class="lt">
+        <div class="lt" :class="teamRank[1].class">        
           <span class="level">
-                <h5 class="loser">第二名</h5>
+            <h5 class="loser">第二名</h5>
           </span>
           <span class="center">CK</span>
           <span class="ckValue">
-            <em class="loser">217.9</em>
+            <em class="loser">{{ teamRank[1].sumCk }}</em>
           </span>
           <div class="mvp">
             <div class="head">
-              <img :src="redMvp.Head" alt="" v-if="redMvp.Head"
-                   :class="[{'boy':redMvp.Sex == 1},{'girl':redMvp.Sex == 2}]">
-              <img src="../static/img/people/flyhead.png" alt="" v-if="!redMvp.Head">
+              <img :src="teamRank[1].mvp.Head" alt="" v-if="teamRank[1].mvp.Head"
+                  :class="[{'boy':teamRank[1].mvp.Sex == 1},{'girl':teamRank[1].mvp.Sex == 2}]">
+              <img src="../static/img/people/flyhead.png" alt="" v-if="!teamRank[1].mvp.Head"
+                  :class="[{'boy':teamRank[1].mvp.Sex == 1},{'girl':teamRank[1].mvp.Sex == 2}]">
               <div class="names">
               <span>
-                  {{ redMvp.Name }}
+                  {{ teamRank[1].mvp.Name }}
               </span>
               </div>
             </div>
             <span class="mvpCode">最佳队员</span>
           </div>
           <div class="per">
-            人均卡路里 8392
+            人均卡路里 {{teamRank[1].aveCle}}
           </div>
           <div class="teamName">
-            红队
+            {{teamRank[1].name}}
           </div>
         </div>
-        <div class="md">
+        <div class="md" :class="teamRank[0].class">
           <span class="level">
-                <h5 class="winner">黄队胜</h5>
-                  <img src="../assets/imgs/pkRank/trophy.png" alt="">
+            <h5 class="winner">{{teamRank[0].name}}胜</h5>
+            <img src="../assets/imgs/pkRank/trophy.png" alt="">
           </span>
           <span class="center">CK</span>
           <span class="ckValue">
-            <em class="winner">217.9</em>
+            <em class="winner">{{ teamRank[0].sumCk }}</em>
           </span>
           <div class="mvp">
             <div class="head">
-              <img :src="redMvp.Head" alt="" v-if="redMvp.Head"
-                   :class="[{'boy':redMvp.Sex == 1},{'girl':redMvp.Sex == 2}]">
-              <img src="../static/img/people/flyhead.png" alt="" v-if="!redMvp.Head">
+              <img :src="teamRank[0].mvp.Head" alt="" v-if="teamRank[0].mvp.Head"
+                  :class="[{'boy':teamRank[0].mvp.Sex == 1},{'girl':teamRank[0].mvp.Sex == 2}]">
+              <img src="../static/img/people/flyhead.png" alt="" v-if="!teamRank[0].mvp.Head"
+                  :class="[{'boy':teamRank[0].mvp.Sex == 1},{'girl':teamRank[0].mvp.Sex == 2}]">
               <div class="names">
               <span>
-                  {{ redMvp.Name }}
+                {{ teamRank[0].mvp.Name }}
               </span>
               </div>
             </div>
             <span class="mvpCode">最佳队员</span>
           </div>
           <div class="per">
-            人均卡路里 8392
+            人均卡路里 {{teamRank[0].aveCle}}
           </div>
           <div class="teamName">
-            黄队
+            {{teamRank[0].name}}
           </div>
         </div>
-        <div class="rt">
- <span class="level">
-                <h5 class="loser">第三名</h5>
+        <div class="rt" :class="teamRank[2].class">      
+          <span class="level">
+            <h5 class="loser">第三名</h5>
           </span>
           <span class="center">CK</span>
           <span class="ckValue">
-            <em class="loser">217.9</em>
+            <em class="loser">{{ teamRank[2].sumCk }}</em>
           </span>
           <div class="mvp">
             <div class="head">
-              <img :src="blueMvp.Head" alt="" v-if="blueMvp.Head"
-                   :class="[{'boy':blueMvp.Sex == 1},{'girl':blueMvp.Sex == 2}]">
-              <img src="../static/img/people/flyhead.png" alt="" v-if="!blueMvp.Head">
+              <img :src="teamRank[2].mvp.Head" alt="" v-if="teamRank[2].mvp.Head"
+                  :class="[{'boy':teamRank[2].mvp.Sex == 1},{'girl':teamRank[2].mvp.Sex == 2}]">
+              <img src="../static/img/people/flyhead.png" alt="" v-if="!teamRank[2].mvp.Head"
+                  :class="[{'boy':teamRank[2].mvp.Sex == 1},{'girl':teamRank[2].mvp.Sex == 2}]">
               <div class="names">
               <span>
-                  {{ blueMvp.Name }}
+                  {{ teamRank[2].mvp.Name }}
               </span>
               </div>
             </div>
             <span class="mvpCode">最佳队员</span>
           </div>
           <div class="per">
-            人均卡路里 8392
+            人均卡路里 {{teamRank[2].aveCle}}
           </div>
           <div class="teamName">
-            蓝队
+            {{teamRank[2].name}}
           </div>
         </div>
       </div>
     </div>
+
     <div class="pages pageDetail" v-show="pages == 2">
       <div class="sumTitle">
         <div class="lt">
@@ -101,8 +105,8 @@
             <img v-show="winner == 1" src="../assets/imgs/pkRank/trophy.png" alt="">
             <span class="rowValue">
               <em>CK</em>
-              <s class="winnerSum" v-show="winner == 1">217.9</S>
-              <s class="loserSum" v-show="winner != 1">217.9</s>
+              <s class="winnerSum" v-show="winner == 1">{{ redSumCk }}</S>
+              <s class="loserSum" v-show="winner != 1">{{ redSumCk }}</s>
             </span>
           </div>
         </div>
@@ -112,8 +116,8 @@
             <img v-show="winner == 2" src="../assets/imgs/pkRank/trophy.png" alt="">
             <span class="rowValue">
               <em>CK</em>
-              <s class="winnerSum" v-show="winner == 2">217.9</S>
-              <s class="loserSum" v-show="winner != 2">217.9</s>
+              <s class="winnerSum" v-show="winner == 2">{{ blueSumCk }}</S>
+              <s class="loserSum" v-show="winner != 2">{{ blueSumCk }}</s>
             </span>
           </div>
         </div>
@@ -123,8 +127,8 @@
             <img v-show="winner == 3" src="../assets/imgs/pkRank/trophy.png" alt="">
             <span class="rowValue">
               <em>CK</em>
-              <s class="winnerSum" v-show="winner == 3">217.9</S>
-              <s class="loserSum" v-show="winner != 3">217.9</s>
+              <s class="winnerSum" v-show="winner == 3">{{ yellowSumCk }}</S>
+              <s class="loserSum" v-show="winner != 3">{{ yellowSumCk }}</s>
             </span>
           </div>
         </div>
@@ -133,6 +137,7 @@
         <img class="ltvsSign" src="../assets/imgs/pk/vs.png" alt="">
         <img class="rtvsSign" src="../assets/imgs/pk/vs.png" alt="">
       </div>
+
       <div class="listContainer">
         <div class="lt">
           <ul>
@@ -141,7 +146,7 @@
               <span>成员</span>
               <span>CK</span>
             </div>
-            <li v-for="(s,i) in students.CalSort" v-if="i <= 7"
+            <li v-for="(s,i) in students.redUnite" v-if="i <= 7" v-show="Listate[i].state"
                 :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
               <div class="gary redrow">
                 <em>{{ i + 1 }}</em>
@@ -152,17 +157,18 @@
                 </div>
                 <span class="names">{{ s.Name }}</span>
                 <span class="glory">
-                <img src="../assets/imgs/rank/cr.png" v-if="s.Sign == 1" alt="">
-                <img src="../assets/imgs/rank/mr.png" v-if="s.Sign == 1" alt="">
-                <img src="../assets/imgs/rank/pb.png" v-if="s.Sign == 1" alt="">
-              </span>
+                  <img src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
+                  <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
+                  <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->
+                </span>
                 <span class="score">
-                                  {{ s.Ck|fmtFloat }}
+                  {{ s.Ck|fmtFloat }}
               </span>
               </div>
             </li>
           </ul>
         </div>
+
         <div class="md">
           <ul>
             <div class="ltTitle">
@@ -170,7 +176,7 @@
               <span>成员</span>
               <span>CK</span>
             </div>
-            <li v-for="(s,i) in students.CalSort" v-if="i <= 7"
+            <li v-for="(s,i) in students.blueUnite" v-if="i <= 7" v-show="Listate[i].state"
                 :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
               <div class="gary bluerow">
                 <em>{{ i + 1 }}</em>
@@ -181,12 +187,12 @@
                 </div>
                 <span class="names">{{ s.Name }}</span>
                 <span class="glory">
-               <img src="../assets/imgs/rank/cr.png" v-if="s.Sign == 1" alt="">
-                <img src="../assets/imgs/rank/mr.png" v-if="s.Sign == 1" alt="">
-                <img src="../assets/imgs/rank/pb.png" v-if="s.Sign == 1" alt="">
-              </span>
+                  <img src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
+                  <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
+                  <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->                  
+                </span>
                 <span class="score">
-                                  {{ s.Ck|fmtFloat }}
+                  {{ s.Ck|fmtFloat }}
               </span>
               </div>
             </li>
@@ -200,7 +206,7 @@
               <span>成员</span>
               <span>CK</span>
             </div>
-            <li v-for="(s,i) in students.CkSort" v-if="i <= 7"
+            <li v-for="(s,i) in students.yellowUnite" v-if="i <= 7" v-show="Listate[i].state"
                 :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
               <div class="gary yellowrow">
                 <em>{{ i + 1 }}</em>
@@ -211,12 +217,12 @@
                 </div>
                 <span class="names">{{ s.Name }}</span>
                 <span class="glory">
-                <img src="../assets/imgs/rank/cr.png" v-if="s.Sign == 1" alt="">
-                <img src="../assets/imgs/rank/mr.png" v-if="s.Sign == 1" alt="">
-                <img src="../assets/imgs/rank/pb.png" v-if="s.Sign == 1" alt="">
-              </span>
+                  <img src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
+                  <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
+                  <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->
+                </span>
                 <span class="score">
-                                  {{ s.Ck|fmtFloat }}
+                  {{ s.Ck|fmtFloat }}
               </span>
               </div>
             </li>
@@ -224,29 +230,40 @@
         </div>
       </div>
       <div class="icons">
-        <img src="../assets/imgs/rank/icons.svg" alt="">
-      </div>
+        <img src="../assets/imgs/rank/icons2.svg" alt="">
+      </div>      
     </div>
+    <div v-show="totalTime > 0" class="countdown">{{totalTime}}</div>
   </div>
 </template>
 
 <script>
 import Headside from '@/components/Headside'
-import {ClassUserRank} from "@/api/getApiRes";
+import {ClassUserRank, AddPkInfo} from "@/api/getApiRes";
 
 let qs = require('qs');
 export default {
   data() {
     return {
-      pages: 2,
+      pages: 1,
       eqSn: '30:9C:23:0C:8B:1E',
       pageStyle: RandomBg(),
       winner: 1,
       trueDate: true,//真实数据 true false
       autoJump: true,//开启自动跳走
       students: {
-        CkSort: [],
-        CalSort: [],
+        redUnite: [],
+        blueUnite: [],
+        yellowUnite: [],
+      },
+      red: {
+        rank: 0,
+      },
+      blue: {
+        rank: 0,
+      },
+      yellow: {
+        rank: 0,
       },
       redMvp: {
         Age: 13,
@@ -326,7 +343,59 @@ export default {
         lastUpdateTime: 1608188945184,
         queuePushData: [],
       },
+      yellowMvp: {
+        Age: 13,
+        AvgHr: 0,
+        BeginTime: 1608188579,
+        Ck: "@float(1,99,0,1)",
+        Cle: "@float(1,9999,0,1)",
+        DuId: 119,
+        EndTime: 0,
+        Head: require('../static/img/testhead.png'),
+        Height: 160,
+        HrId: 41,
+        IsBirthday: 0,
+        IsBreaking: 0,
+        IsNewUser: 0,
+        MaxHr: 80,
+        PowerPercent: "@integer(10, 100)",
+        Name: "姜泽志",
+        PkSucessnum: '1',//胜场数
+        PkTotalnum: '1',//总场数
+        PlanId: 60,
+        PureCalorieNoVo2: "@integer(1, 999)",
+        Sex: 1,
+        Sn: "22735",
+        StaticHr: 60,
+        SvId: 20,
+        UserId: 104,
+        UserMd5: "55661a861f8fae20dd505b2b4575dc0e",
+        Weight: 50,
+        ActivePercent: "@integer(10, 100)",
+        bmrMSjRmrcb: 66.00000000000001,
+        FormatCk: "@integer(1, 999)",
+        isAlive: true,
+        isFinish: false,
+        isOver: false,
+        IsPrivate: 1,
+        lastPushDataTime: 1608188947175,
+        lastUpdateTime: 1608188945184,
+        queuePushData: [],
+      },
       rankTimer: null,
+
+      redSumCk: 0,
+      redSumCle: 0,
+      redAveCle: 0,
+
+      blueSumCk: 0,
+      blueSumCle: 0,
+      blueAveCle: 0,
+
+      yellowSumCk: 0,
+      yellowSumCle: 0,
+      yellowAveCle: 0,
+
       totalTime: '',
       Listate: [
         {state: false},
@@ -338,34 +407,58 @@ export default {
         {state: false},
         {state: false},
       ],
+      teamRank: [
+        {
+          name: "",
+          sumCk: 0,
+          aveCle: 0,
+          mvp: {
+            Head: "",
+            Sex: 1,
+            Name: ""
+          },
+          class: ""
+        },
+        {
+          name: "",
+          sumCk: 0,
+          aveCle: 0,
+          mvp: {
+            Head: "",
+            Sex: 1,
+            Name: ""
+          },
+          class: ""
+        },
+        {
+          name: "",
+          sumCk: 0,
+          aveCle: 0,
+          mvp: {
+            Head: "",
+            Sex: 1,
+            Name: ""
+          },
+          class: ""
+        },
+      ]
     }
   },
   mounted() {
-    this.init();
-    this.cardPlay();
-    let pages = 1;
-    // 五秒后翻页
-    // this.rankTimer = setInterval(() => {
-    //   this.pages = 2;
-    //   if (pages == 1) {
-    //     this.cardPlay();
-    //     pages = 2;
-    //   }
-    // }, 5000);
+    this.init();  
   },
   watch: {
     '$route': function (val) {
-      if (val.path == '/rank') {
+      if (val.path == '/3pkRank') {
         if (this.trueDate) {
           this.init();
         } else {
           // this.rankTimer  = setInterval(() => {
-          this.students.CkSort = fakeNews(5);
-          this.students.CalSort = fakeNews(5);
+          // this.students.CkSort = fakeNews(5);
+          // this.students.CalSort = fakeNews(5);
           // }, 5000);
         }
       } else {
-        clearInterval(this.autoJump);
         clearInterval(this.rankTimer);
       }
     }
@@ -377,6 +470,19 @@ export default {
   methods: {
     init() {
       this.getClassUserRank();
+      this.cardPlay();
+      this.pages = 1;
+      // N秒后翻页
+      // this.rankTimer = setInterval(() => {  
+      this.rankTimer = setTimeout(() => {  
+        if (this.pages == 1) {
+          this.pages = 2;                   
+        }
+        else {
+          this.pages = 1;
+        }
+        this.cardPlay(); 
+      }, 10000);
     },
     getClassUserRank() {
       let that = this;
@@ -386,8 +492,12 @@ export default {
       let postdata = qs.stringify(param);
       ClassUserRank(postdata).then(res => {
         let json = res;
+        that.students.redUnite = [];
+        that.students.blueUnite = [];
+        that.students.yellowUnite = [];
         if (json.Code == 0) {
-          console.log(json);
+          that.UniteBreak(json.Rs, json.Dp.PlanId);
+
           let totalTime = 40;
           let Studenlength = 0;
           if (json.Rs) {
@@ -395,27 +505,16 @@ export default {
           }
           // 根据人数多少显示停留时间
           if (Studenlength > 3) {
-            totalTime = 60
-          } else {
             totalTime = 40
+          } else {
+            totalTime = 30;
           }
-          // this.jumpWait(totalTime); //todo
-          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;
-            });
-          }
+          this.jumpWait(totalTime);
         } else {
-          this.students.CkSort = [];
-          this.students.CalSort = [];
+          that.students.redUnite = [];
+          that.students.blueUnite = [];
+          that.students.yellowUnite = [];
+          this.jumpWait(10);
           if (json.Code == '999') {
             // that.$router.push({path: '/'});
           } else {
@@ -425,19 +524,250 @@ export default {
         }
       })
     },
+    // 分队展示
+    UniteBreak(Rs, PlanId) {
+      let that = this;
+      that.students.redUnite = [];
+      that.students.blueUnite = [];
+      that.students.yellowUnite = [];
+      // console.log(!Rs);
+
+      Rs.map(function (item, t) {
+        if (item.GroupNo == 1) {
+          that.students.redUnite.push(item);
+        }
+        if (item.GroupNo == 2) {
+          that.students.blueUnite.push(item);
+        }
+        if (item.GroupNo == 3) {
+          that.students.yellowUnite.push(item);
+        }
+      });
+
+
+      // 排序
+      that.students.redUnite = that.students.redUnite.sort(function (a, b) {
+        // return b.Cle - a.Cle;
+        return b.Ck - a.Ck;
+      });
+      that.students.blueUnite = that.students.blueUnite.sort(function (a, b) {
+        // return b.Cle - a.Cle;
+        return b.Ck - a.Ck;
+      });
+      that.students.yellowUnite = that.students.yellowUnite.sort(function (a, b) {
+        // return b.Cle - a.Cle;
+        return b.Ck - a.Ck;
+      });
+
+      that.redMvp = that.students.redUnite[0];
+      that.blueMvp = that.students.blueUnite[0];
+      that.yellowMvp = that.students.yellowUnite[0];
+      
+      that.calcSumCK(that.students, PlanId);
+    },
+    // 计算各队总分
+    calcSumCK(Rs, PlanId) {
+      let that = this;
+      let redSumCk = 0;
+      let redSumCle = 0;
+      let blueSumCk = 0;
+      let blueSumCle = 0;
+      let yellowSumCk = 0;
+      let yellowSumCle = 0;
+      Rs.redUnite.map(function (item, t) {
+        redSumCk += parseFloat(item.Ck);
+        redSumCle += parseFloat(item.Cle);
+        that.successCalc(item);
+      });
+      Rs.blueUnite.map(function (item, t) {
+        blueSumCk += parseFloat(item.Ck);
+        blueSumCle += parseFloat(item.Cle);
+        that.successCalc(item);
+      });
+      Rs.yellowUnite.map(function (item, t) {
+        yellowSumCk += parseFloat(item.Ck);
+        yellowSumCle += parseFloat(item.Cle);
+        that.successCalc(item);
+      });
+      that.redSumCk = redSumCk.toFixed(1);
+      that.redSumCle = redSumCle.toFixed(1);
+      that.blueSumCk = blueSumCk.toFixed(1);
+      that.blueSumCle = blueSumCle.toFixed(1);
+      that.yellowSumCk = yellowSumCk.toFixed(1);
+      that.yellowSumCle = yellowSumCle.toFixed(1);
+
+      // 获取人数 计算人均CK
+      let redHuman = 0;
+      let blueHuman = 0;
+      let yellowHuman = 0;
+      if (Rs.redUnite != '') {
+          redHuman = Rs.redUnite.length;
+          that.redAveCle = parseFloat(redSumCle / redHuman).toFixed(1);
+      } else {
+          that.redAveCle = 0
+      }
+      
+      if (Rs.blueUnite != '') {
+          blueHuman = Rs.blueUnite.length;
+          that.blueAveCle = parseFloat(blueSumCle / blueHuman).toFixed(1);
+      } else {
+          that.blueAveCle = 0
+      }
+      if (Rs.yellowUnite != '') {
+          yellowHuman = Rs.yellowUnite.length;
+          that.yellowAveCle = parseFloat(yellowSumCle / yellowHuman).toFixed(1);
+      } else {
+          that.yellowAveCle = 0
+      }
+
+      let res = [
+        {name: "red", val: that.redSumCk},
+        {name: "blue", val: that.blueSumCk},
+        {name: "yellow", val: that.yellowSumCk},
+      ];
+      that.getUnitRank(res, PlanId, Rs);
+    },
+    getWhoWin(redUnite, blueUnite, yellowUnite, groupNo) {
+      let that = this;
+      if (groupNo == 1) {
+        redUnite.map(function (item, t) {
+          that.successCalc(item, 1);
+        });
+        blueUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+        yellowUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+      } else if (groupNo == 2) {
+        redUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+        blueUnite.map(function (item, t) {
+          that.successCalc(item, 1);
+        });
+        yellowUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+      } else if (groupNo == 3) {
+        redUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+        blueUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+        yellowUnite.map(function (item, t) {
+          that.successCalc(item, 1);
+        });
+      }
+    },
+    // 插入胜率结果
+    successCalc(item, Victorl) {
+      // item.success = '胜' + (parseInt(item.PkSucessnum) + parseInt(Victorl)) + ' 总:' + (parseInt(item.PkTotalnum) + 1) + '结' + (parseFloat(parseInt(item.PkSucessnum) + parseInt(Victorl)) / (parseInt(item.PkTotalnum) + 1)) * 100
+
+      if (parseInt(item.PkTotalnum + Victorl) == 0) {
+        item.success = 0;
+      } else {
+        let res = (parseFloat(parseInt(item.PkSucessnum) + parseInt(Victorl)) / (parseInt(item.PkTotalnum) + 1)) * 100;
+        if (res >= 100) {
+          item.success = 100;
+        } else {
+          item.success = res.toFixed(1);
+        }
+      }
+    },
+    // 结果排序
+    getUnitRank(res, PlanId, Rs) {
+      let that = this;//这个that不要删
+      let sum = res.sort(function (a, b) {
+        return b.val - a.val;
+      });
+      sum.map(function (item, i) {
+        eval("that." + item['name'] + ".rank = i+1");
+        switch (item['name']) {
+          case "red":
+            that.teamRank[i].name = "红队";
+            that.teamRank[i].sumCk = that.redSumCk;
+            that.teamRank[i].aveCle = that.redAveCle;
+            that.teamRank[i].mvp = that.redMvp;
+            that.teamRank[i].class = "bgRed";
+            break;
+          case "blue":
+            that.teamRank[i].name = "蓝队";
+            that.teamRank[i].sumCk = that.blueSumCk;
+            that.teamRank[i].aveCle = that.blueAveCle;
+            that.teamRank[i].mvp = that.blueMvp;
+            that.teamRank[i].class = "bgBlue";
+            break;
+          case "yellow":
+            that.teamRank[i].name = "黄队";
+            that.teamRank[i].sumCk = that.yellowSumCk;
+            that.teamRank[i].aveCle = that.yellowAveCle;
+            that.teamRank[i].mvp = that.yellowMvp;
+            that.teamRank[i].class = "bgYellow";
+            break;
+        }
+      });
+
+      // 上报胜率结果
+
+      let groupNo = 0;
+      // console.log('name:' + sum[0].name);
+      switch (sum[0].name) {
+        case "red":
+          groupNo = 1;
+          break;
+        case "blue":
+          groupNo = 2;
+          break;
+        case "yellow":
+          groupNo = 3;
+          break
+      }
+      that.winner = groupNo;
+
+      // 上报本场胜率
+      that.PostAddPkInfo(PlanId, groupNo);
+      // 计算本场胜率
+      that.getWhoWin(Rs.redUnite, Rs.blueUnite, Rs.yellowUnite, groupNo);
+    },
+    // 竞技课程结果上传
+    PostAddPkInfo(dpId, groupNo) {
+      // console.log(dpId, groupNo);
+      let isViewMode = false;
+      // 如果是演示版不上报比赛结果
+      if (isViewMode) {
+        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('[PostAddPkInfo] 竞技课程结果上传失败! code:' + json.Code + ' memo:' + json.Memo);
+          // that.$message.error(json.Memo);
+        }
+      })
+    },
     jumpWait(totalTime) {
       // 倒计时60秒自动关闭
       let that = this;
       clearInterval(clock);
       let clock = window.setInterval(() => {
-        totalTime--;
-        that.totalTime = totalTime;
+        that.totalTime = totalTime;        
         if (parseInt(totalTime) <= 0) {
           // 前往等待页面
           that.$router.push({path: '/'});
           // 计时器回收
           clearInterval(clock);
         }
+        totalTime--;
       }, 1000)
     },
     cardPlay() {
@@ -446,17 +776,19 @@ export default {
       that.Listate.map(function (t) {
         t.state = false;
       })
-      let timeScope = 400;
+      let timeScope = 100;  //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)
-      }
+      that.timer = setTimeout(() => {   //设置延迟执行
+        for (let i = 0; i < 8; i++) {
+          timeLong = parseInt(i * timeScope);
+          that.timer = setTimeout(() => {   //设置延迟执行
+            that.Listate[i].state = true;
+          }, timeLong)
+        }
+      }, 60);
     },
   },
+  
   filters: {
     fmtNum(val) {
       if (val == 0) {
@@ -523,36 +855,46 @@ export default {
       width: 85%;
       margin-top: 0.4rem;
 
-      .lt {
-        width: 4rem;
-        float: left;
-        margin-top: 7%;
+      .bgRed {
         background: url("../assets/imgs/pkRank/redCube.png");
         background-repeat: no-repeat;
         background-position: top center;
         background-size: 100%;
       }
 
-      .md {
-        width: 4rem;
-        float: left;
-        margin-left: 15%;
+      .bgYellow {
         background: url("../assets/imgs/3pkRank/yellowCube.png");
         background-repeat: no-repeat;
         background-position: top center;
         background-size: 100%;
       }
 
-      .rt {
-        width: 4rem;
-        float: right;
-        margin-top: 7%;
+      .bgBlue {
         background: url("../assets/imgs/pkRank/blueCube.png");
         background-repeat: no-repeat;
         background-position: top center;
         background-size: 100%;
       }
 
+      .lt {
+        width: 4rem;
+        float: left;
+        margin-top: 7%;        
+        
+      }
+
+      .md {
+        width: 4rem;
+        float: left;
+        margin-left: 15%;
+      }
+
+      .rt {
+        width: 4rem;
+        float: right;
+        margin-top: 7%;
+      }
+
       .level {
         @include cube;
         color: white;
@@ -612,6 +954,7 @@ export default {
           img {
             @include cube;
             width: 1.2rem;
+            height: 1.2rem;
             border-radius: 250rem;
 
             &.girl {
@@ -706,12 +1049,11 @@ export default {
         }
 
         &.yellowRow {
-          float: right;
           background: url("../assets/imgs/3pkRank/yellowTitle.png");
           background-repeat: no-repeat;
           background-position: top center;
           background-size: 100%;
-          margin-left: 0.3rem;
+          margin-left: 0.6rem;
         }
 
         .rowName {
@@ -775,7 +1117,6 @@ export default {
       }
 
       img:nth-child(1) {
-
         float: left;
         left: 31.7%;
       }
@@ -790,7 +1131,7 @@ export default {
       @include cube;
       width: 92%;
       position: relative;
-      bottom: 1.5rem;
+      bottom: 1.5rem;      
 
       .lt {
         width: 32.5%;
@@ -804,9 +1145,9 @@ export default {
       }
 
       .rt {
-        width: 31%;
+        width: 32%;
         float: right;
-
+        padding-left: 0.1rem;
       }
 
       .ltTitle {
@@ -819,7 +1160,7 @@ export default {
           font-size: 0.3rem;
 
           &:nth-child(1) {
-            margin-right: 1.5rem;
+            margin-right: 1.25rem;
           }
 
           &:last-child {
@@ -890,10 +1231,11 @@ export default {
             position: relative;
             bottom: 0.5rem;
             float: left;
-            margin-left: 0.3rem;
+            margin-left: 0.2rem;
 
             img {
               width: 0.7rem;
+              height: 0.7rem;
               border-radius: 250rem;
 
               &.girl {
@@ -911,7 +1253,9 @@ export default {
             color: white;
             font-size: 0.3rem;
             line-height: 0.6rem;
-            margin-left: 0.4rem;
+            margin-left: 0.3rem;
+            min-width: 0.9rem;
+            text-align: left;
           }
 
           .glory {
@@ -950,12 +1294,18 @@ export default {
 
   img {
     @include cube;
-    width: 40%;
+    // width: 40%;
+    width: 18%;
   }
 }
 
-.pageDetail {
-  background: url("../../src/assets/imgs/3pkRank/page2bg.png");
-  @include bg;
+.countdown {
+  width: 1rem;
+  position: absolute;
+  font-size: 0.25rem;
+  color: white;
+  right: 0rem;
+  bottom: 0.2rem;
 }
+
 </style>

src/views/3pkRank2.vue

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

src/views/Index.vue

@@ -50,7 +50,8 @@ export default {
     getCurVersion() {
       let that = this;
       //浏览器默认的
-      localStorage.eqSn = '30:9C:23:0C:8B:1E';
+      // localStorage.eqSn = '30:9C:23:0C:8B:1E';
+      localStorage.eqSn = 'd104bd6ffec3d5ba';
       localStorage.version = '2.0';
 
       if (window.plus) {
@@ -129,7 +130,9 @@ export default {
     // 是否有新版本
     checkUpdate() {
       let that = this;
-      let param = {};
+      let param = {
+        vfType: 3   //新版电视端-Http接口
+      };
       let postdata = qs.stringify(param);
       const h = this.$createElement;
       QueryVueFramework(postdata).then(res => {
@@ -137,9 +140,10 @@ export default {
         if (json.Code == 0) {
           console.log('localStorage.version: ' + localStorage.version);
           console.log('json.VueFramework.Version: ' + json.VueFramework.Version);
+          // plus.nativeUI.toast("当前安装版本: " + localStorage.version);
           if (localStorage.version != json.VueFramework.Version) {
             // 正式
-            let url = "http://cal.beswell.com:85/v1/Sensors/DownloadVueFramework";
+            let url = DownloadVueFramework();
             this.downWgt(url);
           }
         }
@@ -147,31 +151,34 @@ export default {
     },
     downWgt(url) {
       let that = this;
-      plus.downloader.createDownload(url, {filename: "_doc/update/"}, function (d, status) {
-        // plus.downloader.createDownload(url, {}, function (d, status) {
+      plus.downloader.createDownload(url, {
+        // method: "POST",
+        // data: "{vfType:3}",
+        filename: "_doc/update/"
+        }, function (d, status) {
         if (status == 200) {
           console.log(d);
           console.log("下载wgt成功：" + d.filename);
           that.installWgt(d.filename); // 安装wgt包
         } else {
           console.log("下载wgt失败！");
-          // plus.nativeUI.alert("下载wgt失败！");
+          // plus.nativeUI.toast("下载wgt失败！");
         }
         plus.nativeUI.closeWaiting();
       }).start();
     },
     installWgt(path) {
-      // plus.nativeUI.showWaiting("安装wgt文件...");
+      plus.nativeUI.showWaiting("正在升级，请稍候...");
       plus.runtime.install(path, {}, function () {
         plus.nativeUI.closeWaiting();
         console.log("安装wgt文件成功！");
-        // plus.nativeUI.alert("应用资源更新完成！", function () {
+        plus.nativeUI.toast("升级完成！");
         plus.runtime.restart();
         // });
       }, function (e) {
         plus.nativeUI.closeWaiting();
         console.log("安装wgt文件失败[" + e.code + "]：" + e.message);
-        // plus.nativeUI.alert("安装wgt文件失败[" + e.code + "]：" + e.message);
+        plus.nativeUI.toast("升级失败[" + e.code + "]：" + e.message);
       });
     },
     // 获取转发端口地址

src/views/Main.vue

@@ -36,6 +36,7 @@ let qs = require('qs');
 export default {
   data() {
     return {
+      ClassOn: 1,
       eqSn: '30:9C:23:0C:8B:1E',
       pageStyle: 'bgStyleMain',
       trueDate: true,//真实数据 true false
@@ -48,16 +49,18 @@ export default {
       serachBtnStatus: false,
       dialogMsg: '',
       imgsrc: '../static/img/people/',
-      totalTime: 30,
-      studentTime: 15,
+      // totalTime: 30,
+      // studentTime: 15,
       toperInfo: {
         dialogVisible: false,
         toper: {},
+        totalTime: 30,
       },
       studentInfo: {
         dialogVisible: false,
         Rs: [],
-        percent: 0
+        percent: 0,
+        studentTime: 15
       },
       fakeEgg: {
         Rs: {
@@ -97,7 +100,7 @@ export default {
           // this.createEgg(this.students[5]);
         }
       } else {
-        console.log("val.path="+val.path);
+        // console.log("val.path="+val.path);
         clearInterval(this.mainTimer);
         clearInterval(this.timer2);
         clearInterval(this.timer3);
@@ -124,15 +127,16 @@ export default {
         // this.$router.push({path: '/'});
         this.GetgetUserList();
         this.curgetClassStat();
+        // console.log("this.toperInfo.dialogVisible: " + this.toperInfo.dialogVisible);
       }, 1000);
       
       this.timer2 = setInterval(() => {
         this.createEgg();
-      }, 31000);
+      }, 25000);
       
       this.timer3 = setInterval(() => {
         this.createNewStudent();
-      }, 6000);
+      }, 20000);
     },
     alertInfo(info) {
       alert(info);
@@ -148,13 +152,8 @@ export default {
       getRecordBreak(postdata).then(res => {
         let json = res;
         if (json.Code == 0) {
-          // 欢迎新学生时不显示彩蛋
-          if (that.studentInfo.dialogVisible == true) {
-            console.log('正在显示新学生');
-            return false
-          } else {
-            this.OpenEgg(json);
-          }
+          console.log('破纪录了');
+          that.OpenEgg(json.Rs);
         } else {
           // 并没有人破记录
           if (json.Code == 999) return false;
@@ -174,15 +173,7 @@ export default {
         let json = res;
         if (json.Code == 0) {
           console.log('来新生了');
-          // 显示彩蛋时不欢迎新学生
-          if (that.toperInfo.dialogVisible == true) {
-            console.log('正在显示彩蛋');
-            return false
-          } else {
-            console.log(json.Rs);
-            that.OpenStudent(json.Rs);
-            // OpenStudent(json.Rs,that);
-          }
+          that.OpenStudent(json.Rs);          
         } else {
           // 并没有人破记录
           if (json.Code == 999) return false;
@@ -190,34 +181,59 @@ export default {
         }
       })
     },
-    OpenEgg(msg) {
-      this.toperInfo.toper = msg.Rs;
-      this.toperInfo.dialogVisible = true;
-      console.log(123);
-      // 倒计时5秒自动关闭
+    OpenEgg(msg, reshowNum=0) {      
       let that = this;
-      this.totalTime = 30;
+      if (that.ClassOn == 0) {
+        console.log('[破纪录] 已下课，取消弹窗 reshowNum: ' + reshowNum);
+        return false;
+      }
+      if (that.studentInfo.dialogVisible == true || that.toperInfo.dialogVisible == true) {
+        console.log('[破纪录] 弹出窗口尚未关闭，5秒后重试');
+        setTimeout(() => {
+          reshowNum++;
+          that.OpenEgg(msg, reshowNum);
+        }, 5000);
+        return false;
+      } 
+      if (reshowNum > 0) {
+        console.log('[破纪录] reshowNum: ' + reshowNum);
+      }
+      that.toperInfo.toper = msg;
+      that.toperInfo.dialogVisible = true;
+      // 倒计时20秒自动关闭
+      that.toperInfo.totalTime = 20;
       let clock = window.setInterval(() => {
-        this.totalTime--;
-        if (parseInt(this.totalTime) < 0) {
+        that.toperInfo.totalTime--;
+        if (parseInt(that.toperInfo.totalTime) <= 0) {
           that.toperInfo.dialogVisible = false;// 关闭 自动关闭彩蛋
           clearInterval(clock);
         }
       }, 1000)
     },
-    OpenStudent(msg) {
+    OpenStudent(msg, reshowNum=0) {      
       let that = this;
+      if (that.ClassOn == 0) {
+        console.log('[欢迎新同学] 已下课，取消弹窗 reshowNum: ' + reshowNum);
+        return false;
+      }
+      if (that.studentInfo.dialogVisible == true || that.toperInfo.dialogVisible == true) {
+        console.log('[欢迎新同学] 弹出窗口尚未关闭，5秒后重试');
+        setTimeout(() => {
+          reshowNum++;
+          that.OpenStudent(msg, reshowNum);
+        }, 5000);
+        return false;
+      }
+      if (reshowNum > 0) {
+        console.log('[欢迎新同学] reshowNum: ' + reshowNum);
+      }
       that.studentInfo.Rs = msg;
       that.studentInfo.dialogVisible = true;
-      this.studentInfo.percent = 0;
-      // 倒计时5秒自动关闭
-      this.studentTime = 15;
+      // 倒计时15秒自动关闭
+      that.studentInfo.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.studentTime--;
+        if (parseInt(that.studentInfo.studentTime) <= 0) {
           that.studentInfo.dialogVisible = false; //关闭 自动关闭
           clearInterval(clock);
         }
@@ -263,6 +279,12 @@ export default {
         if (json.Code == 0) {
           // 没开课
           if (json.ClassOn == 0) {
+            that.ClassOn = 0;
+            if (that.studentInfo.dialogVisible == true || that.toperInfo.dialogVisible == true) {
+              console.log('[getClassStat] 下课了，等待弹出窗口关闭');
+              return false
+            } 
+
             console.log("下课了");
             // 0: 下课 团课/私教 排名
             // 1：团课/私教 todo

src/views/Main2.vue

@@ -1,388 +0,0 @@
-<template>
-  <div :class="pageStyle">
-    <Headside></Headside>
-    <!--    学生列表-->
-    <div class="userList">
-      <student :students="students" :students-class-name="studentsClassName"></student>
-    </div>
-    <!--图示-->
-    <levelIcon></levelIcon>
-    <!--    突破纪录-->
-    <newRecord :toper-info="toperInfo"></newRecord>
-    <!--    欢迎新同学-->
-    <newStudent :student-info="studentInfo"></newStudent>
-  </div>
-</template>
-
-<script>
-import Headside from '@/components/Headside'
-import newRecord from '@/components/newRecord'
-import newStudent from '@/components/newStudent'
-import levelIcon from '@/components/levelIcon'
-import student from '@/components/student'
-import
-{
-  getHello,
-  getClassStat,
-  getRecordBreak,
-  getNewUser
-} from '@/api/getApiRes'
-
-import '../libs/rem';
-import '../Global'
-
-let qs = require('qs');
-
-export default {
-  data() {
-    return {
-      eqSn: '30:9C:23:0C:8B:1E',
-      pageStyle: RandomBg(),
-      trueDate: true,//真实数据 true false
-      times: 1,
-      thisClassName: '',
-      studentsClassName: [],
-      students: [],
-      single: [],
-      dialogVisible: false,
-      serachBtnStatus: false,
-      dialogMsg: '',
-      imgsrc: '../static/img/people/',
-      totalTime: 30,
-      studentTime: 15,
-      toperInfo: {
-        dialogVisible: false,
-        toper: {},
-      },
-      studentInfo: {
-        dialogVisible: false,
-        Rs: [],
-        percent: 0
-      },
-      fakeEgg: {
-        Rs: {
-          "DuId": 37,
-          "UserId": 0,
-          "UserName": "郑伟",
-          "Sex": 1,
-          "Head": "https://img-operation.csdnimg.cn/csdn/silkroad/img/1604989753379.png",
-          "Cle": 400,
-          "CleTitle": "个人单次卡路里记录",
-          "CleUnit": "千卡",
-          "CkTitle": "个人单次CK记录",
-          "Ck": 99.9,
-          "CkUnit": "CK值",
-        }
-      },
-      mainTimer: null,
-      timer2: null,
-    }
-  },
-  mounted() {
-    // this.$router.push({path: '/2pkRank'});
-
-    if (this.trueDate) {
-      this.init();
-    } else {
-      // 彩蛋
-      // this.OpenEgg(this.fakeEgg);
-      // 1 2 4 6 9 10 13 16 21 24
-      let Rs = fakeNews(33);
-      this.giveClassName(Rs);
-      this.students = Rs;
-      // this.createNewStudent();
-    }
-  },
-  watch: {
-    '$route': function (val) {
-      if (val.path == '/main') {
-        if (this.trueDate) {
-          this.init();
-        } else {
-          this.students = fakeNews(2);
-          this.giveClassName(this.students);
-          // this.createEgg(this.students[5]);
-        }
-      } else {
-        clearInterval(this.mainTimer);
-        clearInterval(this.timer2);
-        clearInterval(this.timer3);
-      }
-    }
-  },
-  beforeDestroy() {
-    clearInterval(this.mainTimer);
-    clearInterval(this.timer2);
-    clearInterval(this.timer3);
-    this.mainTimer = null;
-    this.timer2 = null;
-    this.timer3 = null;
-  },
-  methods: {
-    init() {
-      // console.log(headTest);
-      this.GetgetUserList();
-      this.createEgg();
-      this.createNewStudent();
-      this.curgetClassStat();
-
-      this.mainTimer = setInterval(() => {
-        // this.$router.push({path: '/'});
-        this.GetgetUserList();
-        this.curgetClassStat();
-      }, 1000);
-
-      this.timer2 = setInterval(() => {
-        this.createEgg();
-      }, 31000);
-
-      this.timer3 = setInterval(() => {
-        this.createNewStudent();
-      }, 6000);
-    },
-    alertInfo(info) {
-      alert(info);
-    },
-    // 启动一个成就彩蛋
-    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 {
-            console.log(json.Rs);
-            that.OpenStudent(json.Rs);
-            // OpenStudent(json.Rs,that);
-          }
-        } 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)
-    },
-    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) {
-          that.students = json.Rs;
-          that.giveClassName(json.Rs);
-        } else {
-          // 已下课
-          if (json.Code == '999') {
-            that.students = ""
-          } else {
-            // 已出错
-            that.$message.error(json.Memo);
-          }
-        }
-      })
-    },
-    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：竞技课threepk
-            switch (parseInt(json.dp)) {
-              case 0:
-                that.$router.push({path: '/rank'});
-                break;
-              case 1:
-                that.$router.push({path: '/'});
-                break;
-              case 2:
-                that.$router.push({path: '/pk'});
-                break;
-              case 3:
-                that.$router.push({path: '/threepk'});
-                break;
-            }
-          }
-        } else {
-          console.log("已上课");
-        }
-      })
-    },
-    // 给每一个数据加类名，一次遍历全部赋值
-    giveClassName(res) {
-      let that = this;
-      let numberClass = '';
-      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) <= 4 && parseInt(res.length) > 2:
-            numberClass = 'three';
-            break;
-          case  parseInt(res.length) <= 6 && parseInt(res.length) > 4:
-            numberClass = 'six';
-            break;
-          case  parseInt(res.length) <= 9 && parseInt(res.length) > 6:
-            numberClass = 'nine';
-            break;
-          case parseInt(res.length) <= 12 && parseInt(res.length) > 9:
-            numberClass = 'ten';
-            break;
-          case parseInt(res.length) <= 15 && parseInt(res.length) > 12:
-            numberClass = 'twelve';
-            break;
-          case parseInt(res.length) <= 20 && parseInt(res.length) > 15:
-            numberClass = 'sixteen';
-            break;
-          case parseInt(res.length) <= 24 && parseInt(res.length) > 20:
-            numberClass = 'twenty';
-            break;
-          case parseInt(res.length) <= 30 && parseInt(res.length) > 24:
-            numberClass = 'twentyFour';
-            break;
-          case parseInt(res.length) >= 31:
-            numberClass = 'twentyFour';
-            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,
-        }
-      }
-    },
-  },
-  components: {
-    Headside, levelIcon, newRecord, newStudent, student
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-//@import "../assets/css/bg.css";
-@import "../assets/css/bg.scss";
-
-* {
-  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;
-}
-
-</style>

src/views/Rank.vue

@@ -1,17 +1,21 @@
 <template>
   <div class="content">
     <Headside></Headside>
+    <div class="title">
+      <span>本次训练排名</span>
+    </div>
     <div class="sumTitle">
       <div class="lt">
         <img src="../assets/imgs/rank/fire.svg" alt="">
         <h5>卡路里排名</h5>
       </div>
-      <div class="rt">
+      <div class="md">
         <img src="../assets/imgs/rank/ck.svg" alt="">
-        <h5>CK排名</h5>
+        <h5>CK 排名</h5>
       </div>
-      <div class="md">
-        <span>本次训练排名</span>
+      <div class="rt">
+        <img src="../assets/imgs/rank/ei.svg" alt="">
+        <h5>Ei 排名</h5>
       </div>
     </div>
     <div class="listContainer">
@@ -20,9 +24,9 @@
           <div class="ltTitle">
             <span>排名</span>
             <span>成员</span>
-            <span>卡路里</span>
+            <span class="titleCle">卡路里</span>
           </div>
-          <li v-for="(s,i) in students.CalSort" v-if="i <= 7"
+          <li v-for="(s,i) in students.CalSort" v-if="i <= 7" v-show="Listate[i].state"
               :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
             <div class="gary">
               <em>{{ i + 1 }}</em>
@@ -33,13 +37,41 @@
               </div>
               <span class="names">{{ s.Name }}</span>
               <span class="glory">
-                <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
-                <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt="">
-                <img src="../assets/imgs/rank/pb.png" v-if="i == 2" alt="">
+                <img src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
+                <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
+                <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->
               </span>
               <span class="score">
-                 {{ s.Cle|fmtInt }}
-                <!--                  {{ s.Ck|fmtFloat }}-->
+                  {{ s.Cle|fmtInt }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="md">
+        <ul>
+          <div class="ltTitle">
+            <span>排名</span>
+            <span>成员</span>
+            <span class="titleCK">CK</span>
+          </div>
+          <li v-for="(s,i) in students.CkSort" v-if="i <= 7" v-show="Listate[i].state" 
+              :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/pb.png" v-if="s.IsBreaking == 1" alt="">
+                <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
+                <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->
+              </span>
+              <span class="score">
+                {{ s.Ck|fmtFloat }}
               </span>
             </div>
           </li>
@@ -50,9 +82,9 @@
           <div class="ltTitle">
             <span>排名</span>
             <span>成员</span>
-            <span>CK</span>
+            <span class="titleEI">EI</span>
           </div>
-          <li v-for="(s,i) in students.CkSort" v-if="i <= 7"
+          <li v-for="(s,i) in students.EiSort" v-if="i <= 7" v-show="Listate[i].state"
               :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
             <div class="gary">
               <em>{{ i + 1 }}</em>
@@ -63,12 +95,12 @@
               </div>
               <span class="names">{{ s.Name }}</span>
               <span class="glory">
-               <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
-                <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt="">
-                <img src="../assets/imgs/rank/pb.png" v-if="i == 2" alt="">
+                <img src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
+                <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
+                <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->
               </span>
               <span class="score">
-                                  {{ s.Ck|fmtFloat }}
+                  {{ s.EI|fmtInt }}
               </span>
             </div>
           </li>
@@ -76,8 +108,9 @@
       </div>
     </div>
     <div class="icons">
-      <img src="../assets/imgs/rank/icons.svg" alt="">
+      <img src="../assets/imgs/rank/icons2.svg" alt="">
     </div>
+    <div v-show="totalTime > 0" class="countdown">{{totalTime}}</div>
   </div>
 </template>
 
@@ -96,6 +129,7 @@ export default {
       students: {
         CkSort: [],
         CalSort: [],
+        EiSort: [],
       },
       rankTimer: null,
       totalTime: '',
@@ -112,6 +146,7 @@ export default {
     }
   },
   mounted() {
+    // console.log("[Rank] mounted");
     this.init();
     this.cardPlay();
   },
@@ -124,6 +159,7 @@ export default {
           // this.rankTimer  = setInterval(() => {
           this.students.CkSort = fakeNews(5);
           this.students.CalSort = fakeNews(5);
+          this.students.EiSort = fakeNews(5);
           // }, 5000);
         }
       } else {
@@ -141,6 +177,7 @@ export default {
       this.getClassUserRank();
     },
     getClassUserRank() {
+      // console.log("getClassUserRank");
       let that = this;
       let param = {
         eqSn: localStorage.eqSn
@@ -148,7 +185,7 @@ export default {
       let postdata = qs.stringify(param);
       ClassUserRank(postdata).then(res => {
         let json = res;
-        console.log(json);
+        // console.log("ClassUserRank: " + JSON.stringify(json));
         if (json.Code == 0) {
           let totalTime = 40;
           let Studenlength = 0;
@@ -157,13 +194,15 @@ export default {
           }
           // 根据人数多少显示停留时间
           if (Studenlength > 3) {
-            totalTime = 60
+            totalTime = 40 
           } else {
-            totalTime = 40
+            totalTime = 30
           }
-          this.jumpWait(totalTime);  //tmp del
+          this.jumpWait(totalTime);  //tmp del 调试时关闭跳走
+
           let CkSort = json.Rs;
           let CalSort = deepClone(json.Rs);
+          let EiSort = deepClone(json.Rs);
           let Rs = json.Rs;
           if (Rs != '') {
             // 排序
@@ -174,10 +213,15 @@ export default {
             that.students.CalSort = CalSort.sort(function (a, b) {
               return b.Cle - a.Cle;
             });
+            
+            that.students.EiSort = EiSort.sort(function (a, b) {
+              return b.EI - a.EI;
+            });
           }
         } else {
           this.students.CkSort = [];
           this.students.CalSort = [];
+          this.students.EiSort = [];
           if (json.Code == '999') {
             // that.$router.push({path: '/'});
           } else {
@@ -187,19 +231,19 @@ export default {
         }
       })
     },
-    jumpWait(totalTime) {
+    jumpWait(totalTime) {      
       // 倒计时60秒自动关闭
       let that = this;
       clearInterval(clock);
-      let clock = window.setInterval(() => {
-        totalTime--;
+      let clock = window.setInterval(() => {        
         that.totalTime = totalTime;
         if (parseInt(totalTime) <= 0) {
           // 前往等待页面
-          that.$router.push({path: '/'}); //todo 调试时关闭跳走
+          that.$router.push({path: '/'});
           // 计时器回收
           clearInterval(clock);
         }
+        totalTime--;
       }, 1000)
     },
     cardPlay() {
@@ -208,15 +252,16 @@ export default {
       that.Listate.map(function (t) {
         t.state = false;
       })
-      let timeScope = 400;
+      let timeScope = 100;  //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)
-      }
+      that.timer = setTimeout(() => {   //设置延迟执行
+        for (let i = 0; i < 8; i++) {
+          timeLong = parseInt(i * timeScope);
+          that.timer = setTimeout(() => {   //设置延迟执行
+            that.Listate[i].state = true;
+          }, timeLong)
+        }
+      }, 60);
     },
   },
   filters: {
@@ -266,81 +311,104 @@ export default {
 }
 
 .content {
-  background: url("../../src/assets/imgs/rank/Training.png");
+  background: url("../../src/assets/imgs/rank/pageBg.png");
   @include bg;
+
+  .title {
+    // position: relative;
+    width: 3rem;
+    height: 0.75rem;
+    margin: 0 auto;
+    margin-top: -0.38rem;
+    bottom: 0.1rem;
+    background: url("../../src/assets/imgs/rank/titleBg2.png");
+    background-repeat: no-repeat;
+    background-position: top center;
+    background-size: 100% 100%;
+    line-height: 0.7rem;
+    span {
+      @include cube;
+      // position: relative;
+      bottom: 0.65rem;
+      color: #fff;
+      text-align: center;
+      font-size: 0.35rem;
+      font-weight: bold;
+    }
+  }
+  
   .sumTitle {
     @include cube;
-    width: 80%;
+    width: 92%;
     height: 0.75rem;
-    margin-top: 0.7rem;
+    margin-top: 0.3rem;
     overflow: visible;
 
     h5 {
       float: left;
       width: 80%;
       margin: 0;
+      margin-top: 0.04rem;
       text-align: center;
       color: #fff;
-      font-size: 0.5rem;
+      font-size: 0.46rem;
       font-weight: bold;
-
     }
 
     .lt {
-      width: 50%;
+      width: 32%;
       height: 0.75rem;
       float: left;
-      background: url("../../src/assets/imgs/rank/redTitel.png");
+      background: url("../../src/assets/imgs/rank/redTitel2.png");
       background-repeat: no-repeat;
       background-position: top center;
       background-size: 100%;
       border-radius: 250rem;
 
       img {
-        width: 0.51rem;
+        width: 0.70rem;
         float: left;
       }
     }
 
-    .rt {
-      width: 50%;
+    .md {
+      width: 32%;
       height: 0.75rem;
-      float: right;
-      background: url("../../src/assets/imgs/rank/redTitel.png");
+      float: left;
+      margin-left: 0.35rem;
+      background: url("../../src/assets/imgs/rank/redTitel2.png");
       background-repeat: no-repeat;
       background-position: top center;
       background-size: 100%;
       border-radius: 250rem;
 
       img {
-        width: 0.8rem;
-        float: right;
+        width: 0.95rem;
+        float: left;
       }
 
       h5 {
-        float: right;
+        margin-left: -0.3rem;
       }
     }
 
-    .md {
-      position: relative;
-      width: 3rem;
-      height: 0.9rem;
-      margin: 0 auto;
-      bottom: 0.1rem;
-      background: url("../../src/assets/imgs/rank/titleBg2.png");
+    .rt {
+      width: 32%;
+      height: 0.75rem;
+      float: right;
+      background: url("../../src/assets/imgs/rank/redTitel2.png");
       background-repeat: no-repeat;
       background-position: top center;
-      background-size: 100% 100%;
-      line-height: 0.7rem;
-      span {
-        @include cube;
-        position: relative;
-        bottom: 0.65rem;
-        color: #fff;
-        text-align: center;
-        font-size: 0.35rem;
-        font-weight: bold;
+      background-size: 100%;
+      border-radius: 250rem;
+
+      img {
+        width: 0.95rem;
+        float: left;
+      }
+      
+      h5 {
+        margin-left: -0.3rem;
       }
     }
   }
@@ -348,20 +416,26 @@ export default {
 
 .listContainer {
   @include cube;
-  width: 80%;
+  width: 92%;
   padding-top: 0.5rem;
 
   .lt {
-    width: 47%;
+    width: 30%;
+    float: left;
+  }
+
+  .md {
+    width: 30%;
     float: left;
+    margin-left: 0.92rem;
   }
 
   .rt {
-    width: 47%;
+    width: 30%;
     float: right;
-    .ltTitle span {
-      margin-right: 0.3rem;
-    }
+    // .ltTitle span {
+    //   margin-right: 0.3rem;
+    // }
   }
 
   .ltTitle {
@@ -373,13 +447,24 @@ export default {
       font-size: 0.25rem;
 
       &:nth-child(1) {
-        margin-right: 1.3rem;
+        margin-right: 1.5rem;
       }
 
       &:last-child {
         float: right;
+        // margin-right: 0.2rem;
       }
     }
+
+    .titleCle {
+      margin-right: 0.2rem;
+    }
+    .titleCK {
+      margin-right: 0.3rem;
+    }
+    .titleEI {
+      margin-right: 0.5rem;
+    }
   }
 
   ul {
@@ -431,6 +516,7 @@ export default {
 
         img {
           width: 0.65rem;
+          height: 0.65rem;
           border-radius: 250rem;
 
           &.girl {
@@ -449,6 +535,8 @@ export default {
         font-size: 0.3rem;
         line-height: 0.6rem;
         margin-left: 0.4rem;
+        min-width: 1rem;
+        text-align: left;
       }
 
       .glory {
@@ -485,7 +573,18 @@ export default {
 
   img {
     @include cube;
-    width: 40%;
+    // width: 40%;
+    width: 18%;
   }
 }
+
+.countdown {
+  width: 1rem;
+  position: absolute;
+  font-size: 0.25rem;
+  color: white;
+  right: 0rem;
+  bottom: 0.2rem;
+}
+
 </style>

src/views/Rank2.vue

@@ -1,380 +0,0 @@
-<template>
-  <div :class="pageStyle">
-    <Headside></Headside>
-    <div class="tips">
-      {{ totalTime }}
-    </div>
-    <div class="rankContainer">
-      <el-row :gutter="20">
-        <!--卡路里-->
-        <el-col :span="12">
-          <!--          只显示前8个-->
-          <li v-for="(s,i) in students.CalSort" v-if="i <= 7">
-            <div
-                :class="['rows',{'row_0':i == 0},{'row_1':i == 1},{'row_2':i == 2},{'row_3':i == 3},{'row_4':i == 4},{'row_5':i == 5},{'row_6':i == 6},{'row_7':i == 7}]">
-              <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="../static/img/rank/king1.svg" class="king" alt="" v-if="i == 0">
-                <img src="../static/img/rank/king2.svg" class="king" alt="" v-if="i == 1">
-                <img src="../static/img/rank/king3.svg" class="king" alt="" v-if="i == 2">
-              </div>
-              <div class="name">
-                NO.{{ i + 1 }} {{ s.Name }}
-              </div>
-              <div class="score">
-                {{ s.Cle|fmtInt }}
-                <em>千卡</em>
-              </div>
-              <div class="record">
-                <img src="../static/img/rank/recordIcon.svg" class="king" alt=""
-                     v-if="s.IsNewUser ==0 && s.IsBreaking == 1">
-              </div>
-            </div>
-          </li>
-        </el-col>
-        <!--CK-->
-        <el-col :span="12">
-          <li v-for="(s,i) in students.CkSort" v-if="i <= 7">
-            <div
-                :class="['rows',{'row_0':i == 0},{'row_1':i == 1},{'row_2':i == 2},{'row_3':i == 3},{'row_4':i == 4},{'row_5':i == 5},{'row_6':i == 6},{'row_7':i == 7}]">
-              <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="../static/img/rank/king1.svg" class="king" alt="" v-if="i == 0">
-                <img src="../static/img/rank/king2.svg" class="king" alt="" v-if="i == 1">
-                <img src="../static/img/rank/king3.svg" class="king" alt="" v-if="i == 2">
-              </div>
-              <div class="name">
-                NO.{{ i + 1 }} {{ s.Name }}
-              </div>
-
-              <div class="score">
-                {{ s.Ck|fmtFloat }}
-                <em>CK</em>
-              </div>
-              <div class="record">
-                <img src="../static/img/rank/recordIcon.svg" class="king" alt=""
-                     v-if="s.IsNewUser ==0 && s.IsBreaking == 1">
-              </div>
-            </div>
-          </li>
-        </el-col>
-      </el-row>
-    </div>
-  </div>
-</template>
-
-<script>
-import Headside from '@/components/Headside'
-import '../libs/rem';
-import '../Global';
-import {
-  ClassUserRank
-} 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: {
-        CkSort: [],
-        CalSort: [],
-      },
-      rankTimer: null,
-      totalTime: ''
-    }
-  },
-  mounted() {
-    if (this.trueDate) {
-      this.init();
-    } else {
-      this.students.CkSort = fakeNews(5);
-      this.students.CalSort = fakeNews(5);
-      this.students.CkSort = this.students.CkSort.sort(function (a, b) {
-        return b.Ck - a.Ck;
-      });
-      this.students.CalSort = this.students.CalSort.sort(function (a, b) {
-        return b.Cle - a.Cle;
-      });
-    }
-  },
-  watch: {
-    '$route': function (val) {
-      if (val.path == '/rank') {
-        if (this.trueDate) {
-          this.init();
-        } else {
-          // this.rankTimer  = setInterval(() => {
-          this.students.CkSort = fakeNews(5);
-          this.students.CalSort = fakeNews(5);
-          // }, 5000);
-        }
-      } else {
-        clearInterval(this.autoJump);
-        clearInterval(this.rankTimer);
-      }
-    }
-  },
-  beforeDestroy() {
-    clearInterval(this.rankTimer);
-    this.rankTimer = null;
-  },
-  methods: {
-    init() {
-      this.getClassUserRank();
-    },
-    jumpWait(totalTime) {
-      // 倒计时60秒自动关闭
-      let that = this;
-      let clock = window.setInterval(() => {
-        totalTime--;
-        that.totalTime = totalTime;
-        if (parseInt(totalTime) <= 0) {
-          // 前往等待页面
-          that.$router.push({path: '/'});
-          // 计时器回收
-          clearInterval(clock);
-        }
-      }, 1000)
-    },
-    getClassUserRank() {
-      let that = this;
-      let param = {
-        eqSn: localStorage.eqSn
-      };
-      let postdata = qs.stringify(param);
-      ClassUserRank(postdata).then(res => {
-        let json = res;
-        if (json.Code == 0) {
-          let totalTime = 40;
-          let Studenlength = 0;
-          if (json.Rs) {
-            Studenlength = json.Rs.length;
-          }
-          // 根据人数多少显示停留时间
-          if (Studenlength > 3) {
-            totalTime = 60
-          } else {
-            totalTime = 40
-          }
-          this.jumpWait(totalTime);
-          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 = [];
-          if (json.Code == '999') {
-            // that.$router.push({path: '/'});
-          } 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);
-        // 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;
-}
-
-li {
-  width: 100%;
-  height: 1.2rem;
-  display: block;
-  margin: 0 auto;
-  overflow: hidden;
-}
-
-li .rows {
-  width: 100%;
-  height: 1rem;
-  /*background: #ee191d;*/
-  border-radius: 250rem;
-  overflow: visible;
-  display: block;
-  margin: 0 auto;
-  margin-top: 0.15rem;
-}
-
-li .head {
-  width: 0.8rem;
-  height: 0.8rem;
-  float: left;
-  margin-left: 0.1rem;
-  margin-top: 0.05rem;
-  overflow: visible;
-}
-
-li .head .headImg {
-  width: 0.8rem;
-  height: 0.8rem;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  border: 5px solid #fff;
-  border-radius: 33rem;
-}
-
-li .head .king {
-  position: relative;
-  top: -1.2rem;
-  left: 0rem;
-  width: 0.6rem;
-  height: 0.6rem;
-  float: left;
-}
-
-li .name {
-  font-weight: normal;
-  font-size: 0.4rem;
-  text-align: left;
-  color: #fff;
-  float: left;
-  margin-left: 0.2rem;
-  line-height: 1rem;
-}
-
-li .record {
-  float: right;
-}
-
-li .record img {
-  position: relative;
-  top: -0rem;
-  width: 1.2rem;
-}
-
-li .score {
-  font-weight: normal;
-  font-size: 0.4rem;
-  color: #fff;
-  float: right;
-  margin-right: 0.2rem;
-  line-height: 1rem;
-  text-align: right;
-}
-
-li .score em {
-  font-size: 0.2rem;
-}
-
-.row_0 {
-  background: rgba(238, 25, 29, 0.75);
-}
-
-.row_1 {
-  background: rgba(244, 76, 31, 0.75);
-}
-
-.row_2 {
-  background: rgba(242, 182, 23, 0.75);
-}
-
-.row_3 {
-  background: rgba(112, 238, 21, 0.75);
-}
-
-.row_4 {
-  background: rgba(11, 253, 45, 0.75);
-}
-
-.row_5 {
-  background: rgba(1, 228, 182, 0.75);
-}
-
-.row_6 {
-  background: rgba(0, 207, 230, 0.75);
-}
-
-.row_7 {
-  background: rgba(4, 209, 252, 0.75);
-}
-
-.tips {
-  position: absolute;
-  right: 3%;
-  top: 1rem;
-  font-size: 0.4rem;
-  color: #fff;
-}
-
-</style>

src/views/Rank_old.vue

@@ -76,7 +76,7 @@
       </div>
     </div>
     <div class="icons">
-      <img src="../assets/imgs/rank/icons.svg" alt="">
+      <img src="../assets/imgs/rank/icons2.svg" alt="">
     </div>
   </div>
 </template>
@@ -208,7 +208,7 @@ export default {
       that.Listate.map(function (t) {
         t.state = false;
       })
-      let timeScope = 400;
+      let timeScope = 100;  //400
       let timeLong;
       let row;
       for (let i = 0; i < 8; i++) {
@@ -373,11 +373,12 @@ export default {
       font-size: 0.25rem;
 
       &:nth-child(1) {
-        margin-right: 1.3rem;
+        margin-right: 1.5rem;
       }
 
       &:last-child {
         float: right;
+        margin-right: 0.2rem;
       }
     }
   }
@@ -431,6 +432,7 @@ export default {
 
         img {
           width: 0.65rem;
+          height: 0.65rem;
           border-radius: 250rem;
 
           &.girl {
@@ -449,6 +451,8 @@ export default {
         font-size: 0.3rem;
         line-height: 0.6rem;
         margin-left: 0.4rem;
+        min-width: 1rem;
+        text-align: left;
       }
 
       .glory {
@@ -485,7 +489,8 @@ export default {
 
   img {
     @include cube;
-    width: 40%;
+    // width: 40%;
+    width: 18%;
   }
 }
 </style>

src/views/Wait.vue

@@ -1,9 +1,10 @@
 <template>
   <div :class="pageStyle">
     <Headside></Headside>
-    <div class="container" v-show="page">
-      <div class="lt lists">
-        <div class="partTitle">
+    <!-- 第一屏 -->
+    <div class="container" v-show="!page">
+      <div v-show="Listate[0].state" class="lt lists">
+        <div class="partTitle" :class="[{'box animate__animated animate__flipInX': Listate[0].state}]">
           周卡路里排名
         </div>
         <div class="listTitle">
@@ -12,59 +13,61 @@
           <span>卡路里</span>
         </div>
         <ul>
-          <li v-for="(s,i) in calcTodayRank" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+          <li v-for="(s,i) in calcWeekRank" v-show="Listate[i].state" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
             <div class="num">{{ i + 1 }}</div>
-            <img :class="[{'headImg':true},{'girl':s.Sex == 1}]" :src="s.Head" alt="" v-if="s.Head">
-            <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
+            <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" :src="s.Head" alt="" v-if="s.Head">
+            <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
             <span>{{ s.UserName }}</span>
-            <img class="crIcon" v-if="i == 0" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
+            <img class="crIcon" v-bind:src="require('../assets/imgs/rank/cr.png')" v-if="i == 0" alt="">
+            <img class="pbIcon" src="../assets/imgs/rank/pb.png" v-else-if="s.IsBreaking == 1" alt="">
             <em>{{ s.Values }}</em>
           </li>
-          <li v-if="calcTodayRank == ''">
+          <li v-if="calcWeekRank == ''">
             <i>还没有排行记录哟~</i>
           </li>
         </ul>
       </div>
-      <div class="md">
-        <h5 :class="[{'timeTitle weeksTitle':true},{ ' box animate__animated animate__flipInX': Listate[0].state }]">
+      <div v-show="Listate[0].state" class="md">
+        <h5 :class="[{'timeTitle weeksTitle':true}, {' box animate__animated animate__flipInX': Listate[0].state}]">
           本周
         </h5>
-        <span class="sub">
+        <span class="sub" v-show="Listate[2].state" :class="[{'box animate__animated animate__flipInX': Listate[2].state}]">
               场馆卡路里总消耗
             </span>
-        <div class="sumCalc">
-          <h5 :class="[{ 'box animate__animated animate__flipInX': Listate[3].state }]">
+        <div v-show="Listate[3].state" class="sumCalc">
+          <h5 :class="[{'box animate__animated animate__flipInX': Listate[3].state}]">
               {{ recordMain[0].Result[0].Values }}</h5>
             <!-- {{ TodayCalcValues }}</h5> -->
-          <em>Kcal</em>
+          <em :class="[{'box animate__animated animate__flipInX': Listate[3].state}]">千卡</em>
         </div>
-        <div class="persons">
-          <!--               hero 英雄榜-->
-          <h5>英雄榜</h5>
+        <div v-show="Listate[7].state" class="persons" :class="[{ 'box animate__animated animate__flipInX': Listate[3].state }]">
+          <!-- hero 英雄榜-->
+          <h5 v-if="Heros != ''">本周消耗卡路里英雄榜</h5>
           <ul>
-            <li v-for="s in Heros">
+            <li v-for="(s,index) in Heros">
               <div class="person">
-                <img :class="[{'headImg':true},{'girl':s.Sex == 1}]" :src="s.Head" alt="" v-if="s.Head">
-                <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
+                <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" :src="s.Head" alt="" v-if="s.Head">
+                <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
                 <span class="name">{{ s.UserName }}</span>
                 <div class="calcHero">
                   <img src="../assets/imgs/wait/calcIcon.svg" alt="">
                   <em>{{ s.Values }}</em>
                 </div>
+                <i>{{ index + 1 }}</i>
               </div>
-              <span class="sign">
-                      <img src="../assets/imgs/wait/newIcon.svg" alt="new">
-                      <em>场馆新纪录</em>
-                    </span>
+              <!-- <span class="sign">
+                <img src="../assets/imgs/wait/newIcon.svg" alt="new">
+                <em>场馆新纪录</em>
+              </span> -->
             </li>
             <li v-if="Heros == ''">
-              <i>还没有排行记录哟~</i>
+              <!-- <i>还没有排行记录哟~</i> -->
             </li>
           </ul>
         </div>
       </div>
-      <div class="rt lists">
-        <div class="partTitle">
+      <div v-show="Listate[0].state" class="rt lists">
+        <div class="partTitle" :class="[{'box animate__animated animate__flipInX': Listate[0].state}]">
           周CK排名
         </div>
         <div class="listTitle">
@@ -73,23 +76,25 @@
           <span>C K</span>
         </div>
         <ul>
-          <li v-for="(s,i) in CKTodayRank" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+          <li v-for="(s,i) in CKWeekRank" v-show="Listate[i].state" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
             <div class="num">{{ i + 1 }}</div>
-            <img :class="[{'headImg':true},{'girl':s.Sex == 1}]" :src="s.Head" alt="" v-if="s.Head">
-            <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
+            <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" :src="s.Head" alt="" v-if="s.Head">
+            <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
             <span>{{ s.UserName }}</span>
-            <img class="crIcon" v-if="i == 0" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
+            <img class="crIcon" v-bind:src="require('../assets/imgs/rank/cr.png')" v-if="i == 0" alt="">
+            <img class="pbIcon" src="../assets/imgs/rank/pb.png" v-else-if="s.IsBreaking == 1" alt="">
             <em>{{ s.Values }}</em>
           </li>
-          <li v-if="CKTodayRank == ''">
+          <li v-if="CKWeekRank == ''">
             <i>还没有排行记录哟~</i>
           </li>
         </ul>
       </div>
     </div>
-    <div class="container" v-show="!page">
-      <div class="lt lists">
-        <div class="partTitle">
+    <!-- 第二屏 -->
+    <div class="container" v-show="page">
+      <div v-show="Listate[0].state" class="lt lists">
+        <div class="partTitle" :class="[{'box animate__animated animate__flipInX': Listate[0].state}]">
           月卡路里排名
         </div>
         <div class="listTitle">
@@ -98,12 +103,13 @@
           <span>卡路里</span>
         </div>
         <ul>
-          <li v-for="(s,t) in calcMouthRank" :class="[{ 'box animate__animated animate__flipInX': Listate[t].state }]">
+          <li v-for="(s,t) in calcMouthRank" v-show="Listate[t].state" :class="[{ 'box animate__animated animate__flipInX': Listate[t].state }]">
             <div class="num">{{ t + 1 }}</div>
-            <img :class="[{'headImg':true},{'girl':s.Sex == 1}]" :src="s.Head" alt="" v-if="s.Head">
-            <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
+            <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" :src="s.Head" alt="" v-if="s.Head">
+            <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
             <span>{{ s.UserName }}</span>
-            <img class="crIcon" v-if="t == 0" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
+            <img class="crIcon" v-bind:src="require('../assets/imgs/rank/cr.png')" v-if="t == 0" alt="">
+            <img class="pbIcon" src="../assets/imgs/rank/pb.png" v-else-if="s.IsBreaking == 1" alt="">
             <em>{{ s.Values }}</em>
           </li>
           <li v-if="calcMouthRank == ''">
@@ -111,29 +117,29 @@
           </li>
         </ul>
       </div>
-      <div class="md">
+      <div v-show="Listate[0].state" class="md">
         <h5 :class="[{'timeTitle monsTitle':true},{ ' box animate__animated animate__flipInX': Listate[0].state }]">
           本月
         </h5>
-        <span class="sub">
+        <span class="sub" v-show="Listate[2].state" :class="[{'box animate__animated animate__flipInX': Listate[2].state}]">
               场馆卡路里总消耗
             </span>
-        <div class="sumCalc">
+        <div v-show="Listate[3].state" class="sumCalc">
           <h5 :class="[{ 'box animate__animated animate__flipInX': Listate[3].state }]">
             {{ recordMain[1].Result[0].Values }}</h5>
-          <em>Kcal</em>
+          <em :class="[{'box animate__animated animate__flipInX': Listate[3].state}]">千卡</em>
         </div>
-        <div class="persons">
-          <!--               最佳会员-->
-          <h5>最佳会员</h5>
+        <div v-show="Listate[7].state" class="persons" :class="[{ 'box animate__animated animate__flipInX': Listate[3].state }]">
+          <!-- 本月上课次数排名 -->
+          <h5 v-if="ClassNumToper != ''">本月上课次数排名</h5>
           <ul>
-            <li v-for="(s,index) in CKtoper">
+            <li v-for="(s,index) in ClassNumToper">
               <div class="person">
-                <img :class="[{'headImg':true},{'girl':s.Sex == 1}]" :src="s.Head" alt="" v-if="s.Head">
-                <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
+                <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" :src="s.Head" alt="" v-if="s.Head">
+                <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
                 <span class="name">{{ s.UserName }}</span>
                 <div class="calcHero">
-                  <img src="../assets/imgs/wait/calcIcon.svg" alt="">
+                  <img src="../assets/imgs/wait/classNum.svg" alt="">
                   <em>{{ s.Values }}</em>
                 </div>
                 <i>{{ index + 1 }}</i>
@@ -142,8 +148,8 @@
           </ul>
         </div>
       </div>
-      <div class="rt lists">
-        <div class="partTitle">
+      <div v-show="Listate[0].state" class="rt lists">
+        <div class="partTitle" :class="[{'box animate__animated animate__flipInX': Listate[0].state}]">
           月CK排名
         </div>
         <div class="listTitle">
@@ -152,12 +158,13 @@
           <span>C K</span>
         </div>
         <ul>
-          <li v-for="(s,i) in CKMonthRank" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+          <li v-for="(s,i) in CKMonthRank" v-show="Listate[i].state" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
             <div class="num">{{ i + 1 }}</div>
-            <img :class="[{'headImg':true},{'girl':s.Sex == 1}]" :src="s.Head" alt="" v-if="s.Head">
-            <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
+            <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" :src="s.Head" alt="" v-if="s.Head">
+            <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
             <span>{{ s.UserName }}</span>
-            <img class="crIcon" v-if="i == 0" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
+            <img class="crIcon" v-bind:src="require('../assets/imgs/rank/cr.png')" v-if="i == 0" alt="">
+            <img class="pbIcon" src="../assets/imgs/rank/pb.png" v-else-if="s.IsBreaking == 1" alt="">
             <em>{{ s.Values }}</em>
           </li>
           <li v-if="CKMonthRank == ''">
@@ -167,7 +174,7 @@
       </div>
     </div>
     <div class="icons" @click="playBell">
-      <img src="../assets/imgs/wait/icons.svg" alt="">
+      <img src="../assets/imgs/wait/icons2.svg" alt="">
     </div>
     <audio class="success" src="../static/sound/bell.wav" autoplay="autoplay" v-if="bellState">
     </audio>
@@ -196,9 +203,11 @@ export default {
       eqSn: '30:9C:23:0C:8B:1E',
       pageStyle: RandomBg2(),
       page: true,
+      show: true,
       bellState: false,
-      pageTimer: null,
+      // pageTimer: null,
       waitTimer: null,
+      waitTimer2: null,
       Listate: [
         {state: false},
         {state: false},
@@ -221,52 +230,41 @@ export default {
       ],
       rt: [],
       bottom: [],
-      calcTodayRank: [],
-      CKTodayRank: [],
+      calcWeekRank: [],
+      CKWeekRank: [],
       calcMouthRank: [],
       CKMonthRank: [],
       Heros: [],
-      CKtoper: [],
+      // CKtoper: [],
+      ClassNumToper: [],
       // TodayCalcValues: 0,
     }
   },
   mounted() {
+    console.log("[Wait] mounted");
     // test
     // this.$router.push({path: '/rank'});
     // this.$router.push({path: '/2pkrank'});
     // this.$router.push({path: '/3pkrank'});
     // this.$router.push({path: '/threepk'});
 
-    
     this.init();
-    // this.grpcServe();
-    if (this.pageTimer) {
-      console.log("[mounted] clearInterval");
-      clearInterval(this.pageTimer);
-    } else {
-      this.pageTimer = setInterval(() => {
-        this.page = !this.page;
-        this.init();
-        this.cardPlay();
-      }, 6000)
-    }
-    this.cardPlay();
+    // this.grpcServe(); 
+    
   },
   destroyed() {
-    console.log("[destroyed] clearInterval");
-    clearInterval(this.pageTimer);//页面销毁时清除定时器
     clearInterval(this.waitTimer);//页面销毁时清除定时器
+    clearInterval(this.waitTimer2);//页面销毁时清除定时器
   },
   watch: {
     '$route': function (val) {
+      console.log("[watch route] val.path=" + val.path);
       let that = this;
-      if (val.path == '/') {
+      if (val.path == '/') {       
         that.init();
-        this.cardPlay();
       } else {
-        console.log("[watch route] clearInterval");
-        clearInterval(this.pageTimer);
         clearInterval(this.waitTimer);
+        clearInterval(this.waitTimer2);
       }
     }
   },
@@ -312,26 +310,43 @@ export default {
       this.bellState = !this.bellState
     },
     init() {
+      console.log("[Wait] init() run!");
+
       this.curgetClassStat();
       this.GetHerosRankingQuery();
       this.GetCalorieStatsQuery();
       this.GetUserRankingQuery();
+      this.cardPlay();
+        
+      this.waitTimer = setInterval(() => {
+        this.curgetClassStat();
+      }, 3000);
+
+      this.waitTimer2 = setInterval(() => {
+        this.GetHerosRankingQuery();
+        this.GetCalorieStatsQuery();
+        this.GetUserRankingQuery();
+
+        this.page = !this.page;
+        this.cardPlay();
+      }, 10000);
     },
     cardPlay() {
-      // console.log("cardPlay run!");
       let that = this;
       // 重置一下状态
       that.Listate.map(function (t) {
         t.state = false;
       })
-      let timeScope = 600;
+      let timeScope = 100;  //600
       let timeLong;
-      for (let i = 0; i < 8; i++) {
-        timeLong = parseInt(i * timeScope);
-        that.timer = setTimeout(() => {   //设置延迟执行
-          that.Listate[i].state = true;
-        }, timeLong)
-      }
+      that.timer = setTimeout(() => {   //设置延迟执行
+        for (let i = 0; i < 8; i++) {
+          timeLong = parseInt(i * timeScope);
+          that.timer = setTimeout(() => {   //设置延迟执行
+            that.Listate[i].state = true;
+          }, timeLong)
+        }
+      }, 60);
     },
     curgetClassStat() {
       let that = this;
@@ -380,7 +395,7 @@ export default {
         // console.log("[Wait] HerosRankingQuery: " + JSON.stringify(json));
         if (json.Code == 0) {
           that.Heros = json.Rs[0].Result;
-          that.CKtoper = json.Rs[1].Result;
+          that.ClassNumToper = json.Rs[1].Result;
         } else {
           if (json.Code == 4002) {
           } else {
@@ -433,10 +448,10 @@ export default {
         if (json.Code == 0) {
           // that.rt = json.Rs;
           if (json.Rs != null) {
-            that.calcTodayRank = json.Rs[2].Result;
-            that.CKTodayRank = json.Rs[3].Result;
-            that.calcMouthRank = json.Rs[0].Result;
-            that.CKMonthRank = json.Rs[1].Result;
+            that.calcMouthRank  = json.Rs[0].Result;
+            that.CKMonthRank    = json.Rs[1].Result;
+            that.calcWeekRank   = json.Rs[2].Result;
+            that.CKWeekRank     = json.Rs[3].Result;            
           }
         } else {
           if (json.Code == 4002) {
@@ -543,6 +558,7 @@ $yellow: #FFEB50;
         .headImg {
           position: relative;
           top: -0.02rem;
+          width: 0.65rem;
           height: 0.65rem;
           float: left;
           border: 1.5px solid #39B6FF;
@@ -556,13 +572,20 @@ $yellow: #FFEB50;
         span {
           width: 1.5rem;
           float: left;
-          text-align: center;
+          text-align: left;
           line-height: 0.65rem;
+          margin-left: 0.4rem;
         }
 
         .crIcon {
-          width: 0.75rem;
-          margin-top: 0.05rem;
+          width: 0.64rem;
+          margin-top: 0.1rem;
+          float: left;
+        }
+
+        .pbIcon {
+          width: 0.64rem;
+          margin-top: 0.1rem;
           float: left;
         }
 
@@ -827,7 +850,8 @@ $yellow: #FFEB50;
 
 .icons {
   @include cube;
-  width: 7rem;
+  // width: 7rem;
+  width: 3.6rem;
   font-size: 0.3rem;
 
   img {

src/views/Wait2.vue

@@ -1,901 +0,0 @@
-<template>
-  <div :class="pageStyle">
-    <Headside></Headside>
-    <div class="rankContainer">
-      <div class="lt">
-        <div class="recordMain">
-          <el-carousel :interval="30000" height="100%">
-            <el-carousel-item v-for="rs in recordMain">
-              <div>
-                <h5 v-html="rs.Title"></h5>
-                <div class="sumContainer">
-                  <div class="sum">
-                    <s>{{ rs.Result[0].Unite }}</s>
-                    <sumNumber :cur-number="rs.Result[0].Values"></sumNumber>
-                  </div>
-                  <span class="sumBg"></span>
-                </div>
-              </div>
-            </el-carousel-item>
-          </el-carousel>
-        </div>
-        <div class="bottom">
-          <el-carousel :interval="15000" height="100%">
-            <el-carousel-item v-for="Rs in bottom">
-              <div class="topOne" v-if="Rs.Style == 'tops'">
-                <h5>{{ Rs.Title }}</h5>
-                <ul>
-                  <li v-for="(tops,i) in Rs.Result">
-                    <div class="dgCenter">
-                      <div class="dghead">
-                        <img :id="'circle_'+i"
-                             v-bind:src="tops.Head" alt="" v-if="tops.Head">
-                        <img :id="'circle_'+i"
-                             v-bind:src="require('../static/img/people/flyhead.png')" alt=""
-                             v-if="!tops.Head">
-                        <img src="../static/img/wait/boy.png" class="sex" v-if="tops.Sex == 1"/>
-                        <img src="../static/img/wait/girl.png" class="sex" v-if="tops.Sex == 2"/>
-                        <s>{{ tops.UserName }}</s>
-                      </div>
-                      <div class="score">
-                        <em>{{ tops.Values }}</em>
-                        <span>
-                                                    {{ tops.Message }}
-                                                </span>
-                      </div>
-                    </div>
-                  </li>
-                  <span style="font-size: 0.4rem;color: #fff" v-if="Rs.Result == ''">还没有新成果哟~</span>
-                </ul>
-              </div>
-              <div class="heros" v-if="Rs.Style == 'heros'">
-                <h5>{{ Rs.Title }}</h5>
-                <ul>
-                  <li v-for="(hero,i) in Rs.Result">
-                    <img :id="'circle_'+i"
-                         v-bind:src="hero.Head" alt="" v-if="hero.Head">
-                    <img :id="'circle_'+i"
-                         v-bind:src="require('../static/img/people/flyhead.png')"
-                         alt="" v-if="!hero.Head">
-                    <img src="../static/img/wait/boy.png" class="sex" v-if="hero.Sex == 1"/>
-                    <img src="../static/img/wait/girl.png" class="sex" v-if="hero.Sex == 2"/>
-                    <div>
-                      <em :id="'red_'+i">No.{{ i + 1 }}</em> {{ hero.UserName }}
-                    </div>
-                    <span>{{ hero.Values }} {{ hero.Unite }}</span>
-                  </li>
-                  <span style="font-size: 0.4rem;color: #fff" v-if="Rs.Result == ''">还没有人突破记录哟~</span>
-                </ul>
-              </div>
-            </el-carousel-item>
-          </el-carousel>
-        </div>
-      </div>
-      <div class="rt">
-        <el-carousel :interval="15000" height="100%">
-          <el-carousel-item v-for="Rs in rt">
-            <h5>{{ Rs.Title }}</h5>
-            <ul>
-              <li v-for="s in Rs.Result" v-if="Rs.Result">
-                <img :src="s.Head" alt="" v-if="s.Head">
-                <img v-bind:src="require('../static/img/people/flyhead.png')" alt="" v-if="!s.Head">
-                <em>{{ s.UserName }}</em>
-                <s>{{ s.Values }}</s>
-              </li>
-              <span style="font-size: 0.4rem;color: #fff" v-if="Rs.Result == ''">还没有排行记录哟~</span>
-            </ul>
-          </el-carousel-item>
-        </el-carousel>
-      </div>
-    </div>
-    <el-dialog
-        title="提示"
-        :visible.sync="dialogVisible"
-        width="30%"
-    >
-      <span>{{ dialogText }}</span>
-      <span slot="footer" class="dialog-footer">
-    <el-button type="primary" @click="dialogVisible = false">知道了</el-button>
-  </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import Headside from '@/components/Headside'
-import sumNumber from '@/components/sumNumber'
-import {
-  getHello,
-  getClassStat,
-  HerosRankingQuery,
-  CalorieStatsQuery,
-  UserRankingQuery
-} from '@/api/getApiRes'
-import '../libs/rem';
-import '../Global'
-
-// 测试模式 localStorage.eqSn = "8e501b0bde9ce600"
-
-let qs = require('qs');
-export default {
-  data() {
-    return {
-      eqSn: '30:9C:23:0C:8B:1E',
-      pageStyle: RandomBg2(),
-      trueDate: true,//真实数据 true false
-      autoplayStatus: false,// false
-      dialogVisible: false,// false
-      dialogText: '',// false
-      fakeNums: 8,//
-      unite: '卡路里',
-      topMsg: '',
-      students: [],
-      studentsLimit: [],
-      showType: 2,//1 单人
-      curIndex: false,//1 单人
-      waitTimer: null,//null
-      test:
-          {
-            Title: '本<s style="font-size: 0.7rem;color: red">周</s>场馆卡路里总消耗',
-            Title2: '本<s style="font-size: 0.7rem;color: red">月</s>场馆卡路里总消耗',
-            Result: [{'Values': 0, Unite: '千卡'}],
-          },
-      recordMain: [],
-      bottom: {},
-      rt: [],
-    }
-  },
-  mounted() {
-    if (this.trueDate) {
-      this.init();
-    } else {
-      this.students = this.fakeNews();
-      this.studentsLimit = this.fakeNewsLimit();
-      this.topMsg = this.students[0];
-      this.bottom = [
-        {
-          "Title": "本周消耗卡路里英雄榜",
-          "Style": "heros",
-          "Result": [
-            {
-              "UserName": "段长鹏",
-              "Sex": 1,
-              "Head": "",
-              "Values": "4744",
-              "Unite": "千卡",
-              "Message": ""
-            },
-            {
-              "UserName": "贾雨奇",
-              "Sex": 1,
-              "Head": "http://192.168.0.2/flyhead.png",
-              "Values": "4034",
-              "Unite": "千卡",
-              "Message": ""
-            },
-            {
-              "UserName": "郑伟",
-              "Sex": 1,
-              "Head": "http://192.168.0.2/flyhead.png",
-              "Values": "2290",
-              "Unite": "千卡",
-              "Message": ""
-            }
-          ]
-        },
-        {
-          "Title": "单次CK值(新个人记录)",
-          "Style": "tops",
-          "Result": [
-            {
-              "UserName": "郑伟",
-              "Sex": 1,
-              "Head": "",
-              "Values": "1022",
-              "Unite": "",
-              "Message": "打破了历史记录100000"
-            },
-            {
-              "UserName": "郑伟",
-              "Sex": 1,
-              "Head": "http://192.168.0.2/flyhead.png",
-              "Values": "1020",
-              "Unite": "",
-              "Message": "打破了历史记录100000"
-            }
-          ]
-        }
-      ];
-      this.rt = [
-        {
-          Title: '月度CK值排行',
-          Result: this.fakeNews(),
-        },
-        {
-          Title: '月度卡路里值排行',
-          Result: this.fakeNews(),
-        }
-      ];
-      this.recordMain = [
-        {
-          Title: '本<s>周</s>场馆卡路里总消耗',
-          Result: [{'Values': 0, Unite: '千卡'}],
-        },
-        {
-          Title: '本<s>周</s>场馆卡路里总消耗',
-          Result: [{'Values': 0, Unite: '千卡'}],
-        }
-      ]
-    }
-  },
-  watch: {
-    '$route': function (val) {
-      let that = this;
-      if (val.path == '/') {
-        this.autoplayStatus = false;
-        if (this.trueDate) {
-          that.init();
-        } else {
-          this.students = this.fakeNews();
-          this.topMsg = this.students[0];
-        }
-      } else {
-        clearInterval(this.waitTimer);
-      }
-    }
-  },
-  beforeDestroy() {
-    clearInterval(this.waitTimer);
-    this.waitTimer = null;
-  },
-  methods: {
-    init() {
-      this.waitTimer = setInterval(() => {
-        // this.$router.push({path: '/main'});
-
-        this.curgetClassStat();
-        this.GetHerosRankingQuery();
-        this.GetCalorieStatsQuery();
-        this.GetUserRankingQuery();
-      }, 1000);
-
-    },
-    fakeNews() {
-      let item = [];
-      for (var i = 0; i < 7; i++) {
-        item.push(
-            {
-              "hubId": 0,
-              "deviceId": 22756,
-              "calorie": 96.5,
-              "Values ": 96.5,
-              "heartRate": i * 5,
-              "step": i * 40,
-              "userName": "杨东艳",
-              "userNmae": "杨东艳",
-              "UserName": "杨东艳",
-              "name": "杨东艳",
-              "updateTime": 1604568915582,
-              "ActivePercent": i * 5,
-              "ck": 115.9 - i,
-              "head": 'flyhead.png'
-            }
-        )
-      }
-      return item;
-    },
-    fakeNewsLimit() {
-      let item = [];
-      for (var i = 0; i < 3; i++) {
-        item.push(
-            {
-              "hubId": 0,
-              "deviceId": 22756,
-              "calorie": 999.5,
-              "heartRate": i * 5,
-              "step": i * 40,
-              "userName": "杨东艳",
-              "userNmae": "杨东艳",
-              "name": "杨东艳",
-              "updateTime": 1604568915582,
-              "ActivePercent": i * 5,
-              "ck": i + 115.1,
-              "sex": 1,
-              "head": 'flyhead.png'
-            }
-        )
-      }
-      return item;
-    },
-    GetgetUserList() {
-      let that = this;
-      let param = {
-        eqSn: localStorage.eqSn,
-        token: localStorage.token,
-      };
-      let postdata = qs.stringify(param);
-      getHello(postdata).then(res => {
-        let json = res;
-        if (json.Code == 0) {
-          that.topMsg = json.Rs[0];
-          that.students = json.Rs;
-          that.$message.error(json.Memo);
-        }
-      }).catch(function (err) {
-        console.log(err);
-      });
-    },
-    GetHerosRankingQuery() {
-      let that = this;
-      let param = {
-        eqSn: localStorage.eqSn,
-        dispNum: 3
-      };
-      let postdata = qs.stringify(param);
-      HerosRankingQuery(postdata).then(res => {
-        let json = res;
-        if (json.Code == 0) {
-          that.bottom = json.Rs;
-        } else {
-          if (json.Code == 4002) {
-          } else {
-            that.$message.error(json.Memo);
-          }
-        }
-      })
-    },
-    GetUserRankingQuery() {
-      let that = this;
-      let param = {
-        eqSn: localStorage.eqSn,
-        dispNum: 8
-      };
-      let postdata = qs.stringify(param);
-      UserRankingQuery(postdata).then(res => {
-        let json = res;
-        if (json.Code == 0) {
-          that.rt = json.Rs;
-        } else {
-          if (json.Code == 4002) {
-          } else {
-            that.$message.error(json.Memo);
-          }
-        }
-      })
-    },
-    GetCalorieStatsQuery() {
-      let that = this;
-      let param = {
-        eqSn: localStorage.eqSn,
-      };
-      let postdata = qs.stringify(param);
-      CalorieStatsQuery(postdata).then(res => {
-        let json = res;
-        if (json.Code == 0) {
-          that.recordMain = json.Rs;
-        } else {
-          that.recordMain = [
-            {
-              Title: '',
-              Result: [{'Values': '', Unite: ''}],
-            },
-            {
-              Title: '',
-              Result: [{'Values': '', Unite: ''}],
-            }
-          ];
-          if (json.Code == 4002) {
-            that.dialogVisible = true;
-            that.dialogText = json.Memo;
-          } else {
-            that.$message.error(json.Memo);
-          }
-
-        }
-      })
-    },
-    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) {
-          // alert(JSON.stringify(json.ClassOn));
-          // alert("alert:"+json.ClassOn);
-          // 上课了
-          if (json.ClassOn == 1) {
-            // 0: 下课 团课/私教 排名
-            // 1：团课/私教 todo
-            // 2：竞技课2PK
-            // 3：竞技课threepk
-            switch (parseInt(json.dp)) {
-              case 0:
-                that.$router.push({path: '/rank'});
-                break;
-              case 1:
-                that.$router.push({path: '/main'});
-                break;
-              case 2:
-                that.$router.push({path: '/pk'});
-                break;
-              case 3:
-                that.$router.push({path: '/threepk'});
-                break;
-            }
-          }
-        } else {
-
-          // that.$message.error(json.Memo);
-        }
-      })
-    },
-  },
-  components: {
-    Headside, sumNumber
-  }
-}
-</script>
-
-<style scoped>
-@import "../assets/css/bg.css";
-
-.pages {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  overflow: hidden;
-  overflow-y: scroll;
-  display: block;
-  margin: 0 auto;
-  /*transform: scale(1,5);*/
-  /*-ms-transform: scale(1,5); !* IE 9 *!*/
-  /*-webkit-transform: scale(0.8,0.8); !* Safari and Chrome *!*/
-}
-
-/*/deep/ .el-carousel__item--card {*/
-/*width: auto !important;*/
-/*}*/
-/*/deep/ .el-carousel__item {*/
-/*width: auto !important;*/
-/*}*/
-/*/deep/ .el-carousel__item--card.is-active {*/
-/*z-index: 2;*/
-/*position: absolute;*/
-/*left: 50%;*/
-/*transform: translate(-50%, 0px) !important;*/
-/*}*/
-
-
-.rankContainer {
-  width: 90%;
-  height: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  overflow-y: scroll;
-}
-
-.rankContainer .lt {
-  width: 60%;
-  height: 100%;
-  float: left;
-}
-
-.rankContainer .rt {
-  width: 40%;
-  height: 100%;
-  float: right;
-}
-
-.recordMain {
-  height: 6rem;
-  /*height: 100%;*/
-  overflow: hidden;
-}
-
-.rankContainer .lt .recordMain h5 {
-  font-family: vista;
-  font-weight: normal;
-  font-size: 0.75rem;
-  text-align: left;
-  color: #fff;
-  margin: 0 auto;
-  margin-top: 5%;
-}
-
-.recordMain h5 s {
-  font-size: 0.8rem;
-}
-
-.rankContainer .sum {
-  position: relative;
-  top: 0.8rem;
-  width: 100%;
-  height: 35%;
-  overflow: visible;
-  display: block;
-  margin: 0 auto;
-  text-align: center;
-  z-index: 666;
-}
-
-.sumBg {
-  position: relative;
-  bottom: 2rem;
-  width: 100%;
-  height: 3rem;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  /*background: url("../static/img/pingtai.png") bottom center;*/
-  /*background: url("../static/img/black.png") bottom center;*/
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-}
-
-.sum em {
-  width: 7.2rem;
-  float: right;
-  font-weight: 900;
-  font-family: vista;
-  font-weight: 900;
-  font-size: 2rem;
-  text-align: center;
-  color: #fff;
-  font-style: normal;
-  /*text-shadow: #E85297 5px 0 0, #E85297 0 5px 0, #E85297 -5px 0 0, #E85297 0 -5px 0;*/
-  text-shadow: #000 5px 0 0, #000 0 5px 0, #000 -5px 0 0, #000 0 -5px 0;
-}
-
-.sum s {
-  position: relative;
-  bottom: -2rem;
-  width: 2rem;
-  float: right;
-  font-style: normal;
-  font-family: vista;
-  font-weight: normal;
-  font-size: 44px;
-  text-align: center;
-  color: #fff;
-  text-decoration: none;
-}
-
-.sumContainer {
-  width: 100%;
-  /*height: 4rem;*/
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-}
-
-.topOne {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-}
-
-.topOne h5 {
-  font-family: vista;
-  font-weight: normal;
-  font-size: 0.4rem;
-  text-align: left;
-  color: #fff;
-  margin: 1% 0;
-}
-
-ul, li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.topOne ul {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  padding-left: 2px;
-  padding-top: 0.1rem;
-  padding-bottom: 0.1rem;
-}
-
-.topOne li {
-  width: 30%;
-  float: left;
-  margin-left: 0.05rem;
-}
-
-.topOne .dgCenter {
-  width: 93%;
-  overflow: hidden;
-  float: left;
-  border-radius: 5px;
-  background: rgba(0.0 .0 .0 .1);
-  box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
-  padding-top: 0.1rem;
-  padding-bottom: 0.1rem;
-}
-
-.dgCenter .dghead {
-  width: 40%;
-  float: left;
-}
-
-.dghead img {
-  width: 1rem;
-  height: 1rem;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  padding: 0;
-  border-radius: 33rem;
-  border: 2px solid #fff;
-}
-
-.dghead s {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  font-weight: normal;
-  font-size: 0.3rem;
-  text-align: center;
-  color: #fff;
-  font-style: normal;
-  text-decoration: none;
-  margin-top: 0.2rem;
-}
-
-.score {
-  width: 60%;
-  float: right;
-}
-
-.score em {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  font-family: vista;
-  font-weight: bold;
-  font-size: 0.7rem;
-  text-align: center;
-  color: #fff;
-  font-style: normal;
-  height: 1.4rem;
-  line-height: 1.4rem;
-}
-
-.score span {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  font-family: vista;
-  font-weight: normal;
-  font-size: 0.2rem;
-  color: #fff;
-  text-align: center;
-}
-
-.rt {
-  padding-top: 0.6rem;
-}
-
-.rt h5 {
-  font-family: vista;
-  font-weight: normal;
-  font-size: 36px;
-  text-align: center;
-  color: #fff;
-  margin: 0;
-  margin-bottom: 0.3rem;
-  text-indent: 0.2rem;
-}
-
-.rt ul {
-  width: 80%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  padding-top: 3px;
-  padding-bottom: 3px;
-}
-
-.rt li {
-  width: 80%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  margin-bottom: 0.1rem;
-  padding: 0.1rem 4%;
-  /*background: rgba(0, 0, 0, 0.1);*/
-  border-radius: 5px;
-  /*box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);*/
-}
-
-.rt li img {
-  width: 0.6rem;
-  height: 0.6rem;
-  filter: drop-shadow(0px 0px 6px #bf00ff);
-  border: 2px solid #fff;
-  float: left;
-  border-radius: 33rem;
-  margin-right: 3%;
-}
-
-.rt li em {
-  font-family: vista;
-  font-weight: normal;
-  font-size: 0.35rem;
-  text-align: center;
-  color: #fff;
-  font-style: normal;
-  float: left;
-  height: 0.6rem;
-  line-height: 0.6rem;
-}
-
-.rt li s {
-  font-family: vista;
-  font-weight: normal;
-  font-size: 0.35rem;
-  text-align: right;
-  color: #fff;
-  text-decoration: none;
-  height: 0.6rem;
-  line-height: 0.6rem;
-  float: right;
-}
-
-.heros > h5 {
-  font-family: vista;
-  font-weight: normal;
-  font-size: 0.35rem;
-  text-align: left;
-  color: #fff;
-  margin: 1% 0;
-}
-
-.heros ul {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  padding-left: 0px;
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-
-.heros li {
-  width: 2.5rem;
-  height: 2.35rem;
-  float: left;
-  border-radius: 5px;
-  background: rgba(0.0 .0 .0 .1);
-  box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
-  padding-top: 0.2rem;
-  padding-bottom: 0.2rem;
-  color: #fff;
-  font-size: 0.3rem;
-  text-align: center;
-  margin-right: 5%;
-  margin-left: 0.05rem;
-}
-
-.heros li > img {
-  width: 1.2rem;
-  height: 1.2rem;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  margin-bottom: 0.2rem;
-  border-radius: 100%;
-  border: 2px solid #fff;
-}
-
-.heros li > img.sex {
-  position: relative;
-  top: -1.5rem;
-  right: 0.55rem;
-  width: 0.4rem;
-  height: 0.4rem;
-  overflow: hidden;
-  float: right;
-  border: none;
-
-}
-
-.topOne li .dghead img.sex {
-  position: relative;
-  top: -1.05rem;
-  right: 0;
-  width: 0.4rem;
-  height: 0.4rem;
-  overflow: hidden;
-  float: right;
-  border: none;
-
-}
-
-.heros li em {
-  font-family: vista;
-  font-weight: bold;
-  font-size: 30px;
-  text-align: center;
-  font-style: normal;
-}
-
-.heros li em#red_0 {
-  color: #FA5114;
-}
-
-.heros li em#red_1 {
-  color: #FA981F;
-}
-
-.heros li em#red_2 {
-  color: #FFE13C;
-}
-
-.heros li #circle_0 {
-  border: 2px solid #FA5114;
-}
-
-.heros li #circle_1 {
-  border: 2px solid #FA981F;
-
-}
-
-.heros li #circle_2 {
-  border: 2px solid #FFE13C;
-
-}
-
-.heros li div {
-  position: relative;
-  top: -0.7rem;
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  text-align: center;
-}
-
-.heros li span {
-  position: relative;
-  top: -0.67rem;
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-}
-
-.bottom {
-  position: relative;
-  width: 100%;
-  height: 4rem;
-  padding-top: 0.1rem;
-  bottom: 0.2rem;
-}
-
-/deep/ .el-carousel__indicators--horizontal {
-  display: none;
-}
-
-/deep/ .el-carousel {
-  height: 100%;
-}
-
-/deep/ .el-carousel__container {
-
-}
-</style>

src/views/pk.vue

@@ -47,7 +47,7 @@
       </div>
     </div>
     <div class="icons">
-      <img src="../assets/imgs/pk/icons.svg" alt="">
+      <img src="../assets/imgs/pk/icons2.svg" alt="">
     </div>
     <!--    突破纪录-->
     <newRecord :toper-info="toperInfo"></newRecord>
@@ -76,6 +76,7 @@ let qs = require('qs');
 export default {
   data() {
     return {
+      ClassOn: 1,
       trueDate: true,//真实数据 true false
       studentsClassName: [
         {name: 'max'}
@@ -107,16 +108,18 @@ export default {
         redSum: 0,
         blueSum: 0,
       },
-      totalTime: 30,
-      studentTime: 15,
+      // totalTime: 30,
+      // studentTime: 15,
       toperInfo: {
         dialogVisible: false,
         toper: {},
+        totalTime: 30,
       },
       studentInfo: {
         dialogVisible: false,
         Rs: [],
-        percent: 0
+        percent: 0,
+        studentTime: 15
       },
       Redflag: 0,
       BlueFlag: 0,
@@ -124,16 +127,35 @@ export default {
       BlueProgress: 25,
     }
   },
+  mounted() {
+    this.init();
+  },
   watch: {
     '$route': function (val) {
       let that = this;
       if (val.path == '/pk') {
         this.init();
+      } 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;
       }
     }
   },
-  mounted() {
-    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;
   },
   methods: {
     init() {
@@ -141,20 +163,19 @@ export default {
       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);
+      this.PkTimer = setInterval(() => {
+        this.GetgetUserList();
+        this.ClacClassTime();
+        this.curgetClassStat();
+      }, 1000);
+      
+      this.timer2 = setInterval(() => {
+        this.createEgg();
+      }, 25000);
+      
+      this.timer3 = setInterval(() => {
+        this.createNewStudent();
+      }, 20000);
     },
     // 启动一个成就彩蛋
     createEgg() {
@@ -167,17 +188,12 @@ export default {
       getRecordBreak(postdata).then(res => {
         let json = res;
         if (json.Code == 0) {
-          // 欢迎新学生时不显示彩蛋
-          if (that.studentInfo.dialogVisible == true) {
-            console.log('正在显示新学生');
-            return false
-          } else {
-            this.OpenEgg(json);
-          }
+          console.log('破纪录了');
+          that.OpenEgg(json.Rs);
         } 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);
         }
       })
     },
@@ -193,48 +209,68 @@ export default {
         let json = res;
         if (json.Code == 0) {
           console.log('来新生了');
-          // 显示彩蛋时不欢迎新学生
-          if (that.toperInfo.dialogVisible == true) {
-            console.log('正在显示彩蛋');
-            return false
-          } else {
-            that.OpenStudent(json.Rs);
-          }
+          that.OpenStudent(json.Rs);          
         } 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);
         }
       })
     },
-    OpenEgg(msg) {
-      this.toperInfo.toper = msg.Rs;
-      this.toperInfo.dialogVisible = true;
-      // 倒计时5秒自动关闭
+    OpenEgg(msg, reshowNum=0) {      
       let that = this;
-      this.totalTime = 30;
+      if (that.ClassOn == 0) {
+        console.log('[破纪录] 已下课，取消弹窗 reshowNum: ' + reshowNum);
+        return false;
+      }
+      if (that.studentInfo.dialogVisible == true || that.toperInfo.dialogVisible == true) {
+        console.log('[破纪录] 弹出窗口尚未关闭，5秒后重试');
+        setTimeout(() => {
+          reshowNum++;
+          that.OpenEgg(msg, reshowNum);
+        }, 5000);
+        return false;
+      } 
+      if (reshowNum > 0) {
+        console.log('[破纪录] reshowNum: ' + reshowNum);
+      }
+      that.toperInfo.toper = msg;
+      that.toperInfo.dialogVisible = true;
+      // 倒计时20秒自动关闭
+      that.toperInfo.totalTime = 20;
       let clock = window.setInterval(() => {
-        this.totalTime--;
-        if (parseInt(this.totalTime) < 0) {
-          that.toperInfo.dialogVisible = false;
+        that.toperInfo.totalTime--;
+        if (parseInt(that.toperInfo.totalTime) <= 0) {
+          that.toperInfo.dialogVisible = false;// 关闭 自动关闭彩蛋
           clearInterval(clock);
         }
       }, 1000)
     },
-    OpenStudent(msg) {
+    OpenStudent(msg, reshowNum=0) {      
       let that = this;
+      if (that.ClassOn == 0) {
+        console.log('[欢迎新同学] 已下课，取消弹窗 reshowNum: ' + reshowNum);
+        return false;
+      }
+      if (that.studentInfo.dialogVisible == true || that.toperInfo.dialogVisible == true) {
+        console.log('[欢迎新同学] 弹出窗口尚未关闭，5秒后重试');
+        setTimeout(() => {
+          reshowNum++;
+          that.OpenStudent(msg, reshowNum);
+        }, 5000);
+        return false;
+      }
+      if (reshowNum > 0) {
+        console.log('[欢迎新同学] reshowNum: ' + reshowNum);
+      }
       that.studentInfo.Rs = msg;
       that.studentInfo.dialogVisible = true;
-      this.studentInfo.percent = 0;
-      // 倒计时5秒自动关闭
-      this.studentTime = 15;
+      // 倒计时15秒自动关闭
+      that.studentInfo.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;
+        that.studentInfo.studentTime--;
+        if (parseInt(that.studentInfo.studentTime) <= 0) {
+          that.studentInfo.dialogVisible = false; //关闭 自动关闭
           clearInterval(clock);
         }
       }, 1000)
@@ -351,7 +387,7 @@ export default {
           this.ClacClassTime();
         } else {
           // 已下课
-          console.log(json.Code);
+          // console.log("[getHello] 已下课 " + json.Code);
           if (json.Code == '999') {
             // that.$router.push({path: '/2pkRank'});
           } else {
@@ -363,52 +399,9 @@ export default {
     },
     giveClassName(res, type) {
       let that = this;
-      let numberClass = '';
-      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 = that.studentsClassName;
         that.redPeron = parseInt(res.length);
       } else {
-        that.BluestudentsClassName = that.studentsClassName;
         that.bluePerson = parseInt(res.length)
       }
     },
@@ -436,17 +429,23 @@ export default {
         if (json.Code == 0) {
           // 没开课
           if (json.ClassOn == 0) {
-            console.log("xiakele ");
+            that.ClassOn = 0;
+            if (that.studentInfo.dialogVisible == true || that.toperInfo.dialogVisible == true) {
+              console.log('[getClassStat] 下课了，等待弹出窗口关闭');
+              return false
+            } 
+
+            console.log("下课了");
             // 0: 下课 团课/私教 排名
             // 1：团课/私教 todo
             // 2：竞技课2PK
             // 3：竞技课3PK
             that.$router.push({path: '/2pkRank'});
-            switch (parseInt(json.dp)) {
-              case 2:
-                that.$router.push({path: '/2pkRank'});
-                break;
-            }
+            // switch (parseInt(json.dp)) {
+            //   case 2:
+            //     that.$router.push({path: '/2pkRank'});
+            //     break;
+            // }
           }
         } else {
           // that.$message.error(json.Memo);
@@ -705,7 +704,8 @@ export default {
 
   img {
     @include cube;
-    width: 40%;
+    // width: 40%;
+    width: 18%;
   }
 }
 

src/views/pk2.vue

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

src/views/threepk.vue

@@ -25,17 +25,18 @@
         </div>
       </div>
       <div class="lineContianer">
+        <div class="vsContainer">
+          <img class="leftVs" src="../assets/imgs/pk/vs.png" alt="">
+          <img class="rightVs" src="../assets/imgs/pk/vs.png" alt="">
+        </div>
         <div class="lt">
             <span :style="{'width':RedProgress+'%'}">
             </span>
           <em>红队{{ redPeron }}人</em>
         </div>
-        <div class="md">
-          <img class="vsIcon leftVs" src="../assets/imgs/pk/vs.png" alt="">
-          <span :style="{'width':BlueProgress+'%'}">
-            </span>
-          <em>蓝队{{ bluePerson }}人</em>
-          <img class="vsIcon rightVs" src="../assets/imgs/pk/vs.png" alt="">
+        <div class="md">          
+          <span :style="{'width':BlueProgress+'%'}"></span>
+          <em>蓝队{{ bluePerson }}人</em>         
         </div>
         <div class="rt">
               <span :style="{'width':yellowProgress+'%'}">
@@ -59,7 +60,7 @@
       </div>
     </div>
     <div class="icons">
-      <img src="../assets/imgs/pk/icons.svg" alt="">
+      <img src="../assets/imgs/pk/icons2.svg" alt="">
     </div>
     <!--    突破纪录-->
     <newRecord :toper-info="toperInfo"></newRecord>
@@ -88,6 +89,7 @@ let qs = require('qs');
 export default {
   data() {
     return {
+      ClassOn: 1,
       trueDate: true,//真实数据 true false
       studentsClassName: [
         {name: 'max'}
@@ -122,16 +124,18 @@ export default {
         redSum: 0,
         blueSum: 0,
       },
-      totalTime: 30,
-      studentTime: 15,
+      // totalTime: 30,
+      // studentTime: 15,
       toperInfo: {
         dialogVisible: false,
         toper: {},
+        totalTime: 30,
       },
       studentInfo: {
         dialogVisible: false,
         Rs: [],
-        percent: 0
+        percent: 0,
+        studentTime: 15
       },
       Redflag: 0,
       BlueFlag: 0,
@@ -141,16 +145,35 @@ export default {
       yellowProgress: 25,
     }
   },
+  mounted() {
+    this.init();
+  },
   watch: {
     '$route': function (val) {
       let that = this;
-      if (val.path == '/pk') {
+      if (val.path == '/threepk') {
         this.init();
+      } 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;
       }
     }
   },
-  mounted() {
-    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;
   },
   methods: {
     init() {
@@ -158,20 +181,19 @@ export default {
       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);
+      this.PkTimer = setInterval(() => {
+        this.GetgetUserList();
+        this.ClacClassTime();
+        this.curgetClassStat();
+      }, 1000);
+      
+      this.timer2 = setInterval(() => {
+        this.createEgg();
+      }, 25000);
+      
+      this.timer3 = setInterval(() => {
+        this.createNewStudent();
+      }, 20000);
     },
     // 启动一个成就彩蛋
     createEgg() {
@@ -184,17 +206,12 @@ export default {
       getRecordBreak(postdata).then(res => {
         let json = res;
         if (json.Code == 0) {
-          // 欢迎新学生时不显示彩蛋
-          if (that.studentInfo.dialogVisible == true) {
-            console.log('正在显示新学生');
-            return false
-          } else {
-            this.OpenEgg(json);
-          }
+          console.log('破纪录了');
+          that.OpenEgg(json.Rs);
         } 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);
         }
       })
     },
@@ -210,48 +227,68 @@ export default {
         let json = res;
         if (json.Code == 0) {
           console.log('来新生了');
-          // 显示彩蛋时不欢迎新学生
-          if (that.toperInfo.dialogVisible == true) {
-            console.log('正在显示彩蛋');
-            return false
-          } else {
-            that.OpenStudent(json.Rs);
-          }
+          that.OpenStudent(json.Rs);          
         } 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);
         }
       })
     },
-    OpenEgg(msg) {
-      this.toperInfo.toper = msg.Rs;
-      this.toperInfo.dialogVisible = true;
-      // 倒计时5秒自动关闭
+    OpenEgg(msg, reshowNum=0) {      
       let that = this;
-      this.totalTime = 30;
+      if (that.ClassOn == 0) {
+        console.log('[破纪录] 已下课，取消弹窗 reshowNum: ' + reshowNum);
+        return false;
+      }
+      if (that.studentInfo.dialogVisible == true || that.toperInfo.dialogVisible == true) {
+        console.log('[破纪录] 弹出窗口尚未关闭，5秒后重试');
+        setTimeout(() => {
+          reshowNum++;
+          that.OpenEgg(msg, reshowNum);
+        }, 5000);
+        return false;
+      } 
+      if (reshowNum > 0) {
+        console.log('[破纪录] reshowNum: ' + reshowNum);
+      }
+      that.toperInfo.toper = msg;
+      that.toperInfo.dialogVisible = true;
+      // 倒计时20秒自动关闭
+      that.toperInfo.totalTime = 20;
       let clock = window.setInterval(() => {
-        this.totalTime--;
-        if (parseInt(this.totalTime) < 0) {
-          that.toperInfo.dialogVisible = false;
+        that.toperInfo.totalTime--;
+        if (parseInt(that.toperInfo.totalTime) <= 0) {
+          that.toperInfo.dialogVisible = false;// 关闭 自动关闭彩蛋
           clearInterval(clock);
         }
       }, 1000)
     },
-    OpenStudent(msg) {
+    OpenStudent(msg, reshowNum=0) {      
       let that = this;
+      if (that.ClassOn == 0) {
+        console.log('[欢迎新同学] 已下课，取消弹窗 reshowNum: ' + reshowNum);
+        return false;
+      }
+      if (that.studentInfo.dialogVisible == true || that.toperInfo.dialogVisible == true) {
+        console.log('[欢迎新同学] 弹出窗口尚未关闭，5秒后重试');
+        setTimeout(() => {
+          reshowNum++;
+          that.OpenStudent(msg, reshowNum);
+        }, 5000);
+        return false;
+      }
+      if (reshowNum > 0) {
+        console.log('[欢迎新同学] reshowNum: ' + reshowNum);
+      }
       that.studentInfo.Rs = msg;
       that.studentInfo.dialogVisible = true;
-      this.studentInfo.percent = 0;
-      // 倒计时5秒自动关闭
-      this.studentTime = 15;
+      // 倒计时15秒自动关闭
+      that.studentInfo.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;
+        that.studentInfo.studentTime--;
+        if (parseInt(that.studentInfo.studentTime) <= 0) {
+          that.studentInfo.dialogVisible = false; //关闭 自动关闭
           clearInterval(clock);
         }
       }, 1000)
@@ -267,9 +304,11 @@ 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);
@@ -396,7 +435,7 @@ export default {
           this.ClacClassTime();
         } else {
           // 已下课
-          console.log(json.Code);
+          // console.log("[getHello] 已下课 " + json.Code);
           if (json.Code == '999') {
             // that.$router.push({path: '/2pkRank'});
           } else {
@@ -408,55 +447,11 @@ export default {
     },
     giveClassName(res, type) {
       let that = this;
-      let numberClass = '';
-      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 = 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)
       }
     },
@@ -484,17 +479,23 @@ export default {
         if (json.Code == 0) {
           // 没开课
           if (json.ClassOn == 0) {
-            console.log("xiakele ");
+            that.ClassOn = 0;
+            if (that.studentInfo.dialogVisible == true || that.toperInfo.dialogVisible == true) {
+              console.log('[getClassStat] 下课了，等待弹出窗口关闭');
+              return false
+            } 
+
+            console.log("下课了");
             // 0: 下课 团课/私教 排名
             // 1：团课/私教 todo
             // 2：竞技课2PK
             // 3：竞技课3PK
-            that.$router.push({path: '/2pkRank'});
-            switch (parseInt(json.dp)) {
-              case 2:
-                that.$router.push({path: '/2pkRank'});
-                break;
-            }
+            that.$router.push({path: '/3pkRank'});
+            // switch (parseInt(json.dp)) {
+            //   case 3:
+            //     that.$router.push({path: '/3pkRank'});
+            //     break;
+            // }
           }
         } else {
           // that.$message.error(json.Memo);
@@ -556,7 +557,7 @@ export default {
 }
 
 .pages {
-  background: url("../assets/imgs/three/threeBg.png");
+  background: url("../assets/imgs/three/threeBg2.png");
   @include bg;
 
   .pageTitle {
@@ -566,7 +567,7 @@ export default {
     background-size: 100% 100%;
     @include cube;
     width: 2rem;
-    height: 1rem;
+    height: 0.65rem;
     overflow: visible;
 
     em {
@@ -657,6 +658,26 @@ export default {
   z-index: 222;
   overflow: visible;
 
+  .vsContainer {
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+
+    img {
+      position: relative;
+      float: left;
+      width: 1.2rem;
+      left: 5.87rem;
+      bottom: 0.2rem;
+
+      &.rightVs {
+        float: left;
+        left: 11.33rem;
+      }
+    }
+  }
+  
+  
   .lt {
     width: 33.33%;
     float: left;
@@ -688,7 +709,6 @@ export default {
 
     span {
       position: relative;
-      left: -1rem;
       width: 4rem;
       float: left;
       background: linear-gradient(to left, #4cbbfc 0%, rgba(0, 125, 198, 0.17) 100%);
@@ -704,22 +724,6 @@ export default {
       font-size: 0.3rem;
       font-style: normal;
     }
-
-    img {
-      position: relative;
-      width: 1.2rem;
-      float: left;
-      left: -0.6rem;
-      overflow: visible;
-      bottom: 0.2rem;
-
-      &.rightVs {
-        float: right;
-        left: 0.7rem;
-        bottom: 0.65rem;
-      }
-    }
-
   }
 
   .rt {
@@ -821,7 +825,8 @@ export default {
 
   img {
     @include cube;
-    width: 40%;
+    // width: 40%;
+    width: 18%;
   }
 }
 

src/views/threepk2.vue

@@ -1,1930 +0,0 @@
-<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>

vue.config.js

@@ -20,11 +20,11 @@ module.exports = {
         port: 202, // 端口
         proxy: {
             '/api': {
-                // target: 'http://192.168.0.105:8080/',//小飞龙的
+                target: 'http://221.214.111.254:9000/',//小飞龙的
                 // target: 'http://192.168.0.162:9000/',//PC的
                 // target: 'http://192.168.0.110:8080',//公司公用的
                 // target: 'http://192.168.0.196:8080',//树莓派
-                target: 'http://192.168.0.74:8080',//郑伟机器的2
+                // target: 'http://192.168.0.74:8080',//郑伟机器的2
                 // target: 'http://192.168.0.243:9000/',//刘海生机器的
                 // target: ' http://192.168.0.222:9000/',//redmi的
                 changeOrigin: true,