v2.4.0

src/Global.js

@@ -5,6 +5,18 @@ companyInfo = {
     year: new Date().getFullYear(),
 };
 
+// APP类型  0: beswell  1: 小飞龙
+// appType = 0;
+appType = 1;
+
+serverUrl = 'http://bswlt.beswell.com:9002/';           // 数据源地址
+updateUrl = 'http://bcal.beswell.com:85/v1/Sensors/';   // 版本更新源地址
+
+if (appType == 1) {    // 1: 小飞龙
+    serverUrl = 'http://bswlt.beswell.com:9000/';
+    updateUrl = 'http://cal.beswell.com:85/v1/Sensors/';
+}
+
 // 本机测试 TV端映射到本机进行测试
 // runVersion = 'localtest';    //tmp mod
 
@@ -19,11 +31,12 @@ runVersion = 'normal';
 
 // headapi = process.env.NODE_ENV === 'development' ? '/api/' : '../';
 // headapi = 'http://127.0.0.1/';           //从本机获得数据源
-// headapi = 'http://192.168.0.22/';        //从本机获得数据源
+headapi = 'http://192.168.0.22/';        //从本机获得数据源
 // headapi = 'http://192.168.0.62:9000/';   //从郑伟那里获得数据源
 // headapi = 'http://192.168.0.3:9000/';    //从测试服务器那里获得数据源 tmp mod
 
-headapi = 'http://bswlt.beswell.com:9000/';   //实际场馆默认数据源 
+if (runVersion == 'normal')
+    headapi = serverUrl;   //实际场馆默认数据源 
 
 // 七牛云imgsrc
 imgUrl = "http://qjzpcd34v.hb-bkt.clouddn.com";

src/Mock/index.js

@@ -431,7 +431,7 @@ if (t == 1) {
 
     // 0: 下课 团课/私教/PK 的排名
     let LessonClass = 0;
-    let LessonDp = 3;
+    let LessonDp = 0;
     // 1：团课/私教
     // 2：竞技课2PK
     // 3：竞技课threepk
@@ -497,7 +497,7 @@ 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, 2));
+    Mock.mock(curheadapi + 'getNewUser', 'post', getNewUser(999, 10));
     Mock.mock(Mockapi + 'getNewUser', 'post', getNewUser(999, 12));
     // 彩蛋 0 999
     Mock.mock(curheadapi + 'getRecordBreak', 'post', getRecordBreak(999));

src/api/getApiRes.js

@@ -17,8 +17,6 @@ export function getCheckUpdate(postdata) {
     return getApiBasic(url, postdata);
 }
 
-
-
 // 调用的api改写成方法
 export function getUserList(postdata) {
     let url = headapi + 'UserList';
@@ -106,30 +104,31 @@ export function ClassUserRank(postdata) {
     return getApiBasic(url, postdata);
 }
 
-
 // 用查询最新wgt版本
 export function QueryVueFramework(postdata, testMode=false) {
     let url = '';
     if (!testMode)  //正式版
-        url = 'http://cal.beswell.com:85/v1/Sensors/QueryVueFrameworkV2';
+        url = updateUrl + 'QueryVueFrameworkV2';
     else    //测试版
         url = 'http://192.168.0.3:19096/v1/Sensors/QueryVueFrameworkV2';
         // url = 'http://192.168.0.60:19096/v1/Sensors/QueryVueFrameworkV2';
     return getApiBasic(url, postdata);
 }
+
 // 下载最新wgt版本
 export function DownloadVueFramework(testMode=false) {
     let url = '';
     if (!testMode)  //正式版
-        url = 'http://cal.beswell.com:85/v1/Sensors/DownloadVueFrameworkV2?vfType=3';
+        url = updateUrl + 'DownloadVueFrameworkV2?vfType=3';
     else    //测试版
         url = 'http://192.168.0.3:19096/v1/Sensors/DownloadVueFrameworkV2?vfType=3';
         // url = 'http://192.168.0.60:19096/v1/Sensors/DownloadVueFrameworkV2?vfType=3';
     return url;
 }
+
 // // 下载最新wgt版本
 // export function DownloadVueFramework(postdata) {
-//     // let url = 'http://cal.beswell.com:85/v1/Sensors/DownloadVueFrameworkV2';
+//     // let url = updateUrl + 'DownloadVueFrameworkV2';
 //     let url = 'http://192.168.0.3:19096/v1/Sensors/DownloadVueFrameworkV2';
 //     return getApiBasic(url, postdata);
 // }

src/assets/css/bg.scss

@@ -1,5 +1,6 @@
 @mixin bg {
-  height: 100%;
+  height: auto;
+  min-height: 100%;
   background-color: #333;
   background-repeat: no-repeat;
   background-position: top center;

src/assets/css/main.css

@@ -903,7 +903,7 @@ ul, li {
 
 }
 
-
+/* 
 @media only screen and (min-width: 1260px) {
     .human img {
         width: 100px;
@@ -1016,7 +1016,6 @@ ul, li {
     }
 
 
-    /*two*/
     .two {
         width: 48%;
         height: 400px;
@@ -1086,7 +1085,7 @@ ul, li {
         font-size: 40px !important;
     }
 
-    /*sixteen*/
+
     .sixteen {
         width: 19%;
         height: 120px;
@@ -1145,7 +1144,6 @@ ul, li {
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        /*height: 70px;*/
     }
 
     .sixteen .centerLi .cla, .sixteen .centerLi .heartJump {
@@ -1214,4 +1212,4 @@ ul, li {
         width: 35%;
     }
 
-}
+} */

src/assets/css/mainBk.css

@@ -449,7 +449,7 @@ ul, li {
 
 }
 
-
+/* 
 @media only screen and (min-width: 1260px) {
 
     .levelIcon {
@@ -593,7 +593,6 @@ ul, li {
     }
 
 
-    /*two*/
     .two {
         width: 48%;
         height: 475px;
@@ -668,7 +667,6 @@ ul, li {
     }
 
 
-    /*six*/
     .six {
         width: 31%;
         float: left;
@@ -747,7 +745,7 @@ ul, li {
         padding-bottom: 15px;
     }
 
-    /*nine*/
+
     .nine {
         width: 31.5%;
         float: left;
@@ -830,7 +828,7 @@ ul, li {
         padding-bottom: 5px;
     }
 
-    /*sixteen*/
+
     .sixteen {
         width: 23.5%;
         float: left;
@@ -906,7 +904,6 @@ ul, li {
     }
 
 
-    /*twenty*/
     .twenty {
         width: 19.5%;
         float: left;
@@ -995,7 +992,7 @@ ul, li {
         padding-bottom: 5px;
     }
 
-    /*two*/
+
     .two {
         width: 48%;
         height: 400px;
@@ -1065,7 +1062,6 @@ ul, li {
         font-size: 40px !important;
     }
 
-    /*sixteen*/
     .sixteen {
         width: 19%;
         height: 120px;
@@ -1124,7 +1120,6 @@ ul, li {
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        /*height: 70px;*/
     }
 
     .sixteen .centerLi .cla, .sixteen .centerLi .heartJump {
@@ -1194,4 +1189,4 @@ ul, li {
         width: 35%;
     }
 
-}
+} */

src/ble.js

@@ -18,6 +18,13 @@ var upDataArr = [];             // 上传数据数组
 var upData = null;              // 上传数据
 // var upTime = 0;                 // 数据上传时间
 
+var targetDevPreNameArr = [
+    'CL831',    //小飞龙心率带 OK
+    'CL880',    //带屏心率带 OK
+    'CL820',    //CL820W 心率胸带 OK
+    // 'CL837',    //扁平化心率带
+];
+
 export function getBleDiscovery() {
     // return bleDiscovery;
     return store.state.bleDiscovery;
@@ -178,20 +185,20 @@ export function listenerDeviceFound() {
         let now = 0;
         let waitTime = 0;
         let data = '';
+        let devPreName = '';
 
         for(var i in devices) {
-            if (devices[i].name.substr(0,5) == 'CL831') {
-                // console.log("deviceName: " + devices[i].name);
+            devPreName = devices[i].name.substr(0,5);
+            if (targetDevPreNameArr.includes(devPreName)) {
                 // console.log(i+': '+JSON.stringify(devices[i]));
                 // console.log('advertisServiceUUIDs: ' + devices[i].advertisServiceUUIDs);
                 // console.log('localName: ' + devices[i].localName);
                 // console.log('advertisData: ' + buf2hex(devices[i].advertisData));
-                // console.log('advertisData length: ' + devices[i].advertisData.length);
                 // console.log('serviceData: ' + buf2hex(devices[i].serviceData));
                 
                 Power = parseInt(new Uint8Array(devices[i].advertisData, 3, 1));
                 HeartRate = parseInt(new Uint8Array(devices[i].advertisData, 5, 1));
-                Sn = parseInt(devices[i].localName.substr(-5));
+                Sn = parseInt(devices[i].localName.substr(-7));
                 // console.log('Sn: ' + Sn + '  localName: ' + devices[i].localName + '  HeartRate: ' + HeartRate + '  Power: ' + Power + '  advertisData: ' + buf2hex(devices[i].advertisData));
 
                 now = new Date().getTime(); //毫秒

src/components/Headside.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="headerContainer">
-    <div class="lt">
-      <img @click="showConsole()" src="../assets/imgs/headside/logo.svg" alt="">
+    <div class="lt" :class="this.curLogoClass">
+      <img id="logo" @click="showConsole()" :src="this.curLogoImg">
       <span>{{ this.$store.state.shopName }}</span>
       <img v-show="this.$store.state.bleDiscovery" src="../static/img/bleDiscovery.svg">
       <img v-show="this.$store.state.wsState" src="../static/img/bleUpload.svg">
@@ -47,6 +47,9 @@ import global from '../Global'
 import '../libs/rem';
 import QRCode from 'qrcodejs2'
 
+import logo from '../assets/imgs/headside/logo.png'
+import logo_xfl from '../assets/imgs/headside/logo_xfl.svg'
+
 export default {
   data() {
     return {
@@ -58,15 +61,20 @@ export default {
       nowDay: '',
       nowTime: '',
       version: '',
+      curAppType: appType,
+      curLogoImg: logo,
+      curLogoClass: 'logo_bsw',
       currunVersion: runVersion,
       curheadapi: headapi,
-      timer: null
+      timer: null,
     }
   },
   mounted() {
     console.log("Headside mounted");
     // console.log("this.timer = " + this.timer);
 
+    this.getLogo();
+
     if (this.timer == null) {
       this.timer = setInterval(() => {
         let date = new Date();
@@ -114,6 +122,12 @@ export default {
   //   this.timer = null;
   // },
   methods: {
+    getLogo() {
+      if (this.curAppType == 1) {    // 1: 小飞龙
+        this.curLogoImg = logo_xfl;
+        this.curLogoClass = 'logo_xfl';
+      }
+    },
     // 手动开启输出控制台
     showConsole() {
       let vconDom = document.getElementById('__vconsole');
@@ -205,9 +219,7 @@ export default {
     color: #fff;
 
     img {
-      width: 1.5rem;
-      float: left;
-      margin-top: 0.2rem;
+      float: left;      
       
       &:nth-of-type(2) {
         width: 0.16rem;
@@ -263,6 +275,28 @@ export default {
       }
     }
   }
+
+  .logo_bsw {
+    #logo {
+      position: absolute;
+      left: 0.3rem;
+      height: 0.46rem;
+      margin-top: 0.23rem;
+    }
+
+    span {
+      margin-left: 1.36rem;
+    }
+  }
+   
+  .logo_xfl {
+    #logo {
+      width: 1.5rem;
+      // height: 0.45rem;
+      margin-top: 0.2rem;
+    }
+  }
+
 }
 
 </style>

src/components/eiRank.vue

@@ -468,8 +468,9 @@ $yellow: #FFEB50;
 
 
 @mixin bg {
-  height: 100%;
-  background-color: #333;
+  // height: auto;
+  // min-height: 100%;
+  // background-color: #333;
   background-repeat: no-repeat;
   background-position: top center;
   background-size: 100% 100%;
@@ -485,8 +486,10 @@ $yellow: #FFEB50;
 .main {      
   @include cube;
   width: 100%;
-  margin-top: 0.4rem;
-  overflow: visible;
+  // height: auto;
+  padding-top: 0.4rem;
+  padding-bottom: 0.2rem;
+  overflow: hidden;
 
   .listContainer {
     width: 2.5rem;
@@ -511,10 +514,7 @@ $yellow: #FFEB50;
 
     .listBody {
       padding-top: 0.3rem;
-      padding-bottom: 0.3rem;
-      background-repeat: no-repeat;
-      background-position: top center;
-      // background-color: red;
+      padding-bottom: 0.29rem;
       min-height: 7rem;
       // opacity:0.8;
     }
@@ -599,6 +599,7 @@ $yellow: #FFEB50;
   ul {
     .listBody {
       background: url("../../src/assets/imgs/rank/bg_jhfs.png");
+      @include bg;
     }
   }
 }
@@ -607,6 +608,7 @@ $yellow: #FFEB50;
   ul {
     .listBody {
       background: url("../../src/assets/imgs/rank/bg_dtrs.png");
+      @include bg;
     }
   }
 }
@@ -615,6 +617,7 @@ $yellow: #FFEB50;
   ul {
     .listBody {
       background: url("../../src/assets/imgs/rank/bg_zfrs.png");
+      @include bg;
     }
   }
 }
@@ -623,6 +626,7 @@ $yellow: #FFEB50;
   ul {
     .listBody {
       background: url("../../src/assets/imgs/rank/bg_tfxh.png");
+      @include bg;
     }
   }
 }
@@ -631,6 +635,7 @@ $yellow: #FFEB50;
   ul {
     .listBody {
       background: url("../../src/assets/imgs/rank/bg_xfxl.png");
+      @include bg;
     }
   }
 }
@@ -639,6 +644,7 @@ $yellow: #FFEB50;
   ul {
     .listBody {
       background: url("../../src/assets/imgs/rank/bg_fzdl.png");
+      @include bg;
     }
   }
 }
@@ -649,6 +655,7 @@ $yellow: #FFEB50;
   ul {
     .listBody {
       background: url("../../src/assets/imgs/rank/bg_ydqd.png");
+      @include bg;
     }
   }
 }

src/components/levelIcon.vue

@@ -49,11 +49,11 @@ export default {
 }
 
 .levelIconOutDoor {
-  position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  padding-bottom: 0px;
+  // padding-top: 0.2rem;
+  // padding-bottom: 0px;
 }
 
 .levelIconTV {
@@ -88,4 +88,10 @@ export default {
   }
 }
 
+/*响应式调整*/
+@media (max-aspect-ratio: 1920/1080) {  //max-aspect-ratio: 小于等于   min-aspect-ratio: 大于等于
+  .levelIcon {
+    position: fixed;
+  }
+}
 </style>

src/components/newRecord.vue

@@ -21,15 +21,14 @@
     </div>
     <div v-show="toperInfo.totalTime > 0" class="countdown">{{toperInfo.totalTime}}</div>
   </el-dialog>
-
 </template>
 
 <script>
 export default {
   data() {
     return {
-      dialogTableVisible: true,
-      dialogFormVisible: false,
+      // dialogTableVisible: false,
+      // dialogFormVisible: false,
     };
   },
   props: ['toperInfo'],
@@ -63,7 +62,8 @@ export default {
 <style lang="scss" scoped>
 @mixin cube {
   width: 100%;
-  overflow: hidden;
+  // height: 100%;
+  overflow: display;
   display: block;
   margin: 0 auto;
 }
@@ -72,11 +72,13 @@ export default {
 /deep/ .el-dialog {
   @include cube;
   position: absolute;
+  padding: 0rem 0rem;
   top: 0;
   left: 0;
   right: 0;
-  bottom: 0.5rem;
+  // bottom: 0.5rem;
   width: 6.2rem;
+  height: 8rem;
   //background: url("../assets/imgs/newRecord/bg.svg");
   background: url("../assets/imgs/newRecord/newRecordBg.svg");
   background-position: top center;
@@ -84,26 +86,39 @@ export default {
   background-size: 100% 100%;
   box-shadow: none;
   background-color: transparent;
-  margin-top: 0 !important;
+  margin-top: 0.56rem !important;
+  // border: 2px solid #26ea47;
+}
+
+/deep/ .el-dialog__header {
+  display: none;
+  padding: 0rem 0rem;
+}
+/deep/ .el-dialog__body {
+  padding: 0rem 0rem;
 }
 
 .eggContainer {
   @include cube;
+  // border: 2px solid #2643ea;
 
   .eggBg {
     @include cube;
-    //background: url("../assets/imgs/newRecord/bg.svg");
     padding-left: 3%;
-    background-position: top center;
-    background-repeat: no-repeat;
-    background-size: 100%;
-    margin-top: 30%;
-    overflow: visible;
+    // margin: 0 auto;
+    //background: url("../assets/imgs/newRecord/bg.svg");
+    // background-position: top center;
+    // background-repeat: no-repeat;
+    // background-size: 100%;
+    // margin-top: 0rem;
+    // overflow: visible;
 
     .toper {
       @include cube;
       position: relative;
-      bottom: 0.2rem;
+      // height: 2.5rem;
+      top: 0.8rem;
+      // bottom: 0.2rem;
 
       img {
         @include cube;
@@ -136,18 +151,18 @@ export default {
     }
   }
 
-  .type {
-    height: 1.6rem;
-    color: white;
-    font-weight: bold;
-    font-size: 0.6rem;
-    line-height: 2rem;
-    margin-top: 0.4rem;
-  }
-
   .info {
     @include cube;
 
+    .type {
+      height: 1.6rem;
+      color: white;
+      font-weight: bold;
+      font-size: 0.6rem;
+      line-height: 2rem;
+      margin-top: 1.36rem;
+    }
+
     em {
       position: relative;
       bottom: 0.1rem;
@@ -171,7 +186,18 @@ export default {
   font-size: 0.6rem;
   color: #797979;
   margin: 0 auto;
-  margin-top: 0.8rem;
+  margin-top: 0.39rem;
+}
+
+/*响应式调整*/
+@media (max-aspect-ratio: 1920/1080) {  //max-aspect-ratio: 小于等于   min-aspect-ratio: 大于等于
+  /deep/ .el-dialog {
+    margin-top: 1.6rem !important;
+  }
+
+  .countdown {
+    margin-top: 0.8rem;
+  }
 }
 
 </style>

src/components/newStudent.vue

@@ -1,10 +1,10 @@
 <template>
-  <el-dialog title="" class="sss" :visible.sync="studentInfo.dialogVisible" :close-on-click-modal="false">
+  <el-dialog title="" :visible.sync="studentInfo.dialogVisible" :close-on-click-modal="false">
     <div :class="[{'newStudentContainer':true}]">
       <div class="info">
-        <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}]">
+        <ul :class="[{'many':studentInfo.Rs.length > 5},{'little':studentInfo.Rs.length >= 1 && studentInfo.Rs.length <= 5}]">
+          <li v-for="(s,i) in studentInfo.Rs.slice(0, maxShowNum)"
+              :class="[{'bigLi':studentInfo.Rs.length <= 4}, {'smallLi':studentInfo.Rs.length > 10}]">
             <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" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
             <span class="names">{{ s.Name }}</span>
@@ -24,6 +24,7 @@ export default {
       totalTime: 0,
       sumTime: 4,
       bg: 0,
+      maxShowNum: 12,    //最大显示记录数
     };
   },
   props: ['studentInfo'],
@@ -57,17 +58,22 @@ export default {
 
 /*成就彩蛋*/
 /deep/ .el-dialog {
-  width: 80%;
+  width: 12.6rem;
   height: 6rem;
   background: none;
   box-shadow: none;
   border: none;
   padding-bottom: 1rem;
+  margin-top: 0.76rem !important;
 }
 
 /deep/ .el-dialog__header {
   display: none;
+  padding: 0rem 0rem;
 }
+// /deep/ .el-dialog__body {
+//   padding: 0rem 0rem;
+// }
 
 .newStudentContainer {
   height: 6rem;
@@ -80,31 +86,31 @@ export default {
 
 ul {
   @include cube;
-  width: 70%;
+  // width: 70%;
   display: inline-flex;
   align-items: center;
   align-content: center;
   justify-content: center;
   flex-wrap: wrap;
   flex-grow: 1;
-  padding-top: 18%;
+  // padding-top: 18%;
 
-  &.two {
+  &.little {
     justify-content: space-around;
     padding-top: 20%;
-    width: 70%;
+    width: 86%;
 
     .bigLi img {
-      width: 1.9rem;
-      height: 1.9rem;
+      width: 2.2rem;
+      height: 2.2rem;
     }
   }
 
   &.many {
     justify-content: space-around;
     // justify-content: space-between;
-    padding-top: 13.5%;
-    width: 70%;
+    padding-top: 13.7%;
+    width: 86%;
   }
 
   li {
@@ -113,8 +119,8 @@ ul {
 
     img {
       @include cube;
-      width: 1.6rem;
-      height: 1.6rem;
+      width: 1.8rem;
+      height: 1.8rem;
       border-radius: 250rem;
 
       &.girl {
@@ -170,4 +176,16 @@ ul {
   margin: 0 auto;
   margin-top: 0.8rem;
 }
+
+/*响应式调整*/
+@media (max-aspect-ratio: 1920/1080) {  //max-aspect-ratio: 小于等于   min-aspect-ratio: 大于等于
+  /deep/ .el-dialog {
+    margin-top: 1.5rem !important;
+  }
+
+  .countdown {
+    margin-top: 0.8rem;
+  }
+}
+
 </style>

src/components/pkstudent.vue

@@ -1,6 +1,6 @@
 <template>
   <ul :class="[{'many':students.length >= 2}]">
-    <li v-for="(s,i) in students" :class="s.className">
+    <li v-for="(s,i) in students.slice(0, maxShowNum)" :class="s.className">
       <div v-show="i<8" class="centerLi">
         <!-- <div class="power" v-if="s.RealHr != 0"> -->
         <div class="power">          
@@ -79,6 +79,7 @@ import power from '@/components/power'
 export default {
   data() {
     return {
+      maxShowNum: 8,    //最大显示记录数
       studentsFake: [],
       FakeclassName: ''
     }
@@ -98,10 +99,10 @@ export default {
         if (sum <= 2) {
           that.studentsFake = 2 - sum;
         }
-        if (sum >= 3) {
+        else if (sum >= 3) {
           that.studentsFake = 8 - sum;
         }
-        if (sum >= 8) {
+        else if (sum >= 8) {
           that.studentsFake = 0
         }
 

src/components/student.vue

@@ -1,6 +1,6 @@
 <template>
   <ul :class="[{'few':students.length == 2}, {'many':students.length > 2}]">
-    <li v-for="(s,i) in students" :class="studentsClassName[i].name">
+    <li v-for="(s,i) in students.slice(0, maxShowNum)" :class="studentsClassName[i].name">
       <div :class="[{ 'box animate__animated animate__flipInX': Listate },{'centerLi':true}]">
         <!-- <div class="power" v-if="s.RealHr != 0"> -->
         <div class="power">
@@ -79,6 +79,7 @@ import power from '@/components/power'
 export default {
   data() {
     return {
+      maxShowNum: 25,    //最大显示记录数
       studentsFake: 0,
       Listate: false,
     }
@@ -98,23 +99,17 @@ export default {
         if (sum == 3) {
           that.studentsFake = 1;
         }
-        if (sum >= 5 && sum < 9) {
+        else if (sum >= 5 && sum <= 9) {
           that.studentsFake = 9 - sum;
-        }
-        if (sum >= 9 && sum < 12) {
-          that.studentsFake = 16 - sum;
-        }
-        if (sum >= 12 && sum < 16) {
+        }        
+        else if (sum > 9 && sum <= 16) {
           that.studentsFake = 16 - sum;
         }
-        if (sum >= 16 && sum < 26) {
+        else if (sum > 16 && sum <= 25) {
           that.studentsFake = 25 - sum;
-        }
-        if (sum >= 26 && sum < 30) {
-          that.studentsFake = 30 - sum;
-        }
-        if (sum >= 30) {
-          that.studentsFake = 0
+        }        
+        else {
+          that.studentsFake = 0;
         }
 
         let numberClass = '';

src/components/threestudent.vue

@@ -1,6 +1,6 @@
 <template>
   <ul :class="[{'many':students.length >= 2}]">
-    <li v-for="(s,i) in students" :class="s.className">
+    <li v-for="(s,i) in students.slice(0, maxShowNum)" :class="s.className">
       <div v-show="i<10" class="centerLi">
         <!-- <div class="power" v-if="s.RealHr != 0"> -->
         <div class="power">
@@ -79,6 +79,7 @@ import power from '@/components/power'
 export default {
   data() {
     return {
+      maxShowNum: 10,    //最大显示记录数
       studentsFake: [],
       FakeclassName: ''
     }
@@ -98,10 +99,10 @@ export default {
         if (sum <= 2) {
           that.studentsFake = 2 - sum;
         }
-        if (sum >= 3) {
+        else if (sum >= 3) {
           that.studentsFake = 10 - sum;
         }
-        if (sum >= 10) {
+        else if (sum >= 10) {
           that.studentsFake = 0
         }
 

src/views/2pkRank.vue

@@ -7,65 +7,69 @@
       </div>
       <div class="pkResult">
         <div class="lt">
-          <span class="level">
-            <h5 class="winner" v-if="winner == 1">红队胜</h5>
-            <h5 class="loser" v-else>第二名</h5>
-            <img v-if="winner == 1" src="../assets/imgs/pkRank/trophy.png" alt="">
-          </span>
-          <span class="center">CK</span>
-          <span class="ckValue">
-            <em class="winner" v-if="winner == 1">{{ redSumCk }}</em>
-            <em class="loser" v-else>{{ redSumCk }}</em>
-          </span>
-          <div class="mvp">
-            <div class="head">
-              <img :src="redMvp.Head" alt="" v-if="redMvp.Head"
-                  :class="[{'boy':redMvp.Sex == 1},{'girl':redMvp.Sex == 2}]">
-              <img src="../static/img/people/flyhead.png" alt="" v-if="!redMvp.Head" 
-                  :class="[{'boy':redMvp.Sex == 1},{'girl':redMvp.Sex == 2}]">
-              <div class="names">
-              <span>
-                  {{ redMvp.Name }}
-              </span>
+          <div class="panel">
+            <span class="level">
+              <h5 class="winner" v-if="winner == 1">红队胜</h5>
+              <h5 class="loser" v-else>第二名</h5>
+              <img v-if="winner == 1" src="../assets/imgs/pkRank/trophy.png" alt="">
+            </span>
+            <span class="center">CK</span>
+            <span class="ckValue">
+              <em class="winner" v-if="winner == 1">{{ redSumCk }}</em>
+              <em class="loser" v-else>{{ redSumCk }}</em>
+            </span>
+            <div class="mvp">
+              <div class="head">
+                <img :src="redMvp.Head" alt="" v-if="redMvp.Head"
+                    :class="[{'boy':redMvp.Sex == 1},{'girl':redMvp.Sex == 2}]">
+                <img src="../static/img/people/flyhead.png" alt="" v-if="!redMvp.Head" 
+                    :class="[{'boy':redMvp.Sex == 1},{'girl':redMvp.Sex == 2}]">
+                <div class="names">
+                <span>
+                    {{ redMvp.Name }}
+                </span>
+                </div>
               </div>
+              <span class="mvpCode">最佳队员</span>
             </div>
-            <span class="mvpCode">最佳队员</span>
-          </div>
-          <div class="per">
-            人均卡路里 {{redAveCle}}
-          </div>
+            <div class="per">
+              人均卡路里 {{redAveCle}}
+            </div>
+          </div>          
           <div class="teamName">
             红队
           </div>
         </div>
         <div class="rt">
-          <span class="level">
-            <h5 class="winner" v-if="winner == 2">蓝队胜</h5>
-            <h5 class="loser" v-else>第二名</h5>
-            <img v-if="winner == 2" src="../assets/imgs/pkRank/trophy.png" alt="">
-          </span>
-          <span class="center">CK</span>
-          <span class="ckValue">
-            <em class="winner" v-if="winner == 2">{{ blueSumCk }}</em>
-            <em class="loser" v-else>{{ blueSumCk }}</em>
-          </span>
-          <div class="mvp">
-            <div class="head">
-              <img :src="blueMvp.Head" alt="" v-if="blueMvp.Head"
-                  :class="[{'boy':blueMvp.Sex == 1},{'girl':blueMvp.Sex == 2}]">
-              <img src="../static/img/people/flyhead.png" alt="" v-if="!blueMvp.Head"
-                  :class="[{'boy':blueMvp.Sex == 1},{'girl':blueMvp.Sex == 2}]">
-              <div class="names">
-              <span>
-                  {{ blueMvp.Name }}
-              </span>
+          <div class="panel">
+            <span class="level">
+              <h5 class="winner" v-if="winner == 2">蓝队胜</h5>
+              <h5 class="loser" v-else>第二名</h5>
+              <img v-if="winner == 2" src="../assets/imgs/pkRank/trophy.png" alt="">
+            </span>
+            <span class="center">CK</span>
+            <span class="ckValue">
+              <em class="winner" v-if="winner == 2">{{ blueSumCk }}</em>
+              <em class="loser" v-else>{{ blueSumCk }}</em>
+            </span>
+            <div class="mvp">
+              <div class="head">
+                <img :src="blueMvp.Head" alt="" v-if="blueMvp.Head"
+                    :class="[{'boy':blueMvp.Sex == 1},{'girl':blueMvp.Sex == 2}]">
+                <img src="../static/img/people/flyhead.png" alt="" v-if="!blueMvp.Head"
+                    :class="[{'boy':blueMvp.Sex == 1},{'girl':blueMvp.Sex == 2}]">
+                <div class="names">
+                <span>
+                    {{ blueMvp.Name }}
+                </span>
+                </div>
               </div>
+              <span class="mvpCode">最佳队员</span>
             </div>
-            <span class="mvpCode">最佳队员</span>
-          </div>
-          <div class="per">
-            人均卡路里 {{blueAveCle}}
-          </div>
+            <div class="per">
+              人均卡路里 {{blueAveCle}}
+            </div>
+          </div>          
           <div class="teamName">
             蓝队
           </div>
@@ -597,7 +601,8 @@ export default {
 
 <style lang="scss" scoped>
 @mixin bg {
-  height: 100%;
+  height: auto;
+  min-height: 100%;
   background-color: #333;
   background-repeat: no-repeat;
   background-position: top center;
@@ -639,27 +644,35 @@ export default {
   }
 
   .pageSum {
+
     .pkResult {
       @include cube;
       width: 70%;
       margin-top: 0.8rem;
+      padding-bottom: 0.3rem;
 
       .lt {
         width: 5rem;
         float: left;
-        background: url("../assets/imgs/pkRank/redCube.png");
-        background-repeat: no-repeat;
-        background-position: top center;
-        background-size: 100%;
+
+        .panel {
+          background: url("../assets/imgs/pkRank/redCube.png");
+          background-repeat: no-repeat;
+          background-position: top center;
+          background-size: 100% 100%;
+        }        
       }
 
       .rt {
         width: 5rem;
         float: right;
-        background: url("../assets/imgs/pkRank/blueCube.png");
-        background-repeat: no-repeat;
-        background-position: top center;
-        background-size: 100%;
+        
+        .panel {
+          background: url("../assets/imgs/pkRank/blueCube.png");
+          background-repeat: no-repeat;
+          background-position: top center;
+          background-size: 100% 100%;
+        }        
       }
 
       .level {
@@ -671,12 +684,13 @@ export default {
           position: relative;
           width: 1rem;
           bottom: 1rem;
+          left: 0.2rem;
           float: left;
         }
 
         h5 {
           @include cube;
-          margin: 0;
+          margin: 0 auto;
           margin-top: 0.5rem;
           font-size: 0.6rem;
           font-weight: normal;
@@ -702,9 +716,10 @@ export default {
         }
 
         em {
-          position: relative;
-          bottom: 0.3rem;
+          // position: relative;
+          // bottom: 0.3rem;
           font-size: 0.8rem;
+          line-height: 0.5rem;
           font-weight: bold;
           font-style: normal;
         }
@@ -753,7 +768,9 @@ export default {
           @include cube;
           font-size: 0.3rem;
           color: white;
+          line-height: 0.6rem;
           margin-top: 0;
+          margin-bottom: 0.1rem;
         }
       }
 
@@ -761,7 +778,8 @@ export default {
         @include cube;
         font-size: 0.3rem;
         color: white;
-        margin-top: 0.3rem;
+        line-height: 0.6rem;
+        // margin-top: 0.3rem;
       }
 
       .teamName {
@@ -884,6 +902,8 @@ export default {
     .listContainer {
       @include cube;
       width: 90%;
+      min-height: 6rem;
+      padding-bottom: 0.2rem;
 
       .lt {
         width: 47%;
@@ -1058,6 +1078,7 @@ export default {
       background-position: top center;
       background-size: 100% 100%;
       line-height: 0.7rem;
+
       span {
         @include cube;
         // position: relative;
@@ -1073,8 +1094,8 @@ export default {
 
 .icons {
   @include cube;
-  position: absolute;
-  bottom: 0.2rem;
+  position: static;
+  padding-bottom: 0.2rem;
 
   img {
     @include cube;
@@ -1085,11 +1106,19 @@ export default {
 
 .countdown {
   width: 1rem;
-  position: absolute;
+  position: fixed;
   font-size: 0.25rem;
   color: white;
   right: 0rem;
   bottom: 0.2rem;
 }
 
+/*响应式调整*/
+@media (max-aspect-ratio: 1920/1080) {  //max-aspect-ratio: 小于等于   min-aspect-ratio: 大于等于
+  .icons {
+    position: fixed;
+    padding-bottom: 0rem;
+    bottom: 0.2rem;
+  }    
+}
 </style>

src/views/3pkRank.vue

@@ -6,7 +6,8 @@
       <div class="pageTitle">
       </div>
       <div class="pkResult">
-        <div class="lt" :class="teamRank[1].class">        
+        <div class="lt">
+          <div :class="teamRank[1].class">
           <span class="level">
             <h5 class="loser">第二名</h5>
           </span>
@@ -31,64 +32,69 @@
           <div class="per">
             人均卡路里 {{teamRank[1].aveCle}}
           </div>
+          </div>
           <div class="teamName">
             {{teamRank[1].name}}
           </div>
         </div>
-        <div class="md" :class="teamRank[0].class">
-          <span class="level">
-            <h5 class="winner">{{teamRank[0].name}}胜</h5>
-            <img src="../assets/imgs/pkRank/trophy.png" alt="">
-          </span>
-          <span class="center">CK</span>
-          <span class="ckValue">
-            <em class="winner">{{ teamRank[0].sumCk }}</em>
-          </span>
-          <div class="mvp">
-            <div class="head">
-              <img :src="teamRank[0].mvp.Head" alt="" v-if="teamRank[0].mvp.Head"
-                  :class="[{'boy':teamRank[0].mvp.Sex == 1},{'girl':teamRank[0].mvp.Sex == 2}]">
-              <img src="../static/img/people/flyhead.png" alt="" v-if="!teamRank[0].mvp.Head"
-                  :class="[{'boy':teamRank[0].mvp.Sex == 1},{'girl':teamRank[0].mvp.Sex == 2}]">
-              <div class="names">
-              <span>
-                {{ teamRank[0].mvp.Name }}
-              </span>
+        <div class="md">
+          <div :class="teamRank[0].class">
+            <span class="level">
+              <h5 class="winner">{{teamRank[0].name}}胜</h5>
+              <img src="../assets/imgs/pkRank/trophy.png" alt="">
+            </span>
+            <span class="center">CK</span>
+            <span class="ckValue">
+              <em class="winner">{{ teamRank[0].sumCk }}</em>
+            </span>
+            <div class="mvp">
+              <div class="head">
+                <img :src="teamRank[0].mvp.Head" alt="" v-if="teamRank[0].mvp.Head"
+                    :class="[{'boy':teamRank[0].mvp.Sex == 1},{'girl':teamRank[0].mvp.Sex == 2}]">
+                <img src="../static/img/people/flyhead.png" alt="" v-if="!teamRank[0].mvp.Head"
+                    :class="[{'boy':teamRank[0].mvp.Sex == 1},{'girl':teamRank[0].mvp.Sex == 2}]">
+                <div class="names">
+                <span>
+                  {{ teamRank[0].mvp.Name }}
+                </span>
+                </div>
               </div>
+              <span class="mvpCode">最佳队员</span>
+            </div>
+            <div class="per">
+              人均卡路里 {{teamRank[0].aveCle}}
             </div>
-            <span class="mvpCode">最佳队员</span>
-          </div>
-          <div class="per">
-            人均卡路里 {{teamRank[0].aveCle}}
           </div>
           <div class="teamName">
             {{teamRank[0].name}}
           </div>
         </div>
-        <div class="rt" :class="teamRank[2].class">      
-          <span class="level">
-            <h5 class="loser">第三名</h5>
-          </span>
-          <span class="center">CK</span>
-          <span class="ckValue">
-            <em class="loser">{{ teamRank[2].sumCk }}</em>
-          </span>
-          <div class="mvp">
-            <div class="head">
-              <img :src="teamRank[2].mvp.Head" alt="" v-if="teamRank[2].mvp.Head"
-                  :class="[{'boy':teamRank[2].mvp.Sex == 1},{'girl':teamRank[2].mvp.Sex == 2}]">
-              <img src="../static/img/people/flyhead.png" alt="" v-if="!teamRank[2].mvp.Head"
-                  :class="[{'boy':teamRank[2].mvp.Sex == 1},{'girl':teamRank[2].mvp.Sex == 2}]">
-              <div class="names">
-              <span>
-                  {{ teamRank[2].mvp.Name }}
-              </span>
+        <div class="rt">
+          <div :class="teamRank[2].class">
+            <span class="level">
+              <h5 class="loser">第三名</h5>
+            </span>
+            <span class="center">CK</span>
+            <span class="ckValue">
+              <em class="loser">{{ teamRank[2].sumCk }}</em>
+            </span>
+            <div class="mvp">
+              <div class="head">
+                <img :src="teamRank[2].mvp.Head" alt="" v-if="teamRank[2].mvp.Head"
+                    :class="[{'boy':teamRank[2].mvp.Sex == 1},{'girl':teamRank[2].mvp.Sex == 2}]">
+                <img src="../static/img/people/flyhead.png" alt="" v-if="!teamRank[2].mvp.Head"
+                    :class="[{'boy':teamRank[2].mvp.Sex == 1},{'girl':teamRank[2].mvp.Sex == 2}]">
+                <div class="names">
+                <span>
+                    {{ teamRank[2].mvp.Name }}
+                </span>
+                </div>
               </div>
+              <span class="mvpCode">最佳队员</span>
+            </div>
+            <div class="per">
+              人均卡路里 {{teamRank[2].aveCle}}
             </div>
-            <span class="mvpCode">最佳队员</span>
-          </div>
-          <div class="per">
-            人均卡路里 {{teamRank[2].aveCle}}
           </div>
           <div class="teamName">
             {{teamRank[2].name}}
@@ -858,7 +864,8 @@ export default {
 
 <style lang="scss" scoped>
 @mixin bg {
-  height: 100%;
+  height: auto;
+  min-height: 100%;
   background-color: #333;
   background-repeat: no-repeat;
   background-position: top center;
@@ -901,30 +908,32 @@ export default {
   }
 
   .pageSum {
+
     .pkResult {
       @include cube;
       width: 85%;
       margin-top: 0.6rem;
+      padding-bottom: 0.3rem;
 
       .bgRed {
         background: url("../assets/imgs/pkRank/redCube.png");
         background-repeat: no-repeat;
         background-position: top center;
-        background-size: 100%;
+        background-size: 100% 100%;
       }
 
       .bgYellow {
         background: url("../assets/imgs/3pkRank/yellowCube.png");
         background-repeat: no-repeat;
         background-position: top center;
-        background-size: 100%;
+        background-size: 100% 100%;
       }
 
       .bgBlue {
         background: url("../assets/imgs/pkRank/blueCube.png");
         background-repeat: no-repeat;
         background-position: top center;
-        background-size: 100%;
+        background-size: 100% 100%;
       }
 
       .lt {
@@ -955,6 +964,7 @@ export default {
           position: relative;
           width: 1rem;
           bottom: 1rem;
+          left: 0.2rem;
           float: left;
         }
 
@@ -1037,7 +1047,9 @@ export default {
           @include cube;
           font-size: 0.25rem;
           color: white;
-          margin-top: 0.1rem;
+          line-height: 0.5rem;
+          margin-top: 0.05rem;
+          // margin-bottom: 0.1rem;
         }
       }
 
@@ -1045,7 +1057,8 @@ export default {
         @include cube;
         font-size: 0.3rem;
         color: white;
-        margin-top: 0.2rem;
+        line-height: 0.5rem;
+        // margin-top: 0.2rem;
       }
 
       .teamName {
@@ -1057,6 +1070,8 @@ export default {
   }
 
   .pageDetail {
+    overflow: hidden;
+
     .sumTitle {
       @include cube;
       width: 98%;
@@ -1156,9 +1171,9 @@ export default {
 
     .vsSign {
       @include cube;
-      height: 1.3rem;
-      position: relative;
-      bottom: 1.4rem;
+      height: 0.8rem;
+      position: absolute;
+      top: 1.2rem;
 
       img {
         position: absolute;
@@ -1181,8 +1196,9 @@ export default {
     .listContainer {
       @include cube;
       width: 100%;
+      min-height: 6rem;
       position: relative;
-      bottom: 1.5rem;      
+      bottom: 0.3rem;      
 
       .lt {
         width: 32.5%;
@@ -1385,8 +1401,8 @@ export default {
 
 .icons {
   @include cube;
-  position: absolute;
-  bottom: 0.2rem;
+  position: static;
+  padding-bottom: 0.2rem;
 
   img {
     @include cube;
@@ -1397,11 +1413,19 @@ export default {
 
 .countdown {
   width: 1rem;
-  position: absolute;
+  position: fixed;
   font-size: 0.25rem;
   color: white;
   right: 0rem;
   bottom: 0.2rem;
 }
 
+/*响应式调整*/
+@media (max-aspect-ratio: 1920/1080) {  //max-aspect-ratio: 小于等于   min-aspect-ratio: 大于等于
+  .icons {
+    position: fixed;
+    padding-bottom: 0rem;
+    bottom: 0.2rem;
+  }
+}
 </style>

src/views/Index.vue

@@ -225,7 +225,7 @@ export default {
       if (that.testEqsnArr.includes(eqsn)) {
         url = "http://192.168.0.3:19096/v1/Sensors/GetShopConfigParam";
       } else {
-        url = 'http://cal.beswell.com:85/v1/Sensors/GetShopConfigParam'
+        url = updateUrl + 'GetShopConfigParam'
       }
       let param = {
         eqSn: eqsn

src/views/Main.vue

@@ -409,15 +409,16 @@ export default {
 
 .userList {
   @include cube;
-  max-height: 9.4rem;
+  padding-bottom: 0.5rem;
+  // max-height: 9.4rem;
   overflow-y: scroll;
 }
 
-/*响应式调整*/
-@media(min-width: 320px) and (max-width: 1025px) {
-  .userList {
-    max-height: inherit;
-  }
-}
+// /*响应式调整*/
+// @media(min-width: 320px) and (max-width: 1025px) {
+//   .userList {
+//     max-height: inherit;
+//   }
+// }
 
 </style>

src/views/Rank.vue

@@ -146,6 +146,7 @@ export default {
     init() {
       this.getClassUserRank();
       this.pages = 1;
+      // this.$refs.eiRank.pagePlay();
       this.cardPlay();
       this.execWait(this.page1ShowTime, "that.enterPage(2)");
       // N秒后翻页
@@ -165,7 +166,7 @@ export default {
       if (page == 2) {
         this.$refs.eiRank.pagePlay();
         this.page2ShowTime = this.$refs.eiRank.showTimeTotal;
-        // this.execWait(this.page3ShowTime);
+        // this.execWait(this.page2ShowTime);
         this.execWait(this.page2ShowTime, "that.$router.push({path: '/'});");
       }
     },
@@ -310,7 +311,8 @@ $font-color: white;
 $yellow: #FFEB50;
 
 @mixin bg {
-  height: 100%;
+  height: auto;
+  min-height: 100%;
   background-color: #333;
   background-repeat: no-repeat;
   background-position: top center;
@@ -418,7 +420,9 @@ $yellow: #FFEB50;
     .listContainer {
       @include cube;
       width: 80%;
+      min-height: 6rem;
       padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
 
       .lt {
         width: 47%;
@@ -581,8 +585,8 @@ $yellow: #FFEB50;
 
 .icons {
   @include cube;
-  position: absolute;
-  bottom: 0.2rem;
+  position: static;
+  padding-bottom: 0.2rem;
 
   img {
     @include cube;
@@ -593,11 +597,19 @@ $yellow: #FFEB50;
 
 .countdown {
   width: 1rem;
-  position: absolute;
+  position: fixed;
   font-size: 0.25rem;
   color: white;
   right: 0rem;
   bottom: 0.2rem;
 }
 
+/*响应式调整*/
+@media (max-aspect-ratio: 1920/1080) {  //max-aspect-ratio: 小于等于   min-aspect-ratio: 大于等于
+  .icons {
+    position: fixed;
+    padding-bottom: 0rem;
+    bottom: 0.2rem;
+  }    
+}
 </style>

src/views/pk.vue

@@ -6,14 +6,14 @@
     <div class="progressContainer">
       <div class="valueDisplay">
         <div class="lt">
-            <span :style="{'right': Redflag+'%'}">
-              <em>CK {{ redSum }}</em>
-            </span>
+          <span :style="{'right': Redflag+'%'}">
+            <em>CK {{ redSum }}</em>
+          </span>
         </div>
         <div class="rt">
-              <span :style="{'left': BlueFlag+'%'}">
-              <em>CK {{ blueSum }}</em>
-            </span>
+          <span :style="{'left': BlueFlag+'%'}">
+            <em>CK {{ blueSum }}</em>
+          </span>
         </div>
         <div class="md">
           <img src="../assets/imgs/pk/vs.png" alt="">
@@ -21,14 +21,12 @@
       </div>
       <div class="lineContianer">
         <div class="lt">
-            <span :style="{'width':RedProgress+'%'}">
-            </span>
+          <span :style="{'width':RedProgress+'%'}"></span>
           <em>红队{{ redPeron }}人</em>
         </div>
 
         <div class="rt">
-              <span :style="{'width':BlueProgress+'%'}">
-            </span>
+          <span :style="{'width':BlueProgress+'%'}"></span>
           <em>蓝队{{ bluePerson }}人</em>
         </div>
       </div>
@@ -521,7 +519,8 @@ export default {
 }
 
 @mixin bg {
-  height: 100%;
+  height: auto;
+  min-height: 100%;
   background-color: #333;
   background-repeat: no-repeat;
   background-position: top center;
@@ -529,7 +528,7 @@ export default {
 }
 
 .pages {
-  background: url("../assets/imgs/pk/pkbg2.png");
+  background: url("../assets/imgs/pk/pkbg.png");
   @include bg;
 
   .pageTitle {
@@ -554,14 +553,9 @@ export default {
   }
 
   .progressContainer {
-    // @include cube;
-    // height: 2.8rem;
-    position: relative;
-    // margin-top: 2rem;
-
+    
     .valueDisplay {
       @include cube;
-      height: 2rem;
       overflow: visible;
       position: relative;
 
@@ -611,8 +605,7 @@ export default {
         @include cube;
         width: 100%;
         position: absolute;
-        // margin: 0 auto;
-        bottom: 0.39rem;
+        top: 0.18rem;
         z-index: 555;
 
         img {
@@ -625,23 +618,26 @@ export default {
 }
 
 .lineContianer {
-  position: relative;
+  position: absolute;
   @include cube;
-  // width: 98%;
-  bottom: 1.60rem;
-  // top:0rem;
+  top: 1.72rem;
   z-index: 222;
   // overflow: visible;
 
   .lt {
     width: 50%;
     float: left;
+    background: url("../assets/imgs/pk/bar_left_bg.png");
+    background-repeat: no-repeat;
+    background-position: top right;
+    background-size: 98% 100%;
 
     span {
       width: 4rem;
       float: right;
       // border-radius: 3px;
       background: linear-gradient(to right, #d11122 0%, rgba(209, 17, 34, 0.23) 100%);
+      margin-bottom: 0.025rem;
     }
 
     em {
@@ -660,14 +656,17 @@ export default {
   .rt {
     width: 50%;
     float: right;
+    background: url("../assets/imgs/pk/bar_right_bg.png");
+    background-repeat: no-repeat;
+    background-position: top left;
+    background-size: 98% 100%;
 
     span {
       width: 4rem;
       float: left;
       background: linear-gradient(to left, #4cbbfc 0%, rgba(0, 125, 198, 0.17) 100%);
       position: relative;
-      // top: 0.0rem;
-      // height: 0.485rem !important;
+      margin-bottom: 0.025rem;
     }
 
     em {
@@ -692,7 +691,8 @@ export default {
   @include cube;
   width: 98%;
   position: relative;
-  bottom: 1.35rem;
+  padding-top: 0.26rem;
+  padding-bottom: 0.16rem;
   height: 8.6rem;
 
   .lt {
@@ -753,17 +753,14 @@ export default {
   }
 }
 
-/*响应式调整*/
-@media(min-width: 320px) and (max-width: 1025px) {
-  .progressContainer {
-    margin-top: 0.9rem;
-  }
-  .userPart {
-    height: 10rem;
-    overflow-y: scroll;
-  }
-  /deep/ .twentyFive .names {
-    bottom: 0.4rem !important;
-  }
-}
+// /*响应式调整*/
+// @media(min-width: 320px) and (max-width: 1025px) {
+//   .progressContainer {
+//     margin-top: 0.9rem;
+//   }
+//   .userPart {
+//     height: 10rem;
+//     overflow-y: scroll;
+//   }
+// }
 </style>

src/views/threepk.vue

@@ -572,7 +572,8 @@ export default {
 }
 
 @mixin bg {
-  height: 100%;
+  height: auto;
+  min-height: 100%;
   background-color: #333;
   background-repeat: no-repeat;
   background-position: top center;
@@ -580,7 +581,7 @@ export default {
 }
 
 .pages {
-  background: url("../assets/imgs/three/threeBg3.png");
+  background: url("../assets/imgs/three/threeBg.png");
   @include bg;
 
   .pageTitle {
@@ -607,15 +608,11 @@ export default {
   }
 
   .progressContainer {
-    @include cube;
-    height: 2.8rem;
-    position: relative;
 
     .valueDisplay {
       @include cube;
       width: 98%;
-      height: 2rem;
-      overflow: hidden;
+      overflow: visible;
       margin-top: -0.03rem;
 
       .lt {
@@ -678,7 +675,6 @@ export default {
   position: relative;
   @include cube;
   width: 98%;
-  bottom: 1rem;
   z-index: 222;
   overflow: visible;
 
@@ -692,7 +688,7 @@ export default {
       float: left;
       width: 1.2rem;
       left: 5.87rem;
-      bottom: 0.2rem;
+      margin-top: 0.72rem;
 
       &.rightVs {
         float: left;
@@ -704,12 +700,17 @@ export default {
   .lt {
     width: 33.33%;
     float: left;
+    background: url("../assets/imgs/three/bar_bg.png");
+    background-repeat: no-repeat;
+    background-position: top right;
+    background-size: 100% 100%;
 
     span {
       width: 4rem;
       float: left;
-      border-radius: 3px;
+      // border-radius: 3px;
       background: linear-gradient(to left, #d11122 0%, rgba(209, 17, 34, 0.23) 100%);
+      margin-bottom: 0.03rem;
     }
 
     em {
@@ -729,12 +730,17 @@ export default {
     width: 33.33%;
     float: left;
     overflow: visible;
+    background: url("../assets/imgs/three/bar_bg.png");
+    background-repeat: no-repeat;
+    background-position: top right;
+    background-size: 100% 100%;
 
     span {
       position: relative;
       width: 4rem;
       float: left;
       background: linear-gradient(to left, #4cbbfc 0%, rgba(0, 125, 198, 0.17) 100%);
+      margin-bottom: 0.03rem;
     }
 
     em {
@@ -753,12 +759,17 @@ export default {
   .rt {
     width: 33.33%;
     float: right;
+    background: url("../assets/imgs/three/bar_bg.png");
+    background-repeat: no-repeat;
+    background-position: top right;
+    background-size: 100% 100%;
 
     span {
       width: 4rem;
       float: left;
-      border-radius: 3px;
+      // border-radius: 3px;
       background: linear-gradient(to left, #fccd4c 0%, rgba(255, 228, 15, 0.26) 100%);
+      margin-bottom: 0.03rem;
     }
 
     em {
@@ -783,9 +794,9 @@ export default {
   @include cube;
   width: 98%;
   position: relative;
-  bottom: 1rem;
+  padding-top: 0.3rem;
+  padding-bottom: 0.16rem;
   height: 8.2rem;
-  padding-top: 0.1rem;
 
   .lt {
     @include cube;
@@ -858,17 +869,14 @@ export default {
   }
 }
 
-/*响应式调整*/
-@media(min-width: 320px) and (max-width: 1025px) {
-  .progressContainer {
-    margin-top: 0.9rem;
-  }
-  .userPart {
-    height: 10rem;
-    overflow-y: scroll;
-  }
-  /deep/ .twentyFive .names {
-    bottom: 0.4rem !important;
-  }
-}
+// /*响应式调整*/
+// @media(min-width: 320px) and (max-width: 1025px) {
+//   .progressContainer {
+//     margin-top: 0rem;
+//   }
+//   .userPart {
+//     // height: 10rem;
+//     overflow-y: scroll;
+//   }
+// }
 </style>