0.0

v2tv/src/Mock/index.js

@@ -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(1, 1));
-        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(1, 1));
+        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(5, 1));//true
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(5, 1)); //
     } else if (LessonClass == 2) {
         // 上2队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 2));

v2tv/src/components/Headside.vue

@@ -178,7 +178,7 @@ export default {
 
   span {
     float: right;
-    font-size: 0.3rem;
+    font-size: 0.2rem;
     line-height: 0.4rem;
     margin-right: 0.2rem;
     margin-top: 0.2rem;
@@ -189,7 +189,7 @@ export default {
     margin: 0;
     margin-top: 0.2rem;
     text-align: right;
-    font-size: 0.27rem;
+    font-size: 0.2rem;
     line-height: 0.4rem;
   }
 }

v2tv/src/components/student.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul>
+  <ul :class="[{'many':students.length >= 2}]">
     <li v-for="(s,i) in students" :class="studentsClassName[i].name">
       <div class="centerLi">
         <div class="power" v-if="s.RealHr != 0">
@@ -26,18 +26,20 @@
           <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>
-                <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">
+                <em class="normalJump" v-if="s.RealHr != 0"
+                    v-show="parseInt(s.ActivePercent) <= 90 && parseInt(s.ActivePercent) > 30">
+                                            {{ s.RealHr }}</em>
+                <em class="slowJump" v-if="s.RealHr != 0"
+                    v-show="parseInt(s.ActivePercent) <= 30">{{ s.RealHr }}</em>
+                <em class="plus" v-if="s.RealHr == 0">
                                         ---
-                                    </span>
+                                    </em>
               </div>
-              <img src="../assets/imgs/student/heart.svg" class=""/>
             </span>
           </div>
         </div>
@@ -57,6 +59,12 @@
         </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>
@@ -69,6 +77,31 @@ export default {
     }
   },
   props: ['students', 'studentsClassName'],
+  watch: {
+    'studentsClassName': {
+      // 自动计算补全空白处
+      handler(newName, oldName) {
+        let sum = 0;
+        let that = this;
+        sum = newName.length;
+        if (sum == 3) {
+          that.studentsFake = 1;
+        }
+        if (sum >= 5 && sum < 9) {
+          that.studentsFake = 9 - sum;
+          console.log(that.studentsFake);
+        }
+        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) {
@@ -126,6 +159,7 @@ em, i, ul, li, s {
 
 ul {
   @include cube;
+  width: 96%;
   display: inline-flex;
   align-items: center;
   align-content: center;
@@ -133,6 +167,10 @@ ul {
   flex-wrap: wrap;
   flex-grow: 1;
   height: 100%;
+
+  &.many {
+    justify-content: space-between;
+  }
 }
 
 .blue .centerLi {
@@ -226,21 +264,26 @@ ul {
   overflow: hidden;
   float: left;
   color: #fff;
+  border-radius: 0.1rem;
 }
 
+
 .userinfo {
   @include cube;
 
+
   .lt {
     width: 35%;
     float: left;
 
     span {
       float: right;
+      margin-top: 16%;
 
       em {
         color: white;
         font-size: 1.5rem;
+        font-weight: bold;
       }
 
       s {
@@ -255,16 +298,105 @@ ul {
   .md {
     width: 30%;
     float: left;
+    padding-top: 3%;
+
+    .head {
+      @include cube;
+      height: 3rem;
+
+      img {
+        @include cube;
+        width: 2.6rem;
+        border-radius: 250rem;
+
+        &.girl {
+          border: 0.05rem solid #EA26EA;
+        }
+
+        &.boy {
+          border: 0.05rem solid #39B6FF;
+        }
+      }
+    }
+
+    .names {
+      @include cube;
+      width: 2rem;
+      background: rgba(0, 0, 0, 0.49);
+      font-size: 0.3rem;
+      text-align: center;
+      padding: 3% 1%;
+      border-radius: 250rem;
+      position: relative;
+      bottom: 0.4rem;
+    }
   }
 
   .rt {
     width: 35%;
     float: right;
+
+    .heartJump {
+      width: 100%;
+      float: right;
+      margin-top: 30%;
+    }
+
+    span {
+      text-align: right;
+      float: right;
+      font-size: 1.3rem;
+      font-weight: bold;
+      padding-right: 30%;
+
+      em {
+        color: white;
+        width: 80%;
+        float: right;
+        text-align: right;
+      }
+
+      s {
+        font-size: 0.4rem;
+        float: right;
+        text-align: right;
+        margin-top: 0.25rem;
+      }
+
+      .heartImgContainer {
+        width: 20%;
+        height: 2rem;
+        float: right;
+      }
+
+      img {
+        width: 0.5rem;
+        float: right;
+        margin-right: 20%;
+        margin-top: 10%;
+      }
+    }
   }
 }
 
 .userSport {
   @include cube;
+
+  span {
+    width: 33.333%;
+    display: inline-block;
+
+    img {
+      width: 0.4rem;
+      margin-right: 0.2rem;
+    }
+
+    em {
+      display: inline;
+      font-size: 0.45rem;
+      text-align: center;
+    }
+  }
 }
 
 .max {
@@ -273,5 +405,115 @@ ul {
   margin-top: 2rem;
 }
 
+.two {
+  width: 9rem;
+  height: 4rem;
+  margin-top: 2rem;
+
+  .lt span em {
+    font-size: 1.2rem;
+  }
+
+  .userinfo .head {
+    height: 2.6rem;
+
+    img {
+      width: 2.2rem;
+    }
+  }
+
+  .rt span {
+    font-size: 1rem;
+    padding-right: 20%;
+
+    img {
+      margin-right: 5%;
+    }
+  }
+
+  .userSport {
+    line-height: 0.5rem;
+  }
+}
+
+.three {
+  width: 9.5rem;
+  height: 4rem;
+  margin-top: 0.3rem;
+
+  .lt span em {
+    font-size: 1.2rem;
+  }
+
+  .userinfo .head {
+    height: 2.6rem;
+
+    img {
+      width: 2.2rem;
+    }
+  }
+
+  .rt span {
+    font-size: 1rem;
+    padding-right: 20%;
+
+    img {
+      margin-right: 5%;
+    }
+  }
+
+  .userSport {
+    line-height: 0.5rem;
+  }
+}
+
+
+.five {
+  width: 6.3rem;
+  height: 2.8rem;
+  margin-top: 0.3rem;
+
+  .lt span {
+    margin-top: 10%;
+
+    em {
+      font-size: 0.8rem;
+    }
+  }
+
+  .userinfo .head {
+    height: 2rem;
+
+    img {
+      width: 1.8rem;
+    }
+
+    .names {
+      width: 1.5rem;
+    }
+  }
+
+  .rt span {
+    font-size: 0.8rem;
+    padding-right: 20%;
+
+    img {
+      width: 0.3rem;
+      margin-right: 5%;
+    }
+  }
+
+  .userSport {
+    line-height: 0.5rem;
+  }
+
+}
+
+.fakePart {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.13);
+  border-radius: 0.1rem;
+}
 
 </style>

v2tv/src/views/Main.vue

@@ -126,19 +126,19 @@ export default {
       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);
+      // 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);
@@ -304,8 +304,8 @@ export default {
           case  parseInt(res.length) <= 4 && parseInt(res.length) > 2:
             numberClass = 'three';
             break;
-          case  parseInt(res.length) <= 6 && parseInt(res.length) > 4:
-            numberClass = 'six';
+          case  parseInt(res.length) <= 9 && parseInt(res.length) > 4:
+            numberClass = 'five';
             break;
           case  parseInt(res.length) <= 9 && parseInt(res.length) > 6:
             numberClass = 'nine';
@@ -367,6 +367,14 @@ export default {
 //@import "../assets/css/bg.css";
 @import "../assets/css/bg.scss";
 
+
+@mixin cube {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
 * {
   font-family: vista;
 }
@@ -385,4 +393,8 @@ export default {
   overflow-y: scroll;
 }
 
+.userList {
+  @include cube;
+}
+
 </style>