TV2/src/views/2pkRank.vue

<template>
  <!--  http://192.168.0.162:202/#/2pkrank-->
  <div class="content" :class="[{'bg1': pages == 1}, {'bg2': pages == 2}, {'bg3': pages == 3}]">
    <Headside></Headside>
    <div class="pages pageSum" v-show="pages == 1">
      <div class="pageTitle">
      </div>
      <div class="pkResult">
        <div class="lt">
          <div class="panel">
            <span class="level">
              <h5 class="winner" v-if="winner == 1">红队胜</h5>
              <h5 class="loser" v-else>第二名</h5>
              <img v-if="winner == 1" src="../assets/imgs/pkRank/trophy.png" alt="">
            </span>
            <span class="center">CK</span>
            <span class="ckValue">
              <em class="winner" v-if="winner == 1">{{ redSumCk }}</em>
              <em class="loser" v-else>{{ redSumCk }}</em>
            </span>
            <div class="mvp">
              <div class="head">
                <img :src="redMvp.Head" alt="" v-if="redMvp.Head"
                    :class="[{'boy':redMvp.Sex == 1},{'girl':redMvp.Sex == 2}]">
                <!-- <img src="../static/img/people/flyhead.png" alt="" v-if="!redMvp.Head" 
                    :class="[{'boy':redMvp.Sex == 1},{'girl':redMvp.Sex == 2}]"> -->
                <default-head v-if="!redMvp.Head" :class="[{'boy':redMvp.Sex == 1},{'girl':redMvp.Sex == 2}]"></default-head>
                <div class="names">
                <span>
                    {{ redMvp.Name }}
                </span>
                </div>
              </div>
              <span class="mvpCode">最佳队员</span>
            </div>
            <div class="per">
              人均卡路里 {{redAveCle}}
            </div>
          </div>          
          <div class="teamName">
            红队
          </div>
        </div>
        <div class="rt">
          <div class="panel">
            <span class="level">
              <h5 class="winner" v-if="winner == 2">蓝队胜</h5>
              <h5 class="loser" v-else>第二名</h5>
              <img v-if="winner == 2" src="../assets/imgs/pkRank/trophy.png" alt="">
            </span>
            <span class="center">CK</span>
            <span class="ckValue">
              <em class="winner" v-if="winner == 2">{{ blueSumCk }}</em>
              <em class="loser" v-else>{{ blueSumCk }}</em>
            </span>
            <div class="mvp">
              <div class="head">
                <img :src="blueMvp.Head" alt="" v-if="blueMvp.Head"
                    :class="[{'boy':blueMvp.Sex == 1},{'girl':blueMvp.Sex == 2}]">
                <!-- <img src="../static/img/people/flyhead.png" alt="" v-if="!blueMvp.Head"
                    :class="[{'boy':blueMvp.Sex == 1},{'girl':blueMvp.Sex == 2}]"> -->
                <default-head v-if="!blueMvp.Head" :class="[{'boy':blueMvp.Sex == 1},{'girl':blueMvp.Sex == 2}]"></default-head>
                <div class="names">
                <span>
                    {{ blueMvp.Name }}
                </span>
                </div>
              </div>
              <span class="mvpCode">最佳队员</span>
            </div>
            <div class="per">
              人均卡路里 {{blueAveCle}}
            </div>
          </div>          
          <div class="teamName">
            蓝队
          </div>
        </div>
      </div>
    </div>
    <div class="pages pageDetail" v-show="pages == 2">
      <div class="sumTitle">
        <div class="lt">
          <div class="titleRow redRow">
            <span class="rowName">红队</span>
            <img v-show="winner == 1" src="../assets/imgs/pkRank/trophy.png" alt="">
            <span class="rowValue">
              <em>CK</em>
              <s class="winnerSum" v-show="winner == 1">{{ redSumCk }}</S>
              <s class="loserSum" v-show="winner != 1">{{ redSumCk }}</s>
            </span>
          </div>
        </div>
        <div class="md">
          <img src="../assets/imgs/pk/vs.png" alt="">
        </div>
        <div class="rt">
          <div class="titleRow blueRow">
            <span class="rowName">蓝队</span>
            <img v-show="winner == 2" src="../assets/imgs/pkRank/trophy.png" alt="">
            <span class="rowValue">
              <em>CK</em>
              <s class="winnerSum" v-show="winner == 2">{{ blueSumCk }}</S>
              <s class="loserSum" v-show="winner != 2">{{ blueSumCk }}</s>
            </span>
          </div>
        </div>
      </div>
      <div class="listContainer">
        <div class="lt">
          <ul>
            <div class="ltTitle">
              <span>排名</span>
              <span>成员</span>
              <span>Ei</span>
              <span>CK</span>
            </div>
            <li v-for="(s,i) in students.redUnite" v-if="i <= 7" v-show="Listate[i].state"
                :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
              <div class="gary redrow">
                <em>{{ i + 1 }}</em>
                <div class="head">
                  <img :src="s.Head" alt="" v-if="s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
                  <!-- <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head"
                       :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]"> -->
                  <default-head v-if="!s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]"></default-head>
                </div>
                <span class="names">{{ s.Name }}</span>
                <span class="glory">
                  <img src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
                  <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
                  <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->
                </span>
                <span class="eiScore">{{ s.EI|fmtInt }}</span>
                <span class="score">{{ s.Ck|fmtFloat }}</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="rt">
          <ul>
            <div class="ltTitle">
              <span>排名</span>
              <span>成员</span>
              <span>Ei</span>
              <span>CK</span>
            </div>
            <li v-for="(s,i) in students.blueUnite" v-if="i <= 7" v-show="Listate[i].state"
                :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
              <div class="gary bluerow">
                <em>{{ i + 1 }}</em>
                <div class="head">
                  <img :src="s.Head" alt="" v-if="s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
                  <!-- <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head"
                       :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]"> -->
                  <default-head v-if="!s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]"></default-head>
                </div>
                <span class="names">{{ s.Name }}</span>
                <span class="glory">
                  <img src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
                  <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
                  <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->                
                </span>
                <span class="eiScore">{{ s.EI|fmtInt }}</span>
                <span class="score">{{ s.Ck|fmtFloat }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="icons">
        <img src="../assets/imgs/rank/icons2.svg" alt="">
      </div>      
    </div>
    <!-- 运动强度排名 -->
    <div class="pageYdqdpm" v-show="pages == 3">
      <div class="title">
        <span>运动强度排名</span>
      </div>
      <eiRank :students="students" ref="eiRank"></eiRank>
    </div>
    <div v-show="totalTime > 0" class="countdown">{{totalTime}}</div>
  </div>   
</template>

<script>
import Headside from '@/components/Headside'
import defaultHead from '@/components/defaultHead'
import {ClassUserRank, AddPkInfo} from "@/api/getApiRes"
import eiRank from '@/components/eiRank'

let qs = require('qs');
export default {
  data() {
    return {
      pages: 1,
      eqSn: '30:9C:23:0C:8B:1E',
      pageStyle: RandomBg(),
      redMvp: {
        Age: 13,
        AvgHr: 0,
        BeginTime: 1608188579,
        Ck: "@float(1,99,0,1)",
        Cle: "@float(1,9999,0,1)",
        DuId: 119,
        EndTime: 0,
        Head: require('../static/img/testhead.png'),
        Height: 160,
        HrId: 41,
        IsBirthday: 0,
        IsBreaking: 0,
        IsNewUser: 0,
        MaxHr: 80,
        PowerPercent: "@integer(10, 100)",
        Name: "姜泽志",
        PkSucessnum: '1',//胜场数
        PkTotalnum: '1',//总场数
        PlanId: 60,
        PureCalorieNoVo2: "@integer(1, 999)",
        Sex: 1,
        Sn: "22735",
        StaticHr: 60,
        SvId: 20,
        UserId: 104,
        UserMd5: "55661a861f8fae20dd505b2b4575dc0e",
        Weight: 50,
        ActivePercent: "@integer(10, 100)",
        bmrMSjRmrcb: 66.00000000000001,
        FormatCk: "@integer(1, 999)",
        isAlive: true,
        isFinish: false,
        isOver: false,
        IsPrivate: 1,
        lastPushDataTime: 1608188947175,
        lastUpdateTime: 1608188945184,
        queuePushData: [],
      },
      blueMvp: {
        Age: 13,
        AvgHr: 0,
        BeginTime: 1608188579,
        Ck: "@float(1,99,0,1)",
        Cle: "@float(1,9999,0,1)",
        DuId: 119,
        EndTime: 0,
        Head: require('../static/img/testhead.png'),
        Height: 160,
        HrId: 41,
        IsBirthday: 0,
        IsBreaking: 0,
        IsNewUser: 0,
        MaxHr: 80,
        PowerPercent: "@integer(10, 100)",
        Name: "姜泽志",
        PkSucessnum: '1',//胜场数
        PkTotalnum: '1',//总场数
        PlanId: 60,
        PureCalorieNoVo2: "@integer(1, 999)",
        Sex: 1,
        Sn: "22735",
        StaticHr: 60,
        SvId: 20,
        UserId: 104,
        UserMd5: "55661a861f8fae20dd505b2b4575dc0e",
        Weight: 50,
        ActivePercent: "@integer(10, 100)",
        bmrMSjRmrcb: 66.00000000000001,
        FormatCk: "@integer(1, 999)",
        isAlive: true,
        isFinish: false,
        isOver: false,
        IsPrivate: 1,
        lastPushDataTime: 1608188947175,
        lastUpdateTime: 1608188945184,
        queuePushData: [],
      },
      winner: 1,
      trueDate: true,//真实数据 true false
      autoJump: true,//开启自动跳走
      students: {
        redUnite: [],
        blueUnite: [],
        EiSort: [],
      },
      rankTimer: null,

      redSumCk: 0,
      redSumCle: 0,
      redAveCle: 0,

      blueSumCk: 0,
      blueSumCle: 0,
      blueAveCle: 0,

      page1ShowTime: 10000,   //页面1显示时长 毫秒
      page2ShowTime: 30000,   //页面2显示时长 毫秒
      page3ShowTime: 0,       //页面3显示时长 毫秒
      totalTime: '',
      Listate: [
        {state: false},{state: false},{state: false},{state: false},{state: false},{state: false},{state: false},{state: false},
      ],
    }
  },
  mounted() {
    this.init();    
  },
  watch: {
    '$route': function (val) {
      if (val.path == '/2pkRank') {
        if (this.trueDate) {
          this.init();
        } else {
          // this.rankTimer  = setInterval(() => {
          // this.students.CkSort = fakeNews(5);
          // this.students.CalSort = fakeNews(5);
          // }, 5000);
        }
      } else {
        clearInterval(this.rankTimer);
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.rankTimer);
    this.rankTimer = null;
  },
  methods: {
    init() {
      this.getClassUserRank();
      this.pages = 1;
      // this.cardPlay();
      this.execWait(this.page1ShowTime, "that.enterPage(2)");
      // N秒后翻页
      // this.rankTimer = setTimeout(() => {
      //   if (this.pages == 1) {
      //     this.pages = 2;                   
      //   }
      //   else {
      //     this.pages = 1;
      //   }
      //   this.cardPlay(); 
      // }, 10000);
    },
    enterPage(page) {
      this.pages = page;
      if (page == 2) {
        this.cardPlay();
        this.execWait(this.page2ShowTime, "that.enterPage(3)");
      }
      else if (page == 3) {
        this.$refs.eiRank.pagePlay();
        this.page3ShowTime = this.$refs.eiRank.showTimeTotal;
        // this.execWait(this.page3ShowTime);
        this.execWait(this.page3ShowTime, "that.$router.push({path: '/'});");
      }
    },
    //倒计时，并在计时结束后执行指定的语句
    execWait(waitTime, execStr="") {
      waitTime = parseInt(waitTime / 1000);
      let that = this;
      clearInterval(clock);
      let clock = window.setInterval(() => {        
        that.totalTime = waitTime;
        if (parseInt(waitTime) <= 0) {
          if (execStr != "") {
            eval(execStr);
          }
          // 计时器回收
          clearInterval(clock);
        }
        waitTime--;
      }, 1000)
    },
    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) {
          // console.log("ClassUserRank: " + JSON.stringify(json));
          that.UniteBreak(json.Rs, json.Dp.PlanId);
          that.students.EiSort = deepClone(json.Rs);

          // let totalTime = 40;
          // let Studenlength = 0;
          // if (json.Rs) {
          //   Studenlength = json.Rs.length;
          // }
          // // 根据人数多少显示停留时间
          // if (Studenlength > 3) {
          //   totalTime = 40
          // } else {
          //   totalTime = 30
          // }
          // this.jumpWait(totalTime);
        } else {
          that.students.redUnite = [];
          that.students.blueUnite = [];
          // this.jumpWait(10);
          if (json.Code == '999') {
            // that.$router.push({path: '/'});
          } else {
            // 已出错
            that.$message.error(json.Memo);
          }
        }
      })
    },
    // 分队展示
    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.redMvp = that.students.redUnite[0];
      that.blueMvp = that.students.blueUnite[0];
      
      that.calcSumCK(that.students, PlanId);
    },
    // 计算各队总分
    calcSumCK(Rs, PlanId) {
      let that = this;
      let redSumCk = 0;
      let redSumCle = 0;
      let blueSumCk = 0;
      let blueSumCle = 0;
      Rs.redUnite.map(function (item, t) {
        redSumCk += parseFloat(item.Ck);
        redSumCle += parseFloat(item.Cle);
      });
      Rs.blueUnite.map(function (item, t) {
        blueSumCk += parseFloat(item.Ck);
        blueSumCle += parseFloat(item.Cle);
        // that.successCalc(item);
      });
      that.redSumCk = redSumCk.toFixed(1);
      that.redSumCle = redSumCle.toFixed(1);
      that.blueSumCk = blueSumCk.toFixed(1);
      that.blueSumCle = blueSumCle.toFixed(1);

      // 获取人数 计算人均CK
      let redHuman = 0;
      let blueHuman = 0;
      if (Rs.redUnite != '') {
          redHuman = Rs.redUnite.length;
          that.redAveCle = parseFloat(redSumCle / redHuman).toFixed(1);
      } else {
          that.redAveCle = 0
      }
      if (Rs.blueUnite != '') {
          blueHuman = Rs.blueUnite.length;
          that.blueAveCle = parseFloat(blueSumCle / blueHuman).toFixed(1);
      } else {
          that.blueAveCle = 0
      }

      // 上报胜率结果
      let groupNo = redSumCk >= blueSumCk ? 1 : 2;
      that.winner = groupNo;
      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);
        }
      }
    },
    // 竞技课程结果上传
    PostAddPkInfo(dpId, groupNo) {
      let isViewMode = false;
      // 如果是演示版不上报比赛结果
      if (isViewMode) {
        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('[PostAddPkInfo] 竞技课程结果上传失败! code:' + json.Code + ' memo:' + json.Memo);
          // that.$message.error(json.Memo);
        }
      })
    },
    // jumpWait(totalTime) {
    //   // return;  //debug时可以屏蔽本句，不进行跳转
    //   // 倒计时60秒自动关闭
    //   let that = this;
    //   clearInterval(clock);
    //   let clock = window.setInterval(() => {        
    //     that.totalTime = totalTime;
    //     if (parseInt(totalTime) <= 0) {
    //       // 前往等待页面
    //       that.$router.push({path: '/'});
    //       // 计时器回收
    //       clearInterval(clock);
    //     }
    //     totalTime--;
    //   }, 1000)
    // },
    cardPlay() {
      let that = this;
      // 重置一下状态
      that.Listate.map(function (t) {
        t.state = false;
      })
      let timeScope = 100;  //400
      let timeLong;
      that.timer = setTimeout(() => {   //设置延迟执行
        for (let i = 0; i < 8; i++) {
          timeLong = parseInt(i * timeScope);
          that.timer = setTimeout(() => {   //设置延迟执行
            that.Listate[i].state = true;
          }, timeLong)
        }
      }, 60);
    },
  },
  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);
      }
    },
  },
  components: {
    Headside, defaultHead, eiRank
  }
}
</script>

<style lang="scss" scoped>
@mixin bg {
  height: auto;
  min-height: 100%;
  background-color: #333;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
}

@mixin cube {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.bg1 {
  background: url("../../src/assets/imgs/pkRank/bg.png");
  @include bg;
}

.bg2 {
  background: url("../../src/assets/imgs/pkRank/bg.png");
  @include bg;
}

.bg3 {
  background: url("../../src/assets/imgs/rank/bg_ydqdpm.png");
  @include bg;
}

.content {

  .pageTitle {
    background: url("../assets/imgs/pkRank/title.svg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    @include cube;
    width: 2rem;
    height: 0.5rem;
  }

  .pageSum {

    .pkResult {
      @include cube;
      width: 70%;
      margin-top: 0.8rem;
      padding-bottom: 0.3rem;

      .lt {
        width: 5rem;
        float: left;

        .panel {
          background: url("../assets/imgs/pkRank/redCube.png");
          background-repeat: no-repeat;
          background-position: top center;
          background-size: 100% 100%;
        }        
      }

      .rt {
        width: 5rem;
        float: right;
        
        .panel {
          background: url("../assets/imgs/pkRank/blueCube.png");
          background-repeat: no-repeat;
          background-position: top center;
          background-size: 100% 100%;
        }        
      }

      .level {
        @include cube;
        color: white;
        height: 1.7rem;

        img {
          position: relative;
          width: 1rem;
          bottom: 1rem;
          left: 0.2rem;
          float: left;
        }

        h5 {
          @include cube;
          margin: 0 auto;
          margin-top: 0.5rem;
          font-size: 0.6rem;
          font-weight: normal;

          &.winner {
            color: #FFEB50;
          }
        }
      }

      .center {
        @include cube;
        color: white;
        font-size: 0.4rem;
      }

      .ckValue {
        @include cube;
        color: white;

        .winner {
          color: #FFEB50;
        }

        em {
          // position: relative;
          // bottom: 0.3rem;
          font-size: 0.8rem;
          line-height: 0.5rem;
          font-weight: bold;
          font-style: normal;
        }
      }

      .mvp {
        @include cube;
        margin-top: 0.3rem;

        .head {
          @include cube;
          height: 2rem;

          img {
            @include cube;
            width: 1.8rem;
            height: 1.8rem;
            border-radius: 250rem;

            &.girl {
              border: 2px solid #EA26EA;
            }

            &.boy {
              border: 2px solid #39B6FF;
            }
          }

          .names {
            background: rgba(0, 0, 0, 0.7);
            text-align: center;
            padding: 1% 1%;
            border-radius: 250rem;
            position: relative;
            width: 1.2rem;
            height: 0.2rem;
            line-height: 0.2rem;
            font-size: 0.2rem;
            bottom: 0.25rem;
            color: white;
            margin: 0 auto;
          }
        }

        .mvpCode {
          @include cube;
          font-size: 0.3rem;
          color: white;
          line-height: 0.6rem;
          margin-top: 0;
          margin-bottom: 0.1rem;
        }
      }

      .per {
        @include cube;
        font-size: 0.3rem;
        color: white;
        line-height: 0.6rem;
        // margin-top: 0.3rem;
      }

      .teamName {
        margin-top: 0.3rem;
        font-size: 0.5rem;
        color: white;
      }
    }
  }

  .pageDetail {
    overflow: hidden;

    .sumTitle {
      @include cube;
      width: 90%;
      margin-top: 0.7rem;
      overflow: visible;

      .lt {
        width: 45%;
        float: left;
      }

      .md {
        width: 10%;
        float: left;

        img {
          @include cube;
          width: 1.2rem;
          position: relative;
          bottom: 0.2rem;
        }
      }

      .rt {
        width: 45%;
        float: right;
      }

      .titleRow {
        @include cube;
        height: 0.7rem;
        overflow: visible;

        &.redRow {
          background: url("../assets/imgs/pkRank/redTitle.svg");
          background-repeat: no-repeat;
          background-position: top center;
          background-size: 100%;
        }

        &.blueRow {
          background: url("../assets/imgs/pkRank/blueTitle.svg");
          background-repeat: no-repeat;
          background-position: top center;
          background-size: 100%;

          .rowName {
            float: right;
          }

          .rowValue {
            float: left;

            em {
              float: right;
            }
          }
        }

        .rowName {
          font-size: 0.4rem;
          float: left;
          color: white;
          padding: 0 0.3rem;
        }

        img {
          position: relative;
          bottom: 0.7rem;
          width: 1rem;
          float: left;
        }

        .rowValue {
          float: right;
          padding-right: 0.2rem;

          em {
            float: left;
            color: white;
            font-size: 0.3rem;
            font-style: normal;
            font-weight: bold;
            line-height: 0.6rem;

          }

          s {
            text-decoration: none;
            float: right;
            text-align: right;
            font-size: 1rem;
            color: white;
            line-height: 0.6rem;
            padding: 0 0.2rem;
            font-weight: bold;
            font-family: "Arial";

            &.winnerSum {
              color: #FFEB50;
            }
          }
        }
      }
    }

    .listContainer {
      @include cube;
      width: 90%;
      min-height: 6rem;
      padding-bottom: 0.2rem;

      .lt {
        width: 47%;
        float: left;
      }

      .rt {
        width: 47%;
        float: right;
      }

      .ltTitle {
        @include cube;

        span {
          float: left;
          color: #fff;
          font-size: 0.3rem;

          &:nth-child(1) {
            margin-right: 1.4rem;
          }

          &:nth-child(2) {
            margin-right: 3.5rem;
          }

          &:last-child {
            float: right;
            margin-right: 0.3rem;
          }
        }
      }

      ul {
        @include cube;

        li {
          @include cube;
          height: 0.7rem;
          padding-top: 0.2rem;

          .gary {
            @include cube;
            height: 0.6rem;
            margin-bottom: 0.3rem;
            background-repeat: no-repeat;
            background-position: top center;
            background-size: 100% 100%;
            overflow: visible;
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-left: 0;

            &:after {
              opacity: 10%;
            }

            &.redrow {
              background: url("../assets/imgs/3pkRank/redrow.png");
            }

            &.bluerow {
              background: url("../assets/imgs/3pkRank/bluerow.png");
            }

          }

          em {
            width: 0.6rem;
            height: 0.6rem;
            float: left;
            background: url("../assets/imgs/rank/rowTitle.png");
            background-repeat: no-repeat;
            background-position: top center;
            background-size: 100% 100%;
            text-align: left;
            text-indent: 0.1rem;
            font-size: 0.3rem;
            font-weight: bold;
            text-decoration: none;
            font-style: normal;
            color: white;
            line-height: 0.6rem;
          }

          .head {
            position: relative;
            bottom: 0.5rem;
            float: left;
            margin-left: 0.3rem;

            img {
              width: 0.7rem;
              height: 0.7rem;
              border-radius: 250rem;

              &.girl {
                border: 1px solid #EA26EA;
              }

              &.boy {
                border: 1px solid #39B6FF;
              }
            }
          }

          .names {
            float: left;
            color: white;
            font-size: 0.3rem;
            line-height: 0.6rem;
            margin-left: 0.4rem;
            min-width: 2rem;
            text-align: left;
          }

          .glory {
            float: left;
            margin-left: 0rem;
            min-width: 0.8rem;
            min-height: 0.2rem;
            
            img {
              float: right;
              width: 0.6rem;
              margin-left: 0.2rem;
              margin-top: 0.1rem;
            }
          }

          .eiScore {
            float: left;
            color: white;
            width: 0.9rem;
            font-size: 0.3rem;
            line-height: 0.6rem;
            font-family: Arial;
            font-weight: bold;
            font-style: italic;
            text-align: left;
            padding-left: 1.26rem;
          }

          .score {
            float: right;
            color: #FFE61F;
            font-size: 0.3rem;
            line-height: 0.6rem;
            font-family: Arial;
            font-weight: bold;
            font-style: italic;
            text-align: center;
            padding-right: 0.2rem;
          }
        }
      }
    }
  }
  
  .pageYdqdpm {
    
    .title {
      // position: relative;
      width: 3.6rem;
      height: 0.75rem;
      margin: 0 auto;
      margin-top: 0.03rem;
      bottom: 0.1rem;
      background: url("../../src/assets/imgs/rank/titleBg2.png");
      background-repeat: no-repeat;
      background-position: top center;
      background-size: 100% 100%;
      line-height: 0.7rem;

      span {
        @include cube;
        // position: relative;
        bottom: 0.65rem;
        color: #fff;
        text-align: center;
        font-size: 0.35rem;
        font-weight: bold;
      }
    }
  }
}

.icons {
  @include cube;
  position: static;
  padding-bottom: 0.2rem;

  img {
    @include cube;
    // width: 40%;
    width: 18%;
  }
}

.countdown {
  width: 1rem;
  position: fixed;
  font-size: 0.25rem;
  color: white;
  right: 0rem;
  bottom: 0.2rem;
}

/*响应式调整*/
@media (max-aspect-ratio: 1920/1080) {  //max-aspect-ratio: 小于等于   min-aspect-ratio: 大于等于
  .icons {
    position: fixed;
    padding-bottom: 0rem;
    bottom: 0.2rem;
  }    
}
</style>