生日帽todo

v2tv/src/Mock/index.js

@@ -158,7 +158,7 @@ let testStudent = function (num, team, mustbeTeamOne) {
             UserMd5: "55661a861f8fae20dd505b2b4575dc0e",
             Weight: 50,
             // ActivePercent: "@integer(1, 200)",
-            ActivePercent: 70,
+            ActivePercent: 100,
             bmrMSjRmrcb: 66.00000000000001,
             FormatCk: "@integer(1, 999)",
             isAlive: true,
@@ -168,7 +168,7 @@ let testStudent = function (num, team, mustbeTeamOne) {
             lastPushDataTime: 1608188947175,
             lastUpdateTime: 1608188945184,
             queuePushData: [],
-            RealHr: "@integer(1, 200)",
+            RealHr: 160,
             // RealHr: 0,
             vo2Max: "@float(1,9999,0,1)"
         })
@@ -388,7 +388,7 @@ if (t == 1) {
     // }
 
     // 0: 下课 团课/私教/PK 的排名
-    let LessonClass = 1;
+    let LessonClass = 0;
     let LessonDp = 1;
     // 1：团课/私教
     // 2：竞技课2PK
@@ -397,8 +397,8 @@ 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(5, 1));//true
-        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(5, 1)); //
+        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(9, 1));//true
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(30, 1)); //
     } else if (LessonClass == 2) {
         // 上2队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 2));

v2tv/src/assets/imgs/student/start.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="72.049" height="94.578" viewBox="0 0 72.049 94.578">
+    <g id="组_743" data-name="组 743" transform="translate(-1055 -288)">
+        <path id="多边形_17" data-name="多边形 17"
+              d="M14.643,4.645a2,2,0,0,1,3.714,0l2.306,5.769a2,2,0,0,0,1.681,1.25l6.1.539a2,2,0,0,1,1.168,3.473l-4.78,4.338a2,2,0,0,0-.608,1.916l1.416,6.349A2,2,0,0,1,22.618,30.4l-5.044-3.212a2,2,0,0,0-2.148,0L10.382,30.4A2,2,0,0,1,7.355,28.28l1.416-6.349a2,2,0,0,0-.608-1.916l-4.78-4.338A2,2,0,0,1,4.552,12.2l6.1-.539a2,2,0,0,0,1.681-1.25Z"
+              transform="translate(1055 303.999) rotate(-29)" fill="#f5ec00"/>
+        <path id="多边形_17-2" data-name="多边形 17"
+              d="M13.143,4.645a2,2,0,0,1,3.714,0l1.886,4.719a2,2,0,0,0,1.681,1.25l5.023.444a2,2,0,0,1,1.168,3.473l-3.959,3.594a2,2,0,0,0-.608,1.916l1.169,5.24A2,2,0,0,1,20.191,27.4l-4.117-2.622a2,2,0,0,0-2.148,0L9.809,27.4A2,2,0,0,1,6.782,25.28l1.169-5.24a2,2,0,0,0-.608-1.916L3.384,14.53a2,2,0,0,1,1.168-3.473l5.023-.444a2,2,0,0,0,1.681-1.25Z"
+              transform="translate(1082.896 329.411) rotate(-14)" fill="#f5ec00"/>
+        <path id="多边形_17-3" data-name="多边形 17"
+              d="M10.143,4.645a2,2,0,0,1,3.714,0L14.9,7.263a2,2,0,0,0,1.681,1.25l2.863.253a2,2,0,0,1,1.168,3.473l-2.319,2.1a2,2,0,0,0-.608,1.916l.674,3.021A2,2,0,0,1,15.337,21.4l-2.263-1.441a2,2,0,0,0-2.148,0L8.663,21.4A2,2,0,0,1,5.636,19.28l.674-3.021A2,2,0,0,0,5.7,14.343l-2.319-2.1A2,2,0,0,1,4.552,8.765l2.863-.253A2,2,0,0,0,9.1,7.263Z"
+              transform="translate(1102.634 358.582) rotate(-1)" fill="#f5ec00"/>
+    </g>
+</svg>

v2tv/src/components/student.vue

@@ -22,6 +22,8 @@
               </span>
               </div>
             </div>
+            <img src="../assets/imgs/student/star.svg" class="IsPrivate" alt="IsPrivate" v-if="s.IsPrivate == 1">
+            <img src="../assets/imgs/student/birthday.png" class="IsBirthday" alt="IsBirthday" v-if="s.IsBirthday == 1">
           </div>
           <div class="rt">
             <span>
@@ -61,9 +63,7 @@
     </li>
     <li v-for="(s,i) in studentsFake" :class="studentsClassName[i].name" v-show="students"
         v-if="students.length > 0">
-      <div class="fakePart">
-
-      </div>
+      <div class="fakePart"></div>
     </li>
   </ul>
 </template>
@@ -94,8 +94,17 @@ export default {
         if (sum >= 10 && sum < 12) {
           that.studentsFake = 12 - sum;
         }
-        if (sum >= 13 && sum < 15) {
-          that.studentsFake = 15 - sum;
+        if (sum >= 13 && sum < 16) {
+          that.studentsFake = 16 - sum;
+        }
+        if (sum >= 16 && sum < 26) {
+          that.studentsFake = 25 - sum;
+        }
+        if (sum >= 26 && sum < 30) {
+          that.studentsFake = 30 - sum;
+        }
+        if (sum >= 30) {
+          that.studentsFake = 0
         }
       },
       deep: true,
@@ -166,7 +175,6 @@ ul {
   justify-content: center;
   flex-wrap: wrap;
   flex-grow: 1;
-  height: 100%;
 
   &.many {
     justify-content: space-between;
@@ -299,6 +307,7 @@ ul {
     width: 30%;
     float: left;
     padding-top: 3%;
+    height: 3rem;
 
     .head {
       @include cube;
@@ -339,42 +348,47 @@ ul {
     .heartJump {
       width: 100%;
       float: right;
-      margin-top: 30%;
+      margin-top: 20%;
+
+      span {
+        float: right;
+      }
     }
 
-    span {
+    > span {
+      width: 100%;
       text-align: right;
       float: right;
       font-size: 1.3rem;
       font-weight: bold;
-      padding-right: 30%;
+      padding-right: 20%;
+    }
 
-      em {
-        color: white;
-        width: 80%;
-        float: right;
-        text-align: right;
-      }
+    em {
+      color: white;
+      width: 80%;
+      float: right;
+      text-align: right;
+    }
 
-      s {
-        font-size: 0.4rem;
-        float: right;
-        text-align: right;
-        margin-top: 0.25rem;
-      }
+    s {
+      font-size: 0.4rem;
+      float: right;
+      text-align: right;
+      margin-top: 0.25rem;
+    }
 
-      .heartImgContainer {
-        width: 20%;
-        height: 2rem;
-        float: right;
-      }
+    .heartImgContainer {
+      width: 20%;
+      height: 2rem;
+      float: right;
+    }
 
-      img {
-        width: 0.5rem;
-        float: right;
-        margin-right: 20%;
-        margin-top: 10%;
-      }
+    img {
+      width: 0.5rem;
+      float: right;
+      margin-right: 20%;
+      margin-top: 10%;
     }
   }
 }
@@ -399,10 +413,18 @@ ul {
   }
 }
 
+.IsPrivate {
+  width: 0.6rem;
+  float: right;
+  position: relative;
+  bottom: 2.8rem;
+}
+
 .max {
   width: 12rem;
   height: 5rem;
   margin-top: 2rem;
+
 }
 
 .two {
@@ -422,12 +444,17 @@ ul {
     }
   }
 
+  .md {
+    height: 2.5rem;
+  }
+
   .rt span {
     font-size: 1rem;
-    padding-right: 20%;
+    padding-right: 5%;
 
     img {
-      margin-right: 5%;
+      width: 0.4rem;
+      margin-right: 10%;
     }
   }
 
@@ -445,6 +472,10 @@ ul {
     font-size: 1.2rem;
   }
 
+  .md {
+    height: 2.5rem;
+  }
+
   .userinfo .head {
     height: 2.6rem;
 
@@ -455,10 +486,11 @@ ul {
 
   .rt span {
     font-size: 1rem;
-    padding-right: 20%;
+    padding-right: 10%;
 
     img {
-      margin-right: 5%;
+      width: 0.4rem;
+      margin-right: 10%;
     }
   }
 
@@ -477,36 +509,209 @@ ul {
     margin-top: 10%;
 
     em {
-      font-size: 0.8rem;
+      font-size: 0.7rem;
+      font-weight: 600;
     }
   }
 
+  .userinfo {
+    height: 1.9rem;
+  }
+
   .userinfo .head {
-    height: 2rem;
+    height: 1.7rem;
 
     img {
-      width: 1.8rem;
+      width: 1.5rem;
     }
 
     .names {
-      width: 1.5rem;
+      width: 1.4rem;
     }
   }
 
+  .md .IsPrivate {
+    width: 0.5rem;
+    bottom: 1.9rem;
+  }
+
   .rt span {
-    font-size: 0.8rem;
-    padding-right: 20%;
+    font-size: 0.7rem;
+    padding-right: 5%;
+
+    img {
+      width: 0.3rem;
+      margin-right: 10%;
+    }
+  }
+
+  .userSport {
+    line-height: 0.15rem;
+
+    img {
+      width: 0.3rem;
+    }
+
+    em {
+      font-size: 0.3rem;
+    }
+  }
+}
+
+
+.sixteen {
+  width: 4.7rem;
+  height: 2.15rem;
+  margin-top: 0.2rem;
+
+  .lt span {
+    margin-top: 3%;
+    line-height: 1rem;
+
+    em {
+      font-size: 0.55rem;
+    }
+
+    s {
+      font-size: 0.25rem;
+      margin-top: -0.1rem;
+    }
+  }
+
+  .md {
+    padding-top: 0;
+  }
+
+  .userinfo {
+    height: 1.33rem;
+  }
+
+  .userinfo .head {
+    height: 1.4rem;
 
     img {
+      width: 1.3rem;
+    }
+
+    .names {
+      width: 1.2rem;
+      font-size: 0.2rem;
+    }
+  }
+
+  .md {
+    height: 1.5rem;
+
+    .IsPrivate {
       width: 0.3rem;
+      bottom: 1.45rem;
+    }
+  }
+
+  .rt span {
+    line-height: 0.8rem;
+    font-size: 0.55rem;
+    padding-right: 5%;
+
+    img {
+      width: 0.25rem;
       margin-right: 5%;
     }
+
+    .heartJump {
+      margin-top: 20%;
+    }
   }
 
   .userSport {
+    line-height: 0.01rem;
+
+    img {
+      width: 0.2rem;
+    }
+
+    em {
+      font-size: 0.2rem;
+    }
+  }
+}
+
+.twentyFive {
+  width: 3.75rem;
+  height: 1.8rem;
+  margin-top: 0.07rem;
+
+  .lt span {
+    margin-top: 3%;
     line-height: 0.5rem;
+
+    em {
+      font-size: 0.5rem;
+    }
+
+    s {
+      font-size: 0.2rem;
+      margin-top: -0.1rem;
+    }
+  }
+
+  .md {
+    padding-top: 0;
+  }
+
+  .userinfo {
+    height: 1rem;
+  }
+
+  .userinfo .head {
+    height: 1.1rem;
+
+    img {
+      width: 0.9rem;
+    }
+
+    .names {
+      width: 0.8rem;
+      font-size: 0.15rem;
+      bottom: 0.3rem;
+    }
+  }
+
+  .md {
+    height: 1.1rem;
+
+    .IsPrivate {
+      width: 0.25rem;
+      bottom: 1.1rem;
+    }
+  }
+
+  .rt span {
+    line-height: 0.8rem;
+    font-size: 0.45rem;
+    padding-right: 5%;
+
+    img {
+      width: 0.2rem;
+      margin-right: 5%;
+    }
+
+    .heartJump {
+      margin-top: 10%;
+    }
   }
 
+  .userSport {
+    line-height: 0.01rem;
+
+    img {
+      width: 0.2rem;
+    }
+
+    em {
+      font-size: 0.2rem;
+    }
+  }
 }
 
 .fakePart {

v2tv/src/views/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="pageStyle">
     <Headside></Headside>
-<!--    学生列表-->
+    <!--    学生列表-->
     <div class="userList">
       <student :students="students" :students-class-name="studentsClassName"></student>
     </div>
@@ -310,23 +310,14 @@ export default {
           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:
+          case parseInt(res.length) <= 16 && parseInt(res.length) > 9:
             numberClass = 'sixteen';
             break;
-          case parseInt(res.length) <= 24 && parseInt(res.length) > 20:
-            numberClass = 'twenty';
+          case parseInt(res.length) <= 25 && parseInt(res.length) > 16:
+            numberClass = 'twentyFive';
             break;
-          case parseInt(res.length) <= 30 && parseInt(res.length) > 24:
-            numberClass = 'twentyFour';
-            break;
-          case parseInt(res.length) >= 31:
-            numberClass = 'twentyFour';
+          case parseInt(res.length) >= 26:
+            numberClass = 'twentyFive';
             break;
         }
         let per = parseInt(res[i].ActivePercent);
@@ -395,6 +386,8 @@ export default {
 
 .userList {
   @include cube;
+  max-height: 9.4rem;
+  overflow-y: scroll;
 }
 
 </style>

v2tv/src/views/Rank.vue

@@ -1,380 +1,21 @@
 <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="content">
+    <div class="sumTitle">
+      <div class="lt">
 
-              <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 class="md"></div>
+      <div class="rt"></div>
     </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
-  }
+  name: "Rank"
 }
 </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>
+</style>

v2tv/src/views/Rank2.vue

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

v2tv/vue.config.js

@@ -44,5 +44,6 @@ module.exports = {
     },
     // 输出文件目录
     outputDir: 'D:\\wwwroot\\flyLong\\hbuild\\GoAllOutTv\\build',
-    publicPath:'./',
+    publicPath: './',
+    productionSourceMap: false,
 };