Browse Source

页面微调

Changpeng Duan 4 năm trước cách đây
mục cha
commit
52bbd4dfba
4 tập tin đã thay đổi với 195 bổ sung56 xóa
  1. 5 5
      v2tv/src/Mock/index.js
  2. 40 14
      v2tv/src/components/pkstudent.vue
  3. 149 36
      v2tv/src/views/2pkRank.vue
  4. 1 1
      v2tv/src/views/Wait.vue

+ 5 - 5
v2tv/src/Mock/index.js

@@ -120,7 +120,7 @@ let getUserList = function () {
 let testStudent = function (num, team, mustbeTeamOne) {
     let item = [];
     let group = team == 2 ? "@integer(1, 2)" : "@integer(1, 3)";
-    // group = 2;
+    group = 1;
     if (mustbeTeamOne) {
         group = mustbeTeamOne;
     }
@@ -401,8 +401,8 @@ if (t == 1) {
     // }
 
     // 0: 下课 团课/私教/PK 的排名
-    let LessonClass = 2;
-    let LessonDp = 2;
+    let LessonClass = 0;
+    let LessonDp = 0;
     // 1:团课/私教
     // 2:竞技课2PK
     // 3:竞技课threepk
@@ -418,8 +418,8 @@ if (t == 1) {
         // 上2队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 2));
         Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(1, 2));
-        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(16, 1,));
-        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(16, 1,));
+        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(8, 1,));
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(6, 1,));
     } else if (LessonClass == 3) {
         // 上3队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 3));

+ 40 - 14
v2tv/src/components/pkstudent.vue

@@ -314,8 +314,9 @@ ul {
 
 
   .lt {
-    width: 35%;
+    width: 31%;
     float: left;
+    padding-right: 4%;
 
     span {
       float: right;
@@ -364,7 +365,7 @@ ul {
     .names {
       @include cube;
       width: 2rem;
-      background: rgba(0, 0, 0, 0.49);
+      background: rgba(0, 0, 0, 0.7);
       font-size: 0.3rem;
       text-align: center;
       padding: 3% 1%;
@@ -375,8 +376,9 @@ ul {
   }
 
   .rt {
-    width: 35%;
+    width: 31%;
     float: right;
+    padding-right: 4%;
 
     .heartJump {
       width: 100%;
@@ -519,15 +521,24 @@ ul {
     height: 2.1rem;
   }
 
-  .lt span em {
-    font-size: 0.8rem;
+  .lt span {
+    margin-top: 12%;
+
+    s {
+      margin-top: 0.1rem;
+    }
+
+    em {
+      font-size: 0.8rem;
+    }
   }
 
   .userinfo .head {
     height: 1.9rem;
 
     img {
-      width: 1.8rem;
+      width: 1.5rem;
+      border-width: 2px !important;
     }
   }
 
@@ -535,8 +546,11 @@ ul {
     height: 2.1rem;
 
     .names {
-      width: 1.6rem;
+      width: 1.2rem;
+      height: 0.2rem;
+      line-height: 0.2rem;
       font-size: 0.2rem;
+      bottom: 0.35rem;
     }
   }
 
@@ -549,13 +563,13 @@ ul {
     }
 
     img {
-      width: 0.4rem;
+      width: 0.3rem;
       margin-right: 10%;
     }
   }
 
   .userSport {
-    line-height: 0.2rem;
+    line-height: 0;
 
     img {
       width: 0.3rem;
@@ -565,6 +579,11 @@ ul {
       font-size: 0.35rem;
     }
   }
+
+  .IsPrivate {
+    bottom: 2rem;
+    right: 0.1rem;
+  }
 }
 
 .three {
@@ -764,7 +783,7 @@ ul {
   }
 
   .userinfo {
-    height: 0.9rem;
+    height: 1rem;
   }
 
   .userinfo .head {
@@ -776,14 +795,16 @@ ul {
     }
 
     .names {
-      width: 0.8rem;
+      width: 0.7rem;
+      height: 0.15rem;
+      line-height: 0.15rem;
       font-size: 0.15rem;
-      bottom: 0.3rem;
+      bottom: 0.2rem;
     }
   }
 
   .md {
-    height: 1.1rem;
+    height: 1rem;
 
     .IsPrivate {
       width: 0.25rem;
@@ -807,13 +828,18 @@ ul {
   }
 
   .userSport {
-    line-height: 0.01rem;
+    position: relative;
+    bottom: 0.15rem;
+    @include cube;
+    line-height: 0;
 
     img {
+      line-height: 0;
       width: 0.2rem;
     }
 
     em {
+      line-height: 0;
       font-size: 0.2rem;
     }
   }

+ 149 - 36
v2tv/src/views/2pkRank.vue

@@ -41,7 +41,7 @@
  <span class="level">
                 <h5 class="winner" v-if="winner == 2">蓝队胜</h5>
                 <h5 class="loser" v-else>第二名</h5>
-                        <img src="../assets/imgs/pkRank/trophy.png" alt="">
+                        <img v-if="winner == 2" src="../assets/imgs/pkRank/trophy.png" alt="">
           </span>
           <span class="center">CK</span>
           <span class="ckValue">
@@ -105,7 +105,7 @@
             <div class="ltTitle">
               <span>排名</span>
               <span>成员</span>
-              <span>卡路里</span>
+              <span>CK</span>
             </div>
             <li v-for="(s,i) in students.CalSort" v-if="i <= 7"
                 :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
@@ -118,13 +118,12 @@
                 </div>
                 <span class="names">{{ s.Name }}</span>
                 <span class="glory">
-                <img src="../assets/imgs/rank/cr.png" alt="">
-                <img src="../assets/imgs/rank/mr.png" alt="">
-                <img src="../assets/imgs/rank/pb.png" 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="">
+                <img src="../assets/imgs/rank/pb.png" v-if="i == 2" alt="">
               </span>
                 <span class="score">
-                 {{ s.Cle|fmtInt }}
-                  <!--                  {{ s.Ck|fmtFloat }}-->
+                                    {{ s.Ck|fmtFloat }}
               </span>
               </div>
             </li>
@@ -148,9 +147,9 @@
                 </div>
                 <span class="names">{{ s.Name }}</span>
                 <span class="glory">
-                <img src="../assets/imgs/rank/cr.png" alt="">
-                <img src="../assets/imgs/rank/mr.png" alt="">
-                <img src="../assets/imgs/rank/pb.png" 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="">
+                <img src="../assets/imgs/rank/pb.png" v-if="i == 2" alt="">
               </span>
                 <span class="score">
                                   {{ s.Ck|fmtFloat }}
@@ -175,11 +174,87 @@ let qs = require('qs');
 export default {
   data() {
     return {
-      pages: 1,
+      pages: 2,
       eqSn: '30:9C:23:0C:8B:1E',
       pageStyle: RandomBg(),
-      redMvp: {},
-      blueMvp: {},
+      redMvp: {
+        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: [],
+      },
+      blueMvp: {
+        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: [],
+      },
       winner: 1,
       trueDate: true,//真实数据 true false
       autoJump: true,//开启自动跳走
@@ -206,13 +281,13 @@ export default {
     this.cardPlay();
     let pages = 1;
     // 五秒后翻页
-    this.rankTimer = setInterval(() => {
-      this.pages = 2;
-      if (pages == 1) {
-        this.cardPlay();
-        pages = 2;
-      }
-    }, 5000);
+    // this.rankTimer = setInterval(() => {
+    //   this.pages = 2;
+    //   if (pages == 1) {
+    this.cardPlay();
+    pages = 2;
+    //   }
+    // }, 5000);
   },
   watch: {
     '$route': function (val) {
@@ -295,7 +370,7 @@ export default {
         that.totalTime = totalTime;
         if (parseInt(totalTime) <= 0) {
           // 前往等待页面
-          that.$router.push({path: '/'});
+          // that.$router.push({path: '/'});
           // 计时器回收
           clearInterval(clock);
         }
@@ -382,6 +457,7 @@ export default {
     .pkResult {
       @include cube;
       width: 70%;
+      margin-top: 0.8rem;
 
       .lt {
         width: 5rem;
@@ -436,7 +512,15 @@ export default {
         @include cube;
         color: white;
 
+        .winner {
+          color: #FFEB50;
+        }
+
         em {
+          position: relative;
+          bottom: 0.3rem;
+          font-size: 0.8rem;
+          font-weight: bold;
           font-style: normal;
         }
       }
@@ -451,24 +535,39 @@ export default {
 
           img {
             @include cube;
-            width: 2rem;
+            width: 1.8rem;
             border-radius: 250rem;
 
             &.girl {
-              border: 0.05rem solid #EA26EA;
+              border: 2px solid #EA26EA;
             }
 
             &.boy {
-              border: 0.05rem solid #39B6FF;
+              border: 2px solid #39B6FF;
             }
           }
+
+          .names {
+            background: rgba(0, 0, 0, 0.7);
+            text-align: center;
+            padding: 1% 1%;
+            border-radius: 250rem;
+            position: relative;
+            width: 1.2rem;
+            height: 0.2rem;
+            line-height: 0.2rem;
+            font-size: 0.2rem;
+            bottom: 0.25rem;
+            color: white;
+            margin: 0 auto;
+          }
         }
 
         .mvpCode {
           @include cube;
-          font-size: 0.4rem;
+          font-size: 0.3rem;
           color: white;
-          margin-top: 0.2rem;
+          margin-top: 0;
         }
       }
 
@@ -476,7 +575,7 @@ export default {
         @include cube;
         font-size: 0.3rem;
         color: white;
-        margin-top: 0.2rem;
+        margin-top: 0.3rem;
       }
 
       .teamName {
@@ -556,7 +655,7 @@ export default {
 
         img {
           position: relative;
-          bottom: 0.6rem;
+          bottom: 0.7rem;
           width: 1rem;
           float: left;
         }
@@ -568,18 +667,23 @@ export default {
           em {
             float: left;
             color: white;
-            font-size: 0.4rem;
+            font-size: 0.3rem;
             font-style: normal;
+            font-weight: bold;
+            line-height: 0.6rem;
+
           }
 
           s {
             text-decoration: none;
             float: right;
             text-align: right;
-            font-size: 0.6rem;
+            font-size: 1rem;
             color: white;
-            line-height: 0.5rem;
+            line-height: 0.6rem;
             padding: 0 0.2rem;
+            font-weight: bold;
+            font-family: "Arial";
 
             &.winnerSum {
               color: #FFEB50;
@@ -591,7 +695,7 @@ export default {
 
     .listContainer {
       @include cube;
-      width: 80%;
+      width: 90%;
 
       .lt {
         width: 47%;
@@ -617,6 +721,7 @@ export default {
 
           &:last-child {
             float: right;
+            margin-right: 0.3rem;
           }
         }
       }
@@ -637,6 +742,13 @@ export default {
             background-position: top center;
             background-size: 100% 100%;
             overflow: visible;
+            color: white;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-left: 0;
+
+            &:after {
+              opacity: 10%;
+            }
 
             &.redrow {
               background: url("../assets/imgs/3pkRank/redrow.png");
@@ -668,20 +780,20 @@ export default {
 
           .head {
             position: relative;
-            bottom: 0.4rem;
+            bottom: 0.5rem;
             float: left;
             margin-left: 0.3rem;
 
             img {
-              width: 0.6rem;
+              width: 0.7rem;
               border-radius: 250rem;
 
               &.girl {
-                border: 0.05rem solid #EA26EA;
+                border: 1px solid #EA26EA;
               }
 
               &.boy {
-                border: 0.05rem solid #39B6FF;
+                border: 1px solid #39B6FF;
               }
             }
           }
@@ -715,6 +827,7 @@ export default {
             font-weight: bold;
             font-style: italic;
             text-align: center;
+            padding-right: 0.2rem;
           }
         }
       }

+ 1 - 1
v2tv/src/views/Wait.vue

@@ -231,7 +231,7 @@ export default {
   },
   mounted() {
     // test
-    this.$router.push({path: '/pk'});
+    this.$router.push({path: '/threepk'});
 
     this.init();
     this.grpcServe();