样式精修

v2tv/src/Mock/index.js

@@ -143,7 +143,8 @@ let testStudent = function (num, team, mustbeTeamOne) {
             MaxHr: 80,
             PowerPercent: "@integer(10, 100)",
             // PowerPercent: "100",
-            Name: "@cname",
+            // Name: "@cname",
+            Name: "姜泽志",
             PkSucessnum: '1',//胜场数
             PkTotalnum: '1',//总场数
             PlanId: 60,
@@ -167,7 +168,7 @@ let testStudent = function (num, team, mustbeTeamOne) {
             lastPushDataTime: 1608188947175,
             lastUpdateTime: 1608188945184,
             queuePushData: [],
-            RealHr: 160,
+            RealHr: "@integer(1, 200)",
             // RealHr: 0,
             vo2Max: "@float(1,9999,0,1)"
         })
@@ -411,8 +412,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(9, 1));//true
-        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(15, 1)); //
+        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(3, 1));//true
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(1, 1)); //
     } else if (LessonClass == 2) {
         // 上2队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 2));

v2tv/src/components/levelIcon.vue

@@ -37,7 +37,7 @@ export default {
 
 <style lang="scss" scoped>
 @mixin cube {
-  width: 80%;
+  width: 68%;
   overflow: hidden;
   display: block;
   margin: 0 auto;
@@ -50,7 +50,7 @@ export default {
 
 .levelIconOutDoor {
   position: absolute;
-  bottom: 0.1rem;
+  bottom: 0.2rem;
   left: 0;
   right: 0;
   padding-bottom: 5px;
@@ -58,26 +58,24 @@ export default {
 
 .levelIconTV {
   position: absolute;
-  bottom: 0.1rem;
+  bottom: 0.2rem;
   left: 0;
   right: 0;
   padding-bottom: 5px;
 }
 
 .levelIcon ul {
-  width: 96%;
-  height: 100%;
+  width: 92%;
   overflow: hidden;
   display: block;
   margin: 0;
-  margin-left: 2%;
+  padding-left: 5%;
 
   li {
-    width: 14.666666666667%;
+    width: 16.666666666667%;
     height: 2rem;
     overflow: hidden;
     float: left;
-    padding-left: 2.4%;
   }
 
   li:nth-child(1) {
@@ -86,6 +84,7 @@ export default {
 
   img {
     @include cube;
+    width: 70%;
   }
 }
 

v2tv/src/components/student.vue

@@ -1,7 +1,7 @@
 <template>
   <ul :class="[{'many':students.length >= 2}]">
     <li v-for="(s,i) in students" :class="studentsClassName[i].name">
-      <div class="centerLi">
+      <div :class="[{ 'box animate__animated animate__flipInX': Listate },{'centerLi':true}]">
         <div class="power" v-if="s.RealHr != 0">
           <power :cur-power="s.PowerPercent"></power>
         </div>
@@ -73,7 +73,8 @@ import power from '@/components/power'
 export default {
   data() {
     return {
-      studentsFake: 0
+      studentsFake: 0,
+      Listate: false,
     }
   },
   props: ['students', 'studentsClassName'],
@@ -117,11 +118,11 @@ export default {
     'students': {
       // 自动计算补全空白处
       handler(newName, oldName) {
+        let that = this;
         if (!newName) {
           console.log('没有传入学生数据');
         }
         let sum = 0;
-        let that = this;
         sum = newName.length;
         that.studentsFake = 0;
         if (sum == 3) {
@@ -149,6 +150,8 @@ export default {
         let numberClass = '';
         let colorClass = '';
         for (let i = 0; i < sum; i++) {
+          that.Listate = false;
+          console.log(' that.Listate', that.Listate);
           switch (true) {
             case  parseInt(sum) == 1:
               numberClass = 'max';
@@ -197,10 +200,21 @@ export default {
               break
           }
 
+          // 数据变动一次，翻动一次
+
+          // if(!localStorage.colorClass){
+          //   localStorage.colorClass = colorClass;
+          // }else{
+          //   if(localStorage.colorClass == colorClass){
+          //     that.Listate = true;
+          //     localStorage.colorClass = colorClass;
+          //   }
+          // }
+
           newName[i].className = numberClass + ' ' + colorClass;
           that.FakeclassName = numberClass + ' ' + colorClass;
+          that.Listate = !that.Listate;
         }
-
       },
       deep: true,
       immediate: true
@@ -376,8 +390,9 @@ ul {
 
 
   .lt {
-    width: 35%;
+    width: 30%;
     float: left;
+    padding-right: 5%;
 
     span {
       float: right;
@@ -387,6 +402,7 @@ ul {
         color: white;
         font-size: 1.5rem;
         font-weight: bold;
+        letter-spacing: 0.1rem;
       }
 
       s {
@@ -394,6 +410,8 @@ ul {
         float: right;
         text-align: right;
         margin-top: 0.25rem;
+        font-family: "Arial Black";
+        font-weight: bold;
       }
     }
   }
@@ -426,13 +444,13 @@ ul {
     .names {
       @include cube;
       width: 2rem;
-      background: rgba(0, 0, 0, 0.49);
-      font-size: 0.3rem;
+      background: rgba(0, 0, 0, 0.65);
+      font-size: 0.4rem;
       text-align: center;
-      padding: 3% 1%;
+      padding: 0.2% 1%;
       border-radius: 250rem;
       position: relative;
-      bottom: 0.45rem;
+      bottom: 0.55rem;
     }
   }
 
@@ -444,6 +462,7 @@ ul {
       width: 100%;
       float: right;
       margin-top: 20%;
+      letter-spacing: 0.05rem;
 
       span {
         float: right;
@@ -493,7 +512,7 @@ ul {
 
   span {
     width: 33.333%;
-    display: inline-block;
+    float: left;
 
     img {
       width: 0.4rem;
@@ -501,9 +520,12 @@ ul {
     }
 
     em {
-      display: inline;
+      line-height: 1.9rem;
+      display: inline-block;
       font-size: 0.45rem;
       text-align: center;
+      font-family: Arial;
+      vertical-align: top;
     }
   }
 }
@@ -512,7 +534,8 @@ ul {
   width: 0.6rem;
   float: right;
   position: relative;
-  bottom: 2.8rem;
+  bottom: 3rem;
+  right: 0.3rem;
 }
 
 .max {
@@ -523,9 +546,9 @@ ul {
 }
 
 .two {
-  width: 9rem;
-  height: 4rem;
-  margin-top: 2rem;
+  width: 9.2rem;
+  height: 4.2rem;
+  margin-top: 2.5rem;
 
   .lt span em {
     font-size: 1.2rem;
@@ -555,6 +578,22 @@ ul {
 
   .userSport {
     line-height: 0.5rem;
+
+    em {
+      line-height: 1rem;
+      font-size: 0.4rem;
+    }
+  }
+
+  .IsPrivate {
+    bottom: 2.65rem;
+    right: 0.1rem;
+  }
+
+  .names {
+    width: 1.6rem !important;
+    font-size: 0.3rem !important;
+    bottom: 0.4rem !important;
   }
 }
 
@@ -589,8 +628,26 @@ ul {
     }
   }
 
+  //03-31 part
+
   .userSport {
     line-height: 0.5rem;
+
+    em {
+      line-height: 1rem;
+      font-size: 0.4rem;
+    }
+  }
+
+  .IsPrivate {
+    bottom: 2.65rem;
+    right: 0.1rem;
+  }
+
+  .names {
+    width: 1.6rem !important;
+    font-size: 0.3rem !important;
+    bottom: 0.4rem !important;
   }
 }
 

v2tv/src/views/Main.vue

@@ -79,19 +79,9 @@ export default {
     }
   },
   mounted() {
-    // this.$router.push({path: '/2pkRank'});
-
-    if (this.trueDate) {
+    this.mainTimer = setInterval(() => {
       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();
-    }
+    }, 3000);
   },
   watch: {
     '$route': function (val) {

v2tv/src/views/Wait.vue

@@ -12,15 +12,15 @@
           <span>卡路里</span>
         </div>
         <ul>
-          <li v-for="(s,i) in rt[2].Result" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+          <li v-for="(s,i) in calcTodayRank" :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">
             <span>{{ s.UserName }}</span>
-            <img class="crIcon" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
+            <img class="crIcon" v-if="i == 0" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
             <em>{{ s.Values }}</em>
           </li>
-          <li v-if="rt[2].Result == ''">
+          <li v-if="calcTodayRank == ''">
             <i>还没有排行记录哟~</i>
           </li>
         </ul>
@@ -41,7 +41,7 @@
           <!--               hero 英雄榜-->
           <h5>英雄榜</h5>
           <ul>
-            <li v-for="(s,i) in bottom[1].Result">
+            <li v-for="s 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">
@@ -56,7 +56,7 @@
                       <em>场馆新纪录</em>
                     </span>
             </li>
-            <li v-if="rt == ''">
+            <li v-if="Heros == ''">
               <i>还没有排行记录哟~</i>
             </li>
           </ul>
@@ -72,15 +72,15 @@
           <span>C K</span>
         </div>
         <ul>
-          <li v-for="(s,i) in rt[3].Result" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+          <li v-for="(s,i) in CKTodayRank" :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">
             <span>{{ s.UserName }}</span>
-            <img class="crIcon" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
+            <img class="crIcon" v-if="i == 0" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
             <em>{{ s.Values }}</em>
           </li>
-          <li v-if="rt[3].Result == ''">
+          <li v-if="CKTodayRank == ''">
             <i>还没有排行记录哟~</i>
           </li>
         </ul>
@@ -97,15 +97,15 @@
           <span>卡路里</span>
         </div>
         <ul>
-          <li v-for="(s,i) in rt[0].Result" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
-            <div class="num">{{ i + 1 }}</div>
+          <li v-for="(s,t) in calcMouthRank" :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">
             <span>{{ s.UserName }}</span>
-            <img class="crIcon" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
+            <img class="crIcon" v-if="t == 0" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
             <em>{{ s.Values }}</em>
           </li>
-          <li v-if="rt[0].Result == ''">
+          <li v-if="calcMouthRank == ''">
             <i>还没有排行记录哟~</i>
           </li>
         </ul>
@@ -126,7 +126,7 @@
           <!--               最佳会员-->
           <h5>最佳会员</h5>
           <ul>
-            <li v-for="(s,index) in bottom[1].Result">
+            <li v-for="(s,index) in CKtoper">
               <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">
@@ -151,15 +151,15 @@
           <span>C K</span>
         </div>
         <ul>
-          <li v-for="(s,i) in rt[1].Result" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+          <li v-for="(s,i) in CKMonthRank" :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">
             <span>{{ s.UserName }}</span>
-            <img class="crIcon" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
+            <img class="crIcon" v-if="i == 0" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
             <em>{{ s.Values }}</em>
           </li>
-          <li v-if="rt[1].Result == ''">
+          <li v-if="CKMonthRank == ''">
             <i>还没有排行记录哟~</i>
           </li>
         </ul>
@@ -219,18 +219,24 @@ export default {
       ],
       rt: [],
       bottom: [],
+      calcTodayRank: [],
+      CKTodayRank: [],
+      calcMouthRank: [],
+      CKMonthRank: [],
+      Heros: [],
+      CKtoper: [],
     }
   },
   mounted() {
-
     this.init();
     if (this.pageTimer) {
       clearInterval(this.pageTimer);
     } else {
       this.timer = setInterval(() => {
         this.page = !this.page;
-        // this.cardPlay();
-      }, 10000)
+        this.init();
+        this.cardPlay();
+      }, 30000)
     }
     this.cardPlay();
   },
@@ -259,13 +265,6 @@ export default {
       this.GetHerosRankingQuery();
       this.GetCalorieStatsQuery();
       this.GetUserRankingQuery();
-
-      this.waitTimer = setInterval(() => {
-        this.curgetClassStat();
-        this.GetHerosRankingQuery();
-        this.GetCalorieStatsQuery();
-        this.GetUserRankingQuery();
-      }, 5000);
     },
     cardPlay() {
       let that = this;
@@ -273,9 +272,8 @@ export default {
       that.Listate.map(function (t) {
         t.state = false;
       })
-      let timeScope = 400;
+      let timeScope = 600;
       let timeLong;
-      let row;
       for (let i = 0; i < 8; i++) {
         timeLong = parseInt(i * timeScope);
         that.timer = setTimeout(() => {   //设置延迟执行
@@ -323,13 +321,12 @@ export default {
         eqSn: localStorage.eqSn,
         dispNum: 3
       };
-      console.log(331);
       let postdata = qs.stringify(param);
       HerosRankingQuery(postdata).then(res => {
         let json = res;
         if (json.Code == 0) {
-          that.bottom = json.Rs;
-          console.log(that.bottom);
+          that.Heros = json.Rs[0].Result;
+          that.CKtoper = json.Rs[1].Result;
         } else {
           if (json.Code == 4002) {
           } else {
@@ -378,7 +375,11 @@ export default {
       UserRankingQuery(postdata).then(res => {
         let json = res;
         if (json.Code == 0) {
-          that.rt = json.Rs;
+          // that.rt = json.Rs;
+          that.calcTodayRank = json.Rs[2].Result;
+          that.CKTodayRank = json.Rs[3].Result;
+          that.calcMouthRank = json.Rs[0].Result;
+          that.CKMonthRank = json.Rs[1].Result;
         } else {
           if (json.Code == 4002) {
           } else {
@@ -387,8 +388,6 @@ export default {
         }
       })
     },
-    playSound() {
-    },
   },
   components: {
     Headside
@@ -512,7 +511,7 @@ $yellow: #FFEB50;
           width: 0.95rem;
           float: right;
           text-align: left;
-          font-style: normal;
+          font-style: italic;
           font-weight: bold;
           color: $yellow;
           line-height: 0.65rem;
@@ -664,7 +663,7 @@ $yellow: #FFEB50;
               @include cube;
               position: relative;
               top: -0.2rem;
-              width: 80%;
+              width: 0.8rem;
               text-align: center;
               font-size: 0.2rem;
               color: white;