|
|
@@ -1,216 +1,296 @@
|
|
|
<template>
|
|
|
- <div :class="pageStyle">
|
|
|
+ <!-- http://192.168.0.162:202/#/2pkrank-->
|
|
|
+ <div class="content">
|
|
|
<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>
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- <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">
|
|
|
-
|
|
|
- <em>
|
|
|
- 蓝队
|
|
|
- </em>
|
|
|
-
|
|
|
- <span class="sumCK">
|
|
|
- <em>{{ blueSum }}</em><i>Ck</i>
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- <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">
|
|
|
- <em>
|
|
|
- 黄队
|
|
|
- </em>
|
|
|
- <span class="sumCK">
|
|
|
- <em>{{ yellowSum }}</em><i>Ck</i>
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- <span class="flagContainer">
|
|
|
- <img src="../assets/img/2pkRank/flag.svg" alt="" v-if="yellow.rank == 1">
|
|
|
- </span>
|
|
|
- </div>
|
|
|
+ <div class="pages pageSum" v-show="pages == 1">
|
|
|
+ <div class="pageTitle">
|
|
|
</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 class="pkResult">
|
|
|
+ <div class="lt">
|
|
|
+ <span class="level">
|
|
|
+ <h5 class="loser">第二名</h5>
|
|
|
+ </span>
|
|
|
+ <span class="center">CK</span>
|
|
|
+ <span class="ckValue">
|
|
|
+ <em class="winner" v-if="winner == 1">217.9</em>
|
|
|
+ <em class="loser" v-else>217.9</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">
|
|
|
+ <div class="names">
|
|
|
+ <span>
|
|
|
+ {{ redMvp.Name }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </li>
|
|
|
+ <span class="mvpCode">最佳队员</span>
|
|
|
+ </div>
|
|
|
+ <div class="per">
|
|
|
+ 人均卡路里 8392
|
|
|
+ </div>
|
|
|
+ <div class="teamName">
|
|
|
+ 红队
|
|
|
+ </div>
|
|
|
</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 class="md">
|
|
|
+ <span class="level">
|
|
|
+ <h5 class="winner">黄队胜</h5>
|
|
|
+ <img src="../assets/imgs/pkRank/trophy.png" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="center">CK</span>
|
|
|
+ <span class="ckValue">
|
|
|
+ <em class="winner" v-if="winner == 1">217.9</em>
|
|
|
+ <em class="loser" v-else>217.9</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">
|
|
|
+ <div class="names">
|
|
|
+ <span>
|
|
|
+ {{ redMvp.Name }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </li>
|
|
|
+ <span class="mvpCode">最佳队员</span>
|
|
|
+ </div>
|
|
|
+ <div class="per">
|
|
|
+ 人均卡路里 8392
|
|
|
+ </div>
|
|
|
+ <div class="teamName">
|
|
|
+ 红队
|
|
|
+ </div>
|
|
|
</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 class="rt">
|
|
|
+ <span class="level">
|
|
|
+ <h5 class="loser">第三名</h5>
|
|
|
+ </span>
|
|
|
+ <span class="center">CK</span>
|
|
|
+ <span class="ckValue">
|
|
|
+ <em class="winner" v-if="winner == 2">217.9</em>
|
|
|
+ <em class="loser" v-else>217.9</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">
|
|
|
+ <div class="names">
|
|
|
+ <span>
|
|
|
+ {{ blueMvp.Name }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <div class="CKscore">
|
|
|
- <em>CK</em>
|
|
|
- {{ s.Ck|fmtFloat }}
|
|
|
+ </div>
|
|
|
+ <span class="mvpCode">最佳队员</span>
|
|
|
+ </div>
|
|
|
+ <div class="per">
|
|
|
+ 人均卡路里 8392
|
|
|
+ </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">217.9</S>
|
|
|
+ <s class="loserSum" v-show="winner != 1">217.9</s>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="md">
|
|
|
+ <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">217.9</S>
|
|
|
+ <s class="loserSum" v-show="winner != 2">217.9</s>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rt">
|
|
|
+ <div class="titleRow yellowRow">
|
|
|
+ <span class="rowName">黄队</span>
|
|
|
+ <img v-show="winner == 3" src="../assets/imgs/pkRank/trophy.png" alt="">
|
|
|
+ <span class="rowValue">
|
|
|
+ <em>CK</em>
|
|
|
+ <s class="winnerSum" v-show="winner == 3">217.9</S>
|
|
|
+ <s class="loserSum" v-show="winner != 3">217.9</s>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="vsSign">
|
|
|
+ <img class="ltvsSign" src="../assets/imgs/pk/vs.png" alt="">
|
|
|
+ <img class="rtvsSign" src="../assets/imgs/pk/vs.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="listContainer">
|
|
|
+ <div class="lt">
|
|
|
+ <ul>
|
|
|
+ <div class="ltTitle">
|
|
|
+ <span>排名</span>
|
|
|
+ <span>成员</span>
|
|
|
+ <span>CK</span>
|
|
|
+ </div>
|
|
|
+ <li v-for="(s,i) in students.CalSort" v-if="i <= 7"
|
|
|
+ :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
|
|
|
+ <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}]">
|
|
|
+ </div>
|
|
|
+ <span class="names">{{ s.Name }}</span>
|
|
|
+ <span class="glory">
|
|
|
+ <img src="../assets/imgs/rank/cr.png" v-if="s.Sign == 1" alt="">
|
|
|
+ <img src="../assets/imgs/rank/mr.png" v-if="s.Sign == 1" alt="">
|
|
|
+ <img src="../assets/imgs/rank/pb.png" v-if="s.Sign == 1" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="score">
|
|
|
+ {{ s.Ck|fmtFloat }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <div class="record">
|
|
|
- <img src="../assets/img/3pkRank/yellowMvp.svg" class="mvpImg" alt=""
|
|
|
- v-if="i == 0">
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="md">
|
|
|
+ <ul>
|
|
|
+ <div class="ltTitle">
|
|
|
+ <span>排名</span>
|
|
|
+ <span>成员</span>
|
|
|
+ <span>CK</span>
|
|
|
+ </div>
|
|
|
+ <li v-for="(s,i) in students.CalSort" v-if="i <= 7"
|
|
|
+ :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
|
|
|
+ <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}]">
|
|
|
+ </div>
|
|
|
+ <span class="names">{{ s.Name }}</span>
|
|
|
+ <span class="glory">
|
|
|
+ <img src="../assets/imgs/rank/cr.png" v-if="s.Sign == 1" alt="">
|
|
|
+ <img src="../assets/imgs/rank/mr.png" v-if="s.Sign == 1" alt="">
|
|
|
+ <img src="../assets/imgs/rank/pb.png" v-if="s.Sign == 1" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="score">
|
|
|
+ {{ s.Ck|fmtFloat }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="rt">
|
|
|
+ <ul>
|
|
|
+ <div class="ltTitle">
|
|
|
+ <span>排名</span>
|
|
|
+ <span>成员</span>
|
|
|
+ <span>CK</span>
|
|
|
</div>
|
|
|
- </li>
|
|
|
+ <li v-for="(s,i) in students.CkSort" v-if="i <= 7"
|
|
|
+ :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
|
|
|
+ <div class="gary yellowrow">
|
|
|
+ <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}]">
|
|
|
+ </div>
|
|
|
+ <span class="names">{{ s.Name }}</span>
|
|
|
+ <span class="glory">
|
|
|
+ <img src="../assets/imgs/rank/cr.png" v-if="s.Sign == 1" alt="">
|
|
|
+ <img src="../assets/imgs/rank/mr.png" v-if="s.Sign == 1" alt="">
|
|
|
+ <img src="../assets/imgs/rank/pb.png" v-if="s.Sign == 1" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="score">
|
|
|
+ {{ s.Ck|fmtFloat }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!--blue-->
|
|
|
- <!--yellow-->
|
|
|
+ <div class="icons">
|
|
|
+ <img src="../assets/imgs/rank/icons.svg" alt="">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Headside from '@/components/Headside'
|
|
|
-import '../libs/rem';
|
|
|
-import '../Global';
|
|
|
-import {
|
|
|
- ClassUserRank,
|
|
|
- AddPkInfo
|
|
|
-} from '@/api/getApiRes'
|
|
|
+import {ClassUserRank} from "@/api/getApiRes";
|
|
|
|
|
|
let qs = require('qs');
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ pages: 2,
|
|
|
eqSn: '30:9C:23:0C:8B:1E',
|
|
|
pageStyle: RandomBg(),
|
|
|
+ redMvp: {},
|
|
|
+ blueMvp: {},
|
|
|
+ winner: 1,
|
|
|
trueDate: true,//真实数据 true false
|
|
|
autoJump: true,//开启自动跳走
|
|
|
students: {
|
|
|
- redUnite: [],
|
|
|
- blueUnite: [],
|
|
|
- yellowUnite: [],
|
|
|
- },
|
|
|
- red: {
|
|
|
- rank: 0,
|
|
|
- },
|
|
|
- blue: {
|
|
|
- rank: 0,
|
|
|
- },
|
|
|
- yellow: {
|
|
|
- rank: 0,
|
|
|
+ CkSort: [],
|
|
|
+ CalSort: [],
|
|
|
},
|
|
|
rankTimer: null,
|
|
|
- redSum: 0,
|
|
|
- blueSum: 0,
|
|
|
- yellowSum: 0,
|
|
|
- totalTime: ''
|
|
|
+ totalTime: '',
|
|
|
+ Listate: [
|
|
|
+ {state: false},
|
|
|
+ {state: false},
|
|
|
+ {state: false},
|
|
|
+ {state: false},
|
|
|
+ {state: false},
|
|
|
+ {state: false},
|
|
|
+ {state: false},
|
|
|
+ {state: false},
|
|
|
+ ],
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- let that = this;
|
|
|
- if (this.trueDate) {
|
|
|
- that.init();
|
|
|
- } else {
|
|
|
- let Rs = fakeNews(27, 3);
|
|
|
- that.UniteBreak(Rs);
|
|
|
- }
|
|
|
-
|
|
|
+ this.init();
|
|
|
+ this.cardPlay();
|
|
|
+ let pages = 1;
|
|
|
+ // 五秒后翻页
|
|
|
+ this.rankTimer = setInterval(() => {
|
|
|
+ this.pages = 2;
|
|
|
+ if (pages == 1) {
|
|
|
+ this.cardPlay();
|
|
|
+ pages = 2;
|
|
|
+ }
|
|
|
+ }, 5000);
|
|
|
},
|
|
|
watch: {
|
|
|
'$route': function (val) {
|
|
|
- let that = this;
|
|
|
- if (val.path == '/3pkRank') {
|
|
|
+ if (val.path == '/rank') {
|
|
|
if (this.trueDate) {
|
|
|
- that.init();
|
|
|
+ this.init();
|
|
|
} else {
|
|
|
- let Rs = fakeNews(18, 3);
|
|
|
- that.UniteBreak(Rs);
|
|
|
+ // this.rankTimer = setInterval(() => {
|
|
|
+ this.students.CkSort = fakeNews(5);
|
|
|
+ this.students.CalSort = fakeNews(5);
|
|
|
+ // }, 5000);
|
|
|
}
|
|
|
-
|
|
|
} else {
|
|
|
clearInterval(this.autoJump);
|
|
|
clearInterval(this.rankTimer);
|
|
|
@@ -225,190 +305,6 @@ export default {
|
|
|
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 = {
|
|
|
@@ -417,12 +313,8 @@ export default {
|
|
|
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);
|
|
|
-
|
|
|
+ console.log(json);
|
|
|
let totalTime = 40;
|
|
|
let Studenlength = 0;
|
|
|
if (json.Rs) {
|
|
|
@@ -432,14 +324,25 @@ export default {
|
|
|
if (Studenlength > 3) {
|
|
|
totalTime = 60
|
|
|
} else {
|
|
|
- totalTime = 40;
|
|
|
+ totalTime = 40
|
|
|
+ }
|
|
|
+ // this.jumpWait(totalTime); //todo
|
|
|
+ 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;
|
|
|
+ });
|
|
|
}
|
|
|
- this.jumpWait(totalTime);
|
|
|
-
|
|
|
- // this.students.CkSort = json.Rs.CkSort;
|
|
|
- // this.students.CalSort = json.Rs.CalSort;
|
|
|
} else {
|
|
|
- this.jumpWait(10);
|
|
|
+ this.students.CkSort = [];
|
|
|
+ this.students.CalSort = [];
|
|
|
if (json.Code == '999') {
|
|
|
// that.$router.push({path: '/'});
|
|
|
} else {
|
|
|
@@ -449,29 +352,37 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- // 竞技课程结果上传
|
|
|
- PostAddPkInfo(dpId, groupNo) {
|
|
|
- console.log(dpId, groupNo);
|
|
|
- // 如果是演示版不上报比赛结果
|
|
|
- if (runVersion == 'test') {
|
|
|
- return false
|
|
|
- }
|
|
|
+ jumpWait(totalTime) {
|
|
|
+ // 倒计时60秒自动关闭
|
|
|
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);
|
|
|
+ clearInterval(clock);
|
|
|
+ let clock = window.setInterval(() => {
|
|
|
+ totalTime--;
|
|
|
+ that.totalTime = totalTime;
|
|
|
+ if (parseInt(totalTime) <= 0) {
|
|
|
+ // 前往等待页面
|
|
|
+ that.$router.push({path: '/'});
|
|
|
+ // 计时器回收
|
|
|
+ clearInterval(clock);
|
|
|
}
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ cardPlay() {
|
|
|
+ let that = this;
|
|
|
+ // 重置一下状态
|
|
|
+ that.Listate.map(function (t) {
|
|
|
+ t.state = false;
|
|
|
})
|
|
|
- }
|
|
|
+ let timeScope = 400;
|
|
|
+ let timeLong;
|
|
|
+ let row;
|
|
|
+ for (let i = 0; i < 8; i++) {
|
|
|
+ timeLong = parseInt(i * timeScope);
|
|
|
+ that.timer = setTimeout(() => { //设置延迟执行
|
|
|
+ that.Listate[i].state = true;
|
|
|
+ }, timeLong)
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
filters: {
|
|
|
fmtNum(val) {
|
|
|
@@ -494,7 +405,6 @@ export default {
|
|
|
return '0'
|
|
|
} else {
|
|
|
return parseInt(val);
|
|
|
- // return parseFloat(val).toFixed(3);
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
@@ -504,355 +414,430 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-@import "../assets/css/bg.css";
|
|
|
-
|
|
|
-@font-face {
|
|
|
- font-family: vista;
|
|
|
- src: url('../assets/font/vista.otf');
|
|
|
-}
|
|
|
-
|
|
|
-* {
|
|
|
- font-family: vista;
|
|
|
+<style lang="scss" scoped>
|
|
|
+@mixin bg {
|
|
|
+ height: 100%;
|
|
|
+ background-color: #333;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top center;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
|
-.pages {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
+@mixin cube {
|
|
|
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;
|
|
|
-}
|
|
|
+.content {
|
|
|
+ background: url("../../src/assets/imgs/3pkRank/3pkBg.png");
|
|
|
+ @include bg;
|
|
|
|
|
|
-.sumScore {
|
|
|
- width: 90%;
|
|
|
- overflow: visible;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- height: 1.4rem;
|
|
|
- background-size: 100%;
|
|
|
- background-position: top center;
|
|
|
- background-repeat: no-repeat;
|
|
|
-}
|
|
|
+ .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;
|
|
|
+ }
|
|
|
|
|
|
-.pkIconContainer {
|
|
|
- width: 20%;
|
|
|
- float: left;
|
|
|
-}
|
|
|
+ .pageSum {
|
|
|
+ .pkResult {
|
|
|
+ @include cube;
|
|
|
+ width: 85%;
|
|
|
+
|
|
|
+ .lt {
|
|
|
+ width: 4rem;
|
|
|
+ float: left;
|
|
|
+ margin-top: 5%;
|
|
|
+ background: url("../assets/imgs/pkRank/redCube.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top center;
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
|
|
|
-.pkIconContainer img {
|
|
|
- width: 1.5rem;
|
|
|
- height: 1.5rem;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
-}
|
|
|
+ .md {
|
|
|
+ width: 4rem;
|
|
|
+ float: left;
|
|
|
+ margin-left: 15%;
|
|
|
+ background: url("../assets/imgs/3pkRank/yellowCube.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top center;
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
|
|
|
-li {
|
|
|
- width: 90%;
|
|
|
- height: 0.8rem;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 0.06rem;
|
|
|
-}
|
|
|
+ .rt {
|
|
|
+ width: 4rem;
|
|
|
+ float: right;
|
|
|
+ margin-top: 10%;
|
|
|
+ background: url("../assets/imgs/pkRank/blueCube.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top center;
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
|
|
|
-li .rows {
|
|
|
- width: 100%;
|
|
|
- height: 0.8rem;
|
|
|
- /*background: #ee191d;*/
|
|
|
- border-radius: 250rem;
|
|
|
- overflow: visible;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- margin-top: 0.15rem;
|
|
|
-}
|
|
|
+ .level {
|
|
|
+ @include cube;
|
|
|
+ color: white;
|
|
|
+ height: 1.7rem;
|
|
|
|
|
|
-li .head {
|
|
|
- width: 0.6rem;
|
|
|
- height: 0.7rem;
|
|
|
- float: left;
|
|
|
- margin-left: 0.1rem;
|
|
|
- margin-top: 0.07rem;
|
|
|
- overflow: visible;
|
|
|
-}
|
|
|
+ img {
|
|
|
+ position: relative;
|
|
|
+ width: 1rem;
|
|
|
+ bottom: 1rem;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
|
|
|
-li .head .headImg {
|
|
|
- width: 100%;
|
|
|
- height: 0.6rem;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- border: 0.04rem solid #fff;
|
|
|
- border-radius: 33rem;
|
|
|
-}
|
|
|
+ h5 {
|
|
|
+ @include cube;
|
|
|
+ margin: 0;
|
|
|
+ margin-top: 0.5rem;
|
|
|
+ font-size: 0.4rem;
|
|
|
+ font-weight: normal;
|
|
|
|
|
|
+ &.winner {
|
|
|
+ color: #FFEB50;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-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;
|
|
|
-}
|
|
|
+ .center {
|
|
|
+ @include cube;
|
|
|
+ color: white;
|
|
|
+ font-size: 0.35rem;
|
|
|
+ }
|
|
|
|
|
|
-li .record {
|
|
|
- position: relative;
|
|
|
- top: -0.2rem;
|
|
|
- float: right;
|
|
|
- margin-right: 2%;
|
|
|
- /*line-height: 0.8rem;*/
|
|
|
-}
|
|
|
+ .ckValue {
|
|
|
+ @include cube;
|
|
|
+ color: white;
|
|
|
+ height: 0.8rem;
|
|
|
+ line-height: 0.7rem;
|
|
|
|
|
|
-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;
|
|
|
-}
|
|
|
+ em {
|
|
|
+ font-style: normal;
|
|
|
+ font-size: 0.5rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-li .score em {
|
|
|
- font-size: 0.2rem;
|
|
|
-}
|
|
|
+ .mvp {
|
|
|
+ @include cube;
|
|
|
+ margin-top: 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;
|
|
|
-}
|
|
|
+ .head {
|
|
|
+ @include cube;
|
|
|
+ height: 1.6rem;
|
|
|
|
|
|
-.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;
|
|
|
-}
|
|
|
+ img {
|
|
|
+ @include cube;
|
|
|
+ width: 1.5rem;
|
|
|
+ border-radius: 250rem;
|
|
|
|
|
|
-.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;
|
|
|
-}
|
|
|
+ &.girl {
|
|
|
+ border: 0.05rem solid #EA26EA;
|
|
|
+ }
|
|
|
|
|
|
-.sumCK {
|
|
|
- float: right;
|
|
|
- font-size: 0.3rem;
|
|
|
- text-align: right;
|
|
|
-}
|
|
|
+ &.boy {
|
|
|
+ border: 0.05rem solid #39B6FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.mineUniteName {
|
|
|
- width: 69%;
|
|
|
- height: 0.6rem;
|
|
|
- overflow: visible;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- text-align: left;
|
|
|
- font-size: 0.35rem;
|
|
|
-}
|
|
|
+ .mvpCode {
|
|
|
+ @include cube;
|
|
|
+ font-size: 0.3rem;
|
|
|
+ color: white;
|
|
|
+ margin-top: 0rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.mineUniteName em {
|
|
|
- float: left;
|
|
|
-}
|
|
|
+ .per {
|
|
|
+ @include cube;
|
|
|
+ font-size: 0.3rem;
|
|
|
+ color: white;
|
|
|
+ margin-top: 0.2rem;
|
|
|
+ }
|
|
|
|
|
|
-.sumCK em {
|
|
|
- font-size: 0.35rem;
|
|
|
-}
|
|
|
+ .teamName {
|
|
|
+ margin-top: 0.3rem;
|
|
|
+ font-size: 0.5rem;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.sumCK i {
|
|
|
- float: right;
|
|
|
- font-size: 0.24rem;
|
|
|
- margin-top: 0.1rem;
|
|
|
-}
|
|
|
+ .pageDetail {
|
|
|
+ .sumTitle {
|
|
|
+ @include cube;
|
|
|
+ width: 90%;
|
|
|
+ margin-top: 0.7rem;
|
|
|
+ overflow: visible;
|
|
|
|
|
|
-.flagContainer {
|
|
|
- position: relative;
|
|
|
- top: -1rem;
|
|
|
- float: none;
|
|
|
- right: -1.6rem;
|
|
|
- display: inline-block;
|
|
|
-}
|
|
|
+ .lt {
|
|
|
+ width: 33.33%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
|
|
|
-.flagContainer img {
|
|
|
- width: 0.8rem;
|
|
|
- height: 0.8rem;
|
|
|
-}
|
|
|
+ .md {
|
|
|
+ width: 33.33%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
|
|
|
-.rankIcon {
|
|
|
- position: relative;
|
|
|
- float: left;
|
|
|
- width: 0.3rem;
|
|
|
- top: -0.1rem;
|
|
|
- left: 0.3rem;
|
|
|
-}
|
|
|
+ .rt {
|
|
|
+ width: 33.33%;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
|
|
|
-.list {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
-}
|
|
|
+ .titleRow {
|
|
|
+ @include cube;
|
|
|
+ width: 90%;
|
|
|
+ height: 0.7rem;
|
|
|
+ overflow: visible;
|
|
|
+
|
|
|
+ &.redRow {
|
|
|
+ background: url("../assets/imgs/3pkRank/redTitle.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top center;
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
|
|
|
-.list .part {
|
|
|
- width: 33.333%;
|
|
|
- height: 100%;
|
|
|
- min-height: 1rem;
|
|
|
- float: left;
|
|
|
-}
|
|
|
+ &.blueRow {
|
|
|
+ background: url("../assets/imgs/3pkRank/blueTitle.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top center;
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
|
|
|
+ &.yellowRow {
|
|
|
+ background: url("../assets/imgs/3pkRank/yellowTitle.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top center;
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
|
|
|
-li.redUnite {
|
|
|
- width: 96%;
|
|
|
- float: left;
|
|
|
- background: rgba(207, 17, 34, 0.75);
|
|
|
- color: #fff;
|
|
|
- margin-bottom: 0.07rem;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
+ .rowName {
|
|
|
+ font-size: 0.4rem;
|
|
|
+ float: left;
|
|
|
+ color: white;
|
|
|
+ padding: 0 0.3rem;
|
|
|
+ }
|
|
|
|
|
|
-li.blueUnite {
|
|
|
- width: 96%;
|
|
|
- margin: 0 auto;
|
|
|
- margin-bottom: 0.05rem;
|
|
|
- background: rgba(24, 15, 170, 0.75);
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
+ img {
|
|
|
+ position: relative;
|
|
|
+ bottom: 0.6rem;
|
|
|
+ width: 1rem;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
|
|
|
-li.yellowUnite {
|
|
|
- width: 96%;
|
|
|
- float: right;
|
|
|
- background: rgba(228, 196, 25, 0.75);
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
+ .rowValue {
|
|
|
+ float: right;
|
|
|
+ padding-right: 0.2rem;
|
|
|
|
|
|
+ em {
|
|
|
+ float: left;
|
|
|
+ color: white;
|
|
|
+ font-size: 0.4rem;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
|
|
|
-li .CLEscore {
|
|
|
- width: 1.65rem;
|
|
|
- float: left;
|
|
|
- font-size: 0.4rem;
|
|
|
- margin-left: 1%;
|
|
|
- line-height: 0.8rem;
|
|
|
- text-align: left;
|
|
|
-}
|
|
|
+ s {
|
|
|
+ text-decoration: none;
|
|
|
+ float: right;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 0.6rem;
|
|
|
+ color: white;
|
|
|
+ line-height: 0.5rem;
|
|
|
+ padding: 0 0.2rem;
|
|
|
+
|
|
|
+ &.winnerSum {
|
|
|
+ color: #FFEB50;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-li .CLEscore em {
|
|
|
- font-size: 0.3rem;
|
|
|
- /*font-size: 0;*/
|
|
|
-}
|
|
|
+ .vsSign {
|
|
|
+ @include cube;
|
|
|
+ height: 1.3rem;
|
|
|
+ position: relative;
|
|
|
+ bottom: 1.3rem;
|
|
|
+
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ width: 1rem;
|
|
|
+ height: 0.9rem;
|
|
|
+ z-index: 444;
|
|
|
+ }
|
|
|
|
|
|
-li .CLEscore span {
|
|
|
- padding-left: 0.1rem;
|
|
|
- font-size: 0.3rem;
|
|
|
- /*font-size: 12px;*/
|
|
|
-}
|
|
|
+ img:nth-child(1) {
|
|
|
|
|
|
-li .CKscore {
|
|
|
- /*width: 1.6rem;*/
|
|
|
- float: left;
|
|
|
- font-size: 0.4rem;
|
|
|
- margin-left: 2%;
|
|
|
- line-height: 0.8rem;
|
|
|
- text-align: left;
|
|
|
-}
|
|
|
+ float: left;
|
|
|
+ left: 32%;
|
|
|
+ }
|
|
|
|
|
|
-li .CKscore em {
|
|
|
- font-size: 0.3rem;
|
|
|
-}
|
|
|
+ img:nth-child(2) {
|
|
|
+ float: right;
|
|
|
+ right: 33%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-li .record img {
|
|
|
- width: 0.7rem;
|
|
|
- float: left;
|
|
|
-}
|
|
|
+ .listContainer {
|
|
|
+ @include cube;
|
|
|
+ width: 90%;
|
|
|
+ position: relative;
|
|
|
+ bottom: 1.5rem;
|
|
|
|
|
|
-li.mvpli {
|
|
|
- padding-top: 0.15rem;
|
|
|
- padding-bottom: 0.15rem;
|
|
|
-}
|
|
|
+ .lt {
|
|
|
+ width: 33.33%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
|
|
|
-li.mvpli .CLEscore {
|
|
|
- font-size: 0.4rem;
|
|
|
-}
|
|
|
+ .md {
|
|
|
+ width: 33.33%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
|
|
|
-li.mvpli .CKscore {
|
|
|
- font-size: 0.4rem;
|
|
|
-}
|
|
|
+ .rt {
|
|
|
+ width: 33.33%;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
|
|
|
-li.mvpli .head {
|
|
|
- width: 0.7rem;
|
|
|
- height: 0.8rem;
|
|
|
-}
|
|
|
+ .ltTitle {
|
|
|
+ @include cube;
|
|
|
+ width: 90%;
|
|
|
|
|
|
-li.mvpli .head img {
|
|
|
- height: 0.7rem;
|
|
|
- margin-top: -0.05rem;
|
|
|
-}
|
|
|
+ span {
|
|
|
+ float: left;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 0.3rem;
|
|
|
|
|
|
-li.mvpli .name {
|
|
|
- font-size: 0.3rem;
|
|
|
-}
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin-right: 1.5rem;
|
|
|
+ }
|
|
|
|
|
|
-li .king {
|
|
|
- width: 0.4rem;
|
|
|
- height: 0.2rem;
|
|
|
- float: left;
|
|
|
- position: relative;
|
|
|
- top: -0.7rem;
|
|
|
- left: -0.1rem;
|
|
|
-}
|
|
|
+ &:last-child {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ @include cube;
|
|
|
+
|
|
|
+ li {
|
|
|
+ @include cube;
|
|
|
+ width: 90%;
|
|
|
+ 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;
|
|
|
+
|
|
|
+ &.redrow {
|
|
|
+ background: url("../assets/imgs/3pkRank/redrow.png");
|
|
|
+ }
|
|
|
+
|
|
|
+ &.bluerow {
|
|
|
+ background: url("../assets/imgs/3pkRank/bluerow.png");
|
|
|
+ }
|
|
|
+
|
|
|
+ &.yellowrow {
|
|
|
+ background: url("../assets/imgs/3pkRank/yellowrow.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.4rem;
|
|
|
+ font-weight: bold;
|
|
|
+ text-decoration: none;
|
|
|
+ font-style: normal;
|
|
|
+ color: white;
|
|
|
+ line-height: 0.6rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .head {
|
|
|
+ position: relative;
|
|
|
+ bottom: 0.4rem;
|
|
|
+ float: left;
|
|
|
+ margin-left: 0.3rem;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 0.6rem;
|
|
|
+ border-radius: 250rem;
|
|
|
|
|
|
-li.mvpli .head img.king {
|
|
|
- top: -1rem;
|
|
|
+ &.girl {
|
|
|
+ border: 0.05rem solid #EA26EA;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.boy {
|
|
|
+ border: 0.05rem solid #39B6FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .names {
|
|
|
+ float: left;
|
|
|
+ color: white;
|
|
|
+ font-size: 0.3rem;
|
|
|
+ line-height: 0.6rem;
|
|
|
+ margin-left: 0.4rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .glory {
|
|
|
+ float: left;
|
|
|
+ margin-left: 0.4rem;
|
|
|
+
|
|
|
+ img {
|
|
|
+ float: right;
|
|
|
+ width: 0.6rem;
|
|
|
+ margin-left: 0.2rem;
|
|
|
+ margin-top: 0.1rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.tips {
|
|
|
+.icons {
|
|
|
+ @include cube;
|
|
|
position: absolute;
|
|
|
- right: 3%;
|
|
|
- top: 1rem;
|
|
|
- font-size: 0.4rem;
|
|
|
- color: #fff;
|
|
|
+ bottom: 0.2rem;
|
|
|
+
|
|
|
+ img {
|
|
|
+ @include cube;
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
