页面微调

v2tv/public/index.html

@@ -18,5 +18,9 @@
       body {
           background: #028fe1;
       }
+
+      .v-modal {
+          opacity: 0.8;
+      }
   </style>
 </html>

v2tv/src/Mock/index.js

@@ -194,10 +194,10 @@ let testStudent = function (num, team, mustbeTeamOne) {
     };
 };
 
-let getNewUser = function (code) {
+let getNewUser = function (code, t) {
 
     let item = [];
-    for (var i = 0; i < 7; i++) {
+    for (var i = 0; i <= t; i++) {
         item.push({
             "SvId": "@guid",
             "UserId": "@integer(15253135600, 15253135699)",
@@ -401,8 +401,8 @@ if (t == 1) {
     // }
 
     // 0: 下课 团课/私教/PK 的排名
-    let LessonClass = 0;
-    let LessonDp = 3;
+    let LessonClass = 1;
+    let LessonDp = 1;
     // 1：团课/私教
     // 2：竞技课2PK
     // 3：竞技课threepk
@@ -412,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(30, 1));//true
-        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(30, 1)); //
+        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(1, 1));//true
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(1, 1)); //
     } else if (LessonClass == 2) {
         // 上2队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 2));
@@ -425,7 +425,7 @@ if (t == 1) {
         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(4, 3,));
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(6, 3,));
         Mock.mock(curheadapi + 'ClassUserRank', 'post', testStudent(1, 2));
         Mock.mock(Mockapi + 'ClassUserRank', 'post', testStudent(1, 2));
     } else if (LessonClass == 0) {
@@ -468,11 +468,11 @@ if (t == 1) {
     Mock.mock(curheadapi + 'UserRankingQuery', 'post', UserRankingQuery(8));
     Mock.mock(Mockapi + 'UserRankingQuery', 'post', UserRankingQuery(8));
     // 新同学 0 999
-    Mock.mock(curheadapi + 'getNewUser', 'post', getNewUser(999));
-    Mock.mock(Mockapi + 'getNewUser', 'post', getNewUser(999));
+    Mock.mock(curheadapi + 'getNewUser', 'post', getNewUser(999, 12));
+    Mock.mock(Mockapi + 'getNewUser', 'post', getNewUser(999, 12));
     // 彩蛋 0 999
-    Mock.mock(curheadapi + 'getRecordBreak', 'post', getRecordBreak(999));
-    Mock.mock(Mockapi + 'getRecordBreak', 'post', getRecordBreak(999));
+    Mock.mock(curheadapi + 'getRecordBreak', 'post', getRecordBreak(0));
+    Mock.mock(Mockapi + 'getRecordBreak', 'post', getRecordBreak(0));
 }
 
 export default Mock;

v2tv/src/components/newRecord.vue

@@ -10,6 +10,9 @@
           <span class="names">{{ toperInfo.toper.UserName }}</span>
         </div>
         <div class="info">
+          <div class="type">
+            CK
+          </div>
           <div class="detail">
             <em>{{ toperInfo.toper.Ck|fmtFloat }}</em>
           </div>
@@ -72,7 +75,9 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
+  width: 6.5rem;
   //background: url("../assets/imgs/newRecord/bg.svg");
+  background: url("../assets/imgs/newRecord/newRecordBg.svg");
   background-position: top center;
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -80,17 +85,7 @@ export default {
   background-color: transparent;
   margin-top: 0 !important;
 
-  &::after {
-    content: "";
-    background: url("../assets/imgs/newRecord/shine.png");
-    opacity: 0.5;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    position: absolute;
-    z-index: -1;
-  }
+
 }
 
 .eggContainer {
@@ -98,63 +93,72 @@ export default {
 
   .eggBg {
     @include cube;
-    background: url("../assets/imgs/newRecord/bg.svg");
+    //background: url("../assets/imgs/newRecord/bg.svg");
+    padding-left: 5%;
     background-position: top center;
     background-repeat: no-repeat;
-    background-size: 100% 100%;
-    margin-top: 10%;
-    height: 4rem;
+    background-size: 100%;
+    margin-top: 30%;
     overflow: visible;
 
     .toper {
       @include cube;
       position: relative;
-      top: -30%;
+      top: -50%;
 
       img {
         @include cube;
-        width: 1.6rem;
+        width: 2.5rem;
         border-radius: 250rem;
 
         &.girl {
-          border: 0.05rem solid #EA26EA;
+          border: 2px solid #EA26EA;
         }
 
         &.boy {
-          border: 0.05rem solid #39B6FF;
+          border: 2px solid #39B6FF;
         }
       }
 
       .names {
         @include cube;
-        width: 1.2rem;
-        height: 0.5rem;
-        line-height: 0.5rem;
-        background: rgba(0, 0, 0, 0.49);
-        font-size: 0.25rem;
+        width: 2rem;
+        height: 0.4rem;
+        background: rgba(0, 0, 0, 0.7);
+        font-size: 0.3rem;
         text-align: center;
         border-radius: 250rem;
         position: relative;
         bottom: 0.4rem;
         color: #fff;
+        line-height: 0.4rem;
       }
     }
   }
 
+  .type {
+    height: 2rem;
+    color: white;
+    font-weight: bold;
+    font-size: 0.8rem;
+    line-height: 2rem;
+    margin-top: 0.6rem;
+  }
+
   .info {
     @include cube;
 
     em {
       @include cube;
       font-weight: bold;
-      font-size: 0.7rem;
+      font-size: 1.1rem;
       text-align: center;
-      font-family: "Arial Black";
+      font-family: "Arial";
       color: #b5000f;
       text-shadow: 0px 4px 8px #fff;
       font-style: normal !important;
       text-decoration: none;
-      margin-top: 0.3rem;
+      margin-top: 0;
     }
   }
 }

v2tv/src/components/newStudent.vue

@@ -2,8 +2,8 @@
   <el-dialog title="" class="sss" :visible.sync="studentInfo.dialogVisible" :close-on-click-modal="false">
     <div :class="[{'newStudentContainer':true}]">
       <div class="info">
-        <ul :class="[{'many':studentInfo.Rs.length >= 2}]">
-          <li v-for="(s,i) in studentInfo.Rs" v-if="i < 8"
+        <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 < 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">
@@ -80,17 +80,28 @@ export default {
 
 ul {
   @include cube;
-  width: 67%;
+  width: 70%;
   display: inline-flex;
   align-items: center;
   align-content: center;
   justify-content: center;
   flex-wrap: wrap;
   flex-grow: 1;
-  padding-top: 12%;
+  padding-top: 18%;
+
+  &.two {
+    justify-content: space-between;
+    padding-top: 20%;
+    width: 80%;
+
+    .bigLi img {
+      width: 1.9rem;
+    }
+  }
 
   &.many {
     justify-content: space-between;
+    padding-top: 14%;
   }
 
   li {
@@ -103,11 +114,11 @@ ul {
       border-radius: 250rem;
 
       &.girl {
-        border: 0.05rem solid #EA26EA;
+        border: 2px solid #EA26EA;
       }
 
       &.boy {
-        border: 0.05rem solid #39B6FF;
+        border: 2px solid #39B6FF;
       }
     }
 
@@ -132,17 +143,17 @@ ul {
 
   .names {
     @include cube;
-    width: 1.2rem;
-    background: rgba(0, 0, 0, 0.49);
+    width: 1.6rem;
+    background: rgba(0, 0, 0, 0.7);
     font-size: 0.25rem;
     text-align: center;
-    padding: 3% 1%;
+    padding: 0% 1%;
     border-radius: 250rem;
     position: relative;
-    bottom: 0.4rem;
+    bottom: 0.3rem;
     color: #fff;
+    line-height: 0.3rem;
   }
 }
 
-
 </style>

v2tv/src/components/threestudent.vue

@@ -519,7 +519,8 @@ ul {
     width: 0.5rem;
     float: right;
     position: relative;
-    bottom: 2.2rem;
+    bottom: 2.1rem;
+    right: -0.1rem;
   }
 }
 
@@ -573,16 +574,24 @@ ul {
   }
 
   .userSport {
-    line-height: 0.2rem;
+    line-height: 0;
 
     img {
-      width: 0.3rem;
+      width: 0.25rem;
     }
 
     em {
-      font-size: 0.35rem;
+      font-size: 0.3rem;
     }
   }
+
+  .IsPrivate {
+    width: 0.4rem;
+    float: right;
+    position: relative;
+    bottom: 1.95rem;
+    right: 0.0rem;
+  }
 }
 
 .three {
@@ -759,7 +768,7 @@ ul {
 }
 
 .twentyFive {
-  width: 3.18rem;
+  width: 3.16rem;
   height: 1.55rem;
   margin-top: 0.1rem;
 
@@ -782,6 +791,8 @@ ul {
   }
 
   .userinfo {
+    position: relative;
+    bottom: 0.1rem;
     height: 0.8rem;
   }
 
@@ -824,16 +835,25 @@ ul {
   }
 
   .userSport {
-    line-height: 0.01rem;
+    position: relative;
+    bottom: 0.1rem;
+    line-height: 0rem;
 
     img {
-      width: 0.2rem;
+      width: 0.15rem;
     }
 
     em {
-      font-size: 0.2rem;
+      font-size: 0.15rem;
     }
   }
+
+  /deep/ .powerContainer img {
+    position: relative;
+    right: -0.1rem;
+    bottom: 0.1rem;
+    width: 0.2rem;
+  }
 }
 
 .fakePart {

v2tv/src/views/2pkRank.vue

@@ -847,4 +847,9 @@ export default {
     width: 40%;
   }
 }
+
+.pageDetail {
+  background: url("../../src/assets/imgs/pkRank/pkpage2bg.png");
+  @include bg;
+}
 </style>

v2tv/src/views/3pkRank.vue

@@ -521,11 +521,12 @@ export default {
     .pkResult {
       @include cube;
       width: 85%;
+      margin-top: 0.4rem;
 
       .lt {
         width: 4rem;
         float: left;
-        margin-top: 5%;
+        margin-top: 7%;
         background: url("../assets/imgs/pkRank/redCube.png");
         background-repeat: no-repeat;
         background-position: top center;
@@ -545,7 +546,7 @@ export default {
       .rt {
         width: 4rem;
         float: right;
-        margin-top: 10%;
+        margin-top: 7%;
         background: url("../assets/imgs/pkRank/blueCube.png");
         background-repeat: no-repeat;
         background-position: top center;
@@ -555,7 +556,7 @@ export default {
       .level {
         @include cube;
         color: white;
-        height: 1.7rem;
+        height: 1.4rem;
 
         img {
           position: relative;
@@ -595,7 +596,7 @@ export default {
         em {
           position: relative;
           bottom: 0.3rem;
-          font-size: 0.8rem;
+          font-size: 0.7rem;
           font-weight: bold;
           font-style: normal;
         }
@@ -605,11 +606,12 @@ export default {
         @include cube;
         .head {
           @include cube;
-          height: 1.6rem;
+          height: 1.3rem;
+          margin-top: 0.4rem;
 
           img {
             @include cube;
-            width: 1.5rem;
+            width: 1.2rem;
             border-radius: 250rem;
 
             &.girl {
@@ -639,9 +641,9 @@ export default {
 
         .mvpCode {
           @include cube;
-          font-size: 0.3rem;
+          font-size: 0.25rem;
           color: white;
-          margin-top: 0rem;
+          margin-top: 0.1rem;
         }
       }
 
@@ -663,7 +665,7 @@ export default {
   .pageDetail {
     .sumTitle {
       @include cube;
-      width: 90%;
+      width: 88.5%;
       margin-top: 0.7rem;
       overflow: visible;
 
@@ -700,13 +702,16 @@ export default {
           background-repeat: no-repeat;
           background-position: top center;
           background-size: 100%;
+          margin-right: 0.2rem;
         }
 
         &.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;
         }
 
         .rowName {
@@ -718,9 +723,10 @@ export default {
 
         img {
           position: relative;
-          bottom: 0.6rem;
+          bottom: 0.7rem;
           width: 1rem;
           float: left;
+          left: -0.4rem;
         }
 
         .rowValue {
@@ -740,7 +746,7 @@ export default {
             text-decoration: none;
             float: right;
             text-align: right;
-            font-size: 0.75rem;
+            font-size: 0.7rem;
             color: white;
             line-height: 0.6rem;
             padding: 0 0.2rem;
@@ -759,7 +765,7 @@ export default {
       @include cube;
       height: 1.3rem;
       position: relative;
-      bottom: 1.3rem;
+      bottom: 1.4rem;
 
       img {
         position: absolute;
@@ -803,7 +809,7 @@ export default {
 
       .ltTitle {
         @include cube;
-        width: 90%;
+        width: 84%;
 
         span {
           float: left;
@@ -816,7 +822,7 @@ export default {
 
           &:last-child {
             float: right;
-            padding-right: 0.2rem;
+            padding-right: 0.3rem;
           }
         }
       }
@@ -826,7 +832,7 @@ export default {
 
         li {
           @include cube;
-          width: 90%;
+          width: 84%;
           height: 0.7rem;
           padding-top: 0.2rem;
 
@@ -875,20 +881,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;
               }
             }
           }
@@ -940,4 +946,9 @@ export default {
     width: 40%;
   }
 }
+
+.pageDetail {
+  background: url("../../src/assets/imgs/3pkRank/page2bg.png");
+  @include bg;
+}
 </style>

v2tv/src/views/Index.vue

@@ -372,4 +372,5 @@ ul, li {
 #__vconsole.show {
   display: block;
 }
+
 </style>

v2tv/src/views/Main.vue

@@ -79,9 +79,10 @@ export default {
     }
   },
   mounted() {
-    this.mainTimer = setInterval(() => {
-      this.init();
-    }, 3000);
+    this.init();
+    //   this.mainTimer = setInterval(() => {
+    //     this.init();
+    //   }, 3000);
   },
   watch: {
     '$route': function (val) {
@@ -189,13 +190,14 @@ export default {
     OpenEgg(msg) {
       this.toperInfo.toper = msg.Rs;
       this.toperInfo.dialogVisible = true;
+      console.log(123);
       // 倒计时5秒自动关闭
       let that = this;
       this.totalTime = 30;
       let clock = window.setInterval(() => {
         this.totalTime--;
         if (parseInt(this.totalTime) < 0) {
-          that.toperInfo.dialogVisible = false;// 关闭 自动关闭彩蛋
+          // that.toperInfo.dialogVisible = false;// 关闭 自动关闭彩蛋
           clearInterval(clock);
         }
       }, 1000)
@@ -213,7 +215,7 @@ export default {
         this.studentInfo.percent = parseInt(num) > 100 ? 100 : num;
         console.log('num' + num);
         if (parseInt(this.studentTime) <= 0) {
-          that.studentInfo.dialogVisible = false; //关闭 自动关闭
+          // that.studentInfo.dialogVisible = false; //关闭 自动关闭
           clearInterval(clock);
         }
       }, 1000)
@@ -386,4 +388,5 @@ export default {
     max-height: inherit;
   }
 }
+
 </style>

v2tv/src/views/Wait.vue

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

v2tv/src/views/threepk.vue

@@ -342,6 +342,9 @@ export default {
         if (that.RedProgress > 75) {
           that.RedProgress = 75
         }
+        if (that.Redflag > 75) {
+          that.Redflag = 75
+        }
       }
 
       if (blueFmtSum == 0) {
@@ -602,7 +605,7 @@ export default {
         float: left;
 
         span {
-          background: url("../assets/imgs/pk/blueFlag.png");
+          background: url("../assets/imgs/three/blueFlag.png");
           background-repeat: no-repeat;
           background-position: top center;
           background-size: 100%;
@@ -634,13 +637,18 @@ export default {
           color: white;
           text-align: center;
           font-style: normal;
-          line-height: 0.5rem;
+          line-height: 0.6rem;
         }
       }
     }
   }
 }
 
+.progressContainer {
+  @include cube;
+  height: 2.8rem;
+}
+
 .lineContianer {
   position: relative;
   @include cube;
@@ -657,14 +665,14 @@ export default {
       width: 4rem;
       float: left;
       border-radius: 3px;
-      background: linear-gradient(#d11122 0%, rgba(209, 17, 34, 0.23) 100%);
+      background: linear-gradient(to left, #d11122 0%, rgba(209, 17, 34, 0.23) 100%);
 
     }
 
     em {
       position: relative;
       float: left;
-      left: -1.5rem;
+      left: -1.9rem;
       width: 1.6rem;
       color: white;
       text-align: right;
@@ -679,15 +687,17 @@ export default {
     overflow: visible;
 
     span {
+      position: relative;
+      left: -1rem;
       width: 4rem;
       float: left;
-      background: linear-gradient(#4cbbfc 0%, rgba(0, 125, 198, 0.17) 100%);
+      background: linear-gradient(to left, #4cbbfc 0%, rgba(0, 125, 198, 0.17) 100%);
     }
 
     em {
       position: relative;
       float: left;
-      left: -1.5rem;
+      left: -3.1rem;
       width: 1.6rem;
       color: white;
       text-align: right;
@@ -696,15 +706,16 @@ export default {
     }
 
     img {
-      position: absolute;
+      position: relative;
       width: 1.2rem;
       float: left;
-      left: 30%;
+      left: -0.6rem;
       overflow: visible;
+      bottom: 0.2rem;
 
       &.rightVs {
         float: right;
-        left: 64%;
+        left: 0.7rem;
       }
     }
 
@@ -718,13 +729,13 @@ export default {
       width: 4rem;
       float: left;
       border-radius: 3px;
-      background: linear-gradient(#fccd4c 0%, rgba(255, 228, 15, 0.26) 100%);
+      background: linear-gradient(to left, #fccd4c 0%, rgba(255, 228, 15, 0.26) 100%);
     }
 
     em {
       position: relative;
       float: left;
-      left: -1.5rem;
+      left: -1.85rem;
       width: 1.6rem;
       color: white;
       text-align: right;
@@ -743,7 +754,7 @@ export default {
   width: 100%;
   position: relative;
   bottom: 1rem;
-  height: 7rem;
+  height: 6.8rem;
   padding-top: 0.1rem;
 
   .lt {