在线上课

hbuild/GoAllOutTv/GoAllOutTv/manifest.json

@@ -3,8 +3,8 @@
     "id" : "H5BB8BEB3", /*应用的标识*/
     "name" : "小飞龙", /*应用名称，程序桌面图标名称*/
     "version" : {
-        "name" : "1.3.4", /*应用版本名称*/
-        "code" : 41
+        "name" : "1.3.5", /*应用版本名称*/
+        "code" : 42
     },
     "description" : "小飞龙TV平台", /*应用描述信息*/
     "icons" : {

pc/src/api/Navs.js

@@ -28,8 +28,19 @@ let navs = [
         "show": 3,
         "grouplist": "2,5",
         "icon": "el-icon-user-solid",
-    },{
+    }
+    , {
         "clmid": "3",
+        "clmcode": "region",
+        "clmname": "在线上课",
+        "clmurl": "/online",
+        "prname": "",
+        "show": 3,//2
+        "grouplist": "2,5",
+        "icon": "el-icon-video-camera",
+    },
+    {
+        "clmid": "13",
         "clmcode": "lesson",
         "clmname": "课目管理",
         "clmurl": "/lesson",
@@ -180,6 +191,15 @@ let navs = [
         "show": 2,
         "grouplist": "2,5",
         "icon": "el-icon-s-claim",
+    }, {
+        "clmid": "15",
+        "clmcode": "demoDevice",
+        "clmname": "演示设备",
+        "clmurl": "/demoDevice",
+        "prname": "",
+        "show": 2,
+        "grouplist": "2,5",
+        "icon": "el-icon-video-camera",
     }, {
         "clmid": "22",
         "clmcode": "setting",
@@ -219,7 +239,7 @@ let navs = [
         "grouplist": "2,5",
         "icon": "el-icon-user-solid",
     },
-  {
+    {
         "clmid": "3",
         "clmcode": "lesson",
         "clmname": "课目管理",

pc/src/router/index.js

@@ -93,6 +93,14 @@ const routes = [
                     title: "操作日志",
                     clmid: "14",
                 }
+            }, {
+                path: '/demoDevice',
+                name: 'demoDevice',
+                component: () => import('@/views/demoDevice.vue'),
+                meta: {
+                    title: "演示设备",
+                    clmid: "15",
+                }
             }, {
                 path: '/shopManage',
                 name: 'ShopManage',
@@ -285,6 +293,14 @@ const routes = [
                     title: "跨店会员",
                     clmid: "11",
                 }
+            },{
+                path: '/online',
+                name: 'online',
+                component: () => import('@/views/online.vue'),
+                meta: {
+                    title: "在线上课",
+                    clmid: "3",
+                }
             },{
                 path: '/versionControlMefisto',
                 name: 'versionControlMefisto',

pc/src/views/cost.vue

@@ -177,7 +177,6 @@
             label="消费明细"
             min-width="110dp"
             align="center"
-            sortable
         >
           <template slot-scope="scope">
             <span v-if="scope.row.AcrossConsume  == 1" style="color:red;">

pc/src/views/demoDevice.vue

@@ -0,0 +1,664 @@
+<template>
+  <div class="context">
+    <el-page-header @back="goBack" content="演示设备"></el-page-header>
+    <div class="panel">
+      <br>
+      <h5> {{regionName}}</h5>
+    </div>
+    <div class="change">
+      <el-button @click="addMember" type="primary">新增演示设备</el-button>
+      <el-button @click="editList">编辑演示设备</el-button>
+      <!--<el-button @click="delList" type="danger">删除区域设备</el-button>-->
+    </div>
+    <div class="table">
+      <el-table
+          :data="tableData"
+          border
+          is-horizontal-resize
+          :default-sort="{prop: 'date', order: 'descending'}"
+          element-loading-background="rgba(0, 0, 0, 0.8)"
+          class=""
+          @selection-change="handleSelectionChange" @current-change="clickChange"
+
+      >
+        <el-table-column label="选择" width="55">
+          <template slot-scope="scope">
+            <el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column
+            type="index"
+            label="序号"
+            align="center"
+            width="50">
+        </el-table-column>
+        <el-table-column
+            prop="EqSn"
+            label="序列号"
+        >
+        </el-table-column>
+        <el-table-column
+            prop="Version"
+            label="版本"
+            sortable
+        >
+        </el-table-column>
+        <el-table-column
+            prop="EquipType"
+            label="类型"
+            sortable
+        >
+          <template slot-scope="scope">
+            <span v-if="scope.row.EquipType == 1">TVBox</span>
+            <span v-if="scope.row.EquipType == 2">BLEHub</span>
+            <span v-if="scope.row.EquipType == 3">演示设备</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+            prop="Status"
+            label="状态"
+            sortable
+        >
+          <!--1：启用  8：暂停  9：删除-->
+          <template slot-scope="scope">
+            <span v-if="scope.row.Status == 1" style="color: yellowgreen">启用</span>
+            <span v-if="scope.row.Status == 8" style="color: yellow">暂停</span>
+            <span v-if="scope.row.Status == 9" style="color: red">删除</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+            prop="address"
+            label="操作">
+          <template slot-scope="scope">
+            <!--<el-button type="success" @click="run(scope.row)" v-if="scope.row.Status == 8">开启</el-button>-->
+            <!--<el-button type="danger" @click="pause(scope.row)" v-if="scope.row.Status == 1">暂停</el-button>-->
+            <span v-if="scope.row.EquipType != 3" style="color: red">
+                        <el-button type="danger"  size="mini"
+                                   @click="pauseRowDel(scope.row)">
+                            删除
+                        </el-button>
+                      </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <br>
+      <el-pagination
+          background
+          :total="pageination.total"
+          :page-size="pageination.pageItem"
+          @current-change="pageChange"
+      ></el-pagination>
+    </div>
+    <el-dialog :title="dialogTitle" :visible.sync="dialogMemberVisible" width="650px">
+      <div class="dialogContent">
+        <div class="">
+          <el-form ref="form" :model="form" label-width="160px">
+            <el-form-item label="设备序列号">
+              <el-input v-model="form.eqSn "></el-input>
+            </el-form-item>
+            <el-form-item label="版本号">
+              <el-input v-model="form.version"></el-input>
+            </el-form-item>
+            <el-form-item label="设备类型">
+              <el-select v-model="form.equipType " placeholder="请选择">
+                <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div class="dialogFooter">
+        <el-button type="primary" size="small" v-if="form.btnType == 0" @click="confirmMember">确定</el-button>
+        <el-button type="primary" size="small" v-if="form.btnType == 1" @click="confirmEditMember">确定
+        </el-button>
+        <el-button size="small" @click="dialogMemberVisible = false">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Global from '../Global.js'
+import {
+  testTable,
+  ShopManagerStatusEdit,
+  QueryVenueEquip,
+  AddShopVenueEquip,
+  EditShopVenueEquip,
+  ShopVenueEquipEditStatus
+} from "../api/getApiRes";
+
+let qs = require('qs');
+export default {
+  data() {
+    return {
+      regionName: '',
+      dialogVisible: false,
+      dialogMemberVisible: false,
+      dialogTitle: '新增区域设备',
+      // panel 配置项目
+      multipleSelection: [],
+      tableRadio: [],
+      pageination: {
+        pageItem: 100,
+        pageoptions: pageOptions(),
+        total: 100,
+        pageIndex: 1,
+      },
+      form: {
+        eqId: '',
+        eqSn: '',
+        name: '',
+        version: '',
+        userCode: '',
+        shopId: '',
+        btnType: 0,
+        equipType: 1,
+      },
+      options: [
+        {value: 1, label: 'TVBox'},
+        {value: 2, label: 'BLEHub'},
+        {value: 3, label: '演示设备'},
+      ],
+      shops: [],
+      tableData: [],
+      serachBtnStatus: false,
+    }
+  },
+  mounted() {
+    this.regionName = this.$route.query.name;
+    this.getTableQuery();
+  },
+  methods: {
+    goBack() {
+      this.$router.push({
+        path: '/region', query: {}
+      });
+    },
+    // 删除
+    pauseRowDel(row) {
+      let that = this;
+      let param = {
+        key: localStorage.ServiceKey,
+        shopId: localStorage.ServiceId,
+        svId: row.SvId,
+        eqId: row.EqId,
+        status: 9,//1：启用 8：暂停 9：删除
+      };
+      let postdata = qs.stringify(param);
+      this.$confirm('此操作将永久删除该区域设备, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        ShopVenueEquipEditStatus(postdata).then(res => {
+          let json = res;
+          if (json.Code == 0) {
+            that.$message({
+              showClose: true,
+              message: '选中的区域设备已删除！',
+              type: 'success'
+            });
+            // 重载列表
+            that.getTableQuery();
+          } else {
+            that.$message.error(json.Memo + ' 错误码：' + json.Code);
+          }
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    },
+    clearForm() {
+      // clear
+      this.form.name = '';
+      this.form.userCode = '';
+      this.form.shopId = '';
+      this.form.eqSn = '';
+      this.form.version = '';
+      this.form.equipType = 1;
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    // 新增区域设备
+    addMember() {
+      this.clearForm();
+      this.dialogMemberVisible = true;
+      this.btnType = 0;
+      this.dialogTitle = '新增区域设备'
+    },
+    clickChange(item) {
+      this.tableRadio = item
+    },
+    // 删除
+    delList() {
+      let that = this;
+      if (this.tableRadio.length == 0) {
+        this.$message.error("请先选中一条记录");
+        return false
+      }
+      let userId = this.tableRadio.Id;
+
+      let param = {
+        key: localStorage.ServiceKey,
+        shopId: localStorage.ServiceId,
+        svId: this.$route.query.svId,
+        eqId: this.tableRadio.EqId,
+        status: 9,//1：启用 8：暂停 9：删除
+      };
+      let postdata = qs.stringify(param);
+
+      this.$confirm('此操作将永久删除该区域设备, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        ShopVenueEquipEditStatus(postdata).then(res => {
+          let json = res;
+          if (json.Code == 0) {
+            that.$message({
+              showClose: true,
+              message: '选中的区域设备已删除！',
+              type: 'success'
+            });
+            // 重载列表
+            that.getTableQuery();
+          } else {
+            that.$message.error(json.Memo + ' 错误码：' + json.Code);
+          }
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    },
+    // 编辑
+    editList() {
+      let that = this;
+      this.clearForm();
+      if (this.tableRadio.length == 0) {
+        this.$message.error("请先选中一条记录");
+        return false
+      }
+      let row = this.tableRadio;
+      this.form.shopid = row.ShopId;
+      this.form.userId = row.Id;
+      this.form.name = row.Name;
+      this.form.userCode = row.Usercode;
+      this.form.password = '';
+      this.form.phone = row.Phone;
+      this.form.eqId = row.EqId;
+      this.form.eqSn = row.EqSn.trim();
+      this.form.version = row.Version.trim();
+      this.form.equipType = row.EquipType;
+      this.form.memo = row.Memo;
+      this.form.adminType = row.AdminType;
+      this.dialogVisible = true;
+      this.dialogTitle = '编辑区域设备';
+      this.form.btnType = 1;
+      this.dialogMemberVisible = true
+    },
+    // 确认提交新增区域设备
+    confirmMember() {
+      let that = this;
+      // checkNum
+      if (!that.form.eqSn) {
+        this.$message.error('错了哦，设备序列号不能为空');
+        return false
+      }
+      if (that.form.version.length > 10) {
+        this.$message.error('错了哦，版本号字符不能超过10位');
+        return false
+      }
+
+      let param = {
+        key: localStorage.ServiceKey,
+        shopId: localStorage.ServiceId,
+        svId: this.$route.query.svId,
+        eqSn: this.form.eqSn,
+        version: this.form.version,
+        equipType: this.form.equipType,
+      };
+      let postdata = qs.stringify(param);
+      AddShopVenueEquip(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 关闭弹窗
+          that.dialogMemberVisible = false;
+          // 重载列表
+          that.getTableQuery();
+          that.$message({
+            showClose: true,
+            message: '所属设备添加成功！',
+            type: 'success'
+          });
+        } else {
+          that.$message.error(json.Memo + ' 错误码：' + json.Code);
+        }
+      })
+    },
+    confirmEditMember() {
+      let that = this;
+      console.log(that.form.version.length);
+      // checkNum
+      if (!that.form.eqSn) {
+        this.$message.error('错了哦，设备序列号不能为空');
+        return false
+      }
+      if (that.form.version.length > 10) {
+        this.$message.error('错了哦，版本号字符不能超过10位');
+        return false
+      }
+      let param = {
+        key: localStorage.ServiceKey,
+        shopId: localStorage.ServiceId,
+        svId: this.$route.query.svId,
+        eqId: this.form.eqId,
+        eqSn: this.form.eqSn,
+        version: this.form.version,
+        equipType: this.form.equipType,
+      };
+      let postdata = qs.stringify(param);
+      EditShopVenueEquip(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 关闭弹窗
+          that.dialogMemberVisible = false;
+          // 重载列表
+          that.getTableQuery();
+          that.$message({
+            showClose: true,
+            message: '区域设备信息编辑成功！',
+            type: 'success'
+          });
+        } else {
+          that.$message.error(json.Memo + ' 错误码：' + json.Code);
+        }
+      })
+    },
+    // 查询按钮
+    query() {
+      // 按钮倒计时
+      let that = this;
+      that.serachBtnStatus = true;
+      let totalTime = 2;
+      let clock = window.setInterval(() => {
+        totalTime--;
+        if (totalTime < 0) {
+          totalTime = 2;
+          that.serachBtnStatus = false;
+        }
+      }, 1000);
+
+      this.getTableQuery();
+      this.$message.success('查询完毕');
+    },
+    // 页面数据查询
+    getTableQuery() {
+      let that = this;
+      that.loading = true;
+      let param = {
+        key: localStorage.ServiceKey,
+        shopId: localStorage.ServiceId,
+        svId: this.$route.query.svId,
+      };
+      let postdata = qs.stringify(param);
+      QueryVenueEquip(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          that.loading = false;
+          if (json.Rs) {
+            that.allTableData = json.Rs;
+            that.recordsTotal = json.Rs.length;
+          } else {
+            that.allTableData = [];
+            that.recordsTotal = 0;
+          }
+          // 设置分页数据
+          that.setPaginations();
+        } else {
+          that.$message.error(json.Memo + ' 错误码：' + json.Code);
+        }
+      })
+    },
+    // 设置分页数据
+    setPaginations() {
+      // 分页属性
+      let that = this;
+      that.pageination.total = that.recordsTotal;
+      // 默认分页
+      that.tableData = that.allTableData.filter((item, index) => {
+        return index < that.pageination.pageItem;
+      });
+    },
+    // 每页显示数量
+    handleSizeChange() {
+      let that = this;
+      that.tableData = that.allTableData.filter((item, index) => {
+        return index < that.pageination.pageItem;
+      });
+      that.draw = that.pageination.pageItem;
+      that.getTableQuery();
+    },
+    // 翻页
+    pageChange(pageIndex) {
+      let that = this;
+      // 获取当前页
+      let index = that.pageination.pageItem * (pageIndex - 1);
+      // 数据总数
+      let nums = that.pageination.pageItem * pageIndex;
+      // 容器
+      let tables = [];
+      for (var i = index; i < nums; i++) {
+        if (that.allTableData[i]) {
+          tables.push(that.allTableData[i])
+        }
+        this.tableData = tables;
+      }
+      that.start = index * that.draw;
+      // that.getTableQuery();
+    },
+    // 自动排序
+    sortChange(params) {
+      console.log(params)
+    },
+    // 过滤时间
+    filterFmtDate(value, row, column) {
+      let that = this;
+      return nonTfmtDate(column, 11);
+    },
+    // 暂停
+    pause(row) {
+      let that = this;
+      console.log(row);
+      this.$confirm('是否暂停设备' + row.EqSn + '？', '暂停操作', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+
+        let param = {
+          key: localStorage.ServiceKey,
+          shopId: localStorage.ServiceId,
+          svId: this.$route.query.svId,
+          eqId: row.EqId,
+          status: 8,//1：启用 8：暂停 9：删除
+        };
+
+        let postdata = qs.stringify(param);
+        ShopVenueEquipEditStatus(postdata).then(res => {
+          let json = res;
+          if (json.Code == 0) {
+            that.$message({
+              showClose: true,
+              message: row.EqSn + '暂停成功！',
+              type: 'success'
+            });
+            // table 重载
+            that.getTableQuery();
+          } else {
+            that.$message.error(json.Memo + ' 错误码：' + json.Code);
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消暂停'
+        });
+      });
+    },
+    // 开启
+    run(row) {
+      let that = this;
+      this.$confirm('是否开启设备' + row.EqSn + '？', '开启操作', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+
+        let param = {
+          key: localStorage.ServiceKey,
+          shopId: localStorage.ServiceId,
+          svId: this.$route.query.svId,
+          eqId: row.EqId,
+          status: 1,//1：启用 8：暂停 9：删除
+        };
+
+        let postdata = qs.stringify(param);
+        ShopVenueEquipEditStatus(postdata).then(res => {
+          let json = res;
+          if (json.Code == 0) {
+            that.$message({
+              showClose: true,
+              message: row.EqSn + '开启成功！',
+              type: 'success'
+            });
+            // table 重载
+            that.getTableQuery();
+          } else {
+            that.$message.error(json.Memo + ' 错误码：' + json.Code);
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消开启'
+        });
+      });
+    },
+  },
+  watch: {
+    $route(to) {
+      if (to.name == 'heartLog') {
+        this.regionName = this.$route.query.name;
+        this.getTableQuery();
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+@import "../assets/css/panel.css";
+
+.context {
+  height: 770px;
+  overflow-y: scroll;
+
+  display: block;
+  margin: 0 auto;
+  background-color: #fff !important;
+  padding: 30px;
+  padding-bottom: 60px;
+}
+
+.panel-body {
+  padding: 20px;
+  background: #F0F2F5;
+}
+
+.change {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.change button {
+  float: left;
+}
+
+.change button.pull-right {
+  float: right;
+}
+
+.dialogTitle {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  color: #000000;
+  font-size: 18px;
+  text-align: center;
+}
+
+.dialogTitle em {
+  float: none;
+  font-style: normal;
+  color: #3799FF;
+  margin: 0;
+}
+
+/deep/ .el-transfer-panel__item .el-checkbox__input {
+  left: 40px;
+}
+
+.dialogFooter {
+  width: 90%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-top: 10px;
+}
+
+.dialogFooter button {
+  float: right;
+  margin-left: 10px;
+}
+
+/deep/ .el-date-editor .el-range__icon {
+  line-height: 22px;
+}
+
+.panel /deep/ .el-date-editor .el-range-separator {
+  line-height: 22px;
+}
+
+/deep/ .el-select {
+  width: 100%;
+}
+.panel h5 {
+  font-size: 24px;
+}
+
+/*ipad only*/
+@media only screen and (max-width: 1366px) {
+  .panel /deep/ .el-date-editor--daterange {
+    width: 100%;
+  }
+}
+
+</style>

pc/src/views/heartLog.vue

@@ -51,6 +51,7 @@
                     <template slot-scope="scope">
                         <span v-if="scope.row.EquipType == 1">TVBox</span>
                         <span v-if="scope.row.EquipType == 2">BLEHub</span>
+                        <span v-if="scope.row.EquipType == 3">演示设备</span>
                     </template>
                 </el-table-column>
                 <el-table-column
@@ -71,10 +72,12 @@
                     <template slot-scope="scope">
                         <!--<el-button type="success" @click="run(scope.row)" v-if="scope.row.Status == 8">开启</el-button>-->
                         <!--<el-button type="danger" @click="pause(scope.row)" v-if="scope.row.Status == 1">暂停</el-button>-->
+                      <span v-if="scope.row.EquipType != 3" style="color: red">
                         <el-button type="danger"  size="mini"
                                    @click="pauseRowDel(scope.row)">
                             删除
                         </el-button>
+                      </span>
                     </template>
                 </el-table-column>
             </el-table>
@@ -160,6 +163,7 @@
                 options: [
                     {value: 1, label: 'TVBox'},
                     {value: 2, label: 'BLEHub'},
+                    {value: 3, label: '演示设备'},
                 ],
                 shops: [],
                 tableData: [],

pc/src/views/online.vue

@@ -0,0 +1,183 @@
+<template>
+    <div class="context">
+        <div class="panel">
+            <h5>在线上课</h5>
+        </div>
+        <div class="change">
+            <div class="basicInfo">
+                <em>课程名：{{classInfo.name}} </em>
+                <em>学员数：{{classInfo.len}} </em>
+                <em>（在线：{{classInfo.online}}人 离线：{{classInfo.offline}}人） </em>
+                <em>当前时间：{{classInfo.time}} </em>
+            </div>
+            <el-button @click="" type="primary">全屏显示</el-button>
+            <el-button v-if="classState == 1" @click="" type="success">上课</el-button>
+            <el-button v-else @click="" type="danger">下课</el-button>
+            <el-button @click="" type="warning">排行版</el-button>
+            <!--<el-button @click="">隐藏信息 todo</el-button>-->
+        </div>
+        <ul>
+            <li v-for="l in list" :class="studentsClassName">
+                <h5>{{l.name}}</h5>
+                <div class="info">
+                    <div class="lt">
+                        {{l.active}}
+                    </div>
+                    <span>heart</span>
+                    <div class="rt">
+                        {{l.heart}}
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                classInfo:{
+                    name:'',
+                    len:'',
+                    online:0,
+                    offline:0,
+                    time:'00：00：00',
+                },
+                classState: 0,//0 下课 1上课
+                list: [],
+                studentsClassName: '',
+            };
+        },
+        mounted() {
+            this.getList(1);
+        }, methods: {
+            getList(len) {
+                let rs = {};
+                this.calcClassName(len);
+                for (var i = 0; i < len; i++) {
+                    rs[i] = {
+                        name: '明日香飞鸟',
+                        heart: 200,
+                        active: 100
+                    }
+                }
+                this.list = rs;
+            },
+            calcClassName(len) {
+                let that = this;
+                switch (true) {
+                    case  parseInt(len) == 1:
+                        that.studentsClassName = 'max';
+                        break;
+                    case  parseInt(len) == 2:
+                        that.studentsClassName = 'two';
+                        break;
+                    case  parseInt(len) <= 4 && parseInt(len) > 2:
+                        that.studentsClassName = 'three';
+                        break;
+                    case  parseInt(len) <= 6 && parseInt(len) > 4:
+                        that.studentsClassName = 'six';
+                        break;
+                    case  parseInt(len) <= 9 && parseInt(len) > 6:
+                        that.studentsClassName = 'nine';
+                        break;
+                    case parseInt(len) <= 12 && parseInt(len) > 9:
+                        that.studentsClassName = 'ten';
+                        break;
+                    case parseInt(len) <= 15 && parseInt(len) > 12:
+                        that.studentsClassName = 'twelve';
+                        break;
+                    case parseInt(len) <= 20 && parseInt(len) > 15:
+                        that.studentsClassName = 'sixteen';
+                        break;
+                    case parseInt(len) <= 24 && parseInt(len) > 20:
+                        that.studentsClassName = 'twenty';
+                        break;
+                    case parseInt(len) <= 30 && parseInt(len) > 24:
+                        that.studentsClassName = 'twentyFour';
+                        break;
+                    case parseInt(len) >= 31:
+                        that.studentsClassName = 'twentyFour';
+                        break;
+                }
+            }
+        },
+    }
+</script>
+
+<style scoped>
+    .context {
+        border-radius: 12px;
+        height: 770px;
+        overflow-y: scroll;
+        display: block;
+        margin: 0 auto;
+        background-color: #fff !important;
+        padding: 30px;
+        padding-bottom: 30px;
+    }
+    .panel /deep/ h5 {
+        margin: 0;
+        text-align: left;
+        font-size: 18px;
+        font-weight: normal;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #F0F2F5;
+        margin-bottom: 10px;
+    }
+    .change {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+    .el-button--primary {
+        margin-right: 10px;
+        margin-left: 10px;
+    }
+    .change button {
+        float: right;
+        margin-right: 10px;
+        cursor: pointer;
+    }
+
+    .basicInfo {
+        float: left;
+    }
+
+    em {
+        font-style: normal;
+    }
+    ul,li {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    ul {
+        /*position: absolute;*/
+        /*top: 190px;*/
+        /*left: 60px;*/
+        /*right: 0;*/
+        /*bottom: 0;*/
+        width: 100%;
+        /*height: 100%;*/
+        overflow: hidden;
+        overflow-y: scroll;
+        margin: 0 auto;
+        display: inline-flex;
+        /*align-content:center;*/
+        align-items:center;
+        justify-content:center;
+        flex-wrap:wrap;
+    }
+
+    li {
+
+    }
+
+
+</style>

tv/src/Global.js

@@ -5,6 +5,8 @@ companyInfo = {
     year: new Date().getFullYear(),
 };
 
+// 当前版本   演示版
+runVersion = 'test';
 
 // headapi = process.env.NODE_ENV === 'development' ? '/api/' : '../';
 // headapi = 'http://192.168.0.110:8080/';//从郑伟那里获得数据源

tv/src/Mock/index.js

@@ -370,50 +370,49 @@ let getClassStat = function (ClassOn, dp) {
     };
 };
 
-let t = 1;//0 is on 1 is off
-if (t == 0) {
+let t = 0;//0 is on 1 is off
+if (t == 1) {
     // 列表测试
     Mock.mock('/api/testTable', 'post', testTable());
     Mock.mock('/api/getUserList', 'post', getUserList());
 
-    let curheadapi = 'http://192.168.0.63:8080/';
+    // let curheadapi = 'http://192.168.0.63:8080/';
+    // let curheadapi = 'http://192.168.0.10:8080/';
+    let curheadapi = 'http://cal.beswell.com:85/DataTransfer/';
 
     // 0: 下课 团课/私教/PK 的排名
-    let LessonClass = 3;
-    let LessonDp = LessonClass;
+    let LessonClass = 1;
+    let LessonDp = 1;
     // 1：团课/私教
     // 2：竞技课2PK
     // 3：竞技课threepk
-
-
-
     if (LessonClass == 1) {
         // 上团课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 1));
-        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(1, 1));
+        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(2, 1));
     } else if (LessonClass == 2) {
         // 上2队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 2));
-        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(8, 2,1));
+        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(8, 2,));
     } else if (LessonClass == 3) {
         // 上3队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 3));
-        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(8, 3,1));
+        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(8, 3,));
     } else if (LessonClass == 0) {
         // 下课
         if (LessonDp == 0) {
             Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(0, 0));
         } else if (LessonDp == 1) {
             Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(0, 1));
-            Mock.mock(curheadapi + 'ClassUserRank', 'post', testStudent(6, 2));
+            Mock.mock(curheadapi + 'ClassUserRank', 'post', testStudent(16, 2));
         } else if (LessonDp == 2) {
             Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(0, 2));
             // 下课排名
-            Mock.mock(curheadapi + 'ClassUserRank', 'post', testStudent(6, 2));
+            Mock.mock(curheadapi + 'ClassUserRank', 'post', testStudent(16, 2));
         } else if (LessonDp == 3) {
             Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(0, 3));
             // 下课排名
-            Mock.mock(curheadapi + 'ClassUserRank', 'post', testStudent(6, 3));
+            Mock.mock(curheadapi + 'ClassUserRank', 'post', testStudent(16, 3));
         }
     }
 

tv/src/components/levelIcon.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="levelIcon">
+    <div  :class="[{'levelIconTV':runVersion == 'test'},{'levelIconTest':runVersion != 'test'},{'levelIcon':true}]">
         <ul>
             <li>
           <span class="cube">
@@ -56,14 +56,19 @@
 
 <style scoped>
     .levelIcon {
-        position: absolute;
-        bottom: 0.1rem;
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        height: 5rem;
-        padding-bottom: 5px;
+      width: 100%;
+      overflow: hidden;
+      display: block;
+      margin: 0 auto;
+      height: 5rem;
+    }
+    .levelIconTest {
+
+    }
+    .levelIconTV {
+      position: absolute;
+      bottom: 0.1rem;
+      padding-bottom: 5px;
     }
 
     .levelIcon ul {

tv/src/views/2pkRank.vue

@@ -1,657 +1,664 @@
 <template>
-    <div :class="pageStyle">
-        <Headside></Headside>
-        <div class="tips">
-            {{totalTime}}
-        </div>
-        <div class="rankContainer">
-            <div class="sumScore">
-                <div class="sumlt">
+  <div :class="pageStyle">
+    <Headside></Headside>
+    <div class="tips">
+      {{ totalTime }}
+    </div>
+    <div class="rankContainer">
+      <div class="sumScore">
+        <div class="sumlt">
                     <span class="sumCK">
-                        <em>{{redSum}}</em><i>Ck</i>
+                        <em>{{ redSum }}</em><i>Ck</i>
                     </span>
-                    <span class="flagContainer">
+          <span class="flagContainer">
                         <img src="../assets/img/2pkRank/flag.svg" alt=""
                              v-if="parseFloat(redSum) >= parseFloat(blueSum)">
                     </span>
-                    <span class="mineUniteName">
+          <span class="mineUniteName">
                         红队
                     </span>
-                </div>
-                <div class="summd"></div>
-                <div class="sumrt">
+        </div>
+        <div class="summd"></div>
+        <div class="sumrt">
                     <span class="mineUniteName">
                         蓝队
                     </span>
-                    <span class="flagContainer">
+          <span class="flagContainer">
                         <img src="../assets/img/2pkRank/flag.svg" alt=""
                              v-if="parseFloat(redSum) <= parseFloat(blueSum)">
                     </span>
-                    <span class="sumCK">
-                        <em>{{blueSum}}</em><i>Ck</i>
+          <span class="sumCK">
+                        <em>{{ blueSum }}</em><i>Ck</i>
                     </span>
-                </div>
-            </div>
-            <el-row :gutter="20">
-                <el-col :span="12">
-                    <li v-for="(s,i) in students.redUnite" :class="[{'redUnite':true},{'mvpli':i == 0}]">
-                        <div>
-                            <div class="head">
-                                <img :src="s.Head" class="headImg" v-if="s.Head">
-                                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
-                                <img src="../assets/img/2pkRank/king.svg" class="king" alt="" v-if="redSum >= blueSum">
-                            </div>
-                            <div class="name">
-                                {{s.Name}}
-                            </div>
-                            <div class="CLEscore">
-                                <!--                                <em>Cal</em>-->
-                                <em>胜率</em>
-                                <span>{{s.success }}%</span>
-                                <!--                                {{s.Cle|fmtInt}}-->
-                            </div>
-                            <div class="CKscore">
-                                <em>CK</em>
-                                {{s.Ck|fmtFloat}}
-                            </div>
-                            <div class="record">
-                                <img src="../assets/img/2pkRank/redMvp.svg" class="mvpImg" alt=""
-                                     v-if="i == 0">
-                            </div>
-                        </div>
-                    </li>
-                </el-col>
-                <!--CK-->
-                <el-col :span="12">
-                    <li v-for="(s,i) in students.blueUnite"
-                        :class="[{'blueUnite':true},{'mvpli':i == 0}]">
-                        <div>
-                            <div class="head">
-                                <img :src="s.Head" class="headImg" v-if="s.Head">
-                                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
-                                <img src="../assets/img/2pkRank/king.svg" class="king" alt="" v-if="redSum <= blueSum">
-                            </div>
-                            <div class="name">
-                                {{s.Name}}
-                            </div>
-                            <div class="CLEscore">
-                                <em>胜率</em>
-                                <span>{{s.success }}%</span>
-                            </div>
-                            <div class="CKscore">
-                                <em>CK</em>
-                                {{s.Ck|fmtFloat}}
-                            </div>
-                            <div class="record">
-                                <img src="../assets/img/2pkRank/blueMvp.svg" class="mvpImg" alt=""
-                                     v-if="i == 0">
-                            </div>
-                        </div>
-                    </li>
-                </el-col>
-            </el-row>
         </div>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <li v-for="(s,i) in students.redUnite" :class="[{'redUnite':true},{'mvpli':i == 0}]">
+            <div>
+              <div class="head">
+                <img :src="s.Head" class="headImg" v-if="s.Head">
+                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
+                <img src="../assets/img/2pkRank/king.svg" class="king" alt="" v-if="redSum >= blueSum">
+              </div>
+              <div class="name">
+                {{ s.Name }}
+              </div>
+              <div class="CLEscore">
+                <!--                                <em>Cal</em>-->
+                <em>胜率</em>
+                <span>{{ s.success }}%</span>
+                <!--                                {{s.Cle|fmtInt}}-->
+              </div>
+              <div class="CKscore">
+                <em>CK</em>
+                {{ s.Ck|fmtFloat }}
+              </div>
+              <div class="record">
+                <img src="../assets/img/2pkRank/redMvp.svg" class="mvpImg" alt=""
+                     v-if="i == 0">
+              </div>
+            </div>
+          </li>
+        </el-col>
+        <!--CK-->
+        <el-col :span="12">
+          <li v-for="(s,i) in students.blueUnite"
+              :class="[{'blueUnite':true},{'mvpli':i == 0}]">
+            <div>
+              <div class="head">
+                <img :src="s.Head" class="headImg" v-if="s.Head">
+                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
+                <img src="../assets/img/2pkRank/king.svg" class="king" alt="" v-if="redSum <= blueSum">
+              </div>
+              <div class="name">
+                {{ s.Name }}
+              </div>
+              <div class="CLEscore">
+                <em>胜率</em>
+                <span>{{ s.success }}%</span>
+              </div>
+              <div class="CKscore">
+                <em>CK</em>
+                {{ s.Ck|fmtFloat }}
+              </div>
+              <div class="record">
+                <img src="../assets/img/2pkRank/blueMvp.svg" class="mvpImg" alt=""
+                     v-if="i == 0">
+              </div>
+            </div>
+          </li>
+        </el-col>
+      </el-row>
     </div>
+  </div>
 </template>
 
 <script>
-    import Headside from '@/components/Headside'
-    import '../libs/rem';
-    import '../Global';
-    import {
-        ClassUserRank,
-        AddPkInfo
-    } from '@/api/getApiRes'
-
-    let qs = require('qs');
-    export default {
-        data() {
-            return {
-                eqSn: '30:9C:23:0C:8B:1E',
-                pageStyle: RandomBg(),
-                trueDate: true,//真实数据 true false
-                autoJump: true,//开启自动跳走
-                students: {
-                    redUnite: [],
-                    blueUnite: [],
-                },
-                rankTimer: null,
-                redSum: 0,
-                blueSum: 0,
-                totalTime: ''
-            }
-        },
-        mounted() {
-            let that = this;
-            if (this.trueDate) {
-                that.init();
-            } else {
-                let Rs = fakeNews(18, 2);
-                that.UniteBreak(Rs);
-            }
-        },
-        watch: {
-            '$route': function (val) {
-                if (val.path == '/2pkRank') {
-                    if (this.trueDate) {
-                        this.init();
-                    } else {
-                        let Rs = fakeNews(18, 2);
-                        this.UniteBreak(Rs);
-                    }
-
-                } else {
-                    clearInterval(this.rankTimer);
-                }
-            }
-        },
-        beforeDestroy() {
-            clearInterval(this.rankTimer);
-            this.rankTimer = null;
-        },
-        methods: {
-            init() {
-                this.getClassUserRank();
-            },
-            // 分队展示
-            UniteBreak(Rs, PlanId) {
-                let that = this;
-                that.students.redUnite = [];
-                that.students.blueUnite = [];
-                Rs.map(function (item, t) {
-                    if (item.GroupNo == 1) {
-                        that.students.redUnite.push(item);
-                    }
-                    if (item.GroupNo == 2) {
-                        that.students.blueUnite.push(item);
-                    }
-                });
-                // 排序
-                that.students.redUnite = that.students.redUnite.sort(function (a, b) {
-                    // return b.Cle - a.Cle;
-                    return b.Ck - a.Ck;
-                });
-                that.students.blueUnite = that.students.blueUnite.sort(function (a, b) {
-                    // return b.Cle - a.Cle;
-                    return b.Ck - a.Ck;
-                });
-                that.calcSumCK(that.students, PlanId);
-            },
-            jumpWait(totalTime) {
-                // 倒计时60秒自动关闭
-                let that = this;
-                clearInterval(clock);
-                let clock = window.setInterval(() => {
-                    totalTime--;
-                    that.totalTime = totalTime;
-                    if (parseInt(totalTime) <= 0) {
-                        // 前往等待页面
-                        that.$router.push({path: '/'});
-                        // 计时器回收
-                        clearInterval(clock);
-                    }
-                }, 1000)
-            },
-            // 计算各队总分
-            calcSumCK(Rs, PlanId) {
-                let that = this;
-                let redSum = 0;
-                let blueSum = 0;
-                Rs.redUnite.map(function (item, t) {
-                    redSum += parseFloat(item.Ck.toFixed(1));
-                });
-                Rs.blueUnite.map(function (item, t) {
-                    blueSum += parseFloat(item.Ck.toFixed(1));
-                    // that.successCalc(item);
-                });
-                that.redSum = redSum.toFixed(1);
-                that.blueSum = blueSum.toFixed(1);
-
-                // // 获取人数 计算人均CK
-                // let redHuman = 0;
-                // let blueHuman = 0;
-                // if (Rs.redUnite != '') {
-                //     redHuman = Rs.redUnite.length;
-                //     that.redSum = parseFloat(redSum / redHuman).toFixed(1);
-                // } else {
-                //     that.redSum = 0
-                // }
-                // if (Rs.blueUnite != '') {
-                //     blueHuman = Rs.blueUnite.length;
-                //     that.blueSum = parseFloat(blueSum / blueHuman).toFixed(1);
-                // } else {
-                //     that.blueSum = 0
-                // }
-
-                // 上报胜率结果
-                let groupNo = redSum >= blueSum ? 1 : 2;
-                that.PostAddPkInfo(PlanId, groupNo);
-                // 计算本场胜率
-                that.getWhoWin(Rs.redUnite, Rs.blueUnite, groupNo);
-            },
-            getWhoWin(redUnite, blueUnite, groupNo) {
-                let that = this;
-                if (groupNo == 1) {
-                    redUnite.map(function (item, t) {
-                        that.successCalc(item, 1);
-                    });
-                    blueUnite.map(function (item, t) {
-                        that.successCalc(item, 0);
-                    });
-                } else {
-                    redUnite.map(function (item, t) {
-                        that.successCalc(item, 0);
-                    });
-                    blueUnite.map(function (item, t) {
-                        that.successCalc(item, 1);
-                    });
-                }
-            },
-            // 插入胜率结果
-            successCalc(item, Victorl) {
-                // item.success = '胜' + (parseInt(item.PkSucessnum) + parseInt(Victorl)) + ' 总:' + (parseInt(item.PkTotalnum) + 1) + '结' + (parseFloat(parseInt(item.PkSucessnum) + parseInt(Victorl)) / (parseInt(item.PkTotalnum) + 1)) * 100
-                if (parseInt(item.PkTotalnum + Victorl) == 0) {
-                    item.success = 0;
-                } else {
-                    let res = (parseFloat(parseInt(item.PkSucessnum) + parseInt(Victorl)) / (parseInt(item.PkTotalnum) + 1)) * 100;
-                    if (res >= 100) {
-                        item.success = 100;
-                    } else {
-                        item.success = res.toFixed(1);
-                    }
-                }
-            },
-            getClassUserRank() {
-                let that = this;
-                let param = {
-                    eqSn: localStorage.eqSn
-                };
-                let postdata = qs.stringify(param);
-                ClassUserRank(postdata).then(res => {
-                    let json = res;
-                    that.students.redUnite = [];
-                    that.students.blueUnite = [];
-                    if (json.Code == 0) {
-                        that.UniteBreak(json.Rs, json.Dp.PlanId);
-                        let totalTime = 40;
-                        let Studenlength = 0;
-                        if (json.Rs) {
-                            Studenlength = json.Rs.length;
-                        }
-                        // 根据人数多少显示停留时间
-                        if (Studenlength > 3) {
-                            totalTime = 60
-                        } else {
-                            totalTime = 40
-                        }
-                        this.jumpWait(totalTime);
-                        // this.students.CkSort = json.Rs.CkSort;
-                        // this.students.CalSort = json.Rs.CalSort;
-                    } else {
-                        this.students.CkSort = [];
-                        this.students.CalSort = [];
-                        this.jumpWait(10);
-                        if (json.Code == '999') {
-                            // that.$router.push({path: '/'});
-                        } else {
-                            // 已出错
-                            that.$message.error(json.Memo);
-                        }
-                    }
-                })
-            },
-            // 竞技课程结果上传
-            PostAddPkInfo(dpId, groupNo) {
-                console.log(dpId, groupNo);
-                let that = this;
-                let param = {
-                    dpId: dpId,
-                    groupNo: groupNo,
-                };
-                let postdata = qs.stringify(param);
-                AddPkInfo(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        console.log('竞技课程结果上传成功dpid:' + dpId + ' groupNo:' + groupNo);
-                    } else {
-                        console.log('code:' + json.Code + 'memo:' + json.Memo);
-                        // that.$message.error(json.Memo);
-                    }
-                })
-            }
-        },
-        filters: {
-            fmtNum(val) {
-                if (val == 0) {
-                    return '--'
-                } else {
-                    if (parseInt(val) < 0) return 0;
-                    if (parseInt(val) > 0) return val
-                }
-            },
-            fmtFloat(val) {
-                if (val == 0) {
-                    return '0.0'
-                } else {
-                    return parseFloat(val).toFixed(1);
-                }
-            },
-            fmtInt(val) {
-                if (val == 0) {
-                    return '0'
-                } else {
-                    return parseInt(val);
-                    // return parseFloat(val).toFixed(3);
-                }
-            },
-        },
-        components: {
-            Headside
+import Headside from '@/components/Headside'
+import '../libs/rem';
+import '../Global';
+import {
+  ClassUserRank,
+  AddPkInfo
+} from '@/api/getApiRes'
+
+let qs = require('qs');
+export default {
+  data() {
+    return {
+      eqSn: '30:9C:23:0C:8B:1E',
+      pageStyle: RandomBg(),
+      trueDate: true,//真实数据 true false
+      autoJump: true,//开启自动跳走
+      students: {
+        redUnite: [],
+        blueUnite: [],
+      },
+      rankTimer: null,
+      redSum: 0,
+      blueSum: 0,
+      totalTime: ''
+    }
+  },
+  mounted() {
+    let that = this;
+    if (this.trueDate) {
+      that.init();
+    } else {
+      let Rs = fakeNews(18, 2);
+      that.UniteBreak(Rs);
+    }
+  },
+  watch: {
+    '$route': function (val) {
+      if (val.path == '/2pkRank') {
+        if (this.trueDate) {
+          this.init();
+        } else {
+          let Rs = fakeNews(18, 2);
+          this.UniteBreak(Rs);
         }
-    }
+
+      } else {
+        clearInterval(this.rankTimer);
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.rankTimer);
+    this.rankTimer = null;
+  },
+  methods: {
+    init() {
+      this.getClassUserRank();
+    },
+    // 分队展示
+    UniteBreak(Rs, PlanId) {
+      let that = this;
+      that.students.redUnite = [];
+      that.students.blueUnite = [];
+      Rs.map(function (item, t) {
+        if (item.GroupNo == 1) {
+          that.students.redUnite.push(item);
+        }
+        if (item.GroupNo == 2) {
+          that.students.blueUnite.push(item);
+        }
+      });
+      // 排序
+      that.students.redUnite = that.students.redUnite.sort(function (a, b) {
+        // return b.Cle - a.Cle;
+        return b.Ck - a.Ck;
+      });
+      that.students.blueUnite = that.students.blueUnite.sort(function (a, b) {
+        // return b.Cle - a.Cle;
+        return b.Ck - a.Ck;
+      });
+      that.calcSumCK(that.students, PlanId);
+    },
+    jumpWait(totalTime) {
+      // 倒计时60秒自动关闭
+      let that = this;
+      clearInterval(clock);
+      let clock = window.setInterval(() => {
+        totalTime--;
+        that.totalTime = totalTime;
+        if (parseInt(totalTime) <= 0) {
+          // 前往等待页面
+          that.$router.push({path: '/'});
+          // 计时器回收
+          clearInterval(clock);
+        }
+      }, 1000)
+    },
+    // 计算各队总分
+    calcSumCK(Rs, PlanId) {
+      let that = this;
+      let redSum = 0;
+      let blueSum = 0;
+      Rs.redUnite.map(function (item, t) {
+        redSum += parseFloat(item.Ck.toFixed(1));
+      });
+      Rs.blueUnite.map(function (item, t) {
+        blueSum += parseFloat(item.Ck.toFixed(1));
+        // that.successCalc(item);
+      });
+      that.redSum = redSum.toFixed(1);
+      that.blueSum = blueSum.toFixed(1);
+
+      // // 获取人数 计算人均CK
+      // let redHuman = 0;
+      // let blueHuman = 0;
+      // if (Rs.redUnite != '') {
+      //     redHuman = Rs.redUnite.length;
+      //     that.redSum = parseFloat(redSum / redHuman).toFixed(1);
+      // } else {
+      //     that.redSum = 0
+      // }
+      // if (Rs.blueUnite != '') {
+      //     blueHuman = Rs.blueUnite.length;
+      //     that.blueSum = parseFloat(blueSum / blueHuman).toFixed(1);
+      // } else {
+      //     that.blueSum = 0
+      // }
+
+      // 上报胜率结果
+      let groupNo = redSum >= blueSum ? 1 : 2;
+      that.PostAddPkInfo(PlanId, groupNo);
+      // 计算本场胜率
+      that.getWhoWin(Rs.redUnite, Rs.blueUnite, groupNo);
+    },
+    getWhoWin(redUnite, blueUnite, groupNo) {
+      let that = this;
+      if (groupNo == 1) {
+        redUnite.map(function (item, t) {
+          that.successCalc(item, 1);
+        });
+        blueUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+      } else {
+        redUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+        blueUnite.map(function (item, t) {
+          that.successCalc(item, 1);
+        });
+      }
+    },
+    // 插入胜率结果
+    successCalc(item, Victorl) {
+      // item.success = '胜' + (parseInt(item.PkSucessnum) + parseInt(Victorl)) + ' 总:' + (parseInt(item.PkTotalnum) + 1) + '结' + (parseFloat(parseInt(item.PkSucessnum) + parseInt(Victorl)) / (parseInt(item.PkTotalnum) + 1)) * 100
+      if (parseInt(item.PkTotalnum + Victorl) == 0) {
+        item.success = 0;
+      } else {
+        let res = (parseFloat(parseInt(item.PkSucessnum) + parseInt(Victorl)) / (parseInt(item.PkTotalnum) + 1)) * 100;
+        if (res >= 100) {
+          item.success = 100;
+        } else {
+          item.success = res.toFixed(1);
+        }
+      }
+    },
+    getClassUserRank() {
+      let that = this;
+      let param = {
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      ClassUserRank(postdata).then(res => {
+        let json = res;
+        that.students.redUnite = [];
+        that.students.blueUnite = [];
+        if (json.Code == 0) {
+          that.UniteBreak(json.Rs, json.Dp.PlanId);
+          let totalTime = 40;
+          let Studenlength = 0;
+          if (json.Rs) {
+            Studenlength = json.Rs.length;
+          }
+          // 根据人数多少显示停留时间
+          if (Studenlength > 3) {
+            totalTime = 60
+          } else {
+            totalTime = 40
+          }
+          this.jumpWait(totalTime);
+          // this.students.CkSort = json.Rs.CkSort;
+          // this.students.CalSort = json.Rs.CalSort;
+        } else {
+          this.students.CkSort = [];
+          this.students.CalSort = [];
+          this.jumpWait(10);
+          if (json.Code == '999') {
+            // that.$router.push({path: '/'});
+          } else {
+            // 已出错
+            that.$message.error(json.Memo);
+          }
+        }
+      })
+    },
+    // 竞技课程结果上传
+    PostAddPkInfo(dpId, groupNo) {
+
+      // 如果是演示版不上报比赛结果
+      if (runVersion == 'test') {
+        return false
+      }
+      console.log(dpId, groupNo);
+      let that = this;
+      let param = {
+        dpId: dpId,
+        groupNo: groupNo,
+      };
+      let postdata = qs.stringify(param);
+      AddPkInfo(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          console.log('竞技课程结果上传成功dpid:' + dpId + ' groupNo:' + groupNo);
+        } else {
+          console.log('code:' + json.Code + 'memo:' + json.Memo);
+          // that.$message.error(json.Memo);
+        }
+      })
+    }
+  },
+  filters: {
+    fmtNum(val) {
+      if (val == 0) {
+        return '--'
+      } else {
+        if (parseInt(val) < 0) return 0;
+        if (parseInt(val) > 0) return val
+      }
+    },
+    fmtFloat(val) {
+      if (val == 0) {
+        return '0.0'
+      } else {
+        return parseFloat(val).toFixed(1);
+      }
+    },
+    fmtInt(val) {
+      if (val == 0) {
+        return '0'
+      } else {
+        return parseInt(val);
+        // return parseFloat(val).toFixed(3);
+      }
+    },
+  },
+  components: {
+    Headside
+  }
+}
 </script>
 
 <style scoped>
-    @import "../assets/css/bg.css";
-
-    @font-face {
-        font-family: vista;
-        src: url('../assets/font/vista.otf');
-    }
-
-    * {
-        font-family: vista;
-    }
-
-    .pages {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        font-family: vista;
-    }
-
-    .rankContainer {
-        width: 96%;
-        overflow: visible;
-        display: block;
-        margin: 0 auto;
-        padding-top: 0.2rem;
-    }
-
-    .sumScore {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        height: 1.4rem;
-        background: url("../assets/img/2pkRank/2pkTitle.svg");
-        background-size: 100%;
-        background-position: top center;
-        background-repeat: no-repeat;
-    }
-
-    li {
-        width: 100%;
-        height: 0.8rem;
-        display: block;
-        margin: 0 auto;
-        overflow: hidden;
-        margin-bottom: 0.06rem;
-    }
-
-    li .rows {
-        width: 100%;
-        height: 0.8rem;
-        /*background: #ee191d;*/
-        border-radius: 250rem;
-        overflow: visible;
-        display: block;
-        margin: 0 auto;
-        margin-top: 0.15rem;
-    }
-
-    li .head {
-        width: 0.6rem;
-        height: 0.7rem;
-        float: left;
-        margin-left: 0.1rem;
-        margin-top: 0.07rem;
-        overflow: visible;
-    }
-
-    li .head .headImg {
-        width: 100%;
-        height: 0.6rem;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        border: 0.04rem solid #fff;
-        border-radius: 33rem;
-    }
-
-
-    li .name {
-        width: 2rem;
-        font-weight: normal;
-        font-size: 0.4rem;
-        text-align: left;
-        color: #fff;
-        float: left;
-        margin-left: 0.2rem;
-        line-height: 0.8rem;
-    }
-
-    li .record {
-        position: relative;
-        top: -0.2rem;
-        float: right;
-        margin-right: 2%;
-        /*line-height: 0.8rem;*/
-    }
-
-    li .score {
-        font-weight: normal;
-        font-size: 0.4rem;
-        color: #fff;
-        float: right;
-        margin-right: 0.2rem;
-        line-height: 1rem;
-        text-align: right;
-        line-height: 0.8rem;
-    }
-
-    li .score em {
-        font-size: 0.2rem;
-    }
-
-    .sumlt {
-        width: 45%;
-        float: left;
-        color: #E4FF00;
-    }
-
-    .sumrt {
-        width: 45%;
-        float: right;
-        color: #fff;
-    }
-
-    .summd {
-        width: 10%;
-        float: left;
-        height: 1rem;
-    }
-
-    .sumlt .sumCK {
-        width: 30%;
-        float: left;
-        margin-left: 30%;
-    }
-
-    .sumCK em {
-        font-size: 0.6rem;
-    }
-
-    .sumCK i {
-        font-size: 0.24rem;
-    }
-
-    .sumlt .flagContainer {
-        width: 10%;
-        float: left;
-        margin-left: 5%;
-    }
-
-    .flagContainer img {
-        width: 1rem;
-        height: 1rem;
-    }
-
-    .sumlt .mineUniteName {
-        width: 20%;
-        float: right;
-        text-align: left;
-        font-size: 0.5rem;
-        line-height: 1.4rem;
-    }
-
-
-    .sumrt .sumCK {
-        width: 30%;
-        float: left;
-        margin-left: 0%;
-    }
-
-    .sumrt em {
-        font-size: 0.6rem;
-    }
-
-    .sumrt i {
-        font-size: 0.24rem;
-    }
-
-    .sumrt .flagContainer {
-        width: 10%;
-        float: left;
-        margin-right: 5%;
-    }
-
-    .sumrt .mineUniteName {
-        width: 18%;
-        float: left;
-        text-align: left;
-        font-size: 0.5rem;
-        line-height: 1.4rem;
-        margin-left: 8%;
-    }
-
-    li.redUnite {
-        width: 100%;
-        float: left;
-        background: rgba(207, 17, 34, 0.75);
-        color: #fff;
-
-    }
-
-    li .CLEscore {
-        width: 2.6rem;
-        float: left;
-        font-size: 0.5rem;
-        margin-left: 5%;
-        line-height: 0.8rem;
-        text-align: left;
-    }
-
-    li .CLEscore em {
-        font-size: 0.3rem;
-    }
-
-    li .CLEscore span {
-        padding-left: 0.1rem;
-        font-size: 0.6rem;
-        /*font-size: 12px;*/
-    }
-
-    li .CKscore {
-        /*width: 2rem;*/
-        float: left;
-        font-size: 0.6rem;
-        margin-left: 5%;
-        line-height: 0.8rem;
-        text-align: left;
-    }
-
-    li .CKscore em {
-        font-size: 0.3rem;
-    }
-
-    li .record img {
-        width: 0.7rem;
-        float: left;
-    }
-
-    li.blueUnite {
-        width: 99%;
-        float: left;
-        background: rgba(24, 15, 170, 0.75);
-        color: #fff;
-    }
-
-    li.mvpli {
-        padding-top: 0.15rem;
-        padding-bottom: 0.15rem;
-    }
-
-    li.mvpli .CLEscore {
-        font-size: 0.7rem;
-    }
-
-    li.mvpli .CKscore {
-        font-size: 0.7rem;
-    }
-
-    li.mvpli .head {
-        width: 0.7rem;
-        height: 0.8rem;
-    }
-
-    li.mvpli .head img {
-        height: 0.7rem;
-        margin-top: -0.05rem;
-    }
-
-    li.mvpli .name {
-        font-size: 0.5rem;
-    }
-
-    li .king {
-        width: 0.4rem;
-        height: 0.2rem;
-        float: left;
-        position: relative;
-        top: -0.7rem;
-        left: -0.1rem;
-    }
-
-    li.mvpli .head img.king {
-        top: -1rem;
-    }
-
-    .tips {
-        position: absolute;
-        right: 3%;
-        top: 1rem;
-        font-size: 0.4rem;
-        color: #fff;
-    }
-
-    /deep/ .el-col {
-        min-height: 1rem;
-    }
+@import "../assets/css/bg.css";
+
+@font-face {
+  font-family: vista;
+  src: url('../assets/font/vista.otf');
+}
+
+* {
+  font-family: vista;
+}
+
+.pages {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: vista;
+  overflow-y: scroll;
+}
+
+.rankContainer {
+  width: 96%;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  padding-top: 0.2rem;
+  overflow-y: scroll;
+}
+
+.sumScore {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  height: 1.4rem;
+  background: url("../assets/img/2pkRank/2pkTitle.svg");
+  background-size: 100%;
+  background-position: top center;
+  background-repeat: no-repeat;
+}
+
+li {
+  width: 100%;
+  height: 0.8rem;
+  display: block;
+  margin: 0 auto;
+  overflow: hidden;
+  margin-bottom: 0.06rem;
+}
+
+li .rows {
+  width: 100%;
+  height: 0.8rem;
+  /*background: #ee191d;*/
+  border-radius: 250rem;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  margin-top: 0.15rem;
+}
+
+li .head {
+  width: 0.6rem;
+  height: 0.7rem;
+  float: left;
+  margin-left: 0.1rem;
+  margin-top: 0.07rem;
+  overflow: visible;
+}
+
+li .head .headImg {
+  width: 100%;
+  height: 0.6rem;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  border: 0.04rem solid #fff;
+  border-radius: 33rem;
+}
+
+
+li .name {
+  width: 2rem;
+  font-weight: normal;
+  font-size: 0.4rem;
+  text-align: left;
+  color: #fff;
+  float: left;
+  margin-left: 0.2rem;
+  line-height: 0.8rem;
+}
+
+li .record {
+  position: relative;
+  top: -0.2rem;
+  float: right;
+  margin-right: 2%;
+  /*line-height: 0.8rem;*/
+}
+
+li .score {
+  font-weight: normal;
+  font-size: 0.4rem;
+  color: #fff;
+  float: right;
+  margin-right: 0.2rem;
+  line-height: 1rem;
+  text-align: right;
+  line-height: 0.8rem;
+}
+
+li .score em {
+  font-size: 0.2rem;
+}
+
+.sumlt {
+  width: 45%;
+  float: left;
+  color: #E4FF00;
+}
+
+.sumrt {
+  width: 45%;
+  float: right;
+  color: #fff;
+}
+
+.summd {
+  width: 10%;
+  float: left;
+  height: 1rem;
+}
+
+.sumlt .sumCK {
+  width: 30%;
+  float: left;
+  margin-left: 30%;
+}
+
+.sumCK em {
+  font-size: 0.6rem;
+}
+
+.sumCK i {
+  font-size: 0.24rem;
+}
+
+.sumlt .flagContainer {
+  width: 10%;
+  float: left;
+  margin-left: 5%;
+}
+
+.flagContainer img {
+  width: 1rem;
+  height: 1rem;
+}
+
+.sumlt .mineUniteName {
+  width: 20%;
+  float: right;
+  text-align: left;
+  font-size: 0.5rem;
+  line-height: 1.4rem;
+}
+
+
+.sumrt .sumCK {
+  width: 30%;
+  float: left;
+  margin-left: 0%;
+}
+
+.sumrt em {
+  font-size: 0.6rem;
+}
+
+.sumrt i {
+  font-size: 0.24rem;
+}
+
+.sumrt .flagContainer {
+  width: 10%;
+  float: left;
+  margin-right: 5%;
+}
+
+.sumrt .mineUniteName {
+  width: 18%;
+  float: left;
+  text-align: left;
+  font-size: 0.5rem;
+  line-height: 1.4rem;
+  margin-left: 8%;
+}
+
+li.redUnite {
+  width: 100%;
+  float: left;
+  background: rgba(207, 17, 34, 0.75);
+  color: #fff;
+
+}
+
+li .CLEscore {
+  width: 2.6rem;
+  float: left;
+  font-size: 0.5rem;
+  margin-left: 5%;
+  line-height: 0.8rem;
+  text-align: left;
+}
+
+li .CLEscore em {
+  font-size: 0.3rem;
+}
+
+li .CLEscore span {
+  padding-left: 0.1rem;
+  font-size: 0.6rem;
+  /*font-size: 12px;*/
+}
+
+li .CKscore {
+  /*width: 2rem;*/
+  float: left;
+  font-size: 0.6rem;
+  margin-left: 5%;
+  line-height: 0.8rem;
+  text-align: left;
+}
+
+li .CKscore em {
+  font-size: 0.3rem;
+}
+
+li .record img {
+  width: 0.7rem;
+  float: left;
+}
+
+li.blueUnite {
+  width: 99%;
+  float: left;
+  background: rgba(24, 15, 170, 0.75);
+  color: #fff;
+}
+
+li.mvpli {
+  padding-top: 0.15rem;
+  padding-bottom: 0.15rem;
+}
+
+li.mvpli .CLEscore {
+  font-size: 0.62rem;
+}
+
+li.mvpli .CKscore {
+  font-size: 0.62rem;
+}
+
+li.mvpli .head {
+  width: 0.7rem;
+  height: 0.8rem;
+}
+
+li.mvpli .head img {
+  height: 0.7rem;
+  margin-top: -0.05rem;
+}
+
+li.mvpli .name {
+  font-size: 0.5rem;
+}
+
+li .king {
+  width: 0.4rem;
+  height: 0.2rem;
+  float: left;
+  position: relative;
+  top: -0.7rem;
+  left: -0.1rem;
+}
+
+li.mvpli .head img.king {
+  top: -1rem;
+}
+
+.tips {
+  position: absolute;
+  right: 3%;
+  top: 1rem;
+  font-size: 0.4rem;
+  color: #fff;
+}
+
+/deep/ .el-col {
+  min-height: 1rem;
+}
 </style>

tv/src/views/3pkRank.vue

@@ -1,851 +1,858 @@
 <template>
-    <div :class="pageStyle">
-        <Headside></Headside>
-        <div class="tips">
-            {{totalTime}}
-        </div>
-        <div class="rankContainer">
-            <div class="sumScore">
-                <div class="sumlt">
-                    <img src="../assets/img/3pkRank/rank1.svg" alt="" class="rankIcon" v-if="red.rank == 1">
-                    <img src="../assets/img/3pkRank/rank2.svg" alt="" class="rankIcon" v-if="red.rank == 2">
-                    <img src="../assets/img/3pkRank/rank3.svg" alt="" class="rankIcon" v-if="red.rank == 3">
-                    <span class="mineUniteName">
+  <div :class="pageStyle">
+    <Headside></Headside>
+    <div class="tips">
+      {{ totalTime }}
+    </div>
+    <div class="rankContainer">
+      <div class="sumScore">
+        <div class="sumlt">
+          <img src="../assets/img/3pkRank/rank1.svg" alt="" class="rankIcon" v-if="red.rank == 1">
+          <img src="../assets/img/3pkRank/rank2.svg" alt="" class="rankIcon" v-if="red.rank == 2">
+          <img src="../assets/img/3pkRank/rank3.svg" alt="" class="rankIcon" v-if="red.rank == 3">
+          <span class="mineUniteName">
                           <em>
                             红队
                         </em>
                         <span class="sumCK">
-                            <em>{{redSum}}</em><i>Ck</i>
+                            <em>{{ redSum }}</em><i>Ck</i>
                         </span>
                     </span>
-                    <span class="flagContainer">
+          <span class="flagContainer">
                             <img src="../assets/img/2pkRank/flag.svg" alt="" v-if="red.rank == 1">
                         </span>
-                </div>
-                <div class="pkIconContainer">
-                    <img src="../assets/img/3pkRank/pk.svg" alt="" class="pkIcon">
-                </div>
-                <div class="summd">
-                    <img src="../assets/img/3pkRank/rank1.svg" alt="" class="rankIcon" v-if="blue.rank == 1">
-                    <img src="../assets/img/3pkRank/rank2.svg" alt="" class="rankIcon" v-if="blue.rank == 2">
-                    <img src="../assets/img/3pkRank/rank3.svg" alt="" class="rankIcon" v-if="blue.rank == 3">
-                    <span class="mineUniteName">
+        </div>
+        <div class="pkIconContainer">
+          <img src="../assets/img/3pkRank/pk.svg" alt="" class="pkIcon">
+        </div>
+        <div class="summd">
+          <img src="../assets/img/3pkRank/rank1.svg" alt="" class="rankIcon" v-if="blue.rank == 1">
+          <img src="../assets/img/3pkRank/rank2.svg" alt="" class="rankIcon" v-if="blue.rank == 2">
+          <img src="../assets/img/3pkRank/rank3.svg" alt="" class="rankIcon" v-if="blue.rank == 3">
+          <span class="mineUniteName">
 
                          <em>
                             蓝队
                         </em>
 
                         <span class="sumCK">
-                            <em>{{blueSum}}</em><i>Ck</i>
+                            <em>{{ blueSum }}</em><i>Ck</i>
                         </span>
                     </span>
-                    <span class="flagContainer">
+          <span class="flagContainer">
                             <img src="../assets/img/2pkRank/flag.svg" alt="" v-if="blue.rank == 1">
                         </span>
-                </div>
-                <div class="pkIconContainer">
-                    <img src="../assets/img/3pkRank/pk.svg" alt="" class="pkIcon">
-                </div>
-                <div class="sumrt">
-                    <img src="../assets/img/3pkRank/rank1.svg" alt="" class="rankIcon" v-if="yellow.rank == 1">
-                    <img src="../assets/img/3pkRank/rank2.svg" alt="" class="rankIcon" v-if="yellow.rank == 2">
-                    <img src="../assets/img/3pkRank/rank3.svg" alt="" class="rankIcon" v-if="yellow.rank == 3">
-                    <span class="mineUniteName">
+        </div>
+        <div class="pkIconContainer">
+          <img src="../assets/img/3pkRank/pk.svg" alt="" class="pkIcon">
+        </div>
+        <div class="sumrt">
+          <img src="../assets/img/3pkRank/rank1.svg" alt="" class="rankIcon" v-if="yellow.rank == 1">
+          <img src="../assets/img/3pkRank/rank2.svg" alt="" class="rankIcon" v-if="yellow.rank == 2">
+          <img src="../assets/img/3pkRank/rank3.svg" alt="" class="rankIcon" v-if="yellow.rank == 3">
+          <span class="mineUniteName">
                         <em>
                             黄队
                         </em>
                         <span class="sumCK">
-                            <em>{{yellowSum}}</em><i>Ck</i>
+                            <em>{{ yellowSum }}</em><i>Ck</i>
                         </span>
                     </span>
-                    <span class="flagContainer">
+          <span class="flagContainer">
                             <img src="../assets/img/2pkRank/flag.svg" alt="" v-if="yellow.rank == 1">
                         </span>
-                </div>
+        </div>
+      </div>
+      <div class="list">
+        <div class="part">
+          <li v-for="(s,i) in students.redUnite" :class="[{'redUnite':true},{'mvpli':i == 0}]">
+            <div>
+              <div class="head">
+                <img :src="s.Head" class="headImg" v-if="s.Head">
+                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
+                <img src="../assets/img/2pkRank/king.svg" class="king" alt="" v-if="red.rank == 1">
+              </div>
+              <div class="name">
+                {{ s.Name }}
+              </div>
+              <div class="CLEscore">
+                <!--                                <em>Cal</em>-->
+                <!--                                {{s.Cle|fmtInt}}-->
+                <em>胜率</em>
+                <span>{{ s.success }}%</span>
+              </div>
+              <div class="CKscore">
+                <em>CK</em>
+                {{ s.Ck|fmtFloat }}
+              </div>
+              <div class="record">
+                <img src="../assets/img/3pkRank/redMvp.svg" class="mvpImg" alt=""
+                     v-if="i == 0">
+              </div>
             </div>
-            <div class="list">
-                <div class="part">
-                    <li v-for="(s,i) in students.redUnite" :class="[{'redUnite':true},{'mvpli':i == 0}]">
-                        <div>
-                            <div class="head">
-                                <img :src="s.Head" class="headImg" v-if="s.Head">
-                                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
-                                <img src="../assets/img/2pkRank/king.svg" class="king" alt="" v-if="red.rank == 1">
-                            </div>
-                            <div class="name">
-                                {{s.Name}}
-                            </div>
-                            <div class="CLEscore">
-                                <!--                                <em>Cal</em>-->
-                                <!--                                {{s.Cle|fmtInt}}-->
-                                <em>胜率</em>
-                                <span>{{s.success }}%</span>
-                            </div>
-                            <div class="CKscore">
-                                <em>CK</em>
-                                {{s.Ck|fmtFloat}}
-                            </div>
-                            <div class="record">
-                                <img src="../assets/img/3pkRank/redMvp.svg" class="mvpImg" alt=""
-                                     v-if="i == 0">
-                            </div>
-                        </div>
-                    </li>
-                </div>
-                <div class="part">
-                    <li v-for="(s,i) in students.blueUnite" :class="[{'blueUnite':true},{'mvpli':i == 0}]">
-                        <div>
-                            <div class="head">
-                                <img :src="s.Head" class="headImg" v-if="s.Head">
-                                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
-                                <img src="../assets/img/2pkRank/king.svg" class="king" alt="" v-if="blue.rank == 1">
-                            </div>
-                            <div class="name">
-                                {{s.Name}}
-                            </div>
-                            <div class="CLEscore">
-                                <em>胜率</em>
-                                <span>{{s.success }}%</span>
-                            </div>
-                            <div class="CKscore">
-                                <em>CK</em>
-                                {{s.Ck|fmtFloat}}
-                            </div>
-                            <div class="record">
-                                <img src="../assets/img/3pkRank/blueMvp.svg" class="mvpImg" alt=""
-                                     v-if="i == 0">
-                            </div>
-                        </div>
-                    </li>
-                </div>
-                <div class="part">
-                    <li v-for="(s,i) in students.yellowUnite" :class="[{'yellowUnite':true},{'mvpli':i == 0}]">
-                        <div>
-                            <div class="head">
-                                <img :src="s.Head" class="headImg" v-if="s.Head">
-                                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
-                                <img src="../assets/img/2pkRank/king.svg" class="king" alt="" v-if="yellow.rank == 1">
-                            </div>
-                            <div class="name">
-                                {{s.Name}}
-                            </div>
-                            <div class="CLEscore">
-                                <em>胜率</em>
-                                <span>{{s.success }}%</span>
-                            </div>
-                            <div class="CKscore">
-                                <em>CK</em>
-                                {{s.Ck|fmtFloat}}
-                            </div>
-                            <div class="record">
-                                <img src="../assets/img/3pkRank/yellowMvp.svg" class="mvpImg" alt=""
-                                     v-if="i == 0">
-                            </div>
-                        </div>
-                    </li>
-                </div>
+          </li>
+        </div>
+        <div class="part">
+          <li v-for="(s,i) in students.blueUnite" :class="[{'blueUnite':true},{'mvpli':i == 0}]">
+            <div>
+              <div class="head">
+                <img :src="s.Head" class="headImg" v-if="s.Head">
+                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
+                <img src="../assets/img/2pkRank/king.svg" class="king" alt="" v-if="blue.rank == 1">
+              </div>
+              <div class="name">
+                {{ s.Name }}
+              </div>
+              <div class="CLEscore">
+                <em>胜率</em>
+                <span>{{ s.success }}%</span>
+              </div>
+              <div class="CKscore">
+                <em>CK</em>
+                {{ s.Ck|fmtFloat }}
+              </div>
+              <div class="record">
+                <img src="../assets/img/3pkRank/blueMvp.svg" class="mvpImg" alt=""
+                     v-if="i == 0">
+              </div>
             </div>
-
-            <!--blue-->
-            <!--yellow-->
+          </li>
+        </div>
+        <div class="part">
+          <li v-for="(s,i) in students.yellowUnite" :class="[{'yellowUnite':true},{'mvpli':i == 0}]">
+            <div>
+              <div class="head">
+                <img :src="s.Head" class="headImg" v-if="s.Head">
+                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
+                <img src="../assets/img/2pkRank/king.svg" class="king" alt="" v-if="yellow.rank == 1">
+              </div>
+              <div class="name">
+                {{ s.Name }}
+              </div>
+              <div class="CLEscore">
+                <em>胜率</em>
+                <span>{{ s.success }}%</span>
+              </div>
+              <div class="CKscore">
+                <em>CK</em>
+                {{ s.Ck|fmtFloat }}
+              </div>
+              <div class="record">
+                <img src="../assets/img/3pkRank/yellowMvp.svg" class="mvpImg" alt=""
+                     v-if="i == 0">
+              </div>
+            </div>
+          </li>
         </div>
+      </div>
+
+      <!--blue-->
+      <!--yellow-->
     </div>
+  </div>
 </template>
 
 <script>
-    import Headside from '@/components/Headside'
-    import '../libs/rem';
-    import '../Global';
-    import {
-        ClassUserRank,
-        AddPkInfo
-    } from '@/api/getApiRes'
-
-    let qs = require('qs');
-    export default {
-        data() {
-            return {
-                eqSn: '30:9C:23:0C:8B:1E',
-                pageStyle: RandomBg(),
-                trueDate: true,//真实数据 true false
-                autoJump: true,//开启自动跳走
-                students: {
-                    redUnite: [],
-                    blueUnite: [],
-                    yellowUnite: [],
-                },
-                red: {
-                    rank: 0,
-                },
-                blue: {
-                    rank: 0,
-                },
-                yellow: {
-                    rank: 0,
-                },
-                rankTimer: null,
-                redSum: 0,
-                blueSum: 0,
-                yellowSum: 0,
-                totalTime: ''
-            }
-        },
-        mounted() {
-            let that = this;
-            if (this.trueDate) {
-                that.init();
-            } else {
-                let Rs = fakeNews(27, 3);
-                that.UniteBreak(Rs);
-            }
-
-        },
-        watch: {
-            '$route': function (val) {
-                let that = this;
-                if (val.path == '/3pkRank') {
-                    if (this.trueDate) {
-                        that.init();
-                    } else {
-                        let Rs = fakeNews(18, 3);
-                        that.UniteBreak(Rs);
-                    }
-
-                } else {
-                    clearInterval(this.autoJump);
-                    clearInterval(this.rankTimer);
-                }
-            }
-        },
-        beforeDestroy() {
-            clearInterval(this.rankTimer);
-            this.rankTimer = null;
-        },
-        methods: {
-            init() {
-                this.getClassUserRank();
-            },
-            jumpWait(totalTime) {
-                // 倒计时60秒自动关闭
-                let that = this;
-                let clock = window.setInterval(() => {
-                    totalTime--;
-                    that.totalTime = totalTime;
-                    if (parseInt(totalTime) <= 0) {
-                        // 前往等待页面
-                        that.$router.push({path: '/'});
-                        // 计时器回收
-                        clearInterval(clock);
-                    }
-                }, 1000)
-            },
-            // 分队展示
-            UniteBreak(Rs, PlanId) {
-                let that = this;
-                that.students.redUnite = [];
-                that.students.blueUnite = [];
-                that.students.yellowUnite = [];
-                console.log(!Rs);
-
-                Rs.map(function (item, t) {
-                    if (item.GroupNo == 1) {
-                        that.students.redUnite.push(item);
-                    }
-                    if (item.GroupNo == 2) {
-                        that.students.blueUnite.push(item);
-                    }
-                    if (item.GroupNo == 3) {
-                        that.students.yellowUnite.push(item);
-                    }
-                });
-
-
-                // 排序
-                that.students.redUnite = that.students.redUnite.sort(function (a, b) {
-                    // return b.Cle - a.Cle;
-                    return b.Ck - a.Ck;
-                });
-                that.students.blueUnite = that.students.blueUnite.sort(function (a, b) {
-                    // return b.Cle - a.Cle;
-                    return b.Ck - a.Ck;
-                });
-                that.students.yellowUnite = that.students.yellowUnite.sort(function (a, b) {
-                    // return b.Cle - a.Cle;
-                    return b.Ck - a.Ck;
-                });
-
-                that.calcSumCK(that.students, PlanId);
-
-            },
-            // 计算各队总分
-            calcSumCK(Rs, PlanId) {
-                let that = this;
-                let redSum = 0;
-                let blueSum = 0;
-                let yellowSum = 0;
-                Rs.redUnite.map(function (item, t) {
-                    redSum += parseFloat(item.Ck);
-                    that.successCalc(item);
-                });
-                Rs.blueUnite.map(function (item, t) {
-                    blueSum += parseFloat(item.Ck);
-                    that.successCalc(item);
-                });
-                Rs.yellowUnite.map(function (item, t) {
-                    yellowSum += parseFloat(item.Ck);
-                    that.successCalc(item);
-                });
-                that.redSum = redSum.toFixed(1);
-                that.blueSum = blueSum.toFixed(1);
-                that.yellowSum = yellowSum.toFixed(1);
-
-                // 获取人数 计算人均CK
-                // let redHuman = 0;
-                // let blueHuman = 0;
-                // let yellowHuman = 0;
-                // if (Rs.redUnite != '') {
-                //     redHuman = Rs.redUnite.length;
-                //     that.redSum = parseFloat(redSum / redHuman).toFixed(1);
-                // } else {
-                //     that.redSum = 0
-                // }
-                //
-                // if (Rs.blueUnite != '') {
-                //     blueHuman = Rs.blueUnite.length;
-                //     that.blueSum = parseFloat(blueSum / blueHuman).toFixed(1);
-                // } else {
-                //     that.blueSum = 0
-                // }
-                // if (Rs.yellowUnite != '') {
-                //     yellowHuman = Rs.yellowUnite.length;
-                //     that.yellowSum = parseFloat(yellowSum / yellowHuman).toFixed(1);
-                // } else {
-                //     that.yellowSum = 0
-                // }
-
-                let res = [
-                    {name: "red", val: that.redSum},
-                    {name: "blue", val: that.blueSum},
-                    {name: "yellow", val: that.yellowSum},
-                ];
-                that.getUnitRank(res, PlanId, Rs);
-            },
-            getWhoWin(redUnite, blueUnite, yellowUnite, groupNo) {
-                let that = this;
-                if (groupNo == 1) {
-                    redUnite.map(function (item, t) {
-                        that.successCalc(item, 1);
-                    });
-                    blueUnite.map(function (item, t) {
-                        that.successCalc(item, 0);
-                    });
-                    yellowUnite.map(function (item, t) {
-                        that.successCalc(item, 0);
-                    });
-                } else if (groupNo == 2) {
-                    redUnite.map(function (item, t) {
-                        that.successCalc(item, 0);
-                    });
-                    blueUnite.map(function (item, t) {
-                        that.successCalc(item, 1);
-                    });
-                    yellowUnite.map(function (item, t) {
-                        that.successCalc(item, 0);
-                    });
-                } else if (groupNo == 3) {
-                    redUnite.map(function (item, t) {
-                        that.successCalc(item, 0);
-                    });
-                    blueUnite.map(function (item, t) {
-                        that.successCalc(item, 0);
-                    });
-                    yellowUnite.map(function (item, t) {
-                        that.successCalc(item, 1);
-                    });
-                }
-            },
-            // 插入胜率结果
-            successCalc(item, Victorl) {
-                // item.success = '胜' + (parseInt(item.PkSucessnum) + parseInt(Victorl)) + ' 总:' + (parseInt(item.PkTotalnum) + 1) + '结' + (parseFloat(parseInt(item.PkSucessnum) + parseInt(Victorl)) / (parseInt(item.PkTotalnum) + 1)) * 100
-
-                if (parseInt(item.PkTotalnum + Victorl) == 0) {
-                    item.success = 0;
-                } else {
-                    let res = (parseFloat(parseInt(item.PkSucessnum) + parseInt(Victorl)) / (parseInt(item.PkTotalnum) + 1)) * 100;
-                    if (res >= 100) {
-                        item.success = 100;
-                    } else {
-                        item.success = res.toFixed(1);
-                    }
-                }
-            },
-            // 结果排序
-            getUnitRank(res, PlanId, Rs) {
-                let that = this;//这个that不要删
-                let sum = res.sort(function (a, b) {
-                    return b.val - a.val;
-                });
-                sum.map(function (item, i) {
-                    eval("that." + item['name'] + ".rank = i+1");
-                });
-
-                // 上报胜率结果
-
-                let groupNo = 0;
-                console.log('name' + sum[0].name);
-                switch (sum[0].name) {
-                    case "red":
-                        groupNo = 1;
-                        break;
-                    case "blue":
-                        groupNo = 2;
-                        break;
-                    case "yellow":
-                        groupNo = 3;
-                        break
-                }
-                // 上报本场胜率
-                that.PostAddPkInfo(PlanId, groupNo);
-                // 计算本场胜率
-                that.getWhoWin(Rs.redUnite, Rs.blueUnite, Rs.yellowUnite, groupNo);
-            },
-            getClassUserRank() {
-                let that = this;
-                let param = {
-                    eqSn: localStorage.eqSn
-                };
-                let postdata = qs.stringify(param);
-                ClassUserRank(postdata).then(res => {
-                    let json = res;
-                    that.students.redUnite = [];
-                    that.students.blueUnite = [];
-                    that.students.yellowUnite = [];
-                    if (json.Code == 0) {
-                        that.UniteBreak(json.Rs, json.Dp.PlanId);
-
-                        let totalTime = 40;
-                        let Studenlength = 0;
-                        if (json.Rs) {
-                            Studenlength = json.Rs.length;
-                        }
-                        // 根据人数多少显示停留时间
-                        if (Studenlength > 3) {
-                            totalTime = 60
-                        } else {
-                            totalTime = 40;
-                        }
-                        this.jumpWait(totalTime);
-
-                        // this.students.CkSort = json.Rs.CkSort;
-                        // this.students.CalSort = json.Rs.CalSort;
-                    } else {
-                        this.jumpWait(10);
-                        if (json.Code == '999') {
-                            // that.$router.push({path: '/'});
-                        } else {
-                            // 已出错
-                            that.$message.error(json.Memo);
-                        }
-                    }
-                })
-            },
-            // 竞技课程结果上传
-            PostAddPkInfo(dpId, groupNo) {
-                console.log(dpId, groupNo);
-                let that = this;
-                let param = {
-                    dpId: dpId,
-                    groupNo: groupNo,
-                };
-                let postdata = qs.stringify(param);
-                AddPkInfo(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        console.log('竞技课程结果上传成功dpid:' + dpId + ' groupNo:' + groupNo);
-                    } else {
-                        console.log(json.Memo);
-                        // that.$message.error(json.Memo);
-                    }
-                })
-            }
-        },
-        filters: {
-            fmtNum(val) {
-                if (val == 0) {
-                    return '--'
-                } else {
-                    if (parseInt(val) < 0) return 0;
-                    if (parseInt(val) > 0) return val
-                }
-            },
-            fmtFloat(val) {
-                if (val == 0) {
-                    return '0.0'
-                } else {
-                    return parseFloat(val).toFixed(1);
-                }
-            },
-            fmtInt(val) {
-                if (val == 0) {
-                    return '0'
-                } else {
-                    return parseInt(val);
-                    // return parseFloat(val).toFixed(3);
-                }
-            },
-        },
-        components: {
-            Headside
+import Headside from '@/components/Headside'
+import '../libs/rem';
+import '../Global';
+import {
+  ClassUserRank,
+  AddPkInfo
+} from '@/api/getApiRes'
+
+let qs = require('qs');
+export default {
+  data() {
+    return {
+      eqSn: '30:9C:23:0C:8B:1E',
+      pageStyle: RandomBg(),
+      trueDate: true,//真实数据 true false
+      autoJump: true,//开启自动跳走
+      students: {
+        redUnite: [],
+        blueUnite: [],
+        yellowUnite: [],
+      },
+      red: {
+        rank: 0,
+      },
+      blue: {
+        rank: 0,
+      },
+      yellow: {
+        rank: 0,
+      },
+      rankTimer: null,
+      redSum: 0,
+      blueSum: 0,
+      yellowSum: 0,
+      totalTime: ''
+    }
+  },
+  mounted() {
+    let that = this;
+    if (this.trueDate) {
+      that.init();
+    } else {
+      let Rs = fakeNews(27, 3);
+      that.UniteBreak(Rs);
+    }
+
+  },
+  watch: {
+    '$route': function (val) {
+      let that = this;
+      if (val.path == '/3pkRank') {
+        if (this.trueDate) {
+          that.init();
+        } else {
+          let Rs = fakeNews(18, 3);
+          that.UniteBreak(Rs);
         }
-    }
+
+      } else {
+        clearInterval(this.autoJump);
+        clearInterval(this.rankTimer);
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.rankTimer);
+    this.rankTimer = null;
+  },
+  methods: {
+    init() {
+      this.getClassUserRank();
+    },
+    jumpWait(totalTime) {
+      // 倒计时60秒自动关闭
+      let that = this;
+      let clock = window.setInterval(() => {
+        totalTime--;
+        that.totalTime = totalTime;
+        if (parseInt(totalTime) <= 0) {
+          // 前往等待页面
+          that.$router.push({path: '/'});
+          // 计时器回收
+          clearInterval(clock);
+        }
+      }, 1000)
+    },
+    // 分队展示
+    UniteBreak(Rs, PlanId) {
+      let that = this;
+      that.students.redUnite = [];
+      that.students.blueUnite = [];
+      that.students.yellowUnite = [];
+      console.log(!Rs);
+
+      Rs.map(function (item, t) {
+        if (item.GroupNo == 1) {
+          that.students.redUnite.push(item);
+        }
+        if (item.GroupNo == 2) {
+          that.students.blueUnite.push(item);
+        }
+        if (item.GroupNo == 3) {
+          that.students.yellowUnite.push(item);
+        }
+      });
+
+
+      // 排序
+      that.students.redUnite = that.students.redUnite.sort(function (a, b) {
+        // return b.Cle - a.Cle;
+        return b.Ck - a.Ck;
+      });
+      that.students.blueUnite = that.students.blueUnite.sort(function (a, b) {
+        // return b.Cle - a.Cle;
+        return b.Ck - a.Ck;
+      });
+      that.students.yellowUnite = that.students.yellowUnite.sort(function (a, b) {
+        // return b.Cle - a.Cle;
+        return b.Ck - a.Ck;
+      });
+
+      that.calcSumCK(that.students, PlanId);
+
+    },
+    // 计算各队总分
+    calcSumCK(Rs, PlanId) {
+      let that = this;
+      let redSum = 0;
+      let blueSum = 0;
+      let yellowSum = 0;
+      Rs.redUnite.map(function (item, t) {
+        redSum += parseFloat(item.Ck);
+        that.successCalc(item);
+      });
+      Rs.blueUnite.map(function (item, t) {
+        blueSum += parseFloat(item.Ck);
+        that.successCalc(item);
+      });
+      Rs.yellowUnite.map(function (item, t) {
+        yellowSum += parseFloat(item.Ck);
+        that.successCalc(item);
+      });
+      that.redSum = redSum.toFixed(1);
+      that.blueSum = blueSum.toFixed(1);
+      that.yellowSum = yellowSum.toFixed(1);
+
+      // 获取人数 计算人均CK
+      // let redHuman = 0;
+      // let blueHuman = 0;
+      // let yellowHuman = 0;
+      // if (Rs.redUnite != '') {
+      //     redHuman = Rs.redUnite.length;
+      //     that.redSum = parseFloat(redSum / redHuman).toFixed(1);
+      // } else {
+      //     that.redSum = 0
+      // }
+      //
+      // if (Rs.blueUnite != '') {
+      //     blueHuman = Rs.blueUnite.length;
+      //     that.blueSum = parseFloat(blueSum / blueHuman).toFixed(1);
+      // } else {
+      //     that.blueSum = 0
+      // }
+      // if (Rs.yellowUnite != '') {
+      //     yellowHuman = Rs.yellowUnite.length;
+      //     that.yellowSum = parseFloat(yellowSum / yellowHuman).toFixed(1);
+      // } else {
+      //     that.yellowSum = 0
+      // }
+
+      let res = [
+        {name: "red", val: that.redSum},
+        {name: "blue", val: that.blueSum},
+        {name: "yellow", val: that.yellowSum},
+      ];
+      that.getUnitRank(res, PlanId, Rs);
+    },
+    getWhoWin(redUnite, blueUnite, yellowUnite, groupNo) {
+      let that = this;
+      if (groupNo == 1) {
+        redUnite.map(function (item, t) {
+          that.successCalc(item, 1);
+        });
+        blueUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+        yellowUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+      } else if (groupNo == 2) {
+        redUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+        blueUnite.map(function (item, t) {
+          that.successCalc(item, 1);
+        });
+        yellowUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+      } else if (groupNo == 3) {
+        redUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+        blueUnite.map(function (item, t) {
+          that.successCalc(item, 0);
+        });
+        yellowUnite.map(function (item, t) {
+          that.successCalc(item, 1);
+        });
+      }
+    },
+    // 插入胜率结果
+    successCalc(item, Victorl) {
+      // item.success = '胜' + (parseInt(item.PkSucessnum) + parseInt(Victorl)) + ' 总:' + (parseInt(item.PkTotalnum) + 1) + '结' + (parseFloat(parseInt(item.PkSucessnum) + parseInt(Victorl)) / (parseInt(item.PkTotalnum) + 1)) * 100
+
+      if (parseInt(item.PkTotalnum + Victorl) == 0) {
+        item.success = 0;
+      } else {
+        let res = (parseFloat(parseInt(item.PkSucessnum) + parseInt(Victorl)) / (parseInt(item.PkTotalnum) + 1)) * 100;
+        if (res >= 100) {
+          item.success = 100;
+        } else {
+          item.success = res.toFixed(1);
+        }
+      }
+    },
+    // 结果排序
+    getUnitRank(res, PlanId, Rs) {
+      let that = this;//这个that不要删
+      let sum = res.sort(function (a, b) {
+        return b.val - a.val;
+      });
+      sum.map(function (item, i) {
+        eval("that." + item['name'] + ".rank = i+1");
+      });
+
+      // 上报胜率结果
+
+      let groupNo = 0;
+      console.log('name' + sum[0].name);
+      switch (sum[0].name) {
+        case "red":
+          groupNo = 1;
+          break;
+        case "blue":
+          groupNo = 2;
+          break;
+        case "yellow":
+          groupNo = 3;
+          break
+      }
+      // 上报本场胜率
+      that.PostAddPkInfo(PlanId, groupNo);
+      // 计算本场胜率
+      that.getWhoWin(Rs.redUnite, Rs.blueUnite, Rs.yellowUnite, groupNo);
+    },
+    getClassUserRank() {
+      let that = this;
+      let param = {
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      ClassUserRank(postdata).then(res => {
+        let json = res;
+        that.students.redUnite = [];
+        that.students.blueUnite = [];
+        that.students.yellowUnite = [];
+        if (json.Code == 0) {
+          that.UniteBreak(json.Rs, json.Dp.PlanId);
+
+          let totalTime = 40;
+          let Studenlength = 0;
+          if (json.Rs) {
+            Studenlength = json.Rs.length;
+          }
+          // 根据人数多少显示停留时间
+          if (Studenlength > 3) {
+            totalTime = 60
+          } else {
+            totalTime = 40;
+          }
+          this.jumpWait(totalTime);
+
+          // this.students.CkSort = json.Rs.CkSort;
+          // this.students.CalSort = json.Rs.CalSort;
+        } else {
+          this.jumpWait(10);
+          if (json.Code == '999') {
+            // that.$router.push({path: '/'});
+          } else {
+            // 已出错
+            that.$message.error(json.Memo);
+          }
+        }
+      })
+    },
+    // 竞技课程结果上传
+    PostAddPkInfo(dpId, groupNo) {
+      console.log(dpId, groupNo);
+      // 如果是演示版不上报比赛结果
+      if (runVersion == 'test') {
+        return false
+      }
+      let that = this;
+      let param = {
+        dpId: dpId,
+        groupNo: groupNo,
+      };
+      let postdata = qs.stringify(param);
+      AddPkInfo(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          console.log('竞技课程结果上传成功dpid:' + dpId + ' groupNo:' + groupNo);
+        } else {
+          console.log(json.Memo);
+          // that.$message.error(json.Memo);
+        }
+      })
+    }
+  },
+  filters: {
+    fmtNum(val) {
+      if (val == 0) {
+        return '--'
+      } else {
+        if (parseInt(val) < 0) return 0;
+        if (parseInt(val) > 0) return val
+      }
+    },
+    fmtFloat(val) {
+      if (val == 0) {
+        return '0.0'
+      } else {
+        return parseFloat(val).toFixed(1);
+      }
+    },
+    fmtInt(val) {
+      if (val == 0) {
+        return '0'
+      } else {
+        return parseInt(val);
+        // return parseFloat(val).toFixed(3);
+      }
+    },
+  },
+  components: {
+    Headside
+  }
+}
 </script>
 
 <style scoped>
-    @import "../assets/css/bg.css";
-
-    @font-face {
-        font-family: vista;
-        src: url('../assets/font/vista.otf');
-    }
-
-    * {
-        font-family: vista;
-    }
-
-    .pages {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        font-family: vista;
-        background: url("../assets/img/threepk/threepkbg.png");
-        background-position: top center;
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-    }
-
-    .rankContainer {
-        width: 96%;
-        overflow: visible;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .sumScore {
-        width: 90%;
-        overflow: visible;
-        display: block;
-        margin: 0 auto;
-        height: 1.4rem;
-        background-size: 100%;
-        background-position: top center;
-        background-repeat: no-repeat;
-    }
-
-    .pkIconContainer {
-        width: 20%;
-        float: left;
-    }
-
-    .pkIconContainer img {
-        width: 1.5rem;
-        height: 1.5rem;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    li {
-        width: 90%;
-        height: 0.8rem;
-        display: block;
-        margin: 0 auto;
-        overflow: hidden;
-        margin-bottom: 0.06rem;
-    }
-
-    li .rows {
-        width: 100%;
-        height: 0.8rem;
-        /*background: #ee191d;*/
-        border-radius: 250rem;
-        overflow: visible;
-        display: block;
-        margin: 0 auto;
-        margin-top: 0.15rem;
-    }
-
-    li .head {
-        width: 0.6rem;
-        height: 0.7rem;
-        float: left;
-        margin-left: 0.1rem;
-        margin-top: 0.07rem;
-        overflow: visible;
-    }
-
-    li .head .headImg {
-        width: 100%;
-        height: 0.6rem;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        border: 0.04rem solid #fff;
-        border-radius: 33rem;
-    }
-
-
-    li .name {
-        width: 1.2rem;
-        font-weight: normal;
-        font-size: 0.3rem;
-        text-align: left;
-        color: #fff;
-        float: left;
-        margin-left: 0.2rem;
-        line-height: 0.8rem;
-    }
-
-    li .record {
-        position: relative;
-        top: -0.2rem;
-        float: right;
-        margin-right: 2%;
-        /*line-height: 0.8rem;*/
-    }
-
-    li .score {
-        font-weight: normal;
-        font-size: 0.4rem;
-        color: #fff;
-        float: right;
-        margin-right: 0.2rem;
-        line-height: 1rem;
-        text-align: right;
-        line-height: 0.8rem;
-    }
-
-    li .score em {
-        font-size: 0.2rem;
-    }
-
-    .sumlt {
-        width: 20%;
-        float: left;
-        color: #fff;
-        height: 1.2rem;
-        background: url("../assets/img/3pkRank/redtit.svg");
-        background-size: 100%;
-        background-position: top center;
-        background-repeat: no-repeat;
-        margin-top: 0.5rem;
-        overflow: visible;
-    }
-
-    .summd {
-        width: 20%;
-        float: left;
-        color: #fff;
-        height: 1.2rem;
-        background: url("../assets/img/3pkRank/bluetit.svg");
-        background-size: 100%;
-        background-position: top center;
-        background-repeat: no-repeat;
-        margin-top: 0.5rem;
-        overflow: visible;
-    }
-
-    .sumrt {
-        width: 20%;
-        float: left;
-        color: #fff;
-        height: 1.2rem;
-        background: url("../assets/img/3pkRank/yellowtit.svg");
-        background-size: 100%;
-        background-position: top center;
-        background-repeat: no-repeat;
-        margin-top: 0.5rem;
-        overflow: visible;
-    }
-
-    .sumCK {
-        float: right;
-        font-size: 0.3rem;
-        text-align: right;
-    }
-
-    .mineUniteName {
-        width: 69%;
-        height: 0.6rem;
-        overflow: visible;
-        display: block;
-        margin: 0 auto;
-        text-align: left;
-        font-size: 0.35rem;
-    }
-    .mineUniteName em {
-        float: left;
-    }
-
-    .sumCK em {
-        font-size: 0.35rem;
-    }
-
-    .sumCK i {
-        float: right;
-        font-size: 0.24rem;
-        margin-top: 0.1rem;
-    }
-
-    .flagContainer {
-        position: relative;
-        top: -1rem;
-        float: none;
-        right: -1.6rem;
-        display: inline-block;
-    }
-
-    .flagContainer img {
-        width: 0.8rem;
-        height: 0.8rem;
-    }
-
-    .rankIcon {
-        position: relative;
-        float: left;
-        width: 0.3rem;
-        top: -0.1rem;
-        left: 0.3rem;
-    }
-
-    .list {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .list .part {
-        width: 33.333%;
-        height: 100%;
-        min-height: 1rem;
-        float: left;
-    }
-
-
-    li.redUnite {
-        width: 96%;
-        float: left;
-        background: rgba(207, 17, 34, 0.75);
-        color: #fff;
-        margin-bottom: 0.07rem;
-        overflow: hidden;
-    }
-
-    li.blueUnite {
-        width: 96%;
-        margin: 0 auto;
-        margin-bottom: 0.05rem;
-        background: rgba(24, 15, 170, 0.75);
-        color: #fff;
-    }
-
-    li.yellowUnite {
-        width: 96%;
-        float: right;
-        background: rgba(228, 196, 25, 0.75);
-        color: #fff;
-    }
-
-
-    li .CLEscore {
-        width: 1.65rem;
-        float: left;
-        font-size: 0.4rem;
-        margin-left: 1%;
-        line-height: 0.8rem;
-        text-align: left;
-    }
-
-    li .CLEscore em {
-        font-size: 0.3rem;
-        /*font-size: 0;*/
-    }
-
-    li .CLEscore span {
-        padding-left: 0.1rem;
-        font-size: 0.3rem;
-        /*font-size: 12px;*/
-    }
-
-    li .CKscore {
-        /*width: 1.6rem;*/
-        float: left;
-        font-size: 0.4rem;
-        margin-left: 2%;
-        line-height: 0.8rem;
-        text-align: left;
-    }
-
-    li .CKscore em {
-        font-size: 0.3rem;
-    }
-
-    li .record img {
-        width: 0.7rem;
-        float: left;
-    }
-
-    li.mvpli {
-        padding-top: 0.15rem;
-        padding-bottom: 0.15rem;
-    }
-
-    li.mvpli .CLEscore {
-        font-size: 0.4rem;
-    }
-
-    li.mvpli .CKscore {
-        font-size: 0.4rem;
-    }
-
-    li.mvpli .head {
-        width: 0.7rem;
-        height: 0.8rem;
-    }
-
-    li.mvpli .head img {
-        height: 0.7rem;
-        margin-top: -0.05rem;
-    }
-
-    li.mvpli .name {
-        font-size: 0.3rem;
-    }
-
-    li .king {
-        width: 0.4rem;
-        height: 0.2rem;
-        float: left;
-        position: relative;
-        top: -0.7rem;
-        left: -0.1rem;
-    }
-
-    li.mvpli .head img.king {
-        top: -1rem;
-    }
-
-    .tips {
-        position: absolute;
-        right: 3%;
-        top: 1rem;
-        font-size: 0.4rem;
-        color: #fff;
-    }
+@import "../assets/css/bg.css";
+
+@font-face {
+  font-family: vista;
+  src: url('../assets/font/vista.otf');
+}
+
+* {
+  font-family: vista;
+}
+
+.pages {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: vista;
+  background: url("../assets/img/threepk/threepkbg.png");
+  background-position: top center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  overflow-y: scroll;
+}
+
+.rankContainer {
+  width: 96%;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  overflow-y: scroll;
+}
+
+.sumScore {
+  width: 90%;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  height: 1.4rem;
+  background-size: 100%;
+  background-position: top center;
+  background-repeat: no-repeat;
+}
+
+.pkIconContainer {
+  width: 20%;
+  float: left;
+}
+
+.pkIconContainer img {
+  width: 1.5rem;
+  height: 1.5rem;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+li {
+  width: 90%;
+  height: 0.8rem;
+  display: block;
+  margin: 0 auto;
+  overflow: hidden;
+  margin-bottom: 0.06rem;
+}
+
+li .rows {
+  width: 100%;
+  height: 0.8rem;
+  /*background: #ee191d;*/
+  border-radius: 250rem;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  margin-top: 0.15rem;
+}
+
+li .head {
+  width: 0.6rem;
+  height: 0.7rem;
+  float: left;
+  margin-left: 0.1rem;
+  margin-top: 0.07rem;
+  overflow: visible;
+}
+
+li .head .headImg {
+  width: 100%;
+  height: 0.6rem;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  border: 0.04rem solid #fff;
+  border-radius: 33rem;
+}
+
+
+li .name {
+  width: 1.2rem;
+  font-weight: normal;
+  font-size: 0.3rem;
+  text-align: left;
+  color: #fff;
+  float: left;
+  margin-left: 0.2rem;
+  line-height: 0.8rem;
+}
+
+li .record {
+  position: relative;
+  top: -0.2rem;
+  float: right;
+  margin-right: 2%;
+  /*line-height: 0.8rem;*/
+}
+
+li .score {
+  font-weight: normal;
+  font-size: 0.4rem;
+  color: #fff;
+  float: right;
+  margin-right: 0.2rem;
+  line-height: 1rem;
+  text-align: right;
+  line-height: 0.8rem;
+}
+
+li .score em {
+  font-size: 0.2rem;
+}
+
+.sumlt {
+  width: 20%;
+  float: left;
+  color: #fff;
+  height: 1.2rem;
+  background: url("../assets/img/3pkRank/redtit.svg");
+  background-size: 100%;
+  background-position: top center;
+  background-repeat: no-repeat;
+  margin-top: 0.5rem;
+  overflow: visible;
+}
+
+.summd {
+  width: 20%;
+  float: left;
+  color: #fff;
+  height: 1.2rem;
+  background: url("../assets/img/3pkRank/bluetit.svg");
+  background-size: 100%;
+  background-position: top center;
+  background-repeat: no-repeat;
+  margin-top: 0.5rem;
+  overflow: visible;
+}
+
+.sumrt {
+  width: 20%;
+  float: left;
+  color: #fff;
+  height: 1.2rem;
+  background: url("../assets/img/3pkRank/yellowtit.svg");
+  background-size: 100%;
+  background-position: top center;
+  background-repeat: no-repeat;
+  margin-top: 0.5rem;
+  overflow: visible;
+}
+
+.sumCK {
+  float: right;
+  font-size: 0.3rem;
+  text-align: right;
+}
+
+.mineUniteName {
+  width: 69%;
+  height: 0.6rem;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  text-align: left;
+  font-size: 0.35rem;
+}
+
+.mineUniteName em {
+  float: left;
+}
+
+.sumCK em {
+  font-size: 0.35rem;
+}
+
+.sumCK i {
+  float: right;
+  font-size: 0.24rem;
+  margin-top: 0.1rem;
+}
+
+.flagContainer {
+  position: relative;
+  top: -1rem;
+  float: none;
+  right: -1.6rem;
+  display: inline-block;
+}
+
+.flagContainer img {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.rankIcon {
+  position: relative;
+  float: left;
+  width: 0.3rem;
+  top: -0.1rem;
+  left: 0.3rem;
+}
+
+.list {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.list .part {
+  width: 33.333%;
+  height: 100%;
+  min-height: 1rem;
+  float: left;
+}
+
+
+li.redUnite {
+  width: 96%;
+  float: left;
+  background: rgba(207, 17, 34, 0.75);
+  color: #fff;
+  margin-bottom: 0.07rem;
+  overflow: hidden;
+}
+
+li.blueUnite {
+  width: 96%;
+  margin: 0 auto;
+  margin-bottom: 0.05rem;
+  background: rgba(24, 15, 170, 0.75);
+  color: #fff;
+}
+
+li.yellowUnite {
+  width: 96%;
+  float: right;
+  background: rgba(228, 196, 25, 0.75);
+  color: #fff;
+}
+
+
+li .CLEscore {
+  width: 1.65rem;
+  float: left;
+  font-size: 0.4rem;
+  margin-left: 1%;
+  line-height: 0.8rem;
+  text-align: left;
+}
+
+li .CLEscore em {
+  font-size: 0.3rem;
+  /*font-size: 0;*/
+}
+
+li .CLEscore span {
+  padding-left: 0.1rem;
+  font-size: 0.3rem;
+  /*font-size: 12px;*/
+}
+
+li .CKscore {
+  /*width: 1.6rem;*/
+  float: left;
+  font-size: 0.4rem;
+  margin-left: 2%;
+  line-height: 0.8rem;
+  text-align: left;
+}
+
+li .CKscore em {
+  font-size: 0.3rem;
+}
+
+li .record img {
+  width: 0.7rem;
+  float: left;
+}
+
+li.mvpli {
+  padding-top: 0.15rem;
+  padding-bottom: 0.15rem;
+}
+
+li.mvpli .CLEscore {
+  font-size: 0.4rem;
+}
+
+li.mvpli .CKscore {
+  font-size: 0.4rem;
+}
+
+li.mvpli .head {
+  width: 0.7rem;
+  height: 0.8rem;
+}
+
+li.mvpli .head img {
+  height: 0.7rem;
+  margin-top: -0.05rem;
+}
+
+li.mvpli .name {
+  font-size: 0.3rem;
+}
+
+li .king {
+  width: 0.4rem;
+  height: 0.2rem;
+  float: left;
+  position: relative;
+  top: -0.7rem;
+  left: -0.1rem;
+}
+
+li.mvpli .head img.king {
+  top: -1rem;
+}
+
+.tips {
+  position: absolute;
+  right: 3%;
+  top: 1rem;
+  font-size: 0.4rem;
+  color: #fff;
+}
 </style>

tv/src/views/Index.vue

@@ -1,352 +1,357 @@
 <template>
-    <div :class="[{'IndexContainer':true},{'isPad':isPad}]">
-        <keep-alive>
-            <router-view></router-view>
-        </keep-alive>
-    </div>
+  <div :class="[{'IndexContainer':true}]" :style="{height:ClentHeight}">
+    <keep-alive>
+      <router-view></router-view>
+    </keep-alive>
+  </div>
 </template>
-<!--<script src="../../public/mui.js"></script>-->
 
 <script>
-    import {
-        QueryVueFramework,
-        DownloadVueFramework,
-        getCheckUpdate,
-        getUserList
-    } from '@/api/getApiRes'
-
-    import "../../public/mui.js"
-    import '../Global'
-
-    let qs = require('qs');
-
-    export default {
-        name: 'Home',
-        data() {
-            return {
-                autoUpdate: false,//自动升级
-                aSideState: false,
-                thisClick: 0,
-                tabwildState: 1,
-                handleTabsList: [{
-                    title: '系统首页',
-                    name: '1',
-                    clmurl: '/',
-                }],
-                editableTabsValue: '1',
-                curVersion: '1.0.1',
-                isPad:true// pad 展示版本
-            }
-        },
-        mounted() {
-            // alert('clientWidth:' + document.documentElement.clientWidth);
-            // alert('devicePixelRatio:' + window.devicePixelRatio);
-            //浏览器默认的
-            localStorage.eqSn = '30:9C:23:0C:8B:1E';
-            localStorage.version = '1.1.0';
-            this.getCurVersion();
-
-        },
-        methods: {
-            // 获取当前版本号
-            getCurVersion() {
-                let that = this;
-                //浏览器默认的
-                localStorage.eqSn = '30:9C:23:0C:8B:1E';
-                localStorage.version = '1.1.0';
-
-                if (window.plus) {
-                    plusReady();
-                } else {
-                    console.log('mui is not ready');
-                    // 调试时候关闭
-                    this.getServeIpAddress(localStorage.eqSn);
-                    // plusReady();
-                    document.addEventListener('plusready', plusReady, false);
-                }
-
-                function plusReady() {
-                    if (typeof plus == 'undefined') return false;
-                    // 获取本地应用资源版本号
-                    plus.runtime.getProperty(plus.runtime.appid, function (inf) {
-                        localStorage.version = inf.version;
-                        that.curVersion = inf.version;
-                    });
-
-                    //   获取手机UUID
-                    plus.device.getInfo({
-                        success: function (e) {
-                            let uuid = JSON.stringify(e.uuid).toString().substr(1);
-                            uuid = uuid.substring(0, uuid.length - 1);
-                            localStorage.eqSn = uuid;
-                            console.log('===== uuid =====:' + uuid);
-                            console.log('getDeviceInfo success: ' + JSON.stringify(e.uuid));
-                            // 正式版打开
-                            // 获取转发端口地址
-                            that.getServeIpAddress(e.uuid);
-
-                            // 公司测试机用公司版本升级
-                            if (uuid == "a1f2d679c1624d3a" || uuid == "8e501b0bde9ce600") {
-                                //首发版本 '1.1.0' 在线版不需要自动升级
-                                // 内测版自动升级
-                                let url = 'http://192.168.0.3:19096/v1/Sensors/QueryVueFramework';
-                                let param = {};
-                                let postdata = qs.stringify(param);
-                                axios.post(url, postdata).then(function (data) {
-                                    let json = data.data;
-                                    if (json.Code == 0) {
-                                        if (localStorage.version != json.VueFramework.Version) {
-                                            // 测试版本下载
-                                            let downUrl = "http://192.168.0.3:19096/v1/Sensors/DownloadVueFramework";
-                                            that.downWgt(downUrl);
-                                        }
-                                    } else {
-                                        console.log(json.Memo);
-                                    }
-                                }, function (response) {
-                                    console.info(response);
-                                })
-                            } else {
-                                console.log(223);
-                                // 正式版
-                                //开启自动升级
-                                that.checkUpdate();
-                            }
-                        },
-                        fail: function (e) {
-                            console.log('getDeviceInfo failed: ' + JSON.stringify(e));
-                        }
-                    });
-                }
-            },
-            // 是否有新版本
-            checkUpdate() {
-                let that = this;
-                let param = {};
-                let postdata = qs.stringify(param);
-                const h = this.$createElement;
-                QueryVueFramework(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        console.log('localStorage.version' + localStorage.version);
-                        if (localStorage.version != json.VueFramework.Version) {
-                            // 正式
-                            let url = "http://cal.beswell.com:85/v1/Sensors/DownloadVueFramework";
-                            this.downWgt(url);
-                            // that.downWgt(url, json.Version);
-                            // that.$notify({
-                            //     title: '升级提醒',
-                            //     message: h('i', {style: 'color: teal'}, '检测到新的版本，正在下载最新版本')
-                            // });
-                        }
-                    }
-                })
-            },
-            downWgt(url) {
-                let that = this;
-                plus.downloader.createDownload(url, {filename: "_doc/update/"}, function (d, status) {
-                    // plus.downloader.createDownload(url, {}, function (d, status) {
-                    if (status == 200) {
-                        console.log(d);
-                        console.log("下载wgt成功：" + d.filename);
-                        that.installWgt(d.filename); // 安装wgt包
-                    } else {
-                        console.log("下载wgt失败！");
-                        // plus.nativeUI.alert("下载wgt失败！");
-                    }
-                    plus.nativeUI.closeWaiting();
-                }).start();
-            },
-            installWgt(path) {
-                // plus.nativeUI.showWaiting("安装wgt文件...");
-                plus.runtime.install(path, {}, function () {
-                    plus.nativeUI.closeWaiting();
-                    console.log("安装wgt文件成功！");
-                    // plus.nativeUI.alert("应用资源更新完成！", function () {
-                    plus.runtime.restart();
-                    // });
-                }, function (e) {
-                    plus.nativeUI.closeWaiting();
-                    console.log("安装wgt文件失败[" + e.code + "]：" + e.message);
-                    // plus.nativeUI.alert("安装wgt文件失败[" + e.code + "]：" + e.message);
-                });
-            },
+import {
+  QueryVueFramework,
+  DownloadVueFramework,
+  getCheckUpdate,
+  getUserList
+} from '@/api/getApiRes'
+
+import "../../public/mui.js"
+import '../Global'
+
+let qs = require('qs');
+
+export default {
+  name: 'Home',
+  data() {
+    return {
+      autoUpdate: false,//自动升级
+      aSideState: false,
+      thisClick: 0,
+      tabwildState: 1,
+      handleTabsList: [{
+        title: '系统首页',
+        name: '1',
+        clmurl: '/',
+      }],
+      editableTabsValue: '1',
+      curVersion: '1.0.1',
+      isPad: true,// pad 展示版本
+      ClentHeight: document.documentElement.clientHeight +'px'
+    }
+  },
+  mounted() {
+    // alert('clientWidth:' + document.documentElement.clientWidth);
+    // alert('devicePixelRatio:' + window.devicePixelRatio);
+    //浏览器默认的
+    localStorage.eqSn = '30:9C:23:0C:8B:1E';
+    localStorage.version = '1.1.0';
+    this.getCurVersion();
+
+  },
+  methods: {
+    // 获取当前版本号
+    getCurVersion() {
+      let that = this;
+      //浏览器默认的
+      localStorage.eqSn = '30:9C:23:0C:8B:1E';
+      localStorage.version = '1.1.0';
+
+      if (window.plus) {
+        plusReady();
+      } else {
+        console.log('mui is not ready');
+        // 调试时候关闭
+        this.getServeIpAddress(localStorage.eqSn);
+        // plusReady();
+        document.addEventListener('plusready', plusReady, false);
+      }
+
+      function plusReady() {
+        if (typeof plus == 'undefined') return false;
+        // 获取本地应用资源版本号
+        plus.runtime.getProperty(plus.runtime.appid, function (inf) {
+          localStorage.version = inf.version;
+          that.curVersion = inf.version;
+        });
+
+        //   获取手机UUID
+        plus.device.getInfo({
+          success: function (e) {
+            let uuid = JSON.stringify(e.uuid).toString().substr(1);
+            uuid = uuid.substring(0, uuid.length - 1);
+            localStorage.eqSn = uuid;
+            console.log('===== uuid =====:' + uuid);
+            console.log('getDeviceInfo success: ' + JSON.stringify(e.uuid));
+            // 正式版打开
             // 获取转发端口地址
-            getServeIpAddress(eqsn) {
-                const that = this;
-                let url = '';
-                // 测试使用0.3心率系统
-                if (eqsn == 'a1f2d679c1624d3a' || eqsn == '30:9C:23:0C:8B:1E') {
-                    url = "http://192.168.0.3:19096/v1/Sensors/GetShopConfigParam";
+            that.getServeIpAddress(e.uuid);
+
+            // 公司测试机用公司版本升级
+            if (uuid == "a1f2d679c1624d3a" || uuid == "8e501b0bde9ce600") {
+              //首发版本 '1.1.0' 在线版不需要自动升级
+              // 内测版自动升级
+              let url = 'http://192.168.0.3:19096/v1/Sensors/QueryVueFramework';
+              let param = {};
+              let postdata = qs.stringify(param);
+              axios.post(url, postdata).then(function (data) {
+                let json = data.data;
+                if (json.Code == 0) {
+                  if (localStorage.version != json.VueFramework.Version) {
+                    // 测试版本下载
+                    console.log(332);
+                    let downUrl = "http://192.168.0.3:19096/v1/Sensors/DownloadVueFramework";
+                    that.downWgt(downUrl);
+                  }
                 } else {
-                    url = 'http://cal.beswell.com:85/v1/Sensors/GetShopConfigParam'
+                  console.log(json.Memo);
                 }
-                let param = {
-                    eqSn: eqsn
-                };
-                let postdata = qs.stringify(param);
-                axios.post(url, postdata).then(function (data) {
-                    let json = data.data;
-                    if (json.Code == 0) {
-                        headapi = json.Rs.DataServiceIP;
-                        // ipad演示使用61
-                        headapi = 'http://192.168.0.61:8080/';
-                    } else {
-                        headapi = 'http://192.168.0.10:8080/';
-                        console.log(json.memo);
-                        that.$message.error(json.memo);
-                    }
-                }, function (response) {
-                    console.info(response);
-                })
+              }, function (response) {
+                console.info(response);
+              })
+            } else {
+              console.log(223);
+              // 正式版
+              //开启自动升级
+              that.checkUpdate();
             }
-
-        },
-        components: {}
-    }
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style>
-    ul, li {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    .el-header {
-        padding: 0 !important;
-        height: 72px !important;
-    }
-
-    .shortElaside {
-        width: 140px !important;
-        overflow: hidden;
-        height: 100%;
-        float: left;
-    }
-
-    .lognElaside {
-        width: 256px !important;
-        overflow: hidden;
-        height: 100%;
-        float: left;
-    }
-
-    /deep/ .nav {
-        width: 60px;
-    }
-
-    .IndexContainer {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background: #F0F2F5;
-    }
-    /*演示版专供*/
-    .isPad {
-        height: 11.2rem;
-    }
-
-
-    .IndexContainer > .el-container {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .footer {
-        position: absolute;
-        bottom: 0px;
-        width: 100%;
-        padding: 10px;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        text-align: center;
-        text-indent: -30%;
-        font-size: 12px;
-        color: #BDBDBD;
-        background: #F0F2F5;
-        z-index: 222;
-    }
-
-    .el-main {
-        width: 100%;
-        height: 100%;
-        /*min-height: 800px;*/
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        overflow-y: hidden;
-        padding: 10px 20px;
-    }
-
-    /*ipad only*/
-    @media only screen and (max-width: 1366px) {
-        .lognElaside {
-            width: 70px !important;
-        }
-
-        .logoContainer img {
-            display: none !important;
-        }
-
-        .el-main {
-            padding: 3px !important;
-            overflow-y: scroll;
-        }
-
-        .el-main > .context {
-            /*height: 640px;*/
-            /*overflow-y: scroll;*/
-            padding: 6px !important;
+          },
+          fail: function (e) {
+            console.log('getDeviceInfo failed: ' + JSON.stringify(e));
+          }
+        });
+      }
+    },
+    // 是否有新版本
+    checkUpdate() {
+      let that = this;
+      let param = {};
+      let postdata = qs.stringify(param);
+      const h = this.$createElement;
+      QueryVueFramework(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          console.log('localStorage.version' + localStorage.version);
+          if (localStorage.version != json.VueFramework.Version) {
+            // 正式
+            let url = "http://cal.beswell.com:85/v1/Sensors/DownloadVueFramework";
+            this.downWgt(url);
+            // that.downWgt(url, json.Version);
+            // that.$notify({
+            //     title: '升级提醒',
+            //     message: h('i', {style: 'color: teal'}, '检测到新的版本，正在下载最新版本')
+            // });
+          }
         }
-
-        .table {
-            /*width: 950px;*/
-            /*overflow-x: scroll;*/
+      })
+    },
+    downWgt(url) {
+      let that = this;
+      plus.downloader.createDownload(url, {filename: "_doc/update/"}, function (d, status) {
+        // plus.downloader.createDownload(url, {}, function (d, status) {
+        if (status == 200) {
+          console.log(d);
+          console.log("下载wgt成功：" + d.filename);
+          that.installWgt(d.filename); // 安装wgt包
+        } else {
+          console.log("下载wgt失败！");
+          // plus.nativeUI.alert("下载wgt失败！");
         }
-
-        .el-dialog {
-            max-width: 960px;
-        }
-
-        .el-dialog__body {
-            padding: 3px;
-        }
-
-        .el-transfer__buttons {
-            width: 60px;
-            padding: 3px;
-        }
-
-        .el-transfer .el-button + .el-button {
-            float: right;
-        }
-
-        .el-container.is-vertical {
-            position: absolute;
-            left: 140px;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            height: 100%;
+        plus.nativeUI.closeWaiting();
+      }).start();
+    },
+    installWgt(path) {
+      // plus.nativeUI.showWaiting("安装wgt文件...");
+      plus.runtime.install(path, {}, function () {
+        plus.nativeUI.closeWaiting();
+        console.log("安装wgt文件成功！");
+        // plus.nativeUI.alert("应用资源更新完成！", function () {
+        plus.runtime.restart();
+        // });
+      }, function (e) {
+        plus.nativeUI.closeWaiting();
+        console.log("安装wgt文件失败[" + e.code + "]：" + e.message);
+        // plus.nativeUI.alert("安装wgt文件失败[" + e.code + "]：" + e.message);
+      });
+    },
+    // 获取转发端口地址
+    getServeIpAddress(eqsn) {
+      const that = this;
+      let url = '';
+      if (runVersion == 'test') {
+        headapi = "http://cal.beswell.com:85/DataTransfer/";
+        return false
+      }
+      // 测试使用0.3心率系统
+      if (eqsn == 'a1f2d679c1624d3a' || eqsn == '30:9C:23:0C:8B:1E') {
+        url = "http://192.168.0.3:19096/v1/Sensors/GetShopConfigParam";
+      } else {
+        url = 'http://cal.beswell.com:85/v1/Sensors/GetShopConfigParam'
+      }
+      let param = {
+        eqSn: eqsn
+      };
+      let postdata = qs.stringify(param);
+      axios.post(url, postdata).then(function (data) {
+        let json = data.data;
+        if (json.Code == 0) {
+          headapi = json.Rs.DataServiceIP;
+        } else {
+          headapi = 'http://192.168.0.10:8080/';
+          console.log(json.memo);
+          that.$message.error(json.memo);
         }
+      }, function (response) {
+        console.info(response);
+      })
+    }
 
-        .context {
-            border-radius: 12px;
-            height: 823px !important;
-            overflow-y: scroll;
-        }
+  },
+  components: {}
+}
+</script>
 
-        .el-dialog {
-            padding: 5px;
-            padding-bottom: 15px;
-        }
-    }
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.el-header {
+  padding: 0 !important;
+  height: 72px !important;
+}
+
+.shortElaside {
+  width: 140px !important;
+  overflow: hidden;
+  height: 100%;
+  float: left;
+}
+
+.lognElaside {
+  width: 256px !important;
+  overflow: hidden;
+  height: 100%;
+  float: left;
+}
+
+/deep/ .nav {
+  width: 60px;
+}
+
+.IndexContainer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #F0F2F5;
+  height: 100%;
+  overflow-y: scroll;
+}
+
+/*演示版专供*/
+.isPad {
+  height: 11.2rem;
+}
+
+.IndexContainer > .el-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  padding: 10px;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+  text-indent: -30%;
+  font-size: 12px;
+  color: #BDBDBD;
+  background: #F0F2F5;
+  z-index: 222;
+}
+
+.el-main {
+  width: 100%;
+  height: 100%;
+  /*min-height: 800px;*/
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  overflow-y: hidden;
+  padding: 10px 20px;
+}
+
+/*ipad only*/
+@media only screen and (max-width: 1366px) {
+  .lognElaside {
+    width: 70px !important;
+  }
+
+  .logoContainer img {
+    display: none !important;
+  }
+
+  .el-main {
+    padding: 3px !important;
+    overflow-y: scroll;
+  }
+
+  .el-main > .context {
+    /*height: 640px;*/
+    /*overflow-y: scroll;*/
+    padding: 6px !important;
+  }
+
+  .table {
+    /*width: 950px;*/
+    /*overflow-x: scroll;*/
+  }
+
+  .el-dialog {
+    max-width: 960px;
+  }
+
+  .el-dialog__body {
+    padding: 3px;
+  }
+
+  .el-transfer__buttons {
+    width: 60px;
+    padding: 3px;
+  }
+
+  .el-transfer .el-button + .el-button {
+    float: right;
+  }
+
+  .el-container.is-vertical {
+    position: absolute;
+    left: 140px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    height: 100%;
+  }
+
+  .context {
+    border-radius: 12px;
+    height: 823px !important;
+    overflow-y: scroll;
+  }
+
+  .el-dialog {
+    padding: 5px;
+    padding-bottom: 15px;
+  }
+}
 </style>

tv/src/views/Main.vue

@@ -1,14 +1,14 @@
 <template>
-    <div :class="pageStyle">
-        <Headside></Headside>
-        <div class="userList">
-            <ul>
-                <li v-for="(s,i) in students" :class="studentsClassName[i].name" v-show="students"
-                    v-if="students.length > 0">
-                    <div class="ltLi" v-if="students.length == 1"></div>
-                    <div class="centerLi">
-                        <div class="topLi">
-                            <div class="human">
+  <div :class="pageStyle">
+    <Headside></Headside>
+    <div class="userList">
+      <ul>
+        <li v-for="(s,i) in students" :class="studentsClassName[i].name" v-show="students"
+            v-if="students.length > 0">
+          <div class="ltLi" v-if="students.length == 1"></div>
+          <div class="centerLi">
+            <div class="topLi">
+              <div class="human">
                                 <span class="name">
                                     <div class="nameLt">
                                         <i class="el-icon-male" v-if="s.Sex == 1"></i>
@@ -19,2212 +19,2216 @@
                                         <power :cur-power="s.PowerPercent"></power>
                                     </div>
                                 </span>
-                                <div class="head">
-                                    <img :src="s.Head" alt="" v-if="s.Head">
-                                    <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head">
-
-                                    <!-- 生日快乐 -->
-                                    <div class="birth" v-if="s.IsBirthday == 1">
-                                        <img src="../assets/img/birth/birthCrow.png" class="birthCrow"/>
-                                        <img src="../assets/img/birth/birthText.png" class="birthText"/>
-                                    </div>
-                                    <!--私有心率带-->
-                                    <div class="isPrivate" v-if="s.IsPrivate == 1">
-                                        <i></i>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="cla">
-                                <em v-if="s.RealHr != 0">{{ s.ActivePercent |max100 }}</em>
-                                <em class="plus" v-if="s.ActivePercent == 0 && s.RealHr == 0">
-                                    ---
-                                </em>
-                            </div>
-                            <div class="lcla">
-                                <span>%</span>
-                            </div>
-                            <!--fastJump-->
-                            <!--heartJump-->
-                            <div>
-                                <div class="lhj">
-                                    <div :class="[{'heartJump':true}]">
+                <div class="head">
+                  <img :src="s.Head" alt="" v-if="s.Head">
+                  <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head">
+
+                  <!-- 生日快乐 -->
+                  <div class="birth" v-if="s.IsBirthday == 1">
+                    <img src="../assets/img/birth/birthCrow.png" class="birthCrow"/>
+                    <img src="../assets/img/birth/birthText.png" class="birthText"/>
+                  </div>
+                  <!--私有心率带-->
+                  <div class="isPrivate" v-if="s.IsPrivate == 1">
+                    <i></i>
+                  </div>
+                </div>
+              </div>
+              <div class="cla">
+                <em v-if="s.RealHr != 0">{{ s.ActivePercent |max100 }}</em>
+                <em class="plus" v-if="s.ActivePercent == 0 && s.RealHr == 0">
+                  ---
+                </em>
+              </div>
+              <div class="lcla">
+                <span>%</span>
+              </div>
+              <!--fastJump-->
+              <!--heartJump-->
+              <div>
+                <div class="lhj">
+                  <div :class="[{'heartJump':true}]">
                                         <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">
+                    <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">
                                         ---
                                     </span>
-                                    </div>
-                                </div>
-                                <div class="rhj">
-                                    <img src="../static/img/heart.svg" class=""/>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="bottomLi">
-                            <div class="btcla">
-                                <img src="../static/img/s1.svg"/>
-                                <span>{{ s.Cle |fmtInt }}</span>
-                            </div>
-                            <div class="btck">
-                                <img src="../static/img/s2.svg"/>
-                                <span>{{ s.PureCalorieNoVo2   |fmtInt }}</span>
-                            </div>
-                            <div class="step">
-                                <img src="../static/img/ck.svg"/>
-                                <span>{{ s.Ck  |fmtFloat }}</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="rtLi" v-if="students.length == 1"></div>
-                    <img src="../static/img/long.png" class="longIcon" v-if="students.length == 1"/>
-                </li>
-            </ul>
-        </div>
-        <!--图示-->
-        <levelIcon></levelIcon>
-        <newRecord :toper-info="toperInfo"></newRecord>
-        <newStudent :student-info="studentInfo"></newStudent>
+                  </div>
+                </div>
+                <div class="rhj">
+                  <img src="../static/img/heart.svg" class=""/>
+                </div>
+              </div>
+            </div>
+            <div class="bottomLi">
+              <div class="btcla">
+                <img src="../static/img/s1.svg"/>
+                <span>{{ s.Cle |fmtInt }}</span>
+              </div>
+              <div class="btck">
+                <img src="../static/img/s2.svg"/>
+                <span>{{ s.PureCalorieNoVo2   |fmtInt }}</span>
+              </div>
+              <div class="step">
+                <img src="../static/img/ck.svg"/>
+                <span>{{ s.Ck  |fmtFloat }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="rtLi" v-if="students.length == 1"></div>
+          <img src="../static/img/long.png" class="longIcon" v-if="students.length == 1"/>
+        </li>
+      </ul>
     </div>
+    <!--图示-->
+    <levelIcon></levelIcon>
+    <newRecord :toper-info="toperInfo"></newRecord>
+    <newStudent :student-info="studentInfo"></newStudent>
+  </div>
 </template>
 
 <script>
-    import Headside from '@/components/Headside'
-    import newRecord from '@/components/newRecord'
-    import newStudent from '@/components/newStudent'
-    import levelIcon from '@/components/levelIcon'
-    import power from '@/components/power'
-    import
-    {
-        getHello,
-        getClassStat,
-        getRecordBreak,
-        getNewUser
-    } from '@/api/getApiRes'
-
-    import '../libs/rem';
-    import '../Global'
-
-    let qs = require('qs');
-
-    export default {
-        data() {
-            return {
-                eqSn: '30:9C:23:0C:8B:1E',
-                pageStyle: RandomBg(),
-                trueDate: true,//真实数据 true false
-                times: 1,
-                thisClassName: '',
-                studentsClassName: [],
-                students: [],
-                single: [],
-                dialogVisible: false,
-                serachBtnStatus: false,
-                dialogMsg: '',
-                imgsrc: '../static/img/people/',
-                totalTime: 30,
-                studentTime: 15,
-                toperInfo: {
-                    dialogVisible: false,
-                    toper: {},
-                },
-                studentInfo: {
-                    dialogVisible: false,
-                    Rs: [],
-                    percent: 0
-                },
-                fakeEgg: {
-                    Rs: {
-                        "DuId": 37,
-                        "UserId": 0,
-                        "UserName": "郑伟",
-                        "Sex": 1,
-                        "Head": "https://img-operation.csdnimg.cn/csdn/silkroad/img/1604989753379.png",
-                        "Cle": 400,
-                        "CleTitle": "个人单次卡路里记录",
-                        "CleUnit": "千卡",
-                        "CkTitle": "个人单次CK记录",
-                        "Ck": 99.9,
-                        "CkUnit": "CK值",
-                    }
-                },
-                mainTimer: null,
-                timer2: null,
-            }
-        },
-        mounted() {
-            // this.$router.push({path: '/2pkRank'});
-
-            if (this.trueDate) {
-                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();
-            }
-        },
-        watch: {
-            '$route': function (val) {
-                if (val.path == '/main') {
-                    if (this.trueDate) {
-                        this.init();
-                    } else {
-                        this.students = fakeNews(2);
-                        this.giveClassName(this.students);
-                        // this.createEgg(this.students[5]);
-                    }
-                } else {
-                    clearInterval(this.mainTimer);
-                    clearInterval(this.timer2);
-                    clearInterval(this.timer3);
-                }
-            }
-        },
-        beforeDestroy() {
-            clearInterval(this.mainTimer);
-            clearInterval(this.timer2);
-            clearInterval(this.timer3);
-            this.mainTimer = null;
-            this.timer2 = null;
-            this.timer3 = null;
-        },
-        methods: {
-            init() {
-                // console.log(headTest);
-                this.GetgetUserList();
-                this.createEgg();
-                this.createNewStudent();
-                this.curgetClassStat();
-
-                this.mainTimer = setInterval(() => {
-                    this.GetgetUserList();
-                    this.curgetClassStat();
-                }, 1000);
-
-                this.timer2 = setInterval(() => {
-                    this.createEgg();
-                }, 31000);
-
-                this.timer3 = setInterval(() => {
-                    this.createNewStudent();
-                }, 6000);
-            },
-            alertInfo(info) {
-                alert(info);
-            },
-            // 启动一个成就彩蛋
-            createEgg() {
-                let that = this;
-                let param = {
-                    token: localStorage.token,
-                    eqSn: localStorage.eqSn
-                };
-                let postdata = qs.stringify(param);
-                getRecordBreak(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        // 欢迎新学生时不显示彩蛋
-                        if (that.studentInfo.dialogVisible == true) {
-                            console.log('正在显示新学生');
-                            return false
-                        } else {
-                            this.OpenEgg(json);
-                        }
-                    } else {
-                        // 并没有人破记录
-                        if (json.Code == 999) return false;
-                        if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
-                    }
-                })
-            },
-            // 欢迎新同学
-            createNewStudent() {
-                let that = this;
-                let param = {
-                    token: localStorage.token,
-                    eqSn: localStorage.eqSn
-                };
-                let postdata = qs.stringify(param);
-                getNewUser(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        console.log('来新生了');
-                        // 显示彩蛋时不欢迎新学生
-                        if (that.toperInfo.dialogVisible == true) {
-                            console.log('正在显示彩蛋');
-                            return false
-                        } else {
-                            console.log(json.Rs);
-                            that.OpenStudent(json.Rs);
-                            // OpenStudent(json.Rs,that);
-                        }
-                    } else {
-                        // 并没有人破记录
-                        if (json.Code == 999) return false;
-                        if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
-                    }
-                })
-            },
-            OpenEgg(msg) {
-                this.toperInfo.toper = msg.Rs;
-                this.toperInfo.dialogVisible = true;
-                // 倒计时5秒自动关闭
-                let that = this;
-                this.totalTime = 30;
-                let clock = window.setInterval(() => {
-                    this.totalTime--;
-                    if (parseInt(this.totalTime) < 0) {
-                        that.toperInfo.dialogVisible = false;
-                        clearInterval(clock);
-                    }
-                }, 1000)
-            },
-            OpenStudent(msg) {
-                let that = this;
-                that.studentInfo.Rs = msg;
-                that.studentInfo.dialogVisible = true;
-                this.studentInfo.percent = 0;
-                // 倒计时5秒自动关闭
-                this.studentTime = 15;
-                let clock = window.setInterval(() => {
-                    this.studentTime--;
-                    let num = (15 - this.studentTime) / 15 * 100;
-                    this.studentInfo.percent = parseInt(num) > 100 ? 100 : num;
-                    console.log('num' + num);
-                    if (parseInt(this.studentTime) <= 0) {
-                        that.studentInfo.dialogVisible = false;
-                        clearInterval(clock);
-                    }
-                }, 1000)
-            },
-            GetgetUserList() {
-                let that = this;
-                let param = {
-                    token: localStorage.token,
-                    eqSn: localStorage.eqSn
-                };
-                let postdata = qs.stringify(param);
-                getHello(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        that.students = json.Rs;
-                        that.giveClassName(json.Rs);
-                    } else {
-                        // 已下课
-                        if (json.Code == '999') {
-                            that.students = ""
-                        } else {
-                            // 已出错
-                            that.$message.error(json.Memo);
-                        }
-                    }
-                })
-            },
-            curgetClassStat() {
-                let that = this;
-                let param = {
-                    token: localStorage.token,
-                    eqSn: localStorage.eqSn
-                };
-                let postdata = qs.stringify(param);
-                getClassStat(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        // 没开课
-                        if (json.ClassOn == 0) {
-                            console.log("下课了");
-                            // 0: 下课 团课/私教 排名
-                            // 1：团课/私教 todo
-                            // 2：竞技课2PK
-                            // 3：竞技课threepk
-                            switch (parseInt(json.dp)) {
-                                case 0:
-                                    that.$router.push({path: '/rank'});
-                                    break;
-                                case 1:
-                                    that.$router.push({path: '/'});
-                                    break;
-                                case 2:
-                                    that.$router.push({path: '/pk'});
-                                    break;
-                                case 3:
-                                    that.$router.push({path: '/threepk'});
-                                    break;
-                            }
-                        }
-                    } else {
-                        console.log("已上课");
-                    }
-                })
-            },
-            // 给每一个数据加类名，一次遍历全部赋值
-            giveClassName(res) {
-                let that = this;
-                let numberClass = '';
-                let colorClass = '';
-                for (let i = 0; i < parseInt(res.length); i++) {
-                    switch (true) {
-                        case  parseInt(res.length) == 1:
-                            numberClass = 'max';
-                            break;
-                        case  parseInt(res.length) == 2:
-                            numberClass = 'two';
-                            break;
-                        case  parseInt(res.length) <= 4 && parseInt(res.length) > 2:
-                            numberClass = 'three';
-                            break;
-                        case  parseInt(res.length) <= 6 && parseInt(res.length) > 4:
-                            numberClass = 'six';
-                            break;
-                        case  parseInt(res.length) <= 9 && parseInt(res.length) > 6:
-                            numberClass = 'nine';
-                            break;
-                        case parseInt(res.length) <= 12 && parseInt(res.length) > 9:
-                            numberClass = 'ten';
-                            break;
-                        case parseInt(res.length) <= 15 && parseInt(res.length) > 12:
-                            numberClass = 'twelve';
-                            break;
-                        case parseInt(res.length) <= 20 && parseInt(res.length) > 15:
-                            numberClass = 'sixteen';
-                            break;
-                        case parseInt(res.length) <= 24 && parseInt(res.length) > 20:
-                            numberClass = 'twenty';
-                            break;
-                        case parseInt(res.length) <= 30 && parseInt(res.length) > 24:
-                            numberClass = 'twentyFour';
-                            break;
-                        case parseInt(res.length) >= 31:
-                            numberClass = 'twentyFour';
-                            break;
-                    }
-                    let per = parseInt(res[i].ActivePercent);
-                    switch (true) {
-                        case per >= 90:
-                            colorClass = 'red';
-                            break;
-                        case per <= 89 && per > 79:
-                            colorClass = 'brown';
-                            break;
-                        case per <= 79 && per > 69:
-                            colorClass = 'yellow';
-                            break;
-                        case per <= 69 && per > 54:
-                            colorClass = 'green';
-                            break;
-                        case per <= 54 && per > 39:
-                            colorClass = 'violet';
-                            break;
-                        case per <= 39:
-                            colorClass = 'blue';
-                            break
-                    }
-
-                    that.studentsClassName[i] = {
-                        name: numberClass + ' ' + colorClass,
-                    }
-                }
-            },
-        },
-        filters: {
-            fmtNum(val) {
-                if (val == 0) {
-                    return '--'
-                } else {
-                    if (parseInt(val) < 0) return 0;
-                    if (parseInt(val) > 0) return val
-                }
-            },
-            fmtFloat(val) {
-                if (val == 0) {
-                    return '0.0'
-                } else {
-                    return parseFloat(val).toFixed(1);
-                }
-            },
-            fmtInt(val) {
-                if (val == 0) {
-                    return '0'
-                } else {
-                    // return parseFloat(val).toFixed(2);
-                    return parseInt(val);
-                }
-            },
-            max100(val) {
-                if (val <= 100) {
-                    return val
-                } else {
-                    return 100
-                }
-            }
-        },
-        components: {
-            Headside, levelIcon, newRecord, newStudent, power
+import Headside from '@/components/Headside'
+import newRecord from '@/components/newRecord'
+import newStudent from '@/components/newStudent'
+import levelIcon from '@/components/levelIcon'
+import power from '@/components/power'
+import
+{
+  getHello,
+  getClassStat,
+  getRecordBreak,
+  getNewUser
+} from '@/api/getApiRes'
+
+import '../libs/rem';
+import '../Global'
+
+let qs = require('qs');
+
+export default {
+  data() {
+    return {
+      eqSn: '30:9C:23:0C:8B:1E',
+      pageStyle: RandomBg(),
+      trueDate: true,//真实数据 true false
+      times: 1,
+      thisClassName: '',
+      studentsClassName: [],
+      students: [],
+      single: [],
+      dialogVisible: false,
+      serachBtnStatus: false,
+      dialogMsg: '',
+      imgsrc: '../static/img/people/',
+      totalTime: 30,
+      studentTime: 15,
+      toperInfo: {
+        dialogVisible: false,
+        toper: {},
+      },
+      studentInfo: {
+        dialogVisible: false,
+        Rs: [],
+        percent: 0
+      },
+      fakeEgg: {
+        Rs: {
+          "DuId": 37,
+          "UserId": 0,
+          "UserName": "郑伟",
+          "Sex": 1,
+          "Head": "https://img-operation.csdnimg.cn/csdn/silkroad/img/1604989753379.png",
+          "Cle": 400,
+          "CleTitle": "个人单次卡路里记录",
+          "CleUnit": "千卡",
+          "CkTitle": "个人单次CK记录",
+          "Ck": 99.9,
+          "CkUnit": "CK值",
         }
-    }
-</script>
-
-<style scoped>
-    @import "../assets/css/bg.css";
-
-    @font-face {
-        font-family: vista;
-        src: url('../assets/font/vista.otf');
-    }
-
-    * {
-        font-family: vista;
-    }
-
-    .pages {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        font-family: vista;
-    }
-
-    ul, li {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    .blue .centerLi {
-        background: #028FE1;
-    }
-
-    .violet .centerLi {
-        background: #6D26FA;
-    }
-
-    .green .centerLi {
-        background: #059F00;
-    }
-
-    .yellow .centerLi {
-        background: #DFB200;
-    }
-
-    .brown .centerLi {
-        background: #EA8813;
-    }
-
-    .red .centerLi {
-        background: #CF1122;
-    }
-
-
-    .slowJump {
-        animation: mymove 3s infinite;
-        -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
-        animation-direction: alternate; /*轮流反向播放动画。*/
-        animation-timing-function: ease-in-out; /*动画的速度曲线*/
-        /* Safari 和 Chrome */
-        -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
-        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-    }
-
-    .normalJump {
-        animation: mymove 2s infinite;
-        -webkit-animation: mymove 2s infinite; /*Safari and Chrome*/
-        animation-direction: alternate; /*轮流反向播放动画。*/
-        animation-timing-function: ease-in-out; /*动画的速度曲线*/
-        /* Safari 和 Chrome */
-        -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
-        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-    }
-
-    .fastJump {
-        animation: mymove 1s infinite;
-        -webkit-animation: mymove 1s infinite; /*Safari and Chrome*/
-        animation-direction: alternate; /*轮流反向播放动画。*/
-        animation-timing-function: ease-in-out; /*动画的速度曲线*/
-        /* Safari 和 Chrome */
-        -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
-        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-    }
-
-    @keyframes mymove {
-        0% {
-            transform: scale(1); /*开始为原始大小*/
+      },
+      mainTimer: null,
+      timer2: null,
+    }
+  },
+  mounted() {
+    // this.$router.push({path: '/2pkRank'});
+
+    if (this.trueDate) {
+      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();
+    }
+  },
+  watch: {
+    '$route': function (val) {
+      if (val.path == '/main') {
+        if (this.trueDate) {
+          this.init();
+        } else {
+          this.students = fakeNews(2);
+          this.giveClassName(this.students);
+          // this.createEgg(this.students[5]);
         }
-        25% {
-            transform: scale(1.1); /*放大1.1倍*/
+      } else {
+        clearInterval(this.mainTimer);
+        clearInterval(this.timer2);
+        clearInterval(this.timer3);
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.mainTimer);
+    clearInterval(this.timer2);
+    clearInterval(this.timer3);
+    this.mainTimer = null;
+    this.timer2 = null;
+    this.timer3 = null;
+  },
+  methods: {
+    init() {
+      // console.log(headTest);
+      this.GetgetUserList();
+      this.createEgg();
+      this.createNewStudent();
+      this.curgetClassStat();
+
+      this.mainTimer = setInterval(() => {
+        this.GetgetUserList();
+        this.curgetClassStat();
+      }, 1000);
+
+      this.timer2 = setInterval(() => {
+        this.createEgg();
+      }, 31000);
+
+      this.timer3 = setInterval(() => {
+        this.createNewStudent();
+      }, 6000);
+    },
+    alertInfo(info) {
+      alert(info);
+    },
+    // 启动一个成就彩蛋
+    createEgg() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getRecordBreak(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 欢迎新学生时不显示彩蛋
+          if (that.studentInfo.dialogVisible == true) {
+            console.log('正在显示新学生');
+            return false
+          } else {
+            this.OpenEgg(json);
+          }
+        } else {
+          // 并没有人破记录
+          if (json.Code == 999) return false;
+          if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
         }
-        50% {
-            transform: scale(1);
+      })
+    },
+    // 欢迎新同学
+    createNewStudent() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getNewUser(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          console.log('来新生了');
+          // 显示彩蛋时不欢迎新学生
+          if (that.toperInfo.dialogVisible == true) {
+            console.log('正在显示彩蛋');
+            return false
+          } else {
+            console.log(json.Rs);
+            that.OpenStudent(json.Rs);
+            // OpenStudent(json.Rs,that);
+          }
+        } else {
+          // 并没有人破记录
+          if (json.Code == 999) return false;
+          if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
         }
-        75% {
-            transform: scale(1.1);
+      })
+    },
+    OpenEgg(msg) {
+      this.toperInfo.toper = msg.Rs;
+      this.toperInfo.dialogVisible = true;
+      // 倒计时5秒自动关闭
+      let that = this;
+      this.totalTime = 30;
+      let clock = window.setInterval(() => {
+        this.totalTime--;
+        if (parseInt(this.totalTime) < 0) {
+          that.toperInfo.dialogVisible = false;
+          clearInterval(clock);
         }
-
-    }
-
-    @-webkit-keyframes mymove /*Safari and Chrome*/
-    {
-        0% {
-            transform: scale(1); /*开始为原始大小*/
+      }, 1000)
+    },
+    OpenStudent(msg) {
+      let that = this;
+      that.studentInfo.Rs = msg;
+      that.studentInfo.dialogVisible = true;
+      this.studentInfo.percent = 0;
+      // 倒计时5秒自动关闭
+      this.studentTime = 15;
+      let clock = window.setInterval(() => {
+        this.studentTime--;
+        let num = (15 - this.studentTime) / 15 * 100;
+        this.studentInfo.percent = parseInt(num) > 100 ? 100 : num;
+        console.log('num' + num);
+        if (parseInt(this.studentTime) <= 0) {
+          that.studentInfo.dialogVisible = false;
+          clearInterval(clock);
         }
-        25% {
-            transform: scale(1.1); /*放大1.1倍*/
+      }, 1000)
+    },
+    GetgetUserList() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getHello(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          that.students = json.Rs;
+          that.giveClassName(json.Rs);
+        } else {
+          // 已下课
+          if (json.Code == '999') {
+            that.students = ""
+          } else {
+            // 已出错
+            that.$message.error(json.Memo);
+          }
         }
-        50% {
-            transform: scale(1);
+      })
+    },
+    curgetClassStat() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getClassStat(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 没开课
+          if (json.ClassOn == 0) {
+            console.log("下课了");
+            // 0: 下课 团课/私教 排名
+            // 1：团课/私教 todo
+            // 2：竞技课2PK
+            // 3：竞技课threepk
+            switch (parseInt(json.dp)) {
+              case 0:
+                that.$router.push({path: '/rank'});
+                break;
+              case 1:
+                that.$router.push({path: '/'});
+                break;
+              case 2:
+                that.$router.push({path: '/pk'});
+                break;
+              case 3:
+                that.$router.push({path: '/threepk'});
+                break;
+            }
+          }
+        } else {
+          console.log("已上课");
         }
-        75% {
-            transform: scale(1.1);
+      })
+    },
+    // 给每一个数据加类名，一次遍历全部赋值
+    giveClassName(res) {
+      let that = this;
+      let numberClass = '';
+      let colorClass = '';
+      for (let i = 0; i < parseInt(res.length); i++) {
+        switch (true) {
+          case  parseInt(res.length) == 1:
+            numberClass = 'max';
+            break;
+          case  parseInt(res.length) == 2:
+            numberClass = 'two';
+            break;
+          case  parseInt(res.length) <= 4 && parseInt(res.length) > 2:
+            numberClass = 'three';
+            break;
+          case  parseInt(res.length) <= 6 && parseInt(res.length) > 4:
+            numberClass = 'six';
+            break;
+          case  parseInt(res.length) <= 9 && parseInt(res.length) > 6:
+            numberClass = 'nine';
+            break;
+          case parseInt(res.length) <= 12 && parseInt(res.length) > 9:
+            numberClass = 'ten';
+            break;
+          case parseInt(res.length) <= 15 && parseInt(res.length) > 12:
+            numberClass = 'twelve';
+            break;
+          case parseInt(res.length) <= 20 && parseInt(res.length) > 15:
+            numberClass = 'sixteen';
+            break;
+          case parseInt(res.length) <= 24 && parseInt(res.length) > 20:
+            numberClass = 'twenty';
+            break;
+          case parseInt(res.length) <= 30 && parseInt(res.length) > 24:
+            numberClass = 'twentyFour';
+            break;
+          case parseInt(res.length) >= 31:
+            numberClass = 'twentyFour';
+            break;
+        }
+        let per = parseInt(res[i].ActivePercent);
+        switch (true) {
+          case per >= 90:
+            colorClass = 'red';
+            break;
+          case per <= 89 && per > 79:
+            colorClass = 'brown';
+            break;
+          case per <= 79 && per > 69:
+            colorClass = 'yellow';
+            break;
+          case per <= 69 && per > 54:
+            colorClass = 'green';
+            break;
+          case per <= 54 && per > 39:
+            colorClass = 'violet';
+            break;
+          case per <= 39:
+            colorClass = 'blue';
+            break
         }
-    }
-
-
-    /*userList*/
-
-    .userList {
-        width: 100%;
-        height: 76%;
-        overflow: hidden;
-        display: block;
-        margin: 0.1rem auto;
-    }
-
-    .userList ul {
-        /*width: 100%;*/
-        height: 98%;
-        overflow: hidden;
-        display: block;
-        margin: 0.1rem;
-        margin-bottom: 0;
-    }
-
-    .userList li {
-        display: block;
-        z-index: 666;
-    }
-
-    .centerLi {
-        width: 99.8%;
-        overflow: hidden;
-        float: left;
-        color: #fff;
-
-    }
-
-    .human img {
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        border: 2px solid #fff;
-        border-radius: 33rem;
-        /*box-shadow: 0px 0px 5px #fff;*/
-    }
-
-    s {
-        text-decoration: none;
-    }
-
-    em {
-        font-style: normal;
-    }
-
-    .cla {
-        position: relative;
-        float: left;
-        text-align: right;
-    }
-
-    .centerLi .human {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        padding: 0;
-    }
-
-    .human .name {
-        width: 100%;
-        display: block;
-        margin: 0 auto;
-        overflow: hidden;
-    }
-
-    .human .name div {
-        float: left;
-        width: 20%;
-        text-align: left;
-        text-indent: 0.1rem;
-    }
-
-    .human .name .nameMd {
-        width: 60%;
-        text-align: center;
-        text-indent: 0;
-    }
-
-    .lcla span {
-        position: relative;
-        float: left;
-    }
-
-    .cla em {
-        text-align: right;
-    }
-
-    .heartJump {
-        position: relative;
-    }
-
-    .lhj span {
-        position: relative;
-        text-align: right;
-        float: left;
-    }
-
-    .rhj {
-        float: right;
-    }
-
-    .rhj img {
-        position: relative;
-        float: right;
-    }
-
-
-    .bottomLi {
-        width: 96%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-top: 0.3rem;
-        font-weight: normal !important;
-        color: #fff;
-        text-align: left;
-        line-height: 0.7rem;
-    }
-
-    .bottomLi img {
-        float: left;
-        margin-left: 10%;
-    }
-
-    .bottomLi .btcla {
-        width: 33.333%;
-        float: left;
-    }
-
-    .bottomLi .btck {
-        width: 33.333%;
-        float: left;
-    }
-
-    .bottomLi .step {
-        width: 33.333%;
-        float: right;
-    }
-
-    .bottomLi span {
-        float: left;
-        text-align: left;
-    }
-
-    .topLi {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        overflow: hidden;
-    }
-
-    /*max*/
-    .max {
-        width: 12rem;
-        height: 5.6rem;
-        display: block;
-        margin: 0 auto;
-        margin-top: 1rem;
-    }
-
-    .max .centerLi {
-        width: 90%;
-        height: 100%;
-    }
-
-    .max .ltLi {
-        width: 5%;
-        height: 100%;
-        float: left;
-        background: url("../static/img/ltCube.png");
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-    }
-
-    .max .rtLi {
-        width: 5%;
-        height: 100%;
-        float: right;
-        background: url("../static/img/rtCube.png");
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-    }
-
-    .max .human .name {
-        font-size: 0.5rem;
-        height: 1rem;
-        line-height: 1rem;
-    }
-
-    .max .human img {
-        width: 3rem;
-        height: 3rem;
-    }
-
-    .max .cla {
-        width: 3rem;
-        height: 2rem;
-        top: -2.4rem;
-        left: 0;
-        font-size: 0.55rem;
-    }
-
-    .max .lcla span {
-        font-size: 0.7rem;
-        top: -2.4rem;
-        float: left;
-        left: 0;
-    }
-
-    .max .cla em {
-        font-size: 1.5rem;
-        left: 1rem;
-    }
-
-    .max .lhj span {
-        width: 3rem;
-        height: 2rem;
-        top: -2.4rem;
-        left: 3.4rem;
-        font-size: 1.5rem;
-    }
-
-    .max .rhj img {
-        width: 0.5rem;
-        top: -2.3rem;
-        right: 0.3rem;
-    }
-
-    .max .longIcon {
-        position: absolute;
-        width: 1.96rem;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        bottom: 2rem;
-        right: 3.5rem;
-    }
-
-    .max .topLi {
-        height: 4.5rem;
-    }
-
-    .max .bottomLi {
-        font-size: 0.5rem;
-        text-align: center;
-    }
-
-    .max .bottomLi .btck {
-        /*text-indent: 1.6rem;*/
-    }
-
-    .max .bottomLi img {
-        width: 0.5rem;
-        height: 0.5rem;
-        margin-top: 0.1rem;
-    }
-
-    .max .bottomLi span {
-        line-height: 0.8rem;
-        text-indent: 0.2rem;
-    }
-
-    .max .bottomLi .btck {
-        width: 29%;
-        padding-left: 1%;
-    }
-
-    .max .bottomLi .step {
-        width: 24%;
-        padding-right: 2%;
-    }
-
-    .max .cla em.plus {
-        position: relative;
-        left: -0.5rem
-    }
-
-    .max .lhj span.plus {
-        position: relative;
-        left: 2.75rem
-    }
-
-    .max .bottomLi .btcla img {
-        width: 0.5rem;
-        height: 0.5rem;
-    }
-
-    .max .bottomLi .btcla span {
-        text-indent: 0.1rem;
-    }
-
-    .max .bottomLi .btck span {
-        text-indent: 0.1rem;
-    }
-
-    .max .bottomLi .btck img {
-        width: 0.6rem;
-        height: 0.6rem;
-        margin-top: 0.05rem;
-    }
-
-
-    /*two*/
-    .two {
-        width: 49%;
-        height: 5.33rem;
-        float: left;
-        overflow: hidden;
-        margin-top: 6%
-    }
-
-    .two .centerLi {
-        /*border: 1px solid #fff;*/
-    }
-
-    .two:nth-child(2) {
-        float: right;
-    }
-
-    .two .human .name {
-        width: 100%;
-        height: 1rem;
-        font-size: 0.5rem;
-        line-height: 1rem;
-    }
-
-    .two .human img {
-        width: 2.8rem;
-        height: 2.8rem;
-    }
-
-    .two .cla {
-        width: 2.9rem;
-        height: 2rem;
-        top: -2.4rem;
-        left: 0;
-        font-size: 0.5rem;
-    }
-
-    .two .lcla span {
-        font-size: 0.55rem;
-        top: -2.3rem;
-        float: left;
-        left: 0;
-    }
-
-    .two .cla em {
-        font-size: 1.3rem;
-        left: 1rem;
-    }
-
-    .two .lhj span {
-        width: 3rem;
-        height: 2rem;
-        top: -2.4rem;
-        left: 2.4rem;
-        font-size: 1.2rem;
-    }
-
-    .two .rhj img {
-        width: 0.45rem;
-        top: -2.2rem;
-        right: 0.3rem;
-    }
-
-    .two .topLi {
-        height: 4.2rem;
-    }
-
-    .two .bottomLi {
-        font-size: 0.4rem;
-        text-align: center;
-    }
-
-    .two .bottomLi img {
-        width: 0.5rem;
-        height: 0.5rem;
-        margin-top: 0.1rem;
-    }
-
-    .two .bottomLi span {
-        line-height: 0.8rem;
-        text-indent: 0.2rem;
-    }
-
-    .two .bottomLi .btck {
-        width: 29%;
-        padding-left: 0%;
-    }
-
-    .two .bottomLi .step {
-        width: 26%;
-        padding-right: 1%;
-    }
-
-    .two .cla em.plus {
-        position: relative;
-        left: -0.5rem
-    }
-
-    .two .lhj span.plus {
-        position: relative;
-        left: 2.2rem
-    }
-
-    .two .bottomLi .btck img {
-        width: 0.6rem;
-        height: 0.6rem;
-        margin-top: 0.05rem;
-    }
-
-    .two .bottomLi .btck span {
-        text-indent: 0.1rem;
-    }
-
-
-    /*three*/
-    .three {
-        width: 50%;
-        height: 4rem;
-        float: left;
-        overflow: hidden;
-        margin-bottom: 1%
-    }
-
-    .three .centerLi {
-        width: 96%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        /*border: 1px solid #fff;*/
-        float: none;
-    }
-
-    .three .human .name {
-        width: 100%;
-        height: 0.8rem;
-        font-size: 0.4rem;
-        line-height: 0.8rem;
-    }
-
-    .three .human img {
-        width: 2.1rem;
-        height: 2.1rem;
-        margin-top: 0.1rem;
-    }
-
-    .three .cla {
-        width: 2.9rem;
-        height: 2rem;
-        top: -1.8rem;
-        left: 0;
-        font-size: 0.4rem;
-    }
-
-    .three .lcla span {
-        font-size: 0.45rem;
-        top: -1.8rem;
-        float: left;
-        left: 0;
-    }
-
-    .three .cla em {
-        font-size: 1.2rem;
-        left: 1rem;
-    }
-
-    .three .lhj span {
-        width: 3rem;
-        height: 2rem;
-        top: -1.70rem;
-        left: 2.3rem;
-        font-size: 1.1rem;
-    }
-
-    .three .rhj img {
-        width: 0.4rem;
-        top: -1.7rem;
-        right: 0.4rem;
-    }
-
-    .three .topLi {
-        /*height: 3.26rem;*/
-        height: 3.18rem;
-    }
-
-    .three .bottomLi {
-        font-size: 0.4rem;
-        margin-top: 0rem;
-        text-align: center;
-    }
-
-
-    .three .bottomLi img {
-        width: 0.5rem;
-        height: 0.5rem;
-        margin-top: 0.1rem;
-    }
-
-    .three .bottomLi span {
-        line-height: 0.8rem;
-        text-indent: 0.2rem;
-    }
-
-    .three .bottomLi .btck {
-        width: 30%;
-        padding-left: 2%;
-    }
-
-    .three .bottomLi .step {
-        width: 25%;
-        padding-right: 2%;
-    }
-
-    .three .cla em.plus {
-        position: relative;
-        left: -0.5rem
-    }
-
-    .three .lhj span.plus {
-        position: relative;
-        left: 1.9rem
-    }
-
-    .three .bottomLi .btck img {
-        width: 0.6rem;
-        height: 0.6rem;
-        margin-top: 0.05rem;
-    }
-
-    .three .bottomLi .btck span {
-        text-indent: 0.1rem;
-    }
-
-    /*six*/
-    .six {
-        width: 33.3333%;
-        height: 3.6rem;
-        float: left;
-        overflow: hidden;
-        margin-bottom: 1%
-    }
-
-    .six .centerLi {
-        width: 98%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        /*border: 1px solid #fff;*/
-        float: none;
-    }
-
-    .six .human .name {
-        width: 100%;
-        height: 0.8rem;
-        font-size: 0.35rem;
-        line-height: 0.8rem;
-    }
-
-    .six .human img {
-        width: 1.6rem;
-        height: 1.6rem;
-        margin-top: 0.1rem;
-    }
-
-    .six .cla {
-        width: 2rem;
-        height: 2rem;
-        top: -1.3rem;
-        left: 0;
-        font-size: 0.3rem;
-    }
-
-    .six .lcla span {
-        font-size: 0.4rem;
-        top: -1.4rem;
-        float: left;
-        left: -0.05rem;
-    }
-
-    .six .cla em {
-        font-size: 0.9rem;
-        left: 1rem;
-    }
-
-    .six .lhj span {
-        width: 2rem;
-        height: 2rem;
-        top: -1.3rem;
-        left: 1.6rem;
-        font-size: 0.85rem;
-    }
-
-    .six .rhj img {
-        width: 0.3rem;
-        top: -1.3rem;
-        right: 0.2rem;
-    }
-
-    .six .topLi {
-        height: 2.6rem;
-    }
-
-    .six .bottomLi {
-        width: 98%;
-        font-size: 0.325rem;
-        margin-top: 0.3rem;
-        text-align: center;
-    }
 
-    .six .bottomLi img {
-        width: 0.4rem;
-        margin-top: 0.15rem;
-    }
+        that.studentsClassName[i] = {
+          name: numberClass + ' ' + colorClass,
+        }
+      }
+    },
+  },
+  filters: {
+    fmtNum(val) {
+      if (val == 0) {
+        return '--'
+      } else {
+        if (parseInt(val) < 0) return 0;
+        if (parseInt(val) > 0) return val
+      }
+    },
+    fmtFloat(val) {
+      if (val == 0) {
+        return '0.0'
+      } else {
+        return parseFloat(val).toFixed(1);
+      }
+    },
+    fmtInt(val) {
+      if (val == 0) {
+        return '0'
+      } else {
+        // return parseFloat(val).toFixed(2);
+        return parseInt(val);
+      }
+    },
+    max100(val) {
+      if (val <= 100) {
+        return val
+      } else {
+        return 100
+      }
+    }
+  },
+  components: {
+    Headside, levelIcon, newRecord, newStudent, power
+  }
+}
+</script>
 
-    .six .bottomLi .btcla img {
-        width: 0.3rem;
-        /*margin-top: 0.1rem;*/
-    }
-
-    .six .bottomLi .btck img {
-        width: 0.4rem;
-        margin-top: 0.1rem;
-    }
-
-    .six .bottomLi span {
-        line-height: 0.8rem;
-        text-indent: 0.1rem;
-    }
-
-    .six .bottomLi .btcla {
-        width: 30%;
-    }
-
-    .six .bottomLi .btck {
-        width: 33%;
-        padding-left: 3%;
-    }
-
-    .six .bottomLi .step {
-        width: 28%;
-        padding-right: 0%;
-    }
-
-    .six .cla em.plus {
-        position: relative;
-        left: -0.3rem
-    }
-
-    .six .lhj span.plus {
-        position: relative;
-        left: 1.3rem
-    }
-
-    .six .bottomLi .btck img {
-        width: 0.5rem;
-        height: 0.5rem;
-        margin-top: 0.12rem;
-    }
-
-
-    /*nine*/
-    .nine {
-        width: 33.3333%;
-        height: 2.7rem;
-        float: left;
-        overflow: hidden;
-        margin-bottom: 0.1rem
-    }
-
-    .nine .centerLi {
-        width: 98%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        /*border: 1px solid #fff;*/
-        float: none;
-    }
-
-    .nine .human .name {
-        width: 100%;
-        height: 0.6rem;
-        font-size: 0.3rem;
-        line-height: 0.6rem;
-    }
-
-    .nine .human img {
-        width: 1.2rem;
-        height: 1.2rem;
-        margin-top: 0.1rem;
-    }
-
-    .nine .cla {
-        width: 1.9rem;
-        height: 2rem;
-        top: -1.1rem;
-        left: 0;
-        font-size: 0.25rem;
-    }
-
-    .nine .lcla span {
-        font-size: 0.35rem;
-        top: -1.1rem;
-        float: left;
-        left: 0.05rem;
-    }
-
-    .nine .cla em {
-        font-size: 0.7rem;
-        left: 1rem;
-    }
-
-    .nine .lhj span {
-        width: 1.9rem;
-        height: 2rem;
-        top: -1.1rem;
-        left: 1.6rem;
-        font-size: 0.7rem;
-    }
-
-    .nine .rhj img {
-        width: 0.25rem;
-        top: -1.0rem;
-        right: 0.4rem;
-    }
-
-    .nine .topLi {
-        height: 2rem;
-    }
-
-    .nine .bottomLi {
-        width: 98%;
-        font-size: 0.3rem;
-        margin-top: 0.05rem;
-        text-align: center;
-    }
-
-
-    .nine .bottomLi img {
-        width: 0.35rem;
-        height: 0.35rem;
-        margin-top: 0.2rem;
-    }
-
-    .nine .bottomLi span {
-        line-height: 0.8rem;
-        text-indent: 0.1rem;
-    }
-
-    .nine .bottomLi .btcla {
-        width: 30%;
-    }
-
-    .nine .bottomLi .btck {
-        width: 32%;
-        padding-left: 5%;
-    }
-
-    .nine .bottomLi .step {
-        width: 28%;
-        padding-right: 0%;
-    }
-
-    .nine .cla em.plus {
-        position: relative;
-        left: -0.3rem
-    }
-
-    .nine .lhj span.plus {
-        position: relative;
-        left: 1.3rem
-    }
-
-    .nine .bottomLi .btck img {
-        width: 0.45rem;
-        height: 0.45rem;
-        margin-top: 0.15rem;
-    }
-
-    /*ten*/
-    .ten {
-        width: 25%;
-        height: 2.6rem;
-        float: left;
-        overflow: hidden;
-        margin-bottom: 0.2rem
-    }
-
-    .ten .centerLi {
-        width: 98%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        /*border: 1px solid #fff;*/
-        float: none;
-    }
-
-    .ten .human .name {
-        width: 100%;
-        height: 0.5rem;
-        font-size: 0.3rem;
-        line-height: 0.55rem;
-        margin-bottom: 0.1rem;
-    }
-
-    .ten .human img {
-        width: 1.1rem;
-        height: 1.1rem;
-        margin-top: 0.2rem;
-    }
-
-    .ten .cla {
-        width: 1.4rem;
-        height: 1.5rem;
-        top: -0.95rem;
-        left: 0;
-        font-size: 0.2rem;
-    }
-
-    .ten .lcla span {
-        font-size: 0.3rem;
-        top: -0.95rem;
-        float: left;
-        left: -0rem;
-    }
-
-    .ten .cla em {
-        font-size: 0.6rem;
-        left: 0.5rem;
-    }
-
-    .ten .lhj span {
-        width: 1.4rem;
-        height: 2.1rem;
-        top: -0.9rem;
-        left: 1.4rem;
-        font-size: 0.6rem;
-    }
-
-    .ten .rhj img {
-        width: 0.2rem;
-        top: -0.9rem;
-        right: 0.15rem;
-    }
-
-    .ten .topLi {
-        height: 1.85rem;
-    }
-
-    .ten .bottomLi {
-        width: 98%;
-        font-size: 0.25rem;
-        margin-top: 0.1rem;
-        text-align: center;
-    }
-
-    .ten .bottomLi img {
-        width: 0.3rem;
-        height: 0.3rem;
-        margin-top: 0.25rem;
-    }
-
-    .ten .bottomLi span {
-        line-height: 0.8rem;
-        text-indent: 0.1rem;
-    }
-
-    .ten .bottomLi .btcla {
-        width: 30%;
-    }
-
-    .ten .bottomLi .btck {
-        width: 32%;
-        padding-left: 3%;
-    }
-
-    .ten .bottomLi .step {
-        width: 29%;
-        padding-right: 0%;
-    }
-
-    .ten .cla em.plus {
-        position: relative;
-        left: -0.3rem
-    }
-
-    .ten .lhj span.plus {
-        position: relative;
-        left: 1.2rem;
-        line-height: 0.75rem;
-    }
-
-    .ten .btck img {
-        width: 0.4rem;
-        height: 0.4rem;
-        margin-top: 0.18rem;
-    }
-
-    /*twelve*/
-    .twelve {
-        width: 20%;
-        height: 2.4rem;
-        float: left;
-        overflow: hidden;
-        margin-bottom: 0.3rem
-    }
-
-    .twelve .centerLi {
-        width: 98%;
-        height: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        /*border: 1px solid #fff;*/
-        float: none;
-    }
-
-    .twelve .human .name {
-        width: 100%;
-        height: 0.5rem;
-        font-size: 0.25rem;
-        line-height: 0.7rem;
-        margin-bottom: 0.2rem;
-    }
-
-    .twelve .human img {
-        width: 0.9rem;
-        height: 0.9rem;
-    }
-
-    .twelve .cla {
-        width: 1.2rem;
-        height: 1.2rem;
-        top: -0.8rem;
-        left: -0.1rem;
-        font-size: 0.2rem;
-    }
-
-    .twelve .lcla span {
-        font-size: 0.25rem;
-        top: -0.8rem;
-        float: left;
-        left: -0.07rem;
-    }
-
-    .twelve .cla em {
-        font-size: 0.5rem;
-        left: 0.5rem;
-    }
-
-    .twelve .lhj span {
-        width: 1.2rem;
-        height: 1.2rem;
-        top: -0.8rem;
-        left: 0.9rem;
-        font-size: 0.5rem;
-    }
-
-    .twelve .rhj img {
-        width: 0.18rem;
-        top: -0.75rem;
-        right: 0.15rem;
-    }
-
-    .twelve .topLi {
-        height: 1.65rem;
-    }
-
-    .twelve .bottomLi {
-        width: 98%;
-        font-size: 0.225rem;
-        margin-top: 0.1rem;
-        text-align: center;
-    }
-
-    .twelve .bottomLi img {
-        width: 0.25rem;
-        height: 0.25rem;
-        margin-top: 0.25rem;
-    }
-
-    .twelve .bottomLi span {
-        line-height: 0.8rem;
-        text-indent: 0.1rem;
-    }
-
-    .twelve .bottomLi .btcla {
-        width: 30%;
-    }
-
-    .twelve .bottomLi .btck {
-        width: 32%;
-        padding-left: 2%;
-    }
-
-    .twelve .bottomLi .step {
-        width: 27%;
-        padding-right: 1%;
-    }
-
-    .twelve .cla em.plus {
-        position: relative;
-        left: -0.2rem
-    }
-
-    .twelve .lhj span.plus {
-        position: relative;
-        left: 0.8rem
-    }
-
-    .twelve .btck img {
-        width: 0.3rem;
-        height: 0.3rem;
-    }
-
-    .twelve .btck img {
-        width: 0.35rem;
-        height: 0.35rem;
-        margin-top: 0.22rem;
-    }
-
-
-    /*sixteen*/
-    .sixteen {
-        width: 20%;
-        height: 1.95rem;
-        float: left;
-        overflow: hidden;
-        margin-bottom: 0.1rem
-    }
-
-    .sixteen .centerLi {
-        width: 98%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        /*border: 1px solid #fff;*/
-        float: none;
-    }
-
-    .sixteen .human .name {
-        width: 100%;
-        height: 0.4rem;
-        font-size: 0.22rem;
-        line-height: 0.45rem;
-        margin-top: 0.1rem;
-        margin-bottom: 0.1rem;
-
-    }
-
-    .sixteen .human img {
-        width: 0.75rem;
-        height: 0.75rem;
-    }
-
-    .sixteen .cla {
-        width: 1.2rem;
-        height: 1.4rem;
-        top: -0.7rem;
-        left: 0;
-        font-size: 0.15rem;
-    }
-
-    .sixteen .lcla span {
-        font-size: 0.275rem;
-        top: -0.7rem;
-        float: left;
-        left: -0rem;
-    }
-
-    .sixteen .cla em {
-        font-size: 0.5rem;
-        left: 0.2rem;
-    }
-
-    .sixteen .lhj span {
-        width: 1rem;
-        height: 1.8rem;
-        top: -0.7rem;
-        left: 1rem;
-        font-size: 0.5rem;
-    }
-
-    .sixteen .rhj img {
-        width: 0.17rem;
-        top: -0.65rem;
-        right: 0.15rem;
-    }
-
-    .sixteen .topLi {
-        height: 1.4rem;
-    }
-
-    .sixteen .bottomLi {
-        width: 98%;
-        font-size: 0.2rem;
-        margin-top: -0.05rem;
-        text-align: center;
-    }
-
-    .sixteen .bottomLi img {
-        width: 0.25rem;
-        height: 0.25rem;
-        margin-top: 0.25rem;
-    }
-
-    .sixteen .bottomLi span {
-        line-height: 0.8rem;
-        text-indent: 0.1rem;
-    }
-
-    .sixteen .bottomLi .btcla {
-        width: 30%;
-    }
-
-    .sixteen .bottomLi .btck {
-        width: 32%;
-        padding-left: 3%;
-    }
-
-    .sixteen .bottomLi .step {
-        width: 27%;
-        padding-right: 2%;
-        /*text-align: center;*/
-    }
-
-    .sixteen .cla em.plus {
-        position: relative;
-        left: -0.2rem
-    }
-
-    .sixteen .lhj span.plus {
-        position: relative;
-        left: 0.9rem
-    }
-
-    .sixteen .btck img {
-        width: 0.3rem;
-        height: 0.3rem;
-    }
-
-
-    /*twenty*/
-    .twenty {
-        width: 16.66667%;
-        height: 1.85rem;
-        float: left;
-        overflow: hidden;
-        margin-bottom: 0.1rem
-    }
-
-    .twenty .centerLi {
-        width: 98%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        /*border: 1px solid #fff;*/
-        float: none;
-    }
-
-    .twenty .human .name {
-        width: 100%;
-        height: 0.4rem;
-        font-size: 0.22rem;
-        line-height: 0.5rem;
-        margin-bottom: 0.1rem;
-    }
-
-    .twenty .human img {
-        width: 0.75rem;
-        height: 0.75rem;
-        margin-top: 0.15rem;
-    }
-
-    .twenty .cla {
-        width: 0.95rem;
-        height: 1.4rem;
-        top: -0.69rem;
-        left: 0;
-        font-size: 0.15rem;
-    }
-
-    .twenty .lcla span {
-        font-size: 0.225rem;
-        top: -0.65rem;
-        float: left;
-        left: 0rem;
-    }
-
-    .twenty .cla em {
-        font-size: 0.4rem;
-        left: 0.2rem;
-    }
-
-    .twenty .lhj span {
-        width: 0.85rem;
-        height: 2rem;
-        top: -0.65rem;
-        left: 0.9rem;
-        font-size: 0.4rem;
-    }
-
-    .twenty .rhj img {
-        width: 0.15rem;
-        top: -0.6rem;
-        right: 0.1rem;
-    }
-
-    .twenty .topLi {
-        height: 1.35rem;
-    }
-
-    .twenty .bottomLi {
-        width: 98%;
-        font-size: 0.2rem;
-        margin-top: -0.1rem;
-        text-align: center;
-    }
-
-    .twenty .bottomLi img {
-        width: 0.2rem;
-        height: 0.2rem;
-        margin-top: 0.275rem;
-    }
-
-    .twenty .bottomLi span {
-        line-height: 0.8rem;
-        text-indent: 0.05rem;
-    }
-
-    .twenty .bottomLi .btcla {
-        width: 30%;
-    }
-
-    .twenty .bottomLi .btck {
-        width: 32%;
-        padding-left: 3%;
-    }
-
-    .twenty .bottomLi .step {
-        width: 28%;
-        padding-right: 2%;
-    }
-
-    .twenty .cla em.plus {
-        position: relative;
-        left: -0.2rem
-    }
-
-    .twenty .lhj span.plus {
-        position: relative;
-        left: 0.8rem
-    }
-
-
-    /*twentyFour*/
-    .twentyFour {
-        width: 16.6667%;
-        height: 1.6rem;
-        float: left;
-        overflow: hidden;
-        margin-bottom: 0.1rem
-    }
-
-    .twentyFour .centerLi {
-        width: 96%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        /*border: 1px solid #fff;*/
-        /*border: 0.03rem solid rgba(255,255,255,0.1);*/
-        /*box-shadow:inset 0 0 6px rgba(0,0,0,0.4);*/
-        float: none;
-    }
-
-    .twentyFour .human .name {
-        width: 100%;
-        height: 0.4rem;
-        font-size: 0.2rem;
-        line-height: 0.4rem;
-    }
-
-    .twentyFour .human img {
-        width: 0.7rem;
-        height: 0.7rem;
-        margin-top: 0.05rem;
-    }
-
-    .twentyFour .cla {
-        width: 0.9rem;
-        height: 1.4rem;
-        top: -0.6rem;
-        left: 0;
-        font-size: 0.15rem;
-    }
-
-    .twentyFour .lcla span {
-        font-size: 0.2rem;
-        top: -0.65rem;
-        float: left;
-        left: -0rem;
-    }
-
-    .twentyFour .cla em {
-        font-size: 0.4rem;
-        left: 0.2rem;
-    }
-
-    .twentyFour .lhj span {
-        width: 0.75rem;
-        height: 2rem;
-        top: -0.57rem;
-        left: 1rem;
-        font-size: 0.4rem;
-    }
-
-    .twentyFour .rhj img {
-        width: 0.15rem;
-        top: -0.6rem;
-        right: 0.15rem;
-    }
-
-    .twentyFour .topLi {
-        height: 1.19rem;
-    }
-
-    .twentyFour .bottomLi {
-        width: 98%;
-        font-size: 0.17rem;
-        margin-top: 0rem;
-        text-align: center;
-    }
-
-    .twentyFour .bottomLi img {
-        width: 0.2rem;
-        height: 0.2rem;
-        margin-top: 0.15rem;
-    }
-
-    .twentyFour .bottomLi span {
-        line-height: 0.55rem;
-        text-indent: 0.05rem;
-    }
-
-    .twentyFour .bottomLi .btcla {
-        width: 30%;
-    }
-
-    .twentyFour .bottomLi .btck {
-        width: 32%;
-        padding-left: 2%;
-    }
-
-    .twentyFour .bottomLi .step {
-        width: 28%;
-        padding-right: 0%;
-    }
-
-    .twentyFour .cla em.plus {
-        position: relative;
-        left: -0.2rem
-    }
-
-    .twentyFour .lhj span.plus {
-        position: relative;
-        left: 0.8rem;
-        line-height: 0.45rem;
-    }
-
-    .twentyFour .btck img {
-        width: 0.25rem;
-        height: 0.25rem;
-        margin-top: 0.12rem;
-    }
-
-    .twentyFour .bottomLi .step img {
-        margin-top: 0.16rem;
-    }
-
-    .birth {
-        position: relative;
-        top: -3.3rem;
-        width: 40%;
-        height: 1px;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .birth img.birthCrow {
-        position: relative;
-        top: -0.1rem;
-        width: 1.2rem;
-        height: 0.7rem;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        border: none;
-    }
-
-    .birth img.birthText {
-        position: relative;
-        top: 1.8rem;
-        width: 1.8rem;
-        height: 0.8rem;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        border: none;
-    }
-
-    .two .birth img.birthCrow {
-        top: 0.1rem;
-    }
-
-    .three .birth img.birthCrow {
-        top: 0.8rem;
-    }
-
-    .six .birth {
-        top: -3.1rem;
-    }
-
-    .six .birth img.birthCrow {
-        width: 0.8rem;
-        height: 0.5rem;
-        top: 1.2rem;
-    }
-
-    .six .birth img.birthText {
-        top: 2rem;
-        width: 1.5rem;
-        height: 0.6rem;
-    }
-
-    .nine .birth {
-        top: -3.1rem;
-    }
-
-    .nine .birth img.birthCrow {
-        width: 0.8rem;
-        height: 0.5rem;
-        top: 1.6rem;
-    }
-
-    .nine .birth img.birthText {
-        top: 2.1rem;
-        width: 1.2rem;
-        height: 0.5rem;
-    }
-
-    .ten .birth {
-        top: -3.1rem;
-    }
-
-    .ten .birth img.birthCrow {
-        width: 0.8rem;
-        height: 0.5rem;
-        top: 1.6rem;
-    }
-
-    .ten .birth img.birthText {
-        top: 2.1rem;
-        width: 1.2rem;
-        height: 0.5rem;
-    }
-
-    .twelve .birth {
-        top: -3.1rem;
-    }
-
-    .twelve .birth img.birthCrow {
-        width: 0.6rem;
-        height: 0.3rem;
-        top: 2rem;
-    }
-
-    .twelve .birth img.birthText {
-        top: 2.4rem;
-        width: 1rem;
-        height: 0.4rem;
-    }
-
-    .sixteen .birth {
-        top: -3.1rem;
-    }
-
-    .sixteen .birth img.birthCrow {
-        width: 0.6rem;
-        height: 0.3rem;
-        top: 2.1rem;
-    }
-
-    .sixteen .birth img.birthText {
-        top: 2.45rem;
-        width: 1rem;
-        height: 0.4rem;
-    }
-
-    .twenty .birth {
-        top: -3.1rem;
-    }
-
-    .twenty .birth img.birthCrow {
-        width: 0.6rem;
-        height: 0.3rem;
-        top: 2.1rem;
-    }
-
-    .twenty .birth img.birthText {
-        top: 2.45rem;
-        width: 1rem;
-        height: 0.4rem;
-    }
-
-    .twentyFour .birth {
-        top: -3.1rem;
-    }
-
-    .twentyFour .birth img.birthCrow {
-        width: 0.6rem;
-        height: 0.3rem;
-        top: 2.2rem;
-    }
-
-    .twentyFour .birth img.birthText {
-        top: 2.5rem;
-        width: 0.8rem;
-        height: 0.3rem;
-    }
-
-    /*isPrivate*/
-    .isPrivate {
-        position: relative;
-        float: right;
-        top: -3.3rem;
-        width: 75%;
-        height: 1px;
-        display: block;
-        margin: 0 auto;
-        overflow: visible;
-    }
-
-    .isPrivate i {
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-top: 0.1rem;
-        width: 1rem !important;
-        height: 1rem !important;
-        border: none !important;
-        background: url("../static/img/privateSign.svg");
-        background-size: 100% 100%;
-        background-position: top center;
-    }
-
-    .two .isPrivate {
-        top: -3.1rem;
-    }
-
-    .three .isPrivate {
-        top: -2.4rem;
-        left: -0.1rem;
-    }
-
-    .six .isPrivate {
-        top: -1.9rem;
-    }
-
-    .six .isPrivate i {
-        width: 0.8rem !important;
-        height: 0.8rem !important;
-    }
-
-    .nine .isPrivate {
-        top: -1.4rem;
-        left: -0.1rem;
-    }
-
-    .nine .isPrivate i {
-        width: 0.6rem !important;
-        height: 0.6rem !important;
-    }
-
-    .ten .isPrivate {
-        top: -1.4rem;
-    }
-
-    .ten .isPrivate i {
-        width: 0.6rem !important;
-        height: 0.6rem !important;
-    }
-
-    .twelve .isPrivate {
-        top: -1.15rem;
-    }
-
-    .twelve .isPrivate i {
-        width: 0.5rem !important;
-        height: 0.5rem !important;
-    }
-
-    .sixteen .isPrivate {
-        top: -1rem;
-        left: -0.1rem;
-    }
-
-    .sixteen .isPrivate i {
-        width: 0.4rem !important;
-        height: 0.4rem !important;
-    }
-
-    .twenty .isPrivate {
-        top: -1rem;
-    }
-
-    .twenty .isPrivate i {
-        width: 0.4rem !important;
-        height: 0.4rem !important;
-    }
-
-    .twentyFour .isPrivate {
-        top: -0.92rem;
-    }
-
-    .twentyFour .isPrivate i {
-        width: 0.4rem !important;
-        height: 0.4rem !important;
-    }
+<style scoped>
+@import "../assets/css/bg.css";
+
+@font-face {
+  font-family: vista;
+  src: url('../assets/font/vista.otf');
+}
+
+* {
+  font-family: vista;
+}
+
+.pages {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: vista;
+  overflow-y: scroll;
+}
+
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.blue .centerLi {
+  background: #028FE1;
+}
+
+.violet .centerLi {
+  background: #6D26FA;
+}
+
+.green .centerLi {
+  background: #059F00;
+}
+
+.yellow .centerLi {
+  background: #DFB200;
+}
+
+.brown .centerLi {
+  background: #EA8813;
+}
+
+.red .centerLi {
+  background: #CF1122;
+}
+
+
+.slowJump {
+  animation: mymove 3s infinite;
+  -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
+  animation-direction: alternate; /*轮流反向播放动画。*/
+  animation-timing-function: ease-in-out; /*动画的速度曲线*/
+  /* Safari 和 Chrome */
+  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+}
+
+.normalJump {
+  animation: mymove 2s infinite;
+  -webkit-animation: mymove 2s infinite; /*Safari and Chrome*/
+  animation-direction: alternate; /*轮流反向播放动画。*/
+  animation-timing-function: ease-in-out; /*动画的速度曲线*/
+  /* Safari 和 Chrome */
+  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+}
+
+.fastJump {
+  animation: mymove 1s infinite;
+  -webkit-animation: mymove 1s infinite; /*Safari and Chrome*/
+  animation-direction: alternate; /*轮流反向播放动画。*/
+  animation-timing-function: ease-in-out; /*动画的速度曲线*/
+  /* Safari 和 Chrome */
+  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+}
+
+@keyframes mymove {
+  0% {
+    transform: scale(1); /*开始为原始大小*/
+  }
+  25% {
+    transform: scale(1.1); /*放大1.1倍*/
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.1);
+  }
+
+}
+
+@-webkit-keyframes mymove /*Safari and Chrome*/
+{
+  0% {
+    transform: scale(1); /*开始为原始大小*/
+  }
+  25% {
+    transform: scale(1.1); /*放大1.1倍*/
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.1);
+  }
+}
+
+
+/*userList*/
+
+.userList {
+  width: 100%;
+  /*min-height: 33%;*/
+  /*height: 76%;*/
+  overflow: hidden;
+  overflow-y: scroll;
+  display: block;
+  margin: 0.1rem auto;
+}
+
+.userList ul {
+  /*width: 100%;*/
+  height: 98%;
+  overflow: hidden;
+  display: block;
+  margin: 0.1rem;
+  margin-bottom: 0;
+  overflow-y: scroll;
+}
+
+.userList li {
+  display: block;
+  z-index: 666;
+}
+
+.centerLi {
+  width: 99.8%;
+  overflow: hidden;
+  float: left;
+  color: #fff;
+
+}
+
+.human img {
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  border: 2px solid #fff;
+  border-radius: 33rem;
+  /*box-shadow: 0px 0px 5px #fff;*/
+}
+
+s {
+  text-decoration: none;
+}
+
+em {
+  font-style: normal;
+}
+
+.cla {
+  position: relative;
+  float: left;
+  text-align: right;
+}
+
+.centerLi .human {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding: 0;
+}
+
+.human .name {
+  width: 100%;
+  display: block;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.human .name div {
+  float: left;
+  width: 20%;
+  text-align: left;
+  text-indent: 0.1rem;
+}
+
+.human .name .nameMd {
+  width: 60%;
+  text-align: center;
+  text-indent: 0;
+}
+
+.lcla span {
+  position: relative;
+  float: left;
+}
+
+.cla em {
+  text-align: right;
+}
+
+.heartJump {
+  position: relative;
+}
+
+.lhj span {
+  position: relative;
+  text-align: right;
+  float: left;
+}
+
+.rhj {
+  float: right;
+}
+
+.rhj img {
+  position: relative;
+  float: right;
+}
+
+
+.bottomLi {
+  width: 96%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-top: 0.3rem;
+  font-weight: normal !important;
+  color: #fff;
+  text-align: left;
+  line-height: 0.7rem;
+}
+
+.bottomLi img {
+  float: left;
+  margin-left: 10%;
+}
+
+.bottomLi .btcla {
+  width: 33.333%;
+  float: left;
+}
+
+.bottomLi .btck {
+  width: 33.333%;
+  float: left;
+}
+
+.bottomLi .step {
+  width: 33.333%;
+  float: right;
+}
+
+.bottomLi span {
+  float: left;
+  text-align: left;
+}
+
+.topLi {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+/*max*/
+.max {
+  width: 12rem;
+  height: 5.6rem;
+  display: block;
+  margin: 0 auto;
+  margin-top: 1rem;
+}
+
+.max .centerLi {
+  width: 90%;
+  height: 100%;
+}
+
+.max .ltLi {
+  width: 5%;
+  height: 100%;
+  float: left;
+  background: url("../static/img/ltCube.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.max .rtLi {
+  width: 5%;
+  height: 100%;
+  float: right;
+  background: url("../static/img/rtCube.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.max .human .name {
+  font-size: 0.5rem;
+  height: 1rem;
+  line-height: 1rem;
+}
+
+.max .human img {
+  width: 3rem;
+  height: 3rem;
+}
+
+.max .cla {
+  width: 3rem;
+  height: 2rem;
+  top: -2.4rem;
+  left: 0;
+  font-size: 0.55rem;
+}
+
+.max .lcla span {
+  font-size: 0.7rem;
+  top: -2.4rem;
+  float: left;
+  left: 0;
+}
+
+.max .cla em {
+  font-size: 1.5rem;
+  left: 1rem;
+}
+
+.max .lhj span {
+  width: 3rem;
+  height: 2rem;
+  top: -2.4rem;
+  left: 3.4rem;
+  font-size: 1.5rem;
+}
+
+.max .rhj img {
+  width: 0.5rem;
+  top: -2.3rem;
+  right: 0.3rem;
+}
+
+.max .longIcon {
+  position: absolute;
+  width: 1.96rem;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  bottom: 2rem;
+  right: 3.5rem;
+}
+
+.max .topLi {
+  height: 4.5rem;
+}
+
+.max .bottomLi {
+  font-size: 0.5rem;
+  text-align: center;
+}
+
+.max .bottomLi .btck {
+  /*text-indent: 1.6rem;*/
+}
+
+.max .bottomLi img {
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-top: 0.1rem;
+}
+
+.max .bottomLi span {
+  line-height: 0.8rem;
+  text-indent: 0.2rem;
+}
+
+.max .bottomLi .btck {
+  width: 29%;
+  padding-left: 1%;
+}
+
+.max .bottomLi .step {
+  width: 24%;
+  padding-right: 2%;
+}
+
+.max .cla em.plus {
+  position: relative;
+  left: -0.5rem
+}
+
+.max .lhj span.plus {
+  position: relative;
+  left: 2.75rem
+}
+
+.max .bottomLi .btcla img {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+.max .bottomLi .btcla span {
+  text-indent: 0.1rem;
+}
+
+.max .bottomLi .btck span {
+  text-indent: 0.1rem;
+}
+
+.max .bottomLi .btck img {
+  width: 0.6rem;
+  height: 0.6rem;
+  margin-top: 0.05rem;
+}
+
+
+/*two*/
+.two {
+  width: 49%;
+  height: 5.33rem;
+  float: left;
+  overflow: hidden;
+  margin-top: 6%
+}
+
+.two .centerLi {
+  /*border: 1px solid #fff;*/
+}
+
+.two:nth-child(2) {
+  float: right;
+}
+
+.two .human .name {
+  width: 100%;
+  height: 1rem;
+  font-size: 0.5rem;
+  line-height: 1rem;
+}
+
+.two .human img {
+  width: 2.8rem;
+  height: 2.8rem;
+}
+
+.two .cla {
+  width: 2.9rem;
+  height: 2rem;
+  top: -2.4rem;
+  left: 0;
+  font-size: 0.5rem;
+}
+
+.two .lcla span {
+  font-size: 0.55rem;
+  top: -2.3rem;
+  float: left;
+  left: 0;
+}
+
+.two .cla em {
+  font-size: 1.3rem;
+  left: 1rem;
+}
+
+.two .lhj span {
+  width: 3rem;
+  height: 2rem;
+  top: -2.4rem;
+  left: 2.4rem;
+  font-size: 1.2rem;
+}
+
+.two .rhj img {
+  width: 0.45rem;
+  top: -2.2rem;
+  right: 0.3rem;
+}
+
+.two .topLi {
+  height: 4.2rem;
+}
+
+.two .bottomLi {
+  font-size: 0.4rem;
+  text-align: center;
+}
+
+.two .bottomLi img {
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-top: 0.1rem;
+}
+
+.two .bottomLi span {
+  line-height: 0.8rem;
+  text-indent: 0.2rem;
+}
+
+.two .bottomLi .btck {
+  width: 29%;
+  padding-left: 0%;
+}
+
+.two .bottomLi .step {
+  width: 26%;
+  padding-right: 1%;
+}
+
+.two .cla em.plus {
+  position: relative;
+  left: -0.5rem
+}
+
+.two .lhj span.plus {
+  position: relative;
+  left: 2.2rem
+}
+
+.two .bottomLi .btck img {
+  width: 0.6rem;
+  height: 0.6rem;
+  margin-top: 0.05rem;
+}
+
+.two .bottomLi .btck span {
+  text-indent: 0.1rem;
+}
+
+
+/*three*/
+.three {
+  width: 50%;
+  height: 4rem;
+  float: left;
+  overflow: hidden;
+  margin-bottom: 1%
+}
+
+.three .centerLi {
+  width: 96%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  /*border: 1px solid #fff;*/
+  float: none;
+}
+
+.three .human .name {
+  width: 100%;
+  height: 0.8rem;
+  font-size: 0.4rem;
+  line-height: 0.8rem;
+}
+
+.three .human img {
+  width: 2.1rem;
+  height: 2.1rem;
+  margin-top: 0.1rem;
+}
+
+.three .cla {
+  width: 2.9rem;
+  height: 2rem;
+  top: -1.8rem;
+  left: 0;
+  font-size: 0.4rem;
+}
+
+.three .lcla span {
+  font-size: 0.45rem;
+  top: -1.8rem;
+  float: left;
+  left: 0;
+}
+
+.three .cla em {
+  font-size: 1.2rem;
+  left: 1rem;
+}
+
+.three .lhj span {
+  width: 3rem;
+  height: 2rem;
+  top: -1.70rem;
+  left: 2.3rem;
+  font-size: 1.1rem;
+}
+
+.three .rhj img {
+  width: 0.4rem;
+  top: -1.7rem;
+  right: 0.4rem;
+}
+
+.three .topLi {
+  /*height: 3.26rem;*/
+  height: 3.18rem;
+}
+
+.three .bottomLi {
+  font-size: 0.4rem;
+  margin-top: 0rem;
+  text-align: center;
+}
+
+
+.three .bottomLi img {
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-top: 0.1rem;
+}
+
+.three .bottomLi span {
+  line-height: 0.8rem;
+  text-indent: 0.2rem;
+}
+
+.three .bottomLi .btck {
+  width: 30%;
+  padding-left: 2%;
+}
+
+.three .bottomLi .step {
+  width: 25%;
+  padding-right: 2%;
+}
+
+.three .cla em.plus {
+  position: relative;
+  left: -0.5rem
+}
+
+.three .lhj span.plus {
+  position: relative;
+  left: 1.9rem
+}
+
+.three .bottomLi .btck img {
+  width: 0.6rem;
+  height: 0.6rem;
+  margin-top: 0.05rem;
+}
+
+.three .bottomLi .btck span {
+  text-indent: 0.1rem;
+}
+
+/*six*/
+.six {
+  width: 33.3333%;
+  height: 3.6rem;
+  float: left;
+  overflow: hidden;
+  margin-bottom: 1%
+}
+
+.six .centerLi {
+  width: 98%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  /*border: 1px solid #fff;*/
+  float: none;
+}
+
+.six .human .name {
+  width: 100%;
+  height: 0.8rem;
+  font-size: 0.35rem;
+  line-height: 0.8rem;
+}
+
+.six .human img {
+  width: 1.6rem;
+  height: 1.6rem;
+  margin-top: 0.1rem;
+}
+
+.six .cla {
+  width: 2rem;
+  height: 2rem;
+  top: -1.3rem;
+  left: 0;
+  font-size: 0.3rem;
+}
+
+.six .lcla span {
+  font-size: 0.4rem;
+  top: -1.4rem;
+  float: left;
+  left: -0.05rem;
+}
+
+.six .cla em {
+  font-size: 0.9rem;
+  left: 1rem;
+}
+
+.six .lhj span {
+  width: 2rem;
+  height: 2rem;
+  top: -1.3rem;
+  left: 1.6rem;
+  font-size: 0.85rem;
+}
+
+.six .rhj img {
+  width: 0.3rem;
+  top: -1.3rem;
+  right: 0.2rem;
+}
+
+.six .topLi {
+  height: 2.6rem;
+}
+
+.six .bottomLi {
+  width: 98%;
+  font-size: 0.325rem;
+  margin-top: 0.3rem;
+  text-align: center;
+}
+
+.six .bottomLi img {
+  width: 0.4rem;
+  margin-top: 0.15rem;
+}
+
+.six .bottomLi .btcla img {
+  width: 0.3rem;
+  /*margin-top: 0.1rem;*/
+}
+
+.six .bottomLi .btck img {
+  width: 0.4rem;
+  margin-top: 0.1rem;
+}
+
+.six .bottomLi span {
+  line-height: 0.8rem;
+  text-indent: 0.1rem;
+}
+
+.six .bottomLi .btcla {
+  width: 30%;
+}
+
+.six .bottomLi .btck {
+  width: 33%;
+  padding-left: 3%;
+}
+
+.six .bottomLi .step {
+  width: 28%;
+  padding-right: 0%;
+}
+
+.six .cla em.plus {
+  position: relative;
+  left: -0.3rem
+}
+
+.six .lhj span.plus {
+  position: relative;
+  left: 1.3rem
+}
+
+.six .bottomLi .btck img {
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-top: 0.12rem;
+}
+
+
+/*nine*/
+.nine {
+  width: 33.3333%;
+  height: 2.7rem;
+  float: left;
+  overflow: hidden;
+  margin-bottom: 0.1rem
+}
+
+.nine .centerLi {
+  width: 98%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  /*border: 1px solid #fff;*/
+  float: none;
+}
+
+.nine .human .name {
+  width: 100%;
+  height: 0.6rem;
+  font-size: 0.3rem;
+  line-height: 0.6rem;
+}
+
+.nine .human img {
+  width: 1.2rem;
+  height: 1.2rem;
+  margin-top: 0.1rem;
+}
+
+.nine .cla {
+  width: 1.9rem;
+  height: 2rem;
+  top: -1.1rem;
+  left: 0;
+  font-size: 0.25rem;
+}
+
+.nine .lcla span {
+  font-size: 0.35rem;
+  top: -1.1rem;
+  float: left;
+  left: 0.05rem;
+}
+
+.nine .cla em {
+  font-size: 0.7rem;
+  left: 1rem;
+}
+
+.nine .lhj span {
+  width: 1.9rem;
+  height: 2rem;
+  top: -1.1rem;
+  left: 1.6rem;
+  font-size: 0.7rem;
+}
+
+.nine .rhj img {
+  width: 0.25rem;
+  top: -1.0rem;
+  right: 0.4rem;
+}
+
+.nine .topLi {
+  height: 2rem;
+}
+
+.nine .bottomLi {
+  width: 98%;
+  font-size: 0.3rem;
+  margin-top: 0.05rem;
+  text-align: center;
+}
+
+
+.nine .bottomLi img {
+  width: 0.35rem;
+  height: 0.35rem;
+  margin-top: 0.2rem;
+}
+
+.nine .bottomLi span {
+  line-height: 0.8rem;
+  text-indent: 0.1rem;
+}
+
+.nine .bottomLi .btcla {
+  width: 30%;
+}
+
+.nine .bottomLi .btck {
+  width: 32%;
+  padding-left: 5%;
+}
+
+.nine .bottomLi .step {
+  width: 28%;
+  padding-right: 0%;
+}
+
+.nine .cla em.plus {
+  position: relative;
+  left: -0.3rem
+}
+
+.nine .lhj span.plus {
+  position: relative;
+  left: 1.3rem
+}
+
+.nine .bottomLi .btck img {
+  width: 0.45rem;
+  height: 0.45rem;
+  margin-top: 0.15rem;
+}
+
+/*ten*/
+.ten {
+  width: 25%;
+  height: 2.6rem;
+  float: left;
+  overflow: hidden;
+  margin-bottom: 0.2rem
+}
+
+.ten .centerLi {
+  width: 98%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  /*border: 1px solid #fff;*/
+  float: none;
+}
+
+.ten .human .name {
+  width: 100%;
+  height: 0.5rem;
+  font-size: 0.3rem;
+  line-height: 0.55rem;
+  margin-bottom: 0.1rem;
+}
+
+.ten .human img {
+  width: 1.1rem;
+  height: 1.1rem;
+  margin-top: 0.2rem;
+}
+
+.ten .cla {
+  width: 1.4rem;
+  height: 1.5rem;
+  top: -0.95rem;
+  left: 0;
+  font-size: 0.2rem;
+}
+
+.ten .lcla span {
+  font-size: 0.3rem;
+  top: -0.95rem;
+  float: left;
+  left: -0rem;
+}
+
+.ten .cla em {
+  font-size: 0.6rem;
+  left: 0.5rem;
+}
+
+.ten .lhj span {
+  width: 1.4rem;
+  height: 2.1rem;
+  top: -0.9rem;
+  left: 1.4rem;
+  font-size: 0.6rem;
+}
+
+.ten .rhj img {
+  width: 0.2rem;
+  top: -0.9rem;
+  right: 0.15rem;
+}
+
+.ten .topLi {
+  height: 1.85rem;
+}
+
+.ten .bottomLi {
+  width: 98%;
+  font-size: 0.25rem;
+  margin-top: 0.1rem;
+  text-align: center;
+}
+
+.ten .bottomLi img {
+  width: 0.3rem;
+  height: 0.3rem;
+  margin-top: 0.25rem;
+}
+
+.ten .bottomLi span {
+  line-height: 0.8rem;
+  text-indent: 0.1rem;
+}
+
+.ten .bottomLi .btcla {
+  width: 30%;
+}
+
+.ten .bottomLi .btck {
+  width: 32%;
+  padding-left: 3%;
+}
+
+.ten .bottomLi .step {
+  width: 29%;
+  padding-right: 0%;
+}
+
+.ten .cla em.plus {
+  position: relative;
+  left: -0.3rem
+}
+
+.ten .lhj span.plus {
+  position: relative;
+  left: 1.2rem;
+  line-height: 0.75rem;
+}
+
+.ten .btck img {
+  width: 0.4rem;
+  height: 0.4rem;
+  margin-top: 0.18rem;
+}
+
+/*twelve*/
+.twelve {
+  width: 20%;
+  height: 2.4rem;
+  float: left;
+  overflow: hidden;
+  margin-bottom: 0.3rem
+}
+
+.twelve .centerLi {
+  width: 98%;
+  height: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  /*border: 1px solid #fff;*/
+  float: none;
+}
+
+.twelve .human .name {
+  width: 100%;
+  height: 0.5rem;
+  font-size: 0.25rem;
+  line-height: 0.7rem;
+  margin-bottom: 0.2rem;
+}
+
+.twelve .human img {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.twelve .cla {
+  width: 1.2rem;
+  height: 1.2rem;
+  top: -0.8rem;
+  left: -0.1rem;
+  font-size: 0.2rem;
+}
+
+.twelve .lcla span {
+  font-size: 0.25rem;
+  top: -0.8rem;
+  float: left;
+  left: -0.07rem;
+}
+
+.twelve .cla em {
+  font-size: 0.5rem;
+  left: 0.5rem;
+}
+
+.twelve .lhj span {
+  width: 1.2rem;
+  height: 1.2rem;
+  top: -0.8rem;
+  left: 0.9rem;
+  font-size: 0.5rem;
+}
+
+.twelve .rhj img {
+  width: 0.18rem;
+  top: -0.75rem;
+  right: 0.15rem;
+}
+
+.twelve .topLi {
+  height: 1.65rem;
+}
+
+.twelve .bottomLi {
+  width: 98%;
+  font-size: 0.225rem;
+  margin-top: 0.1rem;
+  text-align: center;
+}
+
+.twelve .bottomLi img {
+  width: 0.25rem;
+  height: 0.25rem;
+  margin-top: 0.25rem;
+}
+
+.twelve .bottomLi span {
+  line-height: 0.8rem;
+  text-indent: 0.1rem;
+}
+
+.twelve .bottomLi .btcla {
+  width: 30%;
+}
+
+.twelve .bottomLi .btck {
+  width: 32%;
+  padding-left: 2%;
+}
+
+.twelve .bottomLi .step {
+  width: 27%;
+  padding-right: 1%;
+}
+
+.twelve .cla em.plus {
+  position: relative;
+  left: -0.2rem
+}
+
+.twelve .lhj span.plus {
+  position: relative;
+  left: 0.8rem
+}
+
+.twelve .btck img {
+  width: 0.3rem;
+  height: 0.3rem;
+}
+
+.twelve .btck img {
+  width: 0.35rem;
+  height: 0.35rem;
+  margin-top: 0.22rem;
+}
+
+
+/*sixteen*/
+.sixteen {
+  width: 20%;
+  height: 1.95rem;
+  float: left;
+  overflow: hidden;
+  margin-bottom: 0.1rem
+}
+
+.sixteen .centerLi {
+  width: 98%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  /*border: 1px solid #fff;*/
+  float: none;
+}
+
+.sixteen .human .name {
+  width: 100%;
+  height: 0.4rem;
+  font-size: 0.22rem;
+  line-height: 0.45rem;
+  margin-top: 0.1rem;
+  margin-bottom: 0.1rem;
+
+}
+
+.sixteen .human img {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.sixteen .cla {
+  width: 1.2rem;
+  height: 1.4rem;
+  top: -0.7rem;
+  left: 0;
+  font-size: 0.15rem;
+}
+
+.sixteen .lcla span {
+  font-size: 0.275rem;
+  top: -0.7rem;
+  float: left;
+  left: -0rem;
+}
+
+.sixteen .cla em {
+  font-size: 0.5rem;
+  left: 0.2rem;
+}
+
+.sixteen .lhj span {
+  width: 1rem;
+  height: 1.8rem;
+  top: -0.7rem;
+  left: 1rem;
+  font-size: 0.5rem;
+}
+
+.sixteen .rhj img {
+  width: 0.17rem;
+  top: -0.65rem;
+  right: 0.15rem;
+}
+
+.sixteen .topLi {
+  height: 1.4rem;
+}
+
+.sixteen .bottomLi {
+  width: 98%;
+  font-size: 0.2rem;
+  margin-top: -0.05rem;
+  text-align: center;
+}
+
+.sixteen .bottomLi img {
+  width: 0.25rem;
+  height: 0.25rem;
+  margin-top: 0.25rem;
+}
+
+.sixteen .bottomLi span {
+  line-height: 0.8rem;
+  text-indent: 0.1rem;
+}
+
+.sixteen .bottomLi .btcla {
+  width: 30%;
+}
+
+.sixteen .bottomLi .btck {
+  width: 32%;
+  padding-left: 3%;
+}
+
+.sixteen .bottomLi .step {
+  width: 27%;
+  padding-right: 2%;
+  /*text-align: center;*/
+}
+
+.sixteen .cla em.plus {
+  position: relative;
+  left: -0.2rem
+}
+
+.sixteen .lhj span.plus {
+  position: relative;
+  left: 0.9rem
+}
+
+.sixteen .btck img {
+  width: 0.3rem;
+  height: 0.3rem;
+}
+
+
+/*twenty*/
+.twenty {
+  width: 16.66667%;
+  height: 1.85rem;
+  float: left;
+  overflow: hidden;
+  margin-bottom: 0.1rem
+}
+
+.twenty .centerLi {
+  width: 98%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  /*border: 1px solid #fff;*/
+  float: none;
+}
+
+.twenty .human .name {
+  width: 100%;
+  height: 0.4rem;
+  font-size: 0.22rem;
+  line-height: 0.5rem;
+  margin-bottom: 0.1rem;
+}
+
+.twenty .human img {
+  width: 0.75rem;
+  height: 0.75rem;
+  margin-top: 0.15rem;
+}
+
+.twenty .cla {
+  width: 0.95rem;
+  height: 1.4rem;
+  top: -0.69rem;
+  left: 0;
+  font-size: 0.15rem;
+}
+
+.twenty .lcla span {
+  font-size: 0.225rem;
+  top: -0.65rem;
+  float: left;
+  left: 0rem;
+}
+
+.twenty .cla em {
+  font-size: 0.4rem;
+  left: 0.2rem;
+}
+
+.twenty .lhj span {
+  width: 0.85rem;
+  height: 2rem;
+  top: -0.65rem;
+  left: 0.9rem;
+  font-size: 0.4rem;
+}
+
+.twenty .rhj img {
+  width: 0.15rem;
+  top: -0.6rem;
+  right: 0.1rem;
+}
+
+.twenty .topLi {
+  height: 1.35rem;
+}
+
+.twenty .bottomLi {
+  width: 98%;
+  font-size: 0.2rem;
+  margin-top: -0.1rem;
+  text-align: center;
+}
+
+.twenty .bottomLi img {
+  width: 0.2rem;
+  height: 0.2rem;
+  margin-top: 0.275rem;
+}
+
+.twenty .bottomLi span {
+  line-height: 0.8rem;
+  text-indent: 0.05rem;
+}
+
+.twenty .bottomLi .btcla {
+  width: 30%;
+}
+
+.twenty .bottomLi .btck {
+  width: 32%;
+  padding-left: 3%;
+}
+
+.twenty .bottomLi .step {
+  width: 28%;
+  padding-right: 2%;
+}
+
+.twenty .cla em.plus {
+  position: relative;
+  left: -0.2rem
+}
+
+.twenty .lhj span.plus {
+  position: relative;
+  left: 0.8rem
+}
+
+
+/*twentyFour*/
+.twentyFour {
+  width: 16.6667%;
+  height: 1.6rem;
+  float: left;
+  overflow: hidden;
+  margin-bottom: 0.1rem
+}
+
+.twentyFour .centerLi {
+  width: 96%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  /*border: 1px solid #fff;*/
+  /*border: 0.03rem solid rgba(255,255,255,0.1);*/
+  /*box-shadow:inset 0 0 6px rgba(0,0,0,0.4);*/
+  float: none;
+}
+
+.twentyFour .human .name {
+  width: 100%;
+  height: 0.4rem;
+  font-size: 0.2rem;
+  line-height: 0.4rem;
+}
+
+.twentyFour .human img {
+  width: 0.7rem;
+  height: 0.7rem;
+  margin-top: 0.05rem;
+}
+
+.twentyFour .cla {
+  width: 0.9rem;
+  height: 1.4rem;
+  top: -0.6rem;
+  left: 0;
+  font-size: 0.15rem;
+}
+
+.twentyFour .lcla span {
+  font-size: 0.2rem;
+  top: -0.65rem;
+  float: left;
+  left: -0rem;
+}
+
+.twentyFour .cla em {
+  font-size: 0.4rem;
+  left: 0.2rem;
+}
+
+.twentyFour .lhj span {
+  width: 0.75rem;
+  height: 2rem;
+  top: -0.57rem;
+  left: 1rem;
+  font-size: 0.4rem;
+}
+
+.twentyFour .rhj img {
+  width: 0.15rem;
+  top: -0.6rem;
+  right: 0.15rem;
+}
+
+.twentyFour .topLi {
+  height: 1.19rem;
+}
+
+.twentyFour .bottomLi {
+  width: 98%;
+  font-size: 0.17rem;
+  margin-top: 0rem;
+  text-align: center;
+}
+
+.twentyFour .bottomLi img {
+  width: 0.2rem;
+  height: 0.2rem;
+  margin-top: 0.15rem;
+}
+
+.twentyFour .bottomLi span {
+  line-height: 0.55rem;
+  text-indent: 0.05rem;
+}
+
+.twentyFour .bottomLi .btcla {
+  width: 30%;
+}
+
+.twentyFour .bottomLi .btck {
+  width: 32%;
+  padding-left: 2%;
+}
+
+.twentyFour .bottomLi .step {
+  width: 28%;
+  padding-right: 0%;
+}
+
+.twentyFour .cla em.plus {
+  position: relative;
+  left: -0.2rem
+}
+
+.twentyFour .lhj span.plus {
+  position: relative;
+  left: 0.8rem;
+  line-height: 0.45rem;
+}
+
+.twentyFour .btck img {
+  width: 0.25rem;
+  height: 0.25rem;
+  margin-top: 0.12rem;
+}
+
+.twentyFour .bottomLi .step img {
+  margin-top: 0.16rem;
+}
+
+.birth {
+  position: relative;
+  top: -3.3rem;
+  width: 40%;
+  height: 1px;
+  display: block;
+  margin: 0 auto;
+}
+
+.birth img.birthCrow {
+  position: relative;
+  top: -0.1rem;
+  width: 1.2rem;
+  height: 0.7rem;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  border: none;
+}
+
+.birth img.birthText {
+  position: relative;
+  top: 1.8rem;
+  width: 1.8rem;
+  height: 0.8rem;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  border: none;
+}
+
+.two .birth img.birthCrow {
+  top: 0.1rem;
+}
+
+.three .birth img.birthCrow {
+  top: 0.8rem;
+}
+
+.six .birth {
+  top: -3.1rem;
+}
+
+.six .birth img.birthCrow {
+  width: 0.8rem;
+  height: 0.5rem;
+  top: 1.2rem;
+}
+
+.six .birth img.birthText {
+  top: 2rem;
+  width: 1.5rem;
+  height: 0.6rem;
+}
+
+.nine .birth {
+  top: -3.1rem;
+}
+
+.nine .birth img.birthCrow {
+  width: 0.8rem;
+  height: 0.5rem;
+  top: 1.6rem;
+}
+
+.nine .birth img.birthText {
+  top: 2.1rem;
+  width: 1.2rem;
+  height: 0.5rem;
+}
+
+.ten .birth {
+  top: -3.1rem;
+}
+
+.ten .birth img.birthCrow {
+  width: 0.8rem;
+  height: 0.5rem;
+  top: 1.6rem;
+}
+
+.ten .birth img.birthText {
+  top: 2.1rem;
+  width: 1.2rem;
+  height: 0.5rem;
+}
+
+.twelve .birth {
+  top: -3.1rem;
+}
+
+.twelve .birth img.birthCrow {
+  width: 0.6rem;
+  height: 0.3rem;
+  top: 2rem;
+}
+
+.twelve .birth img.birthText {
+  top: 2.4rem;
+  width: 1rem;
+  height: 0.4rem;
+}
+
+.sixteen .birth {
+  top: -3.1rem;
+}
+
+.sixteen .birth img.birthCrow {
+  width: 0.6rem;
+  height: 0.3rem;
+  top: 2.1rem;
+}
+
+.sixteen .birth img.birthText {
+  top: 2.45rem;
+  width: 1rem;
+  height: 0.4rem;
+}
+
+.twenty .birth {
+  top: -3.1rem;
+}
+
+.twenty .birth img.birthCrow {
+  width: 0.6rem;
+  height: 0.3rem;
+  top: 2.1rem;
+}
+
+.twenty .birth img.birthText {
+  top: 2.45rem;
+  width: 1rem;
+  height: 0.4rem;
+}
+
+.twentyFour .birth {
+  top: -3.1rem;
+}
+
+.twentyFour .birth img.birthCrow {
+  width: 0.6rem;
+  height: 0.3rem;
+  top: 2.2rem;
+}
+
+.twentyFour .birth img.birthText {
+  top: 2.5rem;
+  width: 0.8rem;
+  height: 0.3rem;
+}
+
+/*isPrivate*/
+.isPrivate {
+  position: relative;
+  float: right;
+  top: -3.3rem;
+  width: 75%;
+  height: 1px;
+  display: block;
+  margin: 0 auto;
+  overflow: visible;
+}
+
+.isPrivate i {
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-top: 0.1rem;
+  width: 1rem !important;
+  height: 1rem !important;
+  border: none !important;
+  background: url("../static/img/privateSign.svg");
+  background-size: 100% 100%;
+  background-position: top center;
+}
+
+.two .isPrivate {
+  top: -3.1rem;
+}
+
+.three .isPrivate {
+  top: -2.4rem;
+  left: -0.1rem;
+}
+
+.six .isPrivate {
+  top: -1.9rem;
+}
+
+.six .isPrivate i {
+  width: 0.8rem !important;
+  height: 0.8rem !important;
+}
+
+.nine .isPrivate {
+  top: -1.4rem;
+  left: -0.1rem;
+}
+
+.nine .isPrivate i {
+  width: 0.6rem !important;
+  height: 0.6rem !important;
+}
+
+.ten .isPrivate {
+  top: -1.4rem;
+}
+
+.ten .isPrivate i {
+  width: 0.6rem !important;
+  height: 0.6rem !important;
+}
+
+.twelve .isPrivate {
+  top: -1.15rem;
+}
+
+.twelve .isPrivate i {
+  width: 0.5rem !important;
+  height: 0.5rem !important;
+}
+
+.sixteen .isPrivate {
+  top: -1rem;
+  left: -0.1rem;
+}
+
+.sixteen .isPrivate i {
+  width: 0.4rem !important;
+  height: 0.4rem !important;
+}
+
+.twenty .isPrivate {
+  top: -1rem;
+}
+
+.twenty .isPrivate i {
+  width: 0.4rem !important;
+  height: 0.4rem !important;
+}
+
+.twentyFour .isPrivate {
+  top: -0.92rem;
+}
+
+.twentyFour .isPrivate i {
+  width: 0.4rem !important;
+  height: 0.4rem !important;
+}
 
 
 </style>

tv/src/views/Rank.vue

@@ -1,375 +1,380 @@
 <template>
-    <div :class="pageStyle">
-        <Headside></Headside>
-        <div class="tips">
-            {{totalTime}}
-        </div>
-        <div class="rankContainer">
-            <el-row :gutter="20">
-                <!--卡路里-->
-                <el-col :span="12">
-                    <li v-for="(s,i) in students.CalSort">
-                        <div :class="['rows',{'row_0':i == 0},{'row_1':i == 1},{'row_2':i == 2},{'row_3':i == 3},{'row_4':i == 4},{'row_5':i == 5},{'row_6':i == 6},{'row_7':i == 7}]">
-                            <div class="head">
-                                <img :src="s.Head" class="headImg" v-if="s.Head">
-                                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
-                                <img src="../static/img/rank/king1.svg" class="king" alt="" v-if="i == 0">
-                                <img src="../static/img/rank/king2.svg" class="king" alt="" v-if="i == 1">
-                                <img src="../static/img/rank/king3.svg" class="king" alt="" v-if="i == 2">
-                            </div>
-                            <div class="name">
-                                NO.{{i+1}} {{s.Name}}
-                            </div>
-                            <div class="score">
-                                {{s.Cle|fmtInt}}
-                                <em>千卡</em>
-                            </div>
-                            <div class="record">
-                                <img src="../static/img/rank/recordIcon.svg" class="king" alt=""
-                                     v-if="s.IsNewUser ==0 && s.IsBreaking == 1">
-                            </div>
-                        </div>
-                    </li>
-                </el-col>
-                <!--CK-->
-                <el-col :span="12">
-                    <li v-for="(s,i) in students.CkSort">
-                        <div :class="['rows',{'row_0':i == 0},{'row_1':i == 1},{'row_2':i == 2},{'row_3':i == 3},{'row_4':i == 4},{'row_5':i == 5},{'row_6':i == 6},{'row_7':i == 7}]">
-                            <div class="head">
-                                <img :src="s.Head" class="headImg" v-if="s.Head">
-                                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
-                                <img src="../static/img/rank/king1.svg" class="king" alt="" v-if="i == 0">
-                                <img src="../static/img/rank/king2.svg" class="king" alt="" v-if="i == 1">
-                                <img src="../static/img/rank/king3.svg" class="king" alt="" v-if="i == 2">
-                            </div>
-                            <div class="name">
-                                NO.{{i+1}} {{s.Name}}
-                            </div>
+  <div :class="pageStyle">
+    <Headside></Headside>
+    <div class="tips">
+      {{ totalTime }}
+    </div>
+    <div class="rankContainer">
+      <el-row :gutter="20">
+        <!--卡路里-->
+        <el-col :span="12">
+<!--          只显示前8个-->
+          <li v-for="(s,i) in students.CalSort" v-if="i <= 7">
+            <div
+                :class="['rows',{'row_0':i == 0},{'row_1':i == 1},{'row_2':i == 2},{'row_3':i == 3},{'row_4':i == 4},{'row_5':i == 5},{'row_6':i == 6},{'row_7':i == 7}]">
+              <div class="head">
+                <img :src="s.Head" class="headImg" v-if="s.Head">
+                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
+                <img src="../static/img/rank/king1.svg" class="king" alt="" v-if="i == 0">
+                <img src="../static/img/rank/king2.svg" class="king" alt="" v-if="i == 1">
+                <img src="../static/img/rank/king3.svg" class="king" alt="" v-if="i == 2">
+              </div>
+              <div class="name">
+                NO.{{ i + 1 }} {{ s.Name }}
+              </div>
+              <div class="score">
+                {{ s.Cle|fmtInt }}
+                <em>千卡</em>
+              </div>
+              <div class="record">
+                <img src="../static/img/rank/recordIcon.svg" class="king" alt=""
+                     v-if="s.IsNewUser ==0 && s.IsBreaking == 1">
+              </div>
+            </div>
+          </li>
+        </el-col>
+        <!--CK-->
+        <el-col :span="12">
+          <li v-for="(s,i) in students.CkSort" v-if="i <= 7">
+            <div
+                :class="['rows',{'row_0':i == 0},{'row_1':i == 1},{'row_2':i == 2},{'row_3':i == 3},{'row_4':i == 4},{'row_5':i == 5},{'row_6':i == 6},{'row_7':i == 7}]">
+              <div class="head">
+                <img :src="s.Head" class="headImg" v-if="s.Head">
+                <img src="../static/img/people/flyhead.png" class="headImg" alt="" v-if="!s.Head">
+                <img src="../static/img/rank/king1.svg" class="king" alt="" v-if="i == 0">
+                <img src="../static/img/rank/king2.svg" class="king" alt="" v-if="i == 1">
+                <img src="../static/img/rank/king3.svg" class="king" alt="" v-if="i == 2">
+              </div>
+              <div class="name">
+                NO.{{ i + 1 }} {{ s.Name }}
+              </div>
 
-                            <div class="score">
-                                {{s.Ck|fmtFloat}}
-                                <em>CK</em>
-                            </div>
-                            <div class="record">
-                                <img src="../static/img/rank/recordIcon.svg" class="king" alt=""
-                                     v-if="s.IsNewUser ==0 && s.IsBreaking == 1">
-                            </div>
-                        </div>
-                    </li>
-                </el-col>
-            </el-row>
-        </div>
+              <div class="score">
+                {{ s.Ck|fmtFloat }}
+                <em>CK</em>
+              </div>
+              <div class="record">
+                <img src="../static/img/rank/recordIcon.svg" class="king" alt=""
+                     v-if="s.IsNewUser ==0 && s.IsBreaking == 1">
+              </div>
+            </div>
+          </li>
+        </el-col>
+      </el-row>
     </div>
+  </div>
 </template>
 
 <script>
-    import Headside from '@/components/Headside'
-    import '../libs/rem';
-    import '../Global';
-    import {
-        ClassUserRank
-    } from '@/api/getApiRes'
-
-    let qs = require('qs');
-    export default {
-        data() {
-            return {
-                eqSn: '30:9C:23:0C:8B:1E',
-                pageStyle: RandomBg(),
-                trueDate: true,//真实数据 true false
-                autoJump: true,//开启自动跳走
-                students: {
-                    CkSort: [],
-                    CalSort: [],
-                },
-                rankTimer: null,
-                totalTime: ''
-            }
-        },
-        mounted() {
-            if (this.trueDate) {
-                this.init();
-            } else {
-                this.students.CkSort = fakeNews(5);
-                this.students.CalSort = fakeNews(5);
-                this.students.CkSort = this.students.CkSort.sort(function (a, b) {
-                    return b.Ck - a.Ck;
-                });
-                this.students.CalSort = this.students.CalSort.sort(function (a, b) {
-                    return b.Cle - a.Cle;
-                });
-            }
-        },
-        watch: {
-            '$route': function (val) {
-                if (val.path == '/rank') {
-                    if (this.trueDate) {
-                        this.init();
-                    } else {
-                        // this.rankTimer  = setInterval(() => {
-                        this.students.CkSort = fakeNews(5);
-                        this.students.CalSort = fakeNews(5);
-                        // }, 5000);
-                    }
-                } else {
-                    clearInterval(this.autoJump);
-                    clearInterval(this.rankTimer);
-                }
-            }
-        },
-        beforeDestroy() {
-            clearInterval(this.rankTimer);
-            this.rankTimer = null;
-        },
-        methods: {
-            init() {
-                this.getClassUserRank();
-            },
-            jumpWait(totalTime) {
-                // 倒计时60秒自动关闭
-                let that = this;
-                let clock = window.setInterval(() => {
-                    totalTime--;
-                    that.totalTime = totalTime;
-                    if (parseInt(totalTime) <= 0) {
-                        // 前往等待页面
-                        that.$router.push({path: '/'});
-                        // 计时器回收
-                        clearInterval(clock);
-                    }
-                }, 1000)
-            },
-            getClassUserRank() {
-                let that = this;
-                let param = {
-                    eqSn: localStorage.eqSn
-                };
-                let postdata = qs.stringify(param);
-                ClassUserRank(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        let totalTime = 40;
-                        let Studenlength = 0;
-                        if (json.Rs) {
-                            Studenlength = json.Rs.length;
-                        }
-                        // 根据人数多少显示停留时间
-                        if (Studenlength > 3) {
-                            totalTime = 60
-                        } else {
-                            totalTime = 40
-                        }
-                        this.jumpWait(totalTime);
-                        let CkSort = json.Rs;
-                        let CalSort = deepClone(json.Rs);
-                        let Rs = json.Rs;
-                        if (Rs != '') {
-                            // 排序
-                            that.students.CkSort = json.Rs.sort(function (a, b) {
-                                return b.Ck - a.Ck;
-                            });
+import Headside from '@/components/Headside'
+import '../libs/rem';
+import '../Global';
+import {
+  ClassUserRank
+} from '@/api/getApiRes'
 
-                            that.students.CalSort = CalSort.sort(function (a, b) {
-                                return b.Cle - a.Cle;
-                            });
-                        }
-                    } else {
-                        this.students.CkSort = [];
-                        this.students.CalSort = [];
-                        if (json.Code == '999') {
-                            // that.$router.push({path: '/'});
-                        } else {
-                            // 已出错
-                            that.$message.error(json.Memo);
-                        }
-                    }
-                })
-            },
-        },
-        filters: {
-            fmtNum(val) {
-                if (val == 0) {
-                    return '--'
-                } else {
-                    if (parseInt(val) < 0) return 0;
-                    if (parseInt(val) > 0) return val
-                }
-            },
-            fmtFloat(val) {
-                if (val == 0) {
-                    return '0.0'
-                } else {
-                    return parseFloat(val).toFixed(1);
-                }
-            },
-            fmtInt(val) {
-                if (val == 0) {
-                    return '0'
-                } else {
-                    return parseInt(val);
-                    // return parseFloat(val).toFixed(3);
-                }
-            },
-        },
-        components: {
-            Headside
+let qs = require('qs');
+export default {
+  data() {
+    return {
+      eqSn: '30:9C:23:0C:8B:1E',
+      pageStyle: RandomBg(),
+      trueDate: true,//真实数据 true false
+      autoJump: true,//开启自动跳走
+      students: {
+        CkSort: [],
+        CalSort: [],
+      },
+      rankTimer: null,
+      totalTime: ''
+    }
+  },
+  mounted() {
+    if (this.trueDate) {
+      this.init();
+    } else {
+      this.students.CkSort = fakeNews(5);
+      this.students.CalSort = fakeNews(5);
+      this.students.CkSort = this.students.CkSort.sort(function (a, b) {
+        return b.Ck - a.Ck;
+      });
+      this.students.CalSort = this.students.CalSort.sort(function (a, b) {
+        return b.Cle - a.Cle;
+      });
+    }
+  },
+  watch: {
+    '$route': function (val) {
+      if (val.path == '/rank') {
+        if (this.trueDate) {
+          this.init();
+        } else {
+          // this.rankTimer  = setInterval(() => {
+          this.students.CkSort = fakeNews(5);
+          this.students.CalSort = fakeNews(5);
+          // }, 5000);
         }
+      } else {
+        clearInterval(this.autoJump);
+        clearInterval(this.rankTimer);
+      }
     }
+  },
+  beforeDestroy() {
+    clearInterval(this.rankTimer);
+    this.rankTimer = null;
+  },
+  methods: {
+    init() {
+      this.getClassUserRank();
+    },
+    jumpWait(totalTime) {
+      // 倒计时60秒自动关闭
+      let that = this;
+      let clock = window.setInterval(() => {
+        totalTime--;
+        that.totalTime = totalTime;
+        if (parseInt(totalTime) <= 0) {
+          // 前往等待页面
+          that.$router.push({path: '/'});
+          // 计时器回收
+          clearInterval(clock);
+        }
+      }, 1000)
+    },
+    getClassUserRank() {
+      let that = this;
+      let param = {
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      ClassUserRank(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          let totalTime = 40;
+          let Studenlength = 0;
+          if (json.Rs) {
+            Studenlength = json.Rs.length;
+          }
+          // 根据人数多少显示停留时间
+          if (Studenlength > 3) {
+            totalTime = 60
+          } else {
+            totalTime = 40
+          }
+          this.jumpWait(totalTime);
+          let CkSort = json.Rs;
+          let CalSort = deepClone(json.Rs);
+          let Rs = json.Rs;
+          if (Rs != '') {
+            // 排序
+            that.students.CkSort = json.Rs.sort(function (a, b) {
+              return b.Ck - a.Ck;
+            });
+
+            that.students.CalSort = CalSort.sort(function (a, b) {
+              return b.Cle - a.Cle;
+            });
+          }
+        } else {
+          this.students.CkSort = [];
+          this.students.CalSort = [];
+          if (json.Code == '999') {
+            // that.$router.push({path: '/'});
+          } else {
+            // 已出错
+            that.$message.error(json.Memo);
+          }
+        }
+      })
+    },
+  },
+  filters: {
+    fmtNum(val) {
+      if (val == 0) {
+        return '--'
+      } else {
+        if (parseInt(val) < 0) return 0;
+        if (parseInt(val) > 0) return val
+      }
+    },
+    fmtFloat(val) {
+      if (val == 0) {
+        return '0.0'
+      } else {
+        return parseFloat(val).toFixed(1);
+      }
+    },
+    fmtInt(val) {
+      if (val == 0) {
+        return '0'
+      } else {
+        return parseInt(val);
+        // return parseFloat(val).toFixed(3);
+      }
+    },
+  },
+  components: {
+    Headside
+  }
+}
 </script>
 
 <style scoped>
-    @import "../assets/css/bg.css";
+@import "../assets/css/bg.css";
 
-    @font-face {
-        font-family: vista;
-        src: url('../assets/font/vista.otf');
-    }
+@font-face {
+  font-family: vista;
+  src: url('../assets/font/vista.otf');
+}
 
-    * {
-        font-family: vista;
-    }
+* {
+  font-family: vista;
+}
 
 
-    .pages {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        font-family: vista;
-    }
+.pages {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: vista;
+  overflow-y: scroll;
+}
 
-    .rankContainer {
-        width: 96%;
-        overflow: visible;
-        display: block;
-        margin: 0 auto;
-        padding-top: 0.2rem;
-    }
+.rankContainer {
+  width: 96%;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  padding-top: 0.2rem;
+  overflow-y: scroll;
+}
 
-    li {
-        width: 100%;
-        height: 1.2rem;
-        display: block;
-        margin: 0 auto;
-        overflow: hidden;
-    }
+li {
+  width: 100%;
+  height: 1.2rem;
+  display: block;
+  margin: 0 auto;
+  overflow: hidden;
+}
 
-    li .rows {
-        width: 100%;
-        height: 1rem;
-        /*background: #ee191d;*/
-        border-radius: 250rem;
-        overflow: visible;
-        display: block;
-        margin: 0 auto;
-        margin-top: 0.15rem;
-    }
+li .rows {
+  width: 100%;
+  height: 1rem;
+  /*background: #ee191d;*/
+  border-radius: 250rem;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  margin-top: 0.15rem;
+}
 
-    li .head {
-        width: 0.8rem;
-        height: 0.8rem;
-        float: left;
-        margin-left: 0.1rem;
-        margin-top: 0.05rem;
-        overflow: visible;
-    }
+li .head {
+  width: 0.8rem;
+  height: 0.8rem;
+  float: left;
+  margin-left: 0.1rem;
+  margin-top: 0.05rem;
+  overflow: visible;
+}
 
-    li .head .headImg {
-        width: 0.8rem;
-        height: 0.8rem;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        border: 5px solid #fff;
-        border-radius: 33rem;
-    }
+li .head .headImg {
+  width: 0.8rem;
+  height: 0.8rem;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  border: 5px solid #fff;
+  border-radius: 33rem;
+}
 
-    li .head .king {
-        position: relative;
-        top: -1.2rem;
-        left: 0rem;
-        width: 0.6rem;
-        height: 0.6rem;
-        float: left;
-    }
+li .head .king {
+  position: relative;
+  top: -1.2rem;
+  left: 0rem;
+  width: 0.6rem;
+  height: 0.6rem;
+  float: left;
+}
 
-    li .name {
-        font-weight: normal;
-        font-size: 0.4rem;
-        text-align: left;
-        color: #fff;
-        float: left;
-        margin-left: 0.2rem;
-        line-height: 1rem;
-    }
+li .name {
+  font-weight: normal;
+  font-size: 0.4rem;
+  text-align: left;
+  color: #fff;
+  float: left;
+  margin-left: 0.2rem;
+  line-height: 1rem;
+}
 
-    li .record {
-        float: right;
-    }
+li .record {
+  float: right;
+}
 
-    li .record img {
-        position: relative;
-        top: -0rem;
-        width: 1.2rem;
-    }
+li .record img {
+  position: relative;
+  top: -0rem;
+  width: 1.2rem;
+}
 
-    li .score {
-        font-weight: normal;
-        font-size: 0.4rem;
-        color: #fff;
-        float: right;
-        margin-right: 0.2rem;
-        line-height: 1rem;
-        text-align: right;
-    }
+li .score {
+  font-weight: normal;
+  font-size: 0.4rem;
+  color: #fff;
+  float: right;
+  margin-right: 0.2rem;
+  line-height: 1rem;
+  text-align: right;
+}
 
-    li .score em {
-        font-size: 0.2rem;
-    }
+li .score em {
+  font-size: 0.2rem;
+}
 
-    .row_0 {
-        background: rgba(238, 25, 29, 0.75);
-    }
+.row_0 {
+  background: rgba(238, 25, 29, 0.75);
+}
 
-    .row_1 {
-        background: rgba(244, 76, 31, 0.75);
-    }
+.row_1 {
+  background: rgba(244, 76, 31, 0.75);
+}
 
-    .row_2 {
-        background: rgba(242, 182, 23, 0.75);
-    }
+.row_2 {
+  background: rgba(242, 182, 23, 0.75);
+}
 
-    .row_3 {
-        background: rgba(112, 238, 21, 0.75);
-    }
+.row_3 {
+  background: rgba(112, 238, 21, 0.75);
+}
 
-    .row_4 {
-        background: rgba(11, 253, 45, 0.75);
-    }
+.row_4 {
+  background: rgba(11, 253, 45, 0.75);
+}
 
-    .row_5 {
-        background: rgba(1, 228, 182, 0.75);
-    }
+.row_5 {
+  background: rgba(1, 228, 182, 0.75);
+}
 
-    .row_6 {
-        background: rgba(0, 207, 230, 0.75);
-    }
+.row_6 {
+  background: rgba(0, 207, 230, 0.75);
+}
 
-    .row_7 {
-        background: rgba(4, 209, 252, 0.75);
-    }
+.row_7 {
+  background: rgba(4, 209, 252, 0.75);
+}
 
-    .tips {
-        position: absolute;
-        right: 3%;
-        top: 1rem;
-        font-size: 0.4rem;
-        color: #fff;
-    }
+.tips {
+  position: absolute;
+  right: 3%;
+  top: 1rem;
+  font-size: 0.4rem;
+  color: #fff;
+}
 
 </style>

tv/src/views/Wait.vue

@@ -449,6 +449,7 @@
         bottom: 0;
         width: 100%;
         overflow: hidden;
+      overflow-y: scroll;
         display: block;
         margin: 0 auto;
         /*transform: scale(1,5);*/
@@ -476,6 +477,7 @@
         overflow: hidden;
         display: block;
         margin: 0 auto;
+      overflow-y: scroll;
     }
 
     .rankContainer .lt {

tv/src/views/pk.vue

@@ -677,8 +677,9 @@
         margin: 0 auto;
         background-color: #028fe1;
         background: url("../static/img/pkBg.png");
-        background-size: 100%;
+        background-size: 100% 100%;
         background-repeat: no-repeat;
+      overflow-y: scroll;
     }
 
     * {

tv/src/views/threepk.vue

@@ -1,1918 +1,1930 @@
 <template>
-    <div class="pages">
-        <Headside></Headside>
-        <div class="pk-detail-con">
-            <div class="progress">
-                <div class="progress-bar" :style="{width: pkVal}">
-                    <i class="lightning"></i>
-                </div>
-                <div class="right-bar" :style="{width: yellowVal}">
-                    <i class="lightning"></i>
-                </div>
-            </div>
+  <div class="pages">
+    <Headside></Headside>
+    <div class="pk-detail-con">
+      <div class="progress">
+        <div class="progress-bar" :style="{width: pkVal}">
+          <i class="lightning"></i>
+        </div>
+        <div class="right-bar" :style="{width: yellowVal}">
+          <i class="lightning"></i>
         </div>
-        <div class="lessonInfo">
-            <div class="lt">
-                <div class="bottomInfo">
+      </div>
+    </div>
+    <div class="lessonInfo">
+      <div class="lt">
+        <div class="bottomInfo">
                     <span class="names">
-                        {{PlanName}}
+                        {{ PlanName }}
                     </span>
-                    <div class="teacher">
-                        <span v-if="Teacher"> 教练：{{Teacher}}</span>
-                        <span>人数：{{num}}</span>
-                    </div>
+          <div class="teacher">
+            <span v-if="Teacher"> 教练：{{ Teacher }}</span>
+            <span>人数：{{ num }}</span>
+          </div>
 
+        </div>
+      </div>
+      <div class="md">
+        <div class="cubelist">
+          <div class="cubes rcube">
+            <em>红队</em>
+          </div>
+          <img class="vs" src="../assets/img/pk/vs.svg"/>
+          <div class="cubes bcube">
+            <em>蓝队</em>
+          </div>
+          <img class="vs" src="../assets/img/pk/vs.svg"/>
+          <div class="cubes ycube">
+            <em>黄队</em>
+          </div>
+        </div>
+        <div class="teamScore">
+          <div class="lt">{{ redSum }} <em>CK</em></div>
+          <div class="md">{{ blueSum }} <em>CK</em></div>
+          <div class="rt">{{ yellowSum }} <em>CK</em></div>
+        </div>
+      </div>
+      <div class="rt">
+        <div class="classTime">
+          {{ classInfo.endTime }}
+        </div>
+      </div>
+    </div>
+    <div class="pk_container">
+      <div class="pl_lt">
+        <ul>
+          <li :class="RedstudentsClassName" v-for="(s,i) in students.redUnite">
+            <div class="bg">
+              <h5>
+                <div class="nameLt">
+                  <i class="el-icon-male" v-if="s.Sex == 1"></i>
+                  <i class="el-icon-female" v-if="s.Sex == 2"></i>
                 </div>
-            </div>
-            <div class="md">
-                <div class="cubelist">
-                    <div class="cubes rcube">
-                        <em>红队</em>
+                <div class="nameMd">{{ s.Name }}</div>
+                <div class="namert" v-if=" s.RealHr != 0">
+                  <power :cur-power="s.PowerPercent"></power>
+
+                </div>
+              </h5>
+              <div class="user">
+                <div class="ult">
+                  <em>
+                    <div v-if="s.RealHr != 0">
+                      {{ s.ActivePercent | max100 }}
+                    </div>
+                    <div class="plus" v-if="s.ActivePercent == 0&& s.RealHr == 0">
+                      ---
                     </div>
-                    <img class="vs" src="../assets/img/pk/vs.svg"/>
-                    <div class="cubes bcube">
-                        <em>蓝队</em>
+                    <s>%</s>
+                  </em>
+                </div>
+                <div class="umd">
+                  <div class="circle">
+                    <img :class="s.sportLevel" :src="s.Head" alt="" v-if="s.Head">
+                    <img :class="s.sportLevel" src="../static/img/people/flyhead.png" alt=""
+                         v-if="!s.Head">
+                    <!-- 生日快乐 -->
+                    <div class="birth" v-if="s.IsBirthday == 1">
+                      <img src="../assets/img/birth/birthCrow.png" class="birthCrow"/>
+                      <img src="../assets/img/birth/birthText.png" class="birthText"/>
                     </div>
-                    <img class="vs" src="../assets/img/pk/vs.svg"/>
-                    <div class="cubes ycube">
-                        <em>黄队</em>
+                    <!--私有心率带-->
+                    <div class="isPrivate" v-if="s.IsPrivate == 1">
+                      <i></i>
                     </div>
+                  </div>
                 </div>
-                <div class="teamScore">
-                    <div class="lt">{{redSum}} <em>CK</em></div>
-                    <div class="md">{{blueSum}} <em>CK</em></div>
-                    <div class="rt">{{yellowSum}} <em>CK</em></div>
+                <div class="urt">
+                  <em class="fastJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) > 90">{{
+                      s.RealHr
+                    }}</em>
+                  <em class="slowJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) <= 90">{{
+                      s.RealHr
+                    }}</em>
+                  <em class="plus" v-if="s.RealHr == 0"> --- </em>
+                  <img src="../static/img/heart.svg" class=""/>
                 </div>
-            </div>
-            <div class="rt">
-                <div class="classTime">
-                    {{classInfo.endTime}}
+              </div>
+              <div class="bottomLi">
+                <div class="btcla">
+                  <img src="../static/img/s1.svg"/>
+                  <span>{{ s.Cle |fmtInt }}</span>
                 </div>
+                <div class="btck">
+                  <img src="../static/img/s2.svg"/>
+                  <span>{{ s.PureCalorieNoVo2  |fmtInt }}</span>
+                </div>
+                <div class="step">
+                  <img src="../static/img/ck.svg"/>
+                  <span>{{ s.Ck  |fmtFloat }}</span>
+                </div>
+              </div>
             </div>
-        </div>
-        <div class="pk_container">
-            <div class="pl_lt">
-                <ul>
-                    <li :class="RedstudentsClassName" v-for="(s,i) in students.redUnite">
-                        <div class="bg">
-                            <h5>
-                                <div class="nameLt">
-                                    <i class="el-icon-male" v-if="s.Sex == 1"></i>
-                                    <i class="el-icon-female" v-if="s.Sex == 2"></i>
-                                </div>
-                                <div class="nameMd">{{ s.Name }}</div>
-                                <div class="namert" v-if=" s.RealHr != 0">
-                                    <power :cur-power="s.PowerPercent"></power>
-
-                                </div>
-                            </h5>
-                            <div class="user">
-                                <div class="ult">
-                                    <em>
-                                        <div v-if="s.RealHr != 0">
-                                            {{ s.ActivePercent | max100}}
-                                        </div>
-                                        <div class="plus" v-if="s.ActivePercent == 0&& s.RealHr == 0">
-                                            ---
-                                        </div>
-                                        <s>%</s>
-                                    </em>
-                                </div>
-                                <div class="umd">
-                                    <div class="circle">
-                                        <img :class="s.sportLevel" :src="s.Head" alt="" v-if="s.Head">
-                                        <img :class="s.sportLevel" src="../static/img/people/flyhead.png" alt=""
-                                             v-if="!s.Head">
-                                        <!-- 生日快乐 -->
-                                        <div class="birth" v-if="s.IsBirthday == 1">
-                                            <img src="../assets/img/birth/birthCrow.png" class="birthCrow"/>
-                                            <img src="../assets/img/birth/birthText.png" class="birthText"/>
-                                        </div>
-                                        <!--私有心率带-->
-                                        <div class="isPrivate" v-if="s.IsPrivate == 1">
-                                            <i></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="urt">
-                                    <em class="fastJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) > 90">{{
-                                        s.RealHr }}</em>
-                                    <em class="slowJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) <= 90">{{
-                                        s.RealHr }}</em>
-                                    <em class="plus" v-if="s.RealHr == 0"> --- </em>
-                                    <img src="../static/img/heart.svg" class=""/>
-                                </div>
-                            </div>
-                            <div class="bottomLi">
-                                <div class="btcla">
-                                    <img src="../static/img/s1.svg"/>
-                                    <span>{{ s.Cle |fmtInt }}</span>
-                                </div>
-                                <div class="btck">
-                                    <img src="../static/img/s2.svg"/>
-                                    <span>{{ s.PureCalorieNoVo2  |fmtInt}}</span>
-                                </div>
-                                <div class="step">
-                                    <img src="../static/img/ck.svg"/>
-                                    <span>{{ s.Ck  |fmtFloat}}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="pl_md">
-                <ul>
-                    <li :class="BluestudentsClassName" v-for="(s,i) in students.blueUnite">
-                        <div class="bg">
-                            <h5>
-                                <div class="nameLt">
-                                    <i class="el-icon-male" v-if="s.Sex == 1"></i>
-                                    <i class="el-icon-female" v-if="s.Sex == 2"></i>
-                                </div>
-                                <div class="nameMd">{{ s.Name }}</div>
-                                <div class="namert" v-if=" s.RealHr != 0">
-                                    <power :cur-power="s.PowerPercent"></power>
-
-                                </div>
-                            </h5>
-                            <div class="user">
-                                <div class="ult">
-                                    <em>
-                                        <div v-if="s.RealHr != 0">
-                                            {{ s.ActivePercent | max100}}
-                                        </div>
-                                        <div class="plus" v-if="s.ActivePercent == 0&& s.RealHr == 0">
-                                            ---
-                                        </div>
-                                        <s>%</s>
-                                    </em>
-                                </div>
-                                <div class="umd">
-                                    <div class="circle">
-                                        <img :class="s.sportLevel" :src="s.Head" alt="" v-if="s.Head">
-                                        <img :class="s.sportLevel" src="../static/img/people/flyhead.png" alt=""
-                                             v-if="!s.Head">
-                                        <!-- 生日快乐 -->
-                                        <div class="birth" v-if="s.IsBirthday == 1">
-                                            <img src="../assets/img/birth/birthCrow.png" class="birthCrow"/>
-                                            <img src="../assets/img/birth/birthText.png" class="birthText"/>
-                                        </div>
-                                        <!--私有心率带-->
-                                        <div class="isPrivate" v-if="s.IsPrivate == 1">
-                                            <i></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="urt">
-                                    <em class="fastJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) > 90">{{
-                                        s.RealHr }}</em>
-                                    <em class="slowJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) <= 90">{{
-                                        s.RealHr }}</em>
-                                    <em class="plus" v-if="s.RealHr == 0"> --- </em>
-                                    <img src="../static/img/heart.svg" class=""/>
-                                </div>
-                            </div>
-                            <div class="bottomLi">
-                                <div class="btcla">
-                                    <img src="../static/img/s1.svg"/>
-                                    <span>{{ s.Cle |fmtInt }}</span>
-                                </div>
-                                <div class="btck">
-                                    <img src="../static/img/s2.svg"/>
-                                    <span>{{ s.PureCalorieNoVo2  |fmtInt}}</span>
-                                </div>
-                                <div class="step">
-                                    <img src="../static/img/ck.svg"/>
-                                    <span>{{ s.Ck  |fmtFloat}}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
+          </li>
+        </ul>
+      </div>
+      <div class="pl_md">
+        <ul>
+          <li :class="BluestudentsClassName" v-for="(s,i) in students.blueUnite">
+            <div class="bg">
+              <h5>
+                <div class="nameLt">
+                  <i class="el-icon-male" v-if="s.Sex == 1"></i>
+                  <i class="el-icon-female" v-if="s.Sex == 2"></i>
+                </div>
+                <div class="nameMd">{{ s.Name }}</div>
+                <div class="namert" v-if=" s.RealHr != 0">
+                  <power :cur-power="s.PowerPercent"></power>
+
+                </div>
+              </h5>
+              <div class="user">
+                <div class="ult">
+                  <em>
+                    <div v-if="s.RealHr != 0">
+                      {{ s.ActivePercent | max100 }}
+                    </div>
+                    <div class="plus" v-if="s.ActivePercent == 0&& s.RealHr == 0">
+                      ---
+                    </div>
+                    <s>%</s>
+                  </em>
+                </div>
+                <div class="umd">
+                  <div class="circle">
+                    <img :class="s.sportLevel" :src="s.Head" alt="" v-if="s.Head">
+                    <img :class="s.sportLevel" src="../static/img/people/flyhead.png" alt=""
+                         v-if="!s.Head">
+                    <!-- 生日快乐 -->
+                    <div class="birth" v-if="s.IsBirthday == 1">
+                      <img src="../assets/img/birth/birthCrow.png" class="birthCrow"/>
+                      <img src="../assets/img/birth/birthText.png" class="birthText"/>
+                    </div>
+                    <!--私有心率带-->
+                    <div class="isPrivate" v-if="s.IsPrivate == 1">
+                      <i></i>
+                    </div>
+                  </div>
+                </div>
+                <div class="urt">
+                  <em class="fastJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) > 90">{{
+                      s.RealHr
+                    }}</em>
+                  <em class="slowJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) <= 90">{{
+                      s.RealHr
+                    }}</em>
+                  <em class="plus" v-if="s.RealHr == 0"> --- </em>
+                  <img src="../static/img/heart.svg" class=""/>
+                </div>
+              </div>
+              <div class="bottomLi">
+                <div class="btcla">
+                  <img src="../static/img/s1.svg"/>
+                  <span>{{ s.Cle |fmtInt }}</span>
+                </div>
+                <div class="btck">
+                  <img src="../static/img/s2.svg"/>
+                  <span>{{ s.PureCalorieNoVo2  |fmtInt }}</span>
+                </div>
+                <div class="step">
+                  <img src="../static/img/ck.svg"/>
+                  <span>{{ s.Ck  |fmtFloat }}</span>
+                </div>
+              </div>
             </div>
-            <div class="pl_rt">
-                <ul>
-                    <li :class="YellowstudentsClassName" v-for="(s,i) in students.yellowUnite">
-                        <div class="bg">
-                            <h5>
-                                <div class="nameLt">
-                                    <i class="el-icon-male" v-if="s.Sex == 1"></i>
-                                    <i class="el-icon-female" v-if="s.Sex == 2"></i>
-                                </div>
-                                <div class="nameMd">{{ s.Name }}</div>
-                                <div class="namert" v-if=" s.RealHr != 0">
-                                    <power :cur-power="s.PowerPercent"></power>
-
-                                </div>
-                            </h5>
-                            <div class="user">
-                                <div class="ult">
-                                    <em>
-                                        <div v-if="s.RealHr != 0">
-                                            {{ s.ActivePercent | max100}}
-                                        </div>
-                                        <div class="plus" v-if="s.ActivePercent == 0&& s.RealHr == 0">
-                                            ---
-                                        </div>
-                                        <s>%</s>
-                                    </em>
-                                </div>
-                                <div class="umd">
-                                    <div class="circle">
-                                        <img :class="s.sportLevel" :src="s.Head" alt="" v-if="s.Head">
-                                        <img :class="s.sportLevel"
-                                             src="../static/img/people/flyhead.png"
-                                             v-if="!s.Head">
-                                        <!-- 生日快乐 -->
-                                        <div class="birth" v-if="s.IsBirthday == 1">
-                                            <img src="../assets/img/birth/birthCrow.png" class="birthCrow"/>
-                                            <img src="../assets/img/birth/birthText.png" class="birthText"/>
-                                        </div>
-                                        <!--私有心率带-->
-                                        <div class="isPrivate" v-if="s.IsPrivate == 1">
-                                            <i></i>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="urt">
-                                    <em class="fastJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) > 90">{{
-                                        s.RealHr }}</em>
-                                    <em class="slowJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) <= 90">{{
-                                        s.RealHr }}</em>
-                                    <em class="plus" v-if="s.RealHr == 0"> --- </em>
-                                    <img src="../static/img/heart.svg" class=""/>
-                                </div>
-                            </div>
-                            <div class="bottomLi">
-                                <div class="btcla">
-                                    <img src="../static/img/s1.svg"/>
-                                    <span>{{ s.Cle |fmtInt }}</span>
-                                </div>
-                                <div class="btck">
-                                    <img src="../static/img/s2.svg"/>
-                                    <span>{{ s.PureCalorieNoVo2  |fmtInt}}</span>
-                                </div>
-                                <div class="step">
-                                    <img src="../static/img/ck.svg"/>
-                                    <span>{{ s.Ck  |fmtFloat}}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
+          </li>
+        </ul>
+      </div>
+      <div class="pl_rt">
+        <ul>
+          <li :class="YellowstudentsClassName" v-for="(s,i) in students.yellowUnite">
+            <div class="bg">
+              <h5>
+                <div class="nameLt">
+                  <i class="el-icon-male" v-if="s.Sex == 1"></i>
+                  <i class="el-icon-female" v-if="s.Sex == 2"></i>
+                </div>
+                <div class="nameMd">{{ s.Name }}</div>
+                <div class="namert" v-if=" s.RealHr != 0">
+                  <power :cur-power="s.PowerPercent"></power>
+
+                </div>
+              </h5>
+              <div class="user">
+                <div class="ult">
+                  <em>
+                    <div v-if="s.RealHr != 0">
+                      {{ s.ActivePercent | max100 }}
+                    </div>
+                    <div class="plus" v-if="s.ActivePercent == 0&& s.RealHr == 0">
+                      ---
+                    </div>
+                    <s>%</s>
+                  </em>
+                </div>
+                <div class="umd">
+                  <div class="circle">
+                    <img :class="s.sportLevel" :src="s.Head" alt="" v-if="s.Head">
+                    <img :class="s.sportLevel"
+                         src="../static/img/people/flyhead.png"
+                         v-if="!s.Head">
+                    <!-- 生日快乐 -->
+                    <div class="birth" v-if="s.IsBirthday == 1">
+                      <img src="../assets/img/birth/birthCrow.png" class="birthCrow"/>
+                      <img src="../assets/img/birth/birthText.png" class="birthText"/>
+                    </div>
+                    <!--私有心率带-->
+                    <div class="isPrivate" v-if="s.IsPrivate == 1">
+                      <i></i>
+                    </div>
+                  </div>
+                </div>
+                <div class="urt">
+                  <em class="fastJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) > 90">{{
+                      s.RealHr
+                    }}</em>
+                  <em class="slowJump" v-if="s.RealHr != 0" v-show="parseInt(s.ActivePercent) <= 90">{{
+                      s.RealHr
+                    }}</em>
+                  <em class="plus" v-if="s.RealHr == 0"> --- </em>
+                  <img src="../static/img/heart.svg" class=""/>
+                </div>
+              </div>
+              <div class="bottomLi">
+                <div class="btcla">
+                  <img src="../static/img/s1.svg"/>
+                  <span>{{ s.Cle |fmtInt }}</span>
+                </div>
+                <div class="btck">
+                  <img src="../static/img/s2.svg"/>
+                  <span>{{ s.PureCalorieNoVo2  |fmtInt }}</span>
+                </div>
+                <div class="step">
+                  <img src="../static/img/ck.svg"/>
+                  <span>{{ s.Ck  |fmtFloat }}</span>
+                </div>
+              </div>
             </div>
-        </div>
-        <newRecord :toper-info="toperInfo"></newRecord>
-        <newStudent :student-info="studentInfo"></newStudent>
+          </li>
+        </ul>
+      </div>
     </div>
+    <newRecord :toper-info="toperInfo"></newRecord>
+    <newStudent :student-info="studentInfo"></newStudent>
+  </div>
 </template>
 
 <script>
-    import '../libs/rem';
-    import Headside from '@/components/Headside'
-    import newRecord from '@/components/newRecord'
-    import newStudent from '@/components/newStudent'
-    import {
-        getHello,
-        getClassStat,
-        getRecordBreak,
-        getNewUser
-    } from '@/api/getApiRes'
-    import '../libs/rem';
-    import power from '@/components/power'
-
-    let qs = require('qs');
-
-    export default {
-        data() {
-            return {
-                trueDate: true,//启用真实数据 true / false
-                RedstudentsClassName: '',
-                BluestudentsClassName: '',
-                YellowstudentsClassName: '',
-                studentsClassName: [],
-                redSum: 0,
-                blueSum: 0,
-                yellowSum: 0,
-                pkVal: '33.33%',
-                yellowVal: '33.33%',
-                students: {
-                    redUnite: [],
-                    blueUnite: [],
-                    yellowUnite: [],
-                },
-                PlanName: '',
-                Teacher: '',
-                num: 0,
-                classInfo: {
-                    name: '竞技课程',
-                    num: '0',
-                    btTime: '2020-11-13 09:00:00',//时间戳
-                    endTime: '00:00:00',
-                    redSum: 0,
-                    blueSum: 0,
-                },
-                totalTime: 30,
-                studentTime: 15,
-                toperInfo: {
-                    dialogVisible: false,
-                    toper: {},
-                },
-                studentInfo: {
-                    dialogVisible: false,
-                    Rs: [],
-                    percent: 0
-                },
-            }
-        },
-        mounted() {
-            let that = this;
-            if (this.trueDate) {
-                this.init();
-
-                // this.PkEgg = setInterval(() => {
-                //     this.createEgg();
-                // }, 6000);
-
-            } else {
-                // 虚假的数据
-                let json = {
-                    "Code": "0",
-                    "Memo": "Success",
-                    "Dp": {
-                        "PlanId": 182,
-                        "ShopId": 1,
-                        "SvId": 1,
-                        "PlanName": "齐源大厦浏览器显示2020-12-02日08:40开始的竞技游戏",
-                        "Status": 2,
-                        "BeginTime": "17:15:18",
-                        "EndTime": 0,
-                        "ClassType": 2,
-                        "PkNum": 2
-                    }
-                };
-                // 载入课程信息
-                let Dp = json.Dp;
-                that.ReadLessonInfo(Dp);
-                // 载入学生信息
-                let Rs = fakeNews(21, 3);
-                that.UniteBreak(Rs);
-
-                // 人口总数
-                that.num = Rs ? Rs.length + 1 : 0;
-                this.ClacClassTime();
-            }
-        },
-        watch: {
-            '$route': function (val) {
-                if (val.path == '/threepk') {
-                    if (this.trueDate) {
-                        this.init();
-
-                        // this.PkEgg = setInterval(() => {
-                        //     this.createEgg();
-                        // }, 6000);
-
-                    } else {
-                        let Rs = fakeNews(16, 3);
-                        that.UniteBreak(Rs);
-
-                    }
-                } else {
-                    clearInterval(this.PkTimer);
-                    clearInterval(this.PkEgg);
-                    clearInterval(this.timer2);
-                    clearInterval(this.timer3);
-                    this.PkTimer = null;
-                    this.PkEgg = null;
-                    this.timer2 = null;
-                    this.timer3 = null;
-                }
-            }
-        },
-        beforeDestroy() {
-            clearInterval(this.PkTimer);
-            clearInterval(this.PkEgg);
-            clearInterval(this.timer2);
-            clearInterval(this.timer3);
-            this.PkTimer = null;
-            this.PkEgg = null;
-            this.timer2 = null;
-            this.timer3 = null;
-        },
-        methods: {
-            init(){
-                this.PkTimer = setInterval(() => {
-                    this.GetgetUserList();
-                    this.curgetClassStat();
-                }, 1000);
-                this.GetgetUserList();
-
-                this.timer2 = setInterval(() => {
-                    this.createEgg();
-                }, 31000);
-
-                this.timer3 = setInterval(() => {
-                    this.createNewStudent();
-                }, 6000);
-            },
-            // 载入课程信息
-            ReadLessonInfo(Dp) {
-                this.PlanName = Dp.PlanName;
-                this.BeginTime = Dp.BeginTime;
-                this.Teacher = Dp.Teacher;
-            },
-            // 分队展示
-            UniteBreak(Rs) {
-                let that = this;
-                that.students.redUnite = [];
-                that.students.blueUnite = [];
-                that.students.yellowUnite = [];
-                if (!Rs) {
-                    that.students.redUnite = [];
-                    that.students.blueUnite = [];
-                    that.students.yellowUnite = [];
-                } else {
-                    Rs.map(function (item, t) {
-                        item.sportLevel = sportLevel(item.ActivePercent);
-                        if (item.GroupNo == 1) {
-                            that.students.redUnite.push(item);
-                        }
-                        if (item.GroupNo == 2) {
-                            that.students.blueUnite.push(item);
-                        }
-                        if (item.GroupNo == 3) {
-                            that.students.yellowUnite.push(item);
-                        }
-                    })
-
-                }
-                that.giveClassName(that.students.redUnite, 1);
-                that.giveClassName(that.students.blueUnite, 2);
-                that.giveClassName(that.students.yellowUnite, 3);
-                that.calcSumCK(that.students);
-            },
-            // 计算各队总分
-            calcSumCK(Rs) {
-                let that = this;
-                let redSum = 0;
-                let blueSum = 0;
-                let yellowSum = 0;
-                // that.redSum
-                Rs.redUnite.map(function (item, t) {
-                    redSum += parseFloat(item.Ck.toFixed(1))
-                });
-                Rs.blueUnite.map(function (item, t) {
-                    blueSum += parseFloat(item.Ck.toFixed(1))
-                });
-                Rs.yellowUnite.map(function (item, t) {
-                    yellowSum += parseFloat(item.Ck.toFixed(1))
-                });
-                that.redSum = redSum.toFixed(1);
-                that.blueSum = blueSum.toFixed(1);
-                that.yellowSum = yellowSum.toFixed(1);
-
-                // 进度条 FormatCk
-                let redFmtSum = 0;
-                let blueFmtSum = 0;
-                let yellowFmtSum = 0;
-                Rs.redUnite.map(function (item, t) {
-                    redFmtSum += item.FormatCk
-                });
-                Rs.blueUnite.map(function (item, t) {
-                    blueFmtSum += item.FormatCk
-                });
-                Rs.yellowUnite.map(function (item, t) {
-                    yellowFmtSum += item.FormatCk
-                });
-
-                // pkVal
-                let sumMax = redFmtSum + blueFmtSum + yellowFmtSum;
-
-                // 当为0时均分
-                if (sumMax == 0) {
-                    that.pkVal = '33.33%';
-                    that.yellowVal = '33.33%';
-                } else {
-                    // 限制最大
-                    let pkval = parseInt((redFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((redFmtSum / sumMax) * 100);
-                    let yellowVal = parseInt((yellowFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((yellowFmtSum / sumMax) * 100);
-                    that.pkVal = pkval.toFixed(1) + '%';
-                    that.yellowVal = yellowVal.toFixed(1) + '%';
-                }
-
-                // 获取人数 计算人均CK
-                // let redHuman = 0;
-                // let blueHuman = 0;
-                // let yellowHuman = 0;
-                // if (Rs.redUnite != '') {
-                //     redHuman = Rs.redUnite.length;
-                //     that.redSum = parseFloat(redSum / redHuman).toFixed(1);
-                // } else {
-                //     that.redSum = 0
-                // }
-                //
-                // if (Rs.blueUnite != '') {
-                //     blueHuman = Rs.blueUnite.length;
-                //     that.blueSum = parseFloat(blueSum / blueHuman).toFixed(1);
-                // } else {
-                //     that.blueSum = 0
-                // }
-                // if (Rs.yellowUnite != '') {
-                //     yellowHuman = Rs.yellowUnite.length;
-                //     that.yellowSum = parseFloat(yellowSum / yellowHuman).toFixed(1);
-                // } else {
-                //     that.yellowSum = 0
-                // }
-
-                // let sumMax = parseFloat(that.redSum) + parseFloat(that.blueSum) + parseFloat(that.yellowSum);
-                // // 当为0时均分
-                // if (sumMax == 0) {
-                //     that.pkVal = '50%';
-                //     that.yellowVal = '33.33%';
-                // } else {
-                //     // 限制最大
-                //     let pkval = parseInt((that.redSum / sumMax) * 100) > 100 ? 100 : parseInt((that.redSum / sumMax) * 100);
-                //     let yellowVal = parseInt((that.yellowSum / sumMax) * 100) > 100 ? 100 : parseInt((that.yellowSum / sumMax) * 100);
-                //     that.pkVal = pkval + '%';
-                //     that.yellowVal = yellowVal + '%';
-                // }
-            },
-            // 获取上课学生信息
-            GetgetUserList() {
-                let that = this;
-                let param = {
-                    token: localStorage.token,
-                    eqSn: localStorage.eqSn
-                };
-                let postdata = qs.stringify(param);
-                getHello(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        if (!json.Dp) {
-                            // that.$message.error('没有获取到课程信息');
-                            return false
-                        } else {
-                            that.ReadLessonInfo(json.Dp);
-                        }
-
-                        that.UniteBreak(json.Rs);
-                        // 人口总数
-                        that.num = json.Rs.length ? json.Rs.length : 0;
-                        this.ClacClassTime();
-                    } else {
-                        // 已下课
-                        console.log(json.Code);
-                        if (json.Code == '999') {
-                            // that.$router.push({path: '/3pkRank'});
-                        } else {
-                            // 已出错
-                            that.$message.error(json.Memo);
-                        }
-                    }
-                })
-            },
-            // 动态计算排版
-            giveClassName(res, type) {
-                let that = this;
-                let numberClass = '';
-                switch (true) {
-                    case  parseInt(res.length) <= 2 && parseInt(res.length) >= 0:
-                        numberClass = 'two';
-                        break;
-                    case  parseInt(res.length) <= 4 && parseInt(res.length) >= 3:
-                        numberClass = 'four';
-                        break;
-                    case  parseInt(res.length) <= 6 && parseInt(res.length) > 4:
-                        numberClass = 'eight';
-                        break;
-                    case  parseInt(res.length) > 6:
-                        numberClass = 'eight';
-                        break;
-                }
-                if (type == 1) {
-                    that.RedstudentsClassName = numberClass;
-                }
-                if (type == 2) {
-                    that.BluestudentsClassName = numberClass;
-                }
-                if (type == 3) {
-                    that.YellowstudentsClassName = numberClass;
-                }
-            },
-            // 计算团队竞技课持续时间
-            ClacClassTime() {
-                let BeginTime = new Date(globalcurrent() + ' ' + this.BeginTime);//结束时间
-                let nowDate = new Date();
-                let date = new Date(nowDate - BeginTime - 8 * 60 * 60 * 1000);//减掉东八区时区问题
-
-                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
-                let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
-                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
-                this.classInfo.endTime = h + m + s;
-            },
-            // // 计算双方对抗强度加总
-            // CalcTeamCk() {
-            //     let that = this;
-            //     let Redsum = 0;
-            //     let Bluesum = 0;
-            //     let sumMax = 0;
-            //     if (that.Redstudents) {
-            //         that.Redstudents.map(function (i) {
-            //             Redsum = parseFloat(Redsum) + parseFloat(i.Ck)
-            //         });
-            //     }
-            //     if (that.Bluestudents) {
-            //         that.Bluestudents.map(function (i) {
-            //             Bluesum = parseFloat(Bluesum) + parseFloat(i.Ck)
-            //         });
-            //     }
-            //     that.classInfo.redSum = parseFloat(Redsum).toFixed(1);
-            //     that.classInfo.blueSum = parseFloat(Bluesum).toFixed(1);
-            //
-            //     sumMax = parseFloat(Redsum) + parseFloat(Bluesum);
-            //     that.classInfo.pkVal = (that.classInfo.redSum / sumMax) * 100 + '%';
-            // },
-
-            // 启动一个成就彩蛋
-            createEgg() {
-                let that = this;
-                let param = {
-                    token: localStorage.token,
-                    eqSn: localStorage.eqSn
-                };
-                let postdata = qs.stringify(param);
-                getRecordBreak(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        // 欢迎新学生时不显示彩蛋
-                        if (that.studentInfo.dialogVisible == true) {
-                            console.log('正在显示新学生');
-                            return false
-                        }else{
-                            this.OpenEgg(json);
-                        }
-                    } else {
-                        // 并没有人破记录
-                        if (json.Code == 999) return false;
-                        if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
-                    }
-                })
-            },
-            // 欢迎新同学
-            createNewStudent() {
-                let that = this;
-                let param = {
-                    token: localStorage.token,
-                    eqSn: localStorage.eqSn
-                };
-                let postdata = qs.stringify(param);
-                getNewUser(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        console.log('来新生了');
-                        // 显示彩蛋时不欢迎新学生
-                        if (that.toperInfo.dialogVisible == true) {
-                            console.log('正在显示彩蛋');
-                            return false
-                        }else{
-                            that.OpenStudent(json.Rs);
-                        }
-                    } else {
-                        // 并没有人破记录
-                        if (json.Code == 999) return false;
-                        if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
-                    }
-                })
-            },
-            OpenEgg(msg) {
-                this.toperInfo.toper = msg.Rs;
-                this.toperInfo.dialogVisible = true;
-                // 倒计时5秒自动关闭
-                let that = this;
-                this.totalTime = 30;
-                let clock = window.setInterval(() => {
-                    this.totalTime--;
-                    if (parseInt(this.totalTime) < 0) {
-                        that.toperInfo.dialogVisible = false;
-                        clearInterval(clock);
-                    }
-                }, 1000)
-            },
-            OpenStudent(msg) {
-                let that = this;
-                that.studentInfo.Rs = msg;
-                that.studentInfo.dialogVisible = true;
-                this.studentInfo.percent = 0;
-                // 倒计时5秒自动关闭
-                this.studentTime = 15;
-                let clock = window.setInterval(() => {
-                    this.studentTime--;
-                    let num = (15 - this.studentTime) / 15 * 100;
-                    this.studentInfo.percent = parseInt(num) > 100 ? 100 : num;
-                    console.log('num' + num);
-                    if (parseInt(this.studentTime) <= 0) {
-                        that.studentInfo.dialogVisible = false;
-                        clearInterval(clock);
-                    }
-                }, 1000)
-            },
-            // 当前课程状态
-            curgetClassStat() {
-                let that = this;
-                let param = {
-                    token: localStorage.token,
-                    eqSn: localStorage.eqSn
-                };
-                let postdata = qs.stringify(param);
-                getClassStat(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        // 没开课
-                        if (json.ClassOn == 0) {
-                            console.log("已下课");
-                            // 0: 下课 团课/私教 排名
-                            // 1：团课/私教 todo
-                            // 2：竞技课2PK
-                            // 3：竞技课3PK
-                            that.$router.push({path: '/3pkRank'});
-                            console.log('json.dp' + json.dp);
-                            switch (parseInt(json.dp)) {
-                                case 2:
-                                    that.$router.push({path: '/3pkRank'});
-                                    break;
-                                case 3:
-                                    that.$router.push({path: '/3pkRank'});
-                                    break;
-                            }
-                        }
-                    } else {
-                        // that.$message.error(json.Memo);
-                    }
-                })
-            },
-        },
-        filters: {
-            fmtNum(val) {
-                if (val == 0) {
-                    return '--'
-                } else {
-                    if (parseInt(val) < 0) return 0;
-                    if (parseInt(val) > 0) return val
-                }
-            },
-            fmtFloat(val) {
-                if (val == 0) {
-                    return '0.0'
-                } else {
-                    return parseFloat(val).toFixed(1);
-                }
-            },
-            fmtInt(val) {
-                if (val == 0) {
-                    return '0'
-                } else {
-                    return parseInt(val);
-                }
-            },
-            max100(val) {
-                if (val <= 100) {
-                    return val
-                } else {
-                    return 100
-                }
-            }
-        },
-
-        components: {
-            Headside, newRecord,newStudent,power
+import '../libs/rem';
+import Headside from '@/components/Headside'
+import newRecord from '@/components/newRecord'
+import newStudent from '@/components/newStudent'
+import {
+  getHello,
+  getClassStat,
+  getRecordBreak,
+  getNewUser
+} from '@/api/getApiRes'
+import '../libs/rem';
+import power from '@/components/power'
+
+let qs = require('qs');
+
+export default {
+  data() {
+    return {
+      trueDate: true,//启用真实数据 true / false
+      RedstudentsClassName: '',
+      BluestudentsClassName: '',
+      YellowstudentsClassName: '',
+      studentsClassName: [],
+      redSum: 0,
+      blueSum: 0,
+      yellowSum: 0,
+      pkVal: '33.33%',
+      yellowVal: '33.33%',
+      students: {
+        redUnite: [],
+        blueUnite: [],
+        yellowUnite: [],
+      },
+      PlanName: '',
+      Teacher: '',
+      num: 0,
+      classInfo: {
+        name: '竞技课程',
+        num: '0',
+        btTime: '2020-11-13 09:00:00',//时间戳
+        endTime: '00:00:00',
+        redSum: 0,
+        blueSum: 0,
+      },
+      totalTime: 30,
+      studentTime: 15,
+      toperInfo: {
+        dialogVisible: false,
+        toper: {},
+      },
+      studentInfo: {
+        dialogVisible: false,
+        Rs: [],
+        percent: 0
+      },
+    }
+  },
+  mounted() {
+    let that = this;
+    if (this.trueDate) {
+      this.init();
+
+      // this.PkEgg = setInterval(() => {
+      //     this.createEgg();
+      // }, 6000);
+
+    } else {
+      // 虚假的数据
+      let json = {
+        "Code": "0",
+        "Memo": "Success",
+        "Dp": {
+          "PlanId": 182,
+          "ShopId": 1,
+          "SvId": 1,
+          "PlanName": "齐源大厦浏览器显示2020-12-02日08:40开始的竞技游戏",
+          "Status": 2,
+          "BeginTime": "17:15:18",
+          "EndTime": 0,
+          "ClassType": 2,
+          "PkNum": 2
         }
-    }
-</script>
-<style scoped>
-    @import "../assets/css/bg.css";
-
-    .pages {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        background-color: #028fe1;
-        background: url("../assets/img/threepk/threepkbg.png");
-        background-size: 100%;
-        background-repeat: no-repeat;
-    }
-
-    * {
-        font-family: vista;
-    }
-
-
-    ul, li {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    em {
-        font-style: normal;
-    }
-
-
-    .pk-detail-con {
-        /*position: absolute;*/
-        position: relative;
-        top: 0rem;
-        width: 100%;
-        height: 0.6rem;
-        display: block;
-        margin: 0 auto;
-        padding-top: 0.35rem;
-        overflow: hidden;
-    }
-
-    .progress {
-        width: 100%;
-        height: 0.3rem;
-        overflow: visible;
-        background-color: #04A6EE;
-        border-radius: 19px;
-        background-image: url("../static/img/pk/blue.png");
-        /*background-image: linear-gradient(45deg, #60b7ff 25%, #0a84e9 0, #0a84e9 50%, #60b7ff 0, #60b7ff 75%, #0a84e9 0);*/
-        background-size: 40px 40px;
-    }
-
-    .progress-bar {
-        float: left;
-        height: 0.3rem;
-        text-align: left;
-        background-color: #F75E07;
-        -moz-transition: width .6s ease;
-        -webkit-transition: width .6s ease;
-        transition: width .6s ease;
-        background-image: url("../static/img/pk/red.png");
-        background-size: 40px 40px;
-        /*background-image: linear-gradient(45deg, #ff9960 25%, #f75e07 0, #f75e07 50%, #ff9960 0, #ff9960 75%, #f75e07 0);*/
-        /*background-size: 40px 40px;*/
-    }
-
-    .right-bar {
-        float: right;
-        position: relative;
-        right: 0;
-        top: 0rem;
-        height: 0.3rem;
-        text-align: right;
-        background-color: #DBB900;
-        -moz-transition: width .6s ease;
-        -webkit-transition: width .6s ease;
-        transition: width .6s ease;
-        background-image: url("../static/img/pk/red.png");
-        background-size: 40px 40px;
-    }
-
-    .progress, .progress-bar {
-        /*background-image: linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);*/
-    }
-
-    .lightning {
-        position: relative;
-        top: -0.5rem;
-        width: 1rem;
-        height: 1.3rem;
-        float: right;
-        margin-right: -0.5rem;
-        background: url("../static/img/pk/light.png") no-repeat center;
-        background-size: 100%;
-
-    }
-
-    .right-bar .lightning {
-        position: relative;
-        top: -0.5rem;
-        width: 1rem;
-        height: 1.3rem;
-        margin-right: -0.5rem;
-        background: url("../static/img/pk/light.png") no-repeat center;
-        background-size: 100%;
-        left: -0.4rem;
-        float: left;
-    }
-
-    .lp_icon {
-        position: absolute;
-        left: -0.1rem;
-        top: -0.3rem;
-        width: 0.8rem;
-        height: 0.8rem;
-        float: left;
-    }
-
-    .rp_icon {
-        position: absolute;
-        right: 0;
-        top: -0.3rem;
-        width: 0.8rem;
-        height: 0.8rem;
-        float: right;
-    }
-
-    .lessonInfo {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .lessonInfo .lt {
-        width: 30%;
-        float: left;
-    }
-
-    .lessonInfo .md {
-        width: 40%;
-        float: left;
-    }
-
-    .lessonInfo .rt {
-        width: 30%;
-        float: right;
-    }
-
-    .bottomInfo {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .bottomInfo .names {
-        width: 70%;
-        height: 0.6rem;
-        border-radius: 36px;
-        background: #0925b4;
-        border: 2px solid rgba(255, 255, 255, 0.5);
-        font-size: 0.4rem;
-        font-family: Roboto;
-        font-weight: normal;
-        text-align: center;
-        color: #e1ff00;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-top: 0.2rem;
-    }
-
-    .teacher {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        color: #fff;
-        font-size: 0.3rem;
-        padding-top: 0.2rem;
-    }
-
-    .teacher span {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
+      };
+      // 载入课程信息
+      let Dp = json.Dp;
+      that.ReadLessonInfo(Dp);
+      // 载入学生信息
+      let Rs = fakeNews(21, 3);
+      that.UniteBreak(Rs);
+
+      // 人口总数
+      that.num = Rs ? Rs.length + 1 : 0;
+      this.ClacClassTime();
+    }
+  },
+  watch: {
+    '$route': function (val) {
+      if (val.path == '/threepk') {
+        if (this.trueDate) {
+          this.init();
+
+          // this.PkEgg = setInterval(() => {
+          //     this.createEgg();
+          // }, 6000);
+
+        } else {
+          let Rs = fakeNews(16, 3);
+          that.UniteBreak(Rs);
 
-    .classTime {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        color: #fff;
-        text-align: center;
-    }
-
-    .cubelist {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .cubelist .cubes {
-        width: 20%;
-        height: 1.5rem;
-        overflow: hidden;
-        float: left;
-        background-position: top center;
-
-    }
-
-    .cubelist .vs {
-        width: 20%;
-        height: 0.6rem;
-        overflow: hidden;
-        float: left;
-        padding-top: 0.4rem;
-    }
-
-    .cubelist .cubes em {
-        width: 80%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        text-align: center;
-        font-size: 0.2rem;
-        font-style: normal;
-        color: #fff;
-        line-height: 1.5rem;
-    }
-
-    .cubes.rcube {
-        background: url("../static/img/pk/rcube.png");
-        background-size: 100% 100%;
-    }
-
-    .cubes.bcube {
-        background: url("../static/img/pk/bcube.png");
-        background-size: 100% 100%;
-    }
-    .cubes.ycube {
-        background: url("../static/img/pk/ycube.png");
-        background-size: 100% 100%;
-    }
-
-    .teamScore {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .lessonInfo .teamScore div {
-        width: 25%;
-        float: left;
-        color: #fff;
-        font-size: 0.4rem;
-        text-align: left;
-    }
-
-    .lessonInfo .teamScore .md {
-        width: 50%;
-        text-align: center;
-    }
-
-    .lessonInfo .teamScore .rt {
-        float: right;
-        text-align: right;
-    }
-
-    .lessonInfo .teamScore em {
-        font-size: 0.2rem;
-    }
-
-    .pk_container {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .pk_container .pl_lt {
-        width: 33.333%;
-        float: left;
-    }
-
-    .pk_container .pl_rt {
-        width: 33.333%;
-        float: right;
-    }
-
-    .pk_container .pl_md {
-        width: 33.333%;
-        float: left;
-    }
-
-
-    .pk_container ul {
-        width: 98%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        padding-top: 0.01rem;
-    }
-
-    .pk_container li {
-        overflow: hidden;
-        color: #fff;
-        margin-bottom: 0.1rem;
-    }
-
-    .pk_container .lt li {
-        overflow: hidden;
-    }
-
-    .pk_container .rt li {
-        overflow: hidden;
-    }
-
-    .pk_container .pl_lt .bg {
-        border: 2px solid rgba(255, 143, 122, 0.5);
-        background: rgba(194, 36, 6, 0.5);
-    }
-
-    .pk_container .pl_md .bg {
-        border: 2px solid rgba(80, 115, 255, 0.5);
-        background: rgba(0, 30, 152, 0.5);
-    }
-
-    .pk_container .pl_rt .bg {
-        border: 2px solid rgba(255, 239, 149, 0.5);
-        /*background: rgba(255, 230, 0, 0.5);*/
-        /*background: rgba(233, 192, 12, 0.9);*/
-        background: rgba(245,195,0,0.9);
-    }
-
-
-    .pk_container li .bg > h5 {
-        font-family: vista;
-        font-weight: 500;
-        font-size: 0.3rem;
-        text-align: center;
-        color: #fff;
-        margin: 0;
-        margin-top: 0.1rem;
-        margin-bottom: 0.1rem;
-    }
-
-    .bg > h5 div {
-        float: left;
-        width: 20%;
-        text-align: left;
-        text-indent: 0.1rem;
-    }
-    .bg > h5 .nameMd {
-        width: 60%;
-        text-align: center;
-        text-indent: 0;
-    }
-
-    .pk_container li .user {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .pk_container .user .ult {
-        width: 33.333%;
-        float: left;
-        overflow: visible;
-        flex-direction: column;
-    }
-
-    .pk_container .user .umd {
-        width: 33.333%;
-        float: left;
-        overflow: visible;
-        flex-direction: column
-    }
-
-    .pk_container .user .urt {
-        width: 33.333%;
-        float: right;
-        flex-direction: column;
-    }
-
-    .centerLi .slowJump {
-        animation: mymove 3s infinite;
-        -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
-        animation-direction: alternate; /*轮流反向播放动画。*/
-        animation-timing-function: ease-in-out; /*动画的速度曲线*/
-        /* Safari 和 Chrome */
-        -webkit-animation: mymove 3s infinite;
-        -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
-        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-    }
-
-    .user .ult span {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        font-family: "Source Han Sans CN";
-        font-weight: normal;
-        font-size: 0.3rem;
-        text-align: center;
-    }
-
-    .user .ult em {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .user .ult em div {
-        width: 80%;
-        overflow: hidden;
-        float: right;
-        text-align: right;
-        padding-right: 0.3rem;
-        font-size: 0.8rem;
-        line-height: 1.6rem;
-    }
-
-    .user .ult s {
-        position: relative;
-        top: -1.2rem;
-        right: 0rem;
-        float: right;
-        font-family: HeadLineA;
-        font-weight: normal;
-        font-size: 0.3rem;
-        text-align: center;
-        text-decoration: none;
-    }
-
-    .circle {
-        width: 1.73rem;
-        height: 1.73rem;
-        overflow: visible;
-        display: block;
-        margin: 0 auto;
-        border-radius: 33rem;
-        padding-top: 0.09rem;
-    }
-
-    .user .umd img {
-        width: 1.45rem;
-        height: 1.45rem;
-        overflow: visible;
-        display: block;
-        margin: 0 auto;
-        border-radius: 33rem;
-        border: 0.1rem solid #B9CB01;
-    }
-
-
-    .urt img {
-        position: relative;
-        right: 0.1rem;
-        top: -1.2rem;
-        width: 0.35rem;
-        height: 0.35rem;
-        float: right;
-    }
-
-    .urt em {
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        font-family: HeadLineA;
-        font-weight: normal;
-        font-size: 0.7rem;
-        letter-spacing: -0.05em;
-        text-align: right;
-        font-style: normal;
-        line-height: 1.5rem;
-        padding-right: 25%;
-    }
-
-    .bottomLi {
-        width: 98%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        font-weight: normal;
-        color: #fff;
-        text-align: center;
-        font-size: 0.4rem;
-        text-indent: 0.2rem;
-    }
-
-    .bottomLi img {
-        float: left;
-        margin-left: 10%;
-    }
-
-    .bottomLi span {
-        float: left;
-        text-align: left;
-    }
-
-    .bottomLi .btcla {
-        width: 30%;
-        float: left;
-        text-align: left;
-    }
-
-    .bottomLi .btck {
-        width: 40%;
-        float: left;
-        text-align: left;
-    }
-
-    .bottomLi .step {
-        width: 30%;
-        float: right;
-        text-align: left;
-    }
-
-    @keyframes mymove {
-        0% {
-            transform: scale(1); /*开始为原始大小*/
-        }
-        25% {
-            transform: scale(1.2); /*放大1.1倍*/
         }
-        50% {
-            transform: scale(1);
+      } else {
+        clearInterval(this.PkTimer);
+        clearInterval(this.PkEgg);
+        clearInterval(this.timer2);
+        clearInterval(this.timer3);
+        this.PkTimer = null;
+        this.PkEgg = null;
+        this.timer2 = null;
+        this.timer3 = null;
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.PkTimer);
+    clearInterval(this.PkEgg);
+    clearInterval(this.timer2);
+    clearInterval(this.timer3);
+    this.PkTimer = null;
+    this.PkEgg = null;
+    this.timer2 = null;
+    this.timer3 = null;
+  },
+  methods: {
+    init() {
+      this.PkTimer = setInterval(() => {
+        this.GetgetUserList();
+        this.curgetClassStat();
+      }, 1000);
+      this.GetgetUserList();
+
+      this.timer2 = setInterval(() => {
+        this.createEgg();
+      }, 31000);
+
+      this.timer3 = setInterval(() => {
+        this.createNewStudent();
+      }, 6000);
+    },
+    // 载入课程信息
+    ReadLessonInfo(Dp) {
+      this.PlanName = Dp.PlanName;
+      this.BeginTime = Dp.BeginTime;
+      this.Teacher = Dp.Teacher;
+    },
+    // 分队展示
+    UniteBreak(Rs) {
+      let that = this;
+      that.students.redUnite = [];
+      that.students.blueUnite = [];
+      that.students.yellowUnite = [];
+      if (!Rs) {
+        that.students.redUnite = [];
+        that.students.blueUnite = [];
+        that.students.yellowUnite = [];
+      } else {
+        Rs.map(function (item, t) {
+          item.sportLevel = sportLevel(item.ActivePercent);
+          if (item.GroupNo == 1) {
+            that.students.redUnite.push(item);
+          }
+          if (item.GroupNo == 2) {
+            that.students.blueUnite.push(item);
+          }
+          if (item.GroupNo == 3) {
+            that.students.yellowUnite.push(item);
+          }
+        })
+
+      }
+      that.giveClassName(that.students.redUnite, 1);
+      that.giveClassName(that.students.blueUnite, 2);
+      that.giveClassName(that.students.yellowUnite, 3);
+      that.calcSumCK(that.students);
+    },
+    // 计算各队总分
+    calcSumCK(Rs) {
+      let that = this;
+      let redSum = 0;
+      let blueSum = 0;
+      let yellowSum = 0;
+      // that.redSum
+      Rs.redUnite.map(function (item, t) {
+        redSum += parseFloat(item.Ck.toFixed(1))
+      });
+      Rs.blueUnite.map(function (item, t) {
+        blueSum += parseFloat(item.Ck.toFixed(1))
+      });
+      Rs.yellowUnite.map(function (item, t) {
+        yellowSum += parseFloat(item.Ck.toFixed(1))
+      });
+      that.redSum = redSum.toFixed(1);
+      that.blueSum = blueSum.toFixed(1);
+      that.yellowSum = yellowSum.toFixed(1);
+
+      // 进度条 FormatCk
+      let redFmtSum = 0;
+      let blueFmtSum = 0;
+      let yellowFmtSum = 0;
+      Rs.redUnite.map(function (item, t) {
+        redFmtSum += item.FormatCk
+      });
+      Rs.blueUnite.map(function (item, t) {
+        blueFmtSum += item.FormatCk
+      });
+      Rs.yellowUnite.map(function (item, t) {
+        yellowFmtSum += item.FormatCk
+      });
+
+      // pkVal
+      let sumMax = redFmtSum + blueFmtSum + yellowFmtSum;
+
+      // 当为0时均分
+      if (sumMax == 0) {
+        that.pkVal = '33.33%';
+        that.yellowVal = '33.33%';
+      } else {
+        // 限制最大
+        let pkval = parseInt((redFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((redFmtSum / sumMax) * 100);
+        let yellowVal = parseInt((yellowFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((yellowFmtSum / sumMax) * 100);
+        that.pkVal = pkval.toFixed(1) + '%';
+        that.yellowVal = yellowVal.toFixed(1) + '%';
+      }
+
+      // 获取人数 计算人均CK
+      // let redHuman = 0;
+      // let blueHuman = 0;
+      // let yellowHuman = 0;
+      // if (Rs.redUnite != '') {
+      //     redHuman = Rs.redUnite.length;
+      //     that.redSum = parseFloat(redSum / redHuman).toFixed(1);
+      // } else {
+      //     that.redSum = 0
+      // }
+      //
+      // if (Rs.blueUnite != '') {
+      //     blueHuman = Rs.blueUnite.length;
+      //     that.blueSum = parseFloat(blueSum / blueHuman).toFixed(1);
+      // } else {
+      //     that.blueSum = 0
+      // }
+      // if (Rs.yellowUnite != '') {
+      //     yellowHuman = Rs.yellowUnite.length;
+      //     that.yellowSum = parseFloat(yellowSum / yellowHuman).toFixed(1);
+      // } else {
+      //     that.yellowSum = 0
+      // }
+
+      // let sumMax = parseFloat(that.redSum) + parseFloat(that.blueSum) + parseFloat(that.yellowSum);
+      // // 当为0时均分
+      // if (sumMax == 0) {
+      //     that.pkVal = '50%';
+      //     that.yellowVal = '33.33%';
+      // } else {
+      //     // 限制最大
+      //     let pkval = parseInt((that.redSum / sumMax) * 100) > 100 ? 100 : parseInt((that.redSum / sumMax) * 100);
+      //     let yellowVal = parseInt((that.yellowSum / sumMax) * 100) > 100 ? 100 : parseInt((that.yellowSum / sumMax) * 100);
+      //     that.pkVal = pkval + '%';
+      //     that.yellowVal = yellowVal + '%';
+      // }
+    },
+    // 获取上课学生信息
+    GetgetUserList() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getHello(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          if (!json.Dp) {
+            // that.$message.error('没有获取到课程信息');
+            return false
+          } else {
+            that.ReadLessonInfo(json.Dp);
+          }
+
+          that.UniteBreak(json.Rs);
+          // 人口总数
+          that.num = json.Rs.length ? json.Rs.length : 0;
+          this.ClacClassTime();
+        } else {
+          // 已下课
+          console.log(json.Code);
+          if (json.Code == '999') {
+            // that.$router.push({path: '/3pkRank'});
+          } else {
+            // 已出错
+            that.$message.error(json.Memo);
+          }
         }
-        75% {
-            transform: scale(1.2);
+      })
+    },
+    // 动态计算排版
+    giveClassName(res, type) {
+      let that = this;
+      let numberClass = '';
+      switch (true) {
+        case  parseInt(res.length) <= 2 && parseInt(res.length) >= 0:
+          numberClass = 'two';
+          break;
+        case  parseInt(res.length) <= 4 && parseInt(res.length) >= 3:
+          numberClass = 'four';
+          break;
+        case  parseInt(res.length) <= 6 && parseInt(res.length) > 4:
+          numberClass = 'eight';
+          break;
+        case  parseInt(res.length) > 6:
+          numberClass = 'eight';
+          break;
+      }
+      if (type == 1) {
+        that.RedstudentsClassName = numberClass;
+      }
+      if (type == 2) {
+        that.BluestudentsClassName = numberClass;
+      }
+      if (type == 3) {
+        that.YellowstudentsClassName = numberClass;
+      }
+    },
+    // 计算团队竞技课持续时间
+    ClacClassTime() {
+      let BeginTime = new Date(globalcurrent() + ' ' + this.BeginTime);//结束时间
+      let nowDate = new Date();
+      let date = new Date(nowDate - BeginTime - 8 * 60 * 60 * 1000);//减掉东八区时区问题
+
+      let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
+      let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
+      let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+      this.classInfo.endTime = h + m + s;
+    },
+    // // 计算双方对抗强度加总
+    // CalcTeamCk() {
+    //     let that = this;
+    //     let Redsum = 0;
+    //     let Bluesum = 0;
+    //     let sumMax = 0;
+    //     if (that.Redstudents) {
+    //         that.Redstudents.map(function (i) {
+    //             Redsum = parseFloat(Redsum) + parseFloat(i.Ck)
+    //         });
+    //     }
+    //     if (that.Bluestudents) {
+    //         that.Bluestudents.map(function (i) {
+    //             Bluesum = parseFloat(Bluesum) + parseFloat(i.Ck)
+    //         });
+    //     }
+    //     that.classInfo.redSum = parseFloat(Redsum).toFixed(1);
+    //     that.classInfo.blueSum = parseFloat(Bluesum).toFixed(1);
+    //
+    //     sumMax = parseFloat(Redsum) + parseFloat(Bluesum);
+    //     that.classInfo.pkVal = (that.classInfo.redSum / sumMax) * 100 + '%';
+    // },
+
+    // 启动一个成就彩蛋
+    createEgg() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getRecordBreak(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 欢迎新学生时不显示彩蛋
+          if (that.studentInfo.dialogVisible == true) {
+            console.log('正在显示新学生');
+            return false
+          } else {
+            this.OpenEgg(json);
+          }
+        } else {
+          // 并没有人破记录
+          if (json.Code == 999) return false;
+          if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
         }
-
-    }
-
-    @-webkit-keyframes mymove /*Safari and Chrome*/
-    {
-        0% {
-            transform: scale(1); /*开始为原始大小*/
+      })
+    },
+    // 欢迎新同学
+    createNewStudent() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getNewUser(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          console.log('来新生了');
+          // 显示彩蛋时不欢迎新学生
+          if (that.toperInfo.dialogVisible == true) {
+            console.log('正在显示彩蛋');
+            return false
+          } else {
+            that.OpenStudent(json.Rs);
+          }
+        } else {
+          // 并没有人破记录
+          if (json.Code == 999) return false;
+          if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
         }
-        25% {
-            transform: scale(1.2); /*放大1.1倍*/
+      })
+    },
+    OpenEgg(msg) {
+      this.toperInfo.toper = msg.Rs;
+      this.toperInfo.dialogVisible = true;
+      // 倒计时5秒自动关闭
+      let that = this;
+      this.totalTime = 30;
+      let clock = window.setInterval(() => {
+        this.totalTime--;
+        if (parseInt(this.totalTime) < 0) {
+          that.toperInfo.dialogVisible = false;
+          clearInterval(clock);
         }
-        50% {
-            transform: scale(1);
+      }, 1000)
+    },
+    OpenStudent(msg) {
+      let that = this;
+      that.studentInfo.Rs = msg;
+      that.studentInfo.dialogVisible = true;
+      this.studentInfo.percent = 0;
+      // 倒计时5秒自动关闭
+      this.studentTime = 15;
+      let clock = window.setInterval(() => {
+        this.studentTime--;
+        let num = (15 - this.studentTime) / 15 * 100;
+        this.studentInfo.percent = parseInt(num) > 100 ? 100 : num;
+        console.log('num' + num);
+        if (parseInt(this.studentTime) <= 0) {
+          that.studentInfo.dialogVisible = false;
+          clearInterval(clock);
         }
-        75% {
-            transform: scale(1.2);
+      }, 1000)
+    },
+    // 当前课程状态
+    curgetClassStat() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getClassStat(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 没开课
+          if (json.ClassOn == 0) {
+            console.log("已下课");
+            // 0: 下课 团课/私教 排名
+            // 1：团课/私教 todo
+            // 2：竞技课2PK
+            // 3：竞技课3PK
+            that.$router.push({path: '/3pkRank'});
+            console.log('json.dp' + json.dp);
+            switch (parseInt(json.dp)) {
+              case 2:
+                that.$router.push({path: '/3pkRank'});
+                break;
+              case 3:
+                that.$router.push({path: '/3pkRank'});
+                break;
+            }
+          }
+        } else {
+          // that.$message.error(json.Memo);
         }
-    }
-
-    .partInfo {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        padding-top: 1rem;
-    }
-
-    .partInfo .rp, .partInfo .bp {
-        width: 50%;
-        float: left;
-    }
-
-    .partInfo .title {
-        width: 33%;
-        overflow: hidden;
-        display: block;
-        margin: 0;
-        font-size: 0.4rem;
-        color: #fff;
-        text-align: left;
-    }
-
-    .rtitle {
-        float: left;
-        padding-left: 0.25rem;
-    }
-
-    .partInfo .btitle {
-        width: 30%;
-        float: right;
-    }
-
-    .partInfo .title img {
-        float: left;
-        margin-right: 0.2rem;
-    }
-
-    .cubelist {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .teamScore {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .teamScore div {
-        width: 50%;
-        float: left;
-        text-align: center;
-        color: #fff;
-        font-size: 0.6rem;
-    }
-
-
-    .fastJump {
-        animation: mymove 1s infinite;
-        -webkit-animation: mymove 1s infinite; /*Safari and Chrome*/
-        animation-direction: alternate; /*轮流反向播放动画。*/
-        animation-timing-function: ease-in-out; /*动画的速度曲线*/
-        /* Safari 和 Chrome */
-        -webkit-animation: mymove 1s infinite;
-        -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
-        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-    }
-
-    .slowJump {
-        animation: mymove 2s infinite;
-        -webkit-animation: mymove 2s infinite; /*Safari and Chrome*/
-        animation-direction: alternate; /*轮流反向播放动画。*/
-        animation-timing-function: ease-in-out; /*动画的速度曲线*/
-        /* Safari 和 Chrome */
-        -webkit-animation: mymove 3s infinite;
-        -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
-        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-    }
-
-
-    /*two*/
-
-    .pk_container li.two {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-    }
-
-    .pk_container li.two .user {
-        height: 1.75rem;
-        overflow: hidden;
-    }
-
-    .two .bottomLi {
-        width: 98%;
-        font-size: 0.35rem;
-        margin-top: 0rem;
-        text-align: center;
-    }
-
-    .two .bottomLi img {
-        width: 0.4rem;
-        height: 0.4rem;
-        margin-top: 0.15rem;
-    }
-
-    .two .bottomLi .btck img {
-        width: 0.4rem;
-        margin-top: 0.1rem;
-    }
-
-    .two .bottomLi span {
-        line-height: 0.8rem;
-        text-indent: 0.1rem;
-    }
-
-    .two .bottomLi .btcla {
-        width: 30%;
-    }
-
-    .two .bottomLi .btck {
-        width: 33%;
-        padding-left: 3%;
-    }
-
-    .two .bottomLi .step {
-        width: 26%;
-        padding-right: 0%;
-    }
-
-    .two .cla em.plus {
-        position: relative;
-        left: -0.3rem
-    }
-
-    .two .lhj span.plus {
-        position: relative;
-        left: 1.3rem
-    }
-
-    .two .bottomLi .btck img {
-        width: 0.5rem;
-        height: 0.5rem;
-        margin-top: 0.12rem;
-    }
-
-    /*three*/
-
-    .pk_container li.three {
-        width: 90%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-bottom: 0.1rem;
-        float: none;
-    }
-
-    .three .bottomLi {
-        width: 98%;
-        font-size: 0.35rem;
-        margin-top: 0rem;
-        text-align: center;
-    }
-
-    .three .circle {
-        width: 1.2rem;
-        height: 1.2rem;
-    }
-
-    .three .circle img {
-        width: 0.9rem;
-        height: 0.9rem;
-    }
-
-    .three .user {
-        height: 1.2rem;
-        overflow: hidden;
-    }
-
-    .three .ult em div {
-        line-height: 1.2rem;
-    }
-
-    .three .urt em {
-        line-height: 1.2rem;
-    }
-
-    .three .bottomLi img {
-        width: 0.4rem;
-        height: 0.4rem;
-        margin-top: 0.15rem;
-    }
-
-    .three .bottomLi .btck img {
-        width: 0.4rem;
-        margin-top: 0.1rem;
-    }
-
-    .three .bottomLi span {
-        line-height: 0.8rem;
-        text-indent: 0.1rem;
-    }
-
-    .three .bottomLi .btcla {
-        width: 30%;
-    }
-
-    .three .bottomLi .btck {
-        width: 33%;
-        padding-left: 3%;
-    }
-
-    .three .bottomLi .step {
-        width: 28%;
-        padding-right: 0%;
-    }
-
-    .three .cla em.plus {
-        position: relative;
-        left: -0.3rem
-    }
-
-    .three .lhj span.plus {
-        position: relative;
-        left: 1.3rem
-    }
-
-    .three .bottomLi .btck img {
-        width: 0.5rem;
-        height: 0.5rem;
-        margin-top: 0.12rem;
-    }
-
-
-    /*four*/
-    .pk_container  .four {
-        width: 49%;
-        float: left;
-        /*margin-top: 0.4rem;*/
-        /*margin-bottom: 0.5rem;*/
-    }
-
-    .four .bg {
-        width: 96%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .pk_container li.four .bg > h5 {
-        font-size: 0.25rem;
-    }
-
-    .four .user .ult span {
-        font-size: 0.2rem;
-    }
-
-    .four .user .ult em div {
-        width: 90%;
-        margin-right: 0;
-        font-size: 0.5rem;
-        line-height: 1rem;
-        padding-right: 0.2rem;
-    }
-
-    .four .user .ult s {
-        font-size: 0.2rem;
-        line-height: 1rem;
-    }
-
-    .four .circle {
-        width: 1rem;
-        height: 1rem;
-    }
-
-    .four .user .umd img {
-        width: 0.8rem;
-        height: 0.8rem;
-    }
-
-    .four .urt img {
-        width: 0.15rem;
-        height: 0.15rem;
-        top: -0.8rem;
-    }
-
-    .four .urt em {
-        font-size: 0.4rem;
-        line-height: 1rem;
-    }
-
-    .four .bottomLi {
-        width: 100%;
-        text-indent: 0.1rem;
-        font-size: 0.2rem;
-    }
-
-    .four .bottomLi img {
-        width: 0.2rem;
-        height: 0.2rem;
-    }
-
-    .four .bottomLi span {
-        width: 60%;
-    }
-
-    .four .user {
-        height: 1.2rem;
-        overflow: hidden;
-    }
-    .four  .nameMd {
-        font-size: 0.2rem;
-    }
-
-    /*six*/
-
-
-    /*eight*/
-    .eight {
-        width: 50%;
-        float: left;
-    }
-
-    .eight .bg {
-        width: 96%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .pk_container li.eight .bg > h5 {
-        font-size: 0.25rem;
-        margin: 0.01rem 0;
-    }
-
-    .eight .user .ult span {
-        font-size: 0.2rem;
-
-    }
-
-    .eight .user .ult em div {
-        width: 90%;
-        padding-right: 0.2rem;
-        margin-right: 0rem;
-        font-size: 0.4rem;
-        line-height: 0.8rem;
-    }
-
-    .eight .user .ult s {
-        font-size: 0.2rem;
-        line-height: 1.3rem;
-    }
-
-    .eight .circle {
-        width: 1rem;
-        height: 1rem;
-    }
-
-    .eight .user .umd img {
-        width: 0.5rem;
-        height: 0.5rem;
-    }
-
-    .eight .urt img {
-        width: 0.15rem;
-        height: 0.15rem;
-        top: -0.6rem;
-        right: 0.2rem;
-    }
-
-    .eight .urt em {
-        font-size: 0.3rem;
-        line-height: 0.8rem;
-        padding-right: 45%;
-    }
-
-    .eight .bottomLi {
-        width: 100%;
-        text-indent: 0.1rem;
-        font-size: 0.2rem;
-    }
-
-    .eight .bottomLi img {
-        width: 0.2rem;
-        height: 0.2rem;
-    }
-
-    .eight .bottomLi span {
-        width: 60%;
-    }
-
-    .eight .user {
-        height: 0.85rem;
-        overflow: hidden;
-    }
-    .eight  .nameMd {
-        font-size: 0.2rem;
-    }
-
-    /*color*/
-    .user .umd img.blue {
-        border-color: #028FE1;
-    }
-
-    .user .umd img.violet {
-        border-color: #6D26FA;
-    }
-
-    .user .umd img.green {
-        border-color: #059F00;
-    }
-
-    .user .umd img.yellow {
-        border-color: #B5C700;
-    }
-
-    .user .umd img.brown {
-        border-color: #EA8813;
-    }
-
-    .user .umd img.red {
-        border-color: #CF1122;
-    }
-
-    .birth {
-        position: relative;
-        top: -2rem;
-        width: 1.7rem;
-        height: 1px;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .birth img.birthCrow {
-        position: relative;
-        top: 0.2rem;
-        width: 1.1rem;
-        height: 0.4rem;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        border: none;
-    }
-
-    .birth img.birthText {
-        position: relative;
-        top: 1rem;
-        width: 1.4rem;
-        height: 0.6rem;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        border: none;
-    }
-
-    .three .birth img.birthCrow {
-        top: 0.7rem;
-        width: 0.8rem;
-        height: 0.3rem;
-    }
-
-    .three .birth img.birthText {
-        top: 1.1rem;
-        width: 1.3rem;
-        height: 0.6rem;
-    }
-
-    .four .birth {
-        width: 1rem;
-    }
-
-    .four .birth img.birthCrow {
-        top: 0.9rem;
-        width: 0.7rem;
-        height: 0.3rem;
-    }
-
-    .four .birth img.birthText {
-        top: 1.3rem;
-        width: 0.8rem;
-        height: 0.35rem;
-    }
-    .eight .birth {
-        width: 1rem;
-    }
-
-    .eight .birth img.birthCrow {
-        top: 1.25rem;
-        width: 0.5rem;
-        height: 0.2rem;
-    }
-
-    .eight .birth img.birthText {
-        top: 1.5rem;
-        width: 0.7rem;
-        height: 0.3rem;
-    }
-
-    /*isPrivate*/
-    .isPrivate {
-        position: relative;
-        float: right;
-        right: -0.35rem;
-        width: 55%;
-        height: 1px;
-        display: block;
-        margin: 0 auto;
-        overflow: visible;
-    }
-
-    .isPrivate i {
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-top: 0.2rem;
-        width: 0.8rem !important;
-        height: 0.8rem !important;
-        border: none !important;
-        background: url("../static/img/privateSign.svg");
-        background-size: 100% 100%;
-        background-position: top center;
-    }
-
-    .two .isPrivate {
-        top: -2rem;
-    }
-
-    .three .isPrivate {
-        top: -1.4rem;
-        right: -0.1rem;
-    }
-
-    .three .isPrivate i {
-        width: 0.6rem !important;
-        height: 0.6rem !important;
-    }
-
-    .four .isPrivate {
-        top: -1.28rem;
-        right: -0.27rem;
-    }
-
-    .four .isPrivate i {
-        width: 0.4rem !important;
-        height: 0.4rem !important;
-    }
-
-    .eight .isPrivate {
-        top: -1rem;
-        right: -0.1rem;
-    }
-
-    .eight .isPrivate i {
-        width: 0.4rem !important;
-        height: 0.4rem !important;
-    }
+      })
+    },
+  },
+  filters: {
+    fmtNum(val) {
+      if (val == 0) {
+        return '--'
+      } else {
+        if (parseInt(val) < 0) return 0;
+        if (parseInt(val) > 0) return val
+      }
+    },
+    fmtFloat(val) {
+      if (val == 0) {
+        return '0.0'
+      } else {
+        return parseFloat(val).toFixed(1);
+      }
+    },
+    fmtInt(val) {
+      if (val == 0) {
+        return '0'
+      } else {
+        return parseInt(val);
+      }
+    },
+    max100(val) {
+      if (val <= 100) {
+        return val
+      } else {
+        return 100
+      }
+    }
+  },
+
+  components: {
+    Headside, newRecord, newStudent, power
+  }
+}
+</script>
+<style scoped>
+@import "../assets/css/bg.css";
+
+.pages {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  background-color: #028fe1;
+  background: url("../assets/img/threepk/threepkbg.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  overflow-y: scroll;
+}
+
+* {
+  font-family: vista;
+}
+
+
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+em {
+  font-style: normal;
+}
+
+
+.pk-detail-con {
+  /*position: absolute;*/
+  position: relative;
+  top: 0rem;
+  width: 100%;
+  height: 0.6rem;
+  display: block;
+  margin: 0 auto;
+  padding-top: 0.35rem;
+  overflow: hidden;
+}
+
+.progress {
+  width: 100%;
+  height: 0.3rem;
+  overflow: visible;
+  background-color: #04A6EE;
+  border-radius: 19px;
+  background-image: url("../static/img/pk/blue.png");
+  /*background-image: linear-gradient(45deg, #60b7ff 25%, #0a84e9 0, #0a84e9 50%, #60b7ff 0, #60b7ff 75%, #0a84e9 0);*/
+  background-size: 40px 40px;
+}
+
+.progress-bar {
+  float: left;
+  height: 0.3rem;
+  text-align: left;
+  background-color: #F75E07;
+  -moz-transition: width .6s ease;
+  -webkit-transition: width .6s ease;
+  transition: width .6s ease;
+  background-image: url("../static/img/pk/red.png");
+  background-size: 40px 40px;
+  /*background-image: linear-gradient(45deg, #ff9960 25%, #f75e07 0, #f75e07 50%, #ff9960 0, #ff9960 75%, #f75e07 0);*/
+  /*background-size: 40px 40px;*/
+}
+
+.right-bar {
+  float: right;
+  position: relative;
+  right: 0;
+  top: 0rem;
+  height: 0.3rem;
+  text-align: right;
+  background-color: #DBB900;
+  -moz-transition: width .6s ease;
+  -webkit-transition: width .6s ease;
+  transition: width .6s ease;
+  background-image: url("../static/img/pk/red.png");
+  background-size: 40px 40px;
+}
+
+.progress, .progress-bar {
+  /*background-image: linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);*/
+}
+
+.lightning {
+  position: relative;
+  top: -0.5rem;
+  width: 1rem;
+  height: 1.3rem;
+  float: right;
+  margin-right: -0.5rem;
+  background: url("../static/img/pk/light.png") no-repeat center;
+  background-size: 100%;
+
+}
+
+.right-bar .lightning {
+  position: relative;
+  top: -0.5rem;
+  width: 1rem;
+  height: 1.3rem;
+  margin-right: -0.5rem;
+  background: url("../static/img/pk/light.png") no-repeat center;
+  background-size: 100%;
+  left: -0.4rem;
+  float: left;
+}
+
+.lp_icon {
+  position: absolute;
+  left: -0.1rem;
+  top: -0.3rem;
+  width: 0.8rem;
+  height: 0.8rem;
+  float: left;
+}
+
+.rp_icon {
+  position: absolute;
+  right: 0;
+  top: -0.3rem;
+  width: 0.8rem;
+  height: 0.8rem;
+  float: right;
+}
+
+.lessonInfo {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.lessonInfo .lt {
+  width: 30%;
+  float: left;
+}
+
+.lessonInfo .md {
+  width: 40%;
+  float: left;
+}
+
+.lessonInfo .rt {
+  width: 30%;
+  float: right;
+}
+
+.bottomInfo {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.bottomInfo .names {
+  width: 70%;
+  height: 0.6rem;
+  border-radius: 36px;
+  background: #0925b4;
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  font-size: 0.4rem;
+  font-family: Roboto;
+  font-weight: normal;
+  text-align: center;
+  color: #e1ff00;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-top: 0.2rem;
+}
+
+.teacher {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  color: #fff;
+  font-size: 0.3rem;
+  padding-top: 0.2rem;
+}
+
+.teacher span {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.classTime {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  color: #fff;
+  text-align: center;
+}
+
+.cubelist {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.cubelist .cubes {
+  width: 20%;
+  height: 1.5rem;
+  overflow: hidden;
+  float: left;
+  background-position: top center;
+
+}
+
+.cubelist .vs {
+  width: 20%;
+  height: 0.6rem;
+  overflow: hidden;
+  float: left;
+  padding-top: 0.4rem;
+}
+
+.cubelist .cubes em {
+  width: 80%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+  font-size: 0.2rem;
+  font-style: normal;
+  color: #fff;
+  line-height: 1.5rem;
+}
+
+.cubes.rcube {
+  background: url("../static/img/pk/rcube.png");
+  background-size: 100% 100%;
+}
+
+.cubes.bcube {
+  background: url("../static/img/pk/bcube.png");
+  background-size: 100% 100%;
+}
+
+.cubes.ycube {
+  background: url("../static/img/pk/ycube.png");
+  background-size: 100% 100%;
+}
+
+.teamScore {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.lessonInfo .teamScore div {
+  width: 25%;
+  float: left;
+  color: #fff;
+  font-size: 0.4rem;
+  text-align: left;
+}
+
+.lessonInfo .teamScore .md {
+  width: 50%;
+  text-align: center;
+}
+
+.lessonInfo .teamScore .rt {
+  float: right;
+  text-align: right;
+}
+
+.lessonInfo .teamScore em {
+  font-size: 0.2rem;
+}
+
+.pk_container {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.pk_container .pl_lt {
+  width: 33.333%;
+  float: left;
+}
+
+.pk_container .pl_rt {
+  width: 33.333%;
+  float: right;
+}
+
+.pk_container .pl_md {
+  width: 33.333%;
+  float: left;
+}
+
+
+.pk_container ul {
+  width: 98%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding-top: 0.01rem;
+}
+
+.pk_container li {
+  overflow: hidden;
+  color: #fff;
+  margin-bottom: 0.1rem;
+}
+
+.pk_container .lt li {
+  overflow: hidden;
+}
+
+.pk_container .rt li {
+  overflow: hidden;
+}
+
+.pk_container .pl_lt .bg {
+  border: 2px solid rgba(255, 143, 122, 0.5);
+  background: rgba(194, 36, 6, 0.5);
+}
+
+.pk_container .pl_md .bg {
+  border: 2px solid rgba(80, 115, 255, 0.5);
+  background: rgba(0, 30, 152, 0.5);
+}
+
+.pk_container .pl_rt .bg {
+  border: 2px solid rgba(255, 239, 149, 0.5);
+  /*background: rgba(255, 230, 0, 0.5);*/
+  /*background: rgba(233, 192, 12, 0.9);*/
+  background: rgba(245, 195, 0, 0.9);
+}
+
+
+.pk_container li .bg > h5 {
+  font-family: vista;
+  font-weight: 500;
+  font-size: 0.3rem;
+  text-align: center;
+  color: #fff;
+  margin: 0;
+  margin-top: 0.1rem;
+  margin-bottom: 0.1rem;
+}
+
+.bg > h5 div {
+  float: left;
+  width: 20%;
+  text-align: left;
+  text-indent: 0.1rem;
+}
+
+.bg > h5 .nameMd {
+  width: 60%;
+  text-align: center;
+  text-indent: 0;
+}
+
+.pk_container li .user {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.pk_container .user .ult {
+  width: 33.333%;
+  float: left;
+  overflow: visible;
+  flex-direction: column;
+}
+
+.pk_container .user .umd {
+  width: 33.333%;
+  float: left;
+  overflow: visible;
+  flex-direction: column
+}
+
+.pk_container .user .urt {
+  width: 33.333%;
+  float: right;
+  flex-direction: column;
+}
+
+.centerLi .slowJump {
+  animation: mymove 3s infinite;
+  -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
+  animation-direction: alternate; /*轮流反向播放动画。*/
+  animation-timing-function: ease-in-out; /*动画的速度曲线*/
+  /* Safari 和 Chrome */
+  -webkit-animation: mymove 3s infinite;
+  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+}
+
+.user .ult span {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: "Source Han Sans CN";
+  font-weight: normal;
+  font-size: 0.3rem;
+  text-align: center;
+}
+
+.user .ult em {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.user .ult em div {
+  width: 80%;
+  overflow: hidden;
+  float: right;
+  text-align: right;
+  padding-right: 0.3rem;
+  font-size: 0.8rem;
+  line-height: 1.6rem;
+}
+
+.user .ult s {
+  position: relative;
+  top: -1.2rem;
+  right: 0rem;
+  float: right;
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 0.3rem;
+  text-align: center;
+  text-decoration: none;
+}
+
+.circle {
+  width: 1.73rem;
+  height: 1.73rem;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  border-radius: 33rem;
+  padding-top: 0.09rem;
+}
+
+.user .umd img {
+  width: 1.45rem;
+  height: 1.45rem;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  border-radius: 33rem;
+  border: 0.1rem solid #B9CB01;
+}
+
+
+.urt img {
+  position: relative;
+  right: 0.1rem;
+  top: -1.2rem;
+  width: 0.35rem;
+  height: 0.35rem;
+  float: right;
+}
+
+.urt em {
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 0.7rem;
+  letter-spacing: -0.05em;
+  text-align: right;
+  font-style: normal;
+  line-height: 1.5rem;
+  padding-right: 25%;
+}
+
+.bottomLi {
+  width: 98%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-weight: normal;
+  color: #fff;
+  text-align: center;
+  font-size: 0.4rem;
+  text-indent: 0.2rem;
+}
+
+.bottomLi img {
+  float: left;
+  margin-left: 10%;
+}
+
+.bottomLi span {
+  float: left;
+  text-align: left;
+}
+
+.bottomLi .btcla {
+  width: 30%;
+  float: left;
+  text-align: left;
+}
+
+.bottomLi .btck {
+  width: 40%;
+  float: left;
+  text-align: left;
+}
+
+.bottomLi .step {
+  width: 30%;
+  float: right;
+  text-align: left;
+}
+
+@keyframes mymove {
+  0% {
+    transform: scale(1); /*开始为原始大小*/
+  }
+  25% {
+    transform: scale(1.2); /*放大1.1倍*/
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.2);
+  }
+
+}
+
+@-webkit-keyframes mymove /*Safari and Chrome*/
+{
+  0% {
+    transform: scale(1); /*开始为原始大小*/
+  }
+  25% {
+    transform: scale(1.2); /*放大1.1倍*/
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.2);
+  }
+}
+
+.partInfo {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding-top: 1rem;
+}
+
+.partInfo .rp, .partInfo .bp {
+  width: 50%;
+  float: left;
+}
+
+.partInfo .title {
+  width: 33%;
+  overflow: hidden;
+  display: block;
+  margin: 0;
+  font-size: 0.4rem;
+  color: #fff;
+  text-align: left;
+}
+
+.rtitle {
+  float: left;
+  padding-left: 0.25rem;
+}
+
+.partInfo .btitle {
+  width: 30%;
+  float: right;
+}
+
+.partInfo .title img {
+  float: left;
+  margin-right: 0.2rem;
+}
+
+.cubelist {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.teamScore {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.teamScore div {
+  width: 50%;
+  float: left;
+  text-align: center;
+  color: #fff;
+  font-size: 0.6rem;
+}
+
+
+.fastJump {
+  animation: mymove 1s infinite;
+  -webkit-animation: mymove 1s infinite; /*Safari and Chrome*/
+  animation-direction: alternate; /*轮流反向播放动画。*/
+  animation-timing-function: ease-in-out; /*动画的速度曲线*/
+  /* Safari 和 Chrome */
+  -webkit-animation: mymove 1s infinite;
+  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+}
+
+.slowJump {
+  animation: mymove 2s infinite;
+  -webkit-animation: mymove 2s infinite; /*Safari and Chrome*/
+  animation-direction: alternate; /*轮流反向播放动画。*/
+  animation-timing-function: ease-in-out; /*动画的速度曲线*/
+  /* Safari 和 Chrome */
+  -webkit-animation: mymove 3s infinite;
+  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+}
+
+
+/*two*/
+
+.pk_container li.two {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+}
+
+.pk_container li.two .user {
+  height: 1.75rem;
+  overflow: hidden;
+}
+
+.two .bottomLi {
+  width: 98%;
+  font-size: 0.35rem;
+  margin-top: 0rem;
+  text-align: center;
+}
+
+.two .bottomLi img {
+  width: 0.4rem;
+  height: 0.4rem;
+  margin-top: 0.15rem;
+}
+
+.two .bottomLi .btck img {
+  width: 0.4rem;
+  margin-top: 0.1rem;
+}
+
+.two .bottomLi span {
+  line-height: 0.8rem;
+  text-indent: 0.1rem;
+}
+
+.two .bottomLi .btcla {
+  width: 30%;
+}
+
+.two .bottomLi .btck {
+  width: 33%;
+  padding-left: 3%;
+}
+
+.two .bottomLi .step {
+  width: 26%;
+  padding-right: 0%;
+}
+
+.two .cla em.plus {
+  position: relative;
+  left: -0.3rem
+}
+
+.two .lhj span.plus {
+  position: relative;
+  left: 1.3rem
+}
+
+.two .bottomLi .btck img {
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-top: 0.12rem;
+}
+
+/*three*/
+
+.pk_container li.three {
+  width: 90%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-bottom: 0.1rem;
+  float: none;
+}
+
+.three .bottomLi {
+  width: 98%;
+  font-size: 0.35rem;
+  margin-top: 0rem;
+  text-align: center;
+}
+
+.three .circle {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
+.three .circle img {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.three .user {
+  height: 1.2rem;
+  overflow: hidden;
+}
+
+.three .ult em div {
+  line-height: 1.2rem;
+}
+
+.three .urt em {
+  line-height: 1.2rem;
+}
+
+.three .bottomLi img {
+  width: 0.4rem;
+  height: 0.4rem;
+  margin-top: 0.15rem;
+}
+
+.three .bottomLi .btck img {
+  width: 0.4rem;
+  margin-top: 0.1rem;
+}
+
+.three .bottomLi span {
+  line-height: 0.8rem;
+  text-indent: 0.1rem;
+}
+
+.three .bottomLi .btcla {
+  width: 30%;
+}
+
+.three .bottomLi .btck {
+  width: 33%;
+  padding-left: 3%;
+}
+
+.three .bottomLi .step {
+  width: 28%;
+  padding-right: 0%;
+}
+
+.three .cla em.plus {
+  position: relative;
+  left: -0.3rem
+}
+
+.three .lhj span.plus {
+  position: relative;
+  left: 1.3rem
+}
+
+.three .bottomLi .btck img {
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-top: 0.12rem;
+}
+
+
+/*four*/
+.pk_container .four {
+  width: 49%;
+  float: left;
+  /*margin-top: 0.4rem;*/
+  /*margin-bottom: 0.5rem;*/
+}
+
+.four .bg {
+  width: 96%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.pk_container li.four .bg > h5 {
+  font-size: 0.25rem;
+}
+
+.four .user .ult span {
+  font-size: 0.2rem;
+}
+
+.four .user .ult em div {
+  width: 90%;
+  margin-right: 0;
+  font-size: 0.5rem;
+  line-height: 1rem;
+  padding-right: 0.2rem;
+}
+
+.four .user .ult s {
+  font-size: 0.2rem;
+  line-height: 1rem;
+}
+
+.four .circle {
+  width: 1rem;
+  height: 1rem;
+}
+
+.four .user .umd img {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.four .urt img {
+  width: 0.15rem;
+  height: 0.15rem;
+  top: -0.8rem;
+}
+
+.four .urt em {
+  font-size: 0.4rem;
+  line-height: 1rem;
+}
+
+.four .bottomLi {
+  width: 100%;
+  text-indent: 0.1rem;
+  font-size: 0.2rem;
+}
+
+.four .bottomLi img {
+  width: 0.2rem;
+  height: 0.2rem;
+}
+
+.four .bottomLi span {
+  width: 60%;
+}
+
+.four .user {
+  height: 1.2rem;
+  overflow: hidden;
+}
+
+.four .nameMd {
+  font-size: 0.2rem;
+}
+
+/*six*/
+
+
+/*eight*/
+.eight {
+  width: 50%;
+  float: left;
+}
+
+.eight .bg {
+  width: 96%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.pk_container li.eight .bg > h5 {
+  font-size: 0.25rem;
+  margin: 0.01rem 0;
+}
+
+.eight .user .ult span {
+  font-size: 0.2rem;
+
+}
+
+.eight .user .ult em div {
+  width: 90%;
+  padding-right: 0.2rem;
+  margin-right: 0rem;
+  font-size: 0.4rem;
+  line-height: 0.8rem;
+}
+
+.eight .user .ult s {
+  font-size: 0.2rem;
+  line-height: 1.3rem;
+}
+
+.eight .circle {
+  width: 1rem;
+  height: 1rem;
+}
+
+.eight .user .umd img {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+.eight .urt img {
+  width: 0.15rem;
+  height: 0.15rem;
+  top: -0.6rem;
+  right: 0.2rem;
+}
+
+.eight .urt em {
+  font-size: 0.3rem;
+  line-height: 0.8rem;
+  padding-right: 45%;
+}
+
+.eight .bottomLi {
+  width: 100%;
+  text-indent: 0.1rem;
+  font-size: 0.2rem;
+}
+
+.eight .bottomLi img {
+  width: 0.2rem;
+  height: 0.2rem;
+}
+
+.eight .bottomLi span {
+  width: 60%;
+}
+
+.eight .user {
+  height: 0.85rem;
+  overflow: hidden;
+}
+
+.eight .nameMd {
+  font-size: 0.2rem;
+}
+
+/*color*/
+.user .umd img.blue {
+  border-color: #028FE1;
+}
+
+.user .umd img.violet {
+  border-color: #6D26FA;
+}
+
+.user .umd img.green {
+  border-color: #059F00;
+}
+
+.user .umd img.yellow {
+  border-color: #B5C700;
+}
+
+.user .umd img.brown {
+  border-color: #EA8813;
+}
+
+.user .umd img.red {
+  border-color: #CF1122;
+}
+
+.birth {
+  position: relative;
+  top: -2rem;
+  width: 1.7rem;
+  height: 1px;
+  display: block;
+  margin: 0 auto;
+}
+
+.birth img.birthCrow {
+  position: relative;
+  top: 0.2rem;
+  width: 1.1rem;
+  height: 0.4rem;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  border: none;
+}
+
+.birth img.birthText {
+  position: relative;
+  top: 1rem;
+  width: 1.4rem;
+  height: 0.6rem;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  border: none;
+}
+
+.three .birth img.birthCrow {
+  top: 0.7rem;
+  width: 0.8rem;
+  height: 0.3rem;
+}
+
+.three .birth img.birthText {
+  top: 1.1rem;
+  width: 1.3rem;
+  height: 0.6rem;
+}
+
+.four .birth {
+  width: 1rem;
+}
+
+.four .birth img.birthCrow {
+  top: 0.9rem;
+  width: 0.7rem;
+  height: 0.3rem;
+}
+
+.four .birth img.birthText {
+  top: 1.3rem;
+  width: 0.8rem;
+  height: 0.35rem;
+}
+
+.eight .birth {
+  width: 1rem;
+}
+
+.eight .birth img.birthCrow {
+  top: 1.25rem;
+  width: 0.5rem;
+  height: 0.2rem;
+}
+
+.eight .birth img.birthText {
+  top: 1.5rem;
+  width: 0.7rem;
+  height: 0.3rem;
+}
+
+/*isPrivate*/
+.isPrivate {
+  position: relative;
+  float: right;
+  right: -0.35rem;
+  width: 55%;
+  height: 1px;
+  display: block;
+  margin: 0 auto;
+  overflow: visible;
+}
+
+.isPrivate i {
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-top: 0.2rem;
+  width: 0.8rem !important;
+  height: 0.8rem !important;
+  border: none !important;
+  background: url("../static/img/privateSign.svg");
+  background-size: 100% 100%;
+  background-position: top center;
+}
+
+.two .isPrivate {
+  top: -2rem;
+}
+
+.three .isPrivate {
+  top: -1.4rem;
+  right: -0.1rem;
+}
+
+.three .isPrivate i {
+  width: 0.6rem !important;
+  height: 0.6rem !important;
+}
+
+.four .isPrivate {
+  top: -1.28rem;
+  right: -0.27rem;
+}
+
+.four .isPrivate i {
+  width: 0.4rem !important;
+  height: 0.4rem !important;
+}
+
+.eight .isPrivate {
+  top: -1rem;
+  right: -0.1rem;
+}
+
+.eight .isPrivate i {
+  width: 0.4rem !important;
+  height: 0.4rem !important;
+}
 
 </style>