|
|
@@ -1,841 +0,0 @@
|
|
|
-<template>
|
|
|
- <div :class="pageStyle">
|
|
|
- <Headside></Headside>
|
|
|
- <div class="rankContainer">
|
|
|
- <div class="lt">
|
|
|
- <div class="recordMain">
|
|
|
- <el-carousel :interval="30000" height="370px">
|
|
|
- <el-carousel-item v-for="rs in recordMain">
|
|
|
- <div>
|
|
|
- <h5 v-html="rs.Title"></h5>
|
|
|
- <div class="sumContainer">
|
|
|
- <div class="sum">
|
|
|
- <s>{{rs.Result[0].Unite}}</s>
|
|
|
- <em>{{rs.Result[0].Values}}</em>
|
|
|
- </div>
|
|
|
- <span class="sumBg"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
- </div>
|
|
|
- <div class="bottom">
|
|
|
- <el-carousel :interval="15000" height="280px">
|
|
|
- <el-carousel-item v-for="Rs in bottom">
|
|
|
- <div class="topOne" v-if="Rs.Style == 'tops'">
|
|
|
- <h5>{{Rs.Title}}</h5>
|
|
|
- <ul>
|
|
|
- <li v-for="(tops,i) in Rs.Result">
|
|
|
- <div class="dgCenter">
|
|
|
- <div class="dghead">
|
|
|
- <img :id="'circle_'+i"
|
|
|
- v-bind:src="tops.Head" alt="" v-if="tops.Head">
|
|
|
- <img :id="'circle_'+i"
|
|
|
- v-bind:src="require('../static/img/people/flyhead.png')" alt=""
|
|
|
- v-if="!tops.Head">
|
|
|
- <s>{{ tops.UserName }}</s>
|
|
|
- </div>
|
|
|
- <div class="score">
|
|
|
- <em>{{ tops.Values}}</em>
|
|
|
- <span>
|
|
|
- {{tops.Message}}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="heros" v-if="Rs.Style == 'heros'">
|
|
|
- <h5>{{Rs.Title}}</h5>
|
|
|
- <ul>
|
|
|
- <li v-for="(hero,i) in Rs.Result">
|
|
|
- <img :id="'circle_'+i"
|
|
|
- v-bind:src="hero.Head" alt="" v-if="hero.Head">
|
|
|
- <img :id="'circle_'+i"
|
|
|
- v-bind:src="require('../static/img/people/flyhead.png')"
|
|
|
- alt="" v-if="!hero.Head">
|
|
|
- <img src="../static/img/wait/boy.png" class="sex" v-if="hero.Sex == 1"/>
|
|
|
- <img src="../static/img/wait/girl.png" class="sex" v-if="hero.Sex == 2"/>
|
|
|
- <div>
|
|
|
- <em :id="'red_'+i">No.{{i+1}}</em> {{ hero.UserName }}
|
|
|
- </div>
|
|
|
- <span>{{ hero.Values }} {{hero.Unite}}</span>
|
|
|
- </li>
|
|
|
- <li v-if="!Rs.Result">
|
|
|
- <h5>还没有人突破记录哟~</h5>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="rt">
|
|
|
- <el-carousel :interval="15000" height="610px">
|
|
|
- <el-carousel-item v-for="Rs in rt">
|
|
|
- <h5>{{Rs.Title}}</h5>
|
|
|
- <ul>
|
|
|
- <li v-for="s in Rs.Result">
|
|
|
- <img :src="s.Head" alt="" v-if="s.Head">
|
|
|
- <img v-bind:src="require('../static/img/people/flyhead.png')" alt="" v-if="!s.Head">
|
|
|
- <em>{{s.UserName}}</em>
|
|
|
- <s>{{s.Values}}</s>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import Headside from '@/components/Headside'
|
|
|
- import {
|
|
|
- getHello,
|
|
|
- getClassStat,
|
|
|
- HerosRankingQuery,
|
|
|
- CalorieStatsQuery,
|
|
|
- UserRankingQuery
|
|
|
- } from '@/api/getApiRes'
|
|
|
- import '../libs/rem';
|
|
|
- import '../Global'
|
|
|
-
|
|
|
- // 测试模式 localStorage.eqSn = "8e501b0bde9ce600"
|
|
|
-
|
|
|
- let qs = require('qs');
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- eqSn: '30:9C:23:0C:8B:1E',
|
|
|
- pageStyle: RandomBg(),
|
|
|
- trueDate: true,//真实数据 true false
|
|
|
- autoplayStatus: false,// false
|
|
|
- fakeNums: 8,//
|
|
|
- unite: '卡路里',
|
|
|
- topMsg: '',
|
|
|
- students: [],
|
|
|
- studentsLimit: [],
|
|
|
- showType: 2,//1 单人
|
|
|
- curIndex: false,//1 单人
|
|
|
- waitTimer: null,//null
|
|
|
- test:
|
|
|
- {
|
|
|
- Title: '本<s style="font-size: 0.7rem;color: red">周</s>场馆卡路里总消耗',
|
|
|
- Title2: '本<s style="font-size: 0.7rem;color: red">月</s>场馆卡路里总消耗',
|
|
|
- Result: [{'Values': 0, Unite: '千卡'}],
|
|
|
- },
|
|
|
- recordMain: [],
|
|
|
- bottom: {},
|
|
|
- rt: [],
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // this.$router.push({path: '/2pkRank'});
|
|
|
- if (this.trueDate) {
|
|
|
- this.waitTimer = setInterval(() => {
|
|
|
- // this.GetgetUserList();
|
|
|
- this.curgetClassStat();
|
|
|
- this.GetHerosRankingQuery();
|
|
|
- this.GetCalorieStatsQuery();
|
|
|
- this.GetUserRankingQuery();
|
|
|
- }, 1000);
|
|
|
- } else {
|
|
|
- this.students = this.fakeNews();
|
|
|
- this.studentsLimit = this.fakeNewsLimit();
|
|
|
- this.topMsg = this.students[0];
|
|
|
- this.bottom = [
|
|
|
- {
|
|
|
- "Title": "本周消耗卡路里英雄榜",
|
|
|
- "Style": "heros",
|
|
|
- "Result": [
|
|
|
- {
|
|
|
- "UserName": "段长鹏",
|
|
|
- "Sex": 1,
|
|
|
- "Head": "",
|
|
|
- "Values": "4744",
|
|
|
- "Unite": "千卡",
|
|
|
- "Message": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "UserName": "贾雨奇",
|
|
|
- "Sex": 1,
|
|
|
- "Head": "http://192.168.0.2/flyhead.png",
|
|
|
- "Values": "4034",
|
|
|
- "Unite": "千卡",
|
|
|
- "Message": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "UserName": "郑伟",
|
|
|
- "Sex": 1,
|
|
|
- "Head": "http://192.168.0.2/flyhead.png",
|
|
|
- "Values": "2290",
|
|
|
- "Unite": "千卡",
|
|
|
- "Message": ""
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- "Title": "单次CK值(新个人记录)",
|
|
|
- "Style": "tops",
|
|
|
- "Result": [
|
|
|
- {
|
|
|
- "UserName": "郑伟",
|
|
|
- "Sex": 1,
|
|
|
- "Head": "",
|
|
|
- "Values": "1022",
|
|
|
- "Unite": "",
|
|
|
- "Message": "打破了历史记录100000"
|
|
|
- },
|
|
|
- {
|
|
|
- "UserName": "郑伟",
|
|
|
- "Sex": 1,
|
|
|
- "Head": "http://192.168.0.2/flyhead.png",
|
|
|
- "Values": "1020",
|
|
|
- "Unite": "",
|
|
|
- "Message": "打破了历史记录100000"
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ];
|
|
|
- this.rt = [
|
|
|
- {
|
|
|
- Title: '月度CK值排行',
|
|
|
- Result: this.fakeNews(),
|
|
|
- },
|
|
|
- {
|
|
|
- Title: '月度卡路里值排行',
|
|
|
- Result: this.fakeNews(),
|
|
|
- }
|
|
|
- ];
|
|
|
- this.recordMain = [
|
|
|
- {
|
|
|
- Title: '本<s>周</s>场馆卡路里总消耗',
|
|
|
- Result: [{'Values': 0, Unite: '千卡'}],
|
|
|
- },
|
|
|
- {
|
|
|
- Title: '本<s>周</s>场馆卡路里总消耗',
|
|
|
- Result: [{'Values': 0, Unite: '千卡'}],
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- clearInterval(this.waitTimer);
|
|
|
- this.waitTimer = null;
|
|
|
- },
|
|
|
- methods: {
|
|
|
- fakeNews() {
|
|
|
- let item = [];
|
|
|
- for (var i = 0; i < 7; i++) {
|
|
|
- item.push(
|
|
|
- {
|
|
|
- "hubId": 0,
|
|
|
- "deviceId": 22756,
|
|
|
- "calorie": 96.5,
|
|
|
- "Values ": 96.5,
|
|
|
- "heartRate": i * 5,
|
|
|
- "step": i * 40,
|
|
|
- "userName": "杨东艳",
|
|
|
- "userNmae": "杨东艳",
|
|
|
- "UserName": "杨东艳",
|
|
|
- "name": "杨东艳",
|
|
|
- "updateTime": 1604568915582,
|
|
|
- "activePercent": i * 5,
|
|
|
- "ck": 115.9 - i,
|
|
|
- "head": 'flyhead.png'
|
|
|
- }
|
|
|
- )
|
|
|
- }
|
|
|
- return item;
|
|
|
- },
|
|
|
- fakeNewsLimit() {
|
|
|
- let item = [];
|
|
|
- for (var i = 0; i < 3; i++) {
|
|
|
- item.push(
|
|
|
- {
|
|
|
- "hubId": 0,
|
|
|
- "deviceId": 22756,
|
|
|
- "calorie": 999.5,
|
|
|
- "heartRate": i * 5,
|
|
|
- "step": i * 40,
|
|
|
- "userName": "杨东艳",
|
|
|
- "userNmae": "杨东艳",
|
|
|
- "name": "杨东艳",
|
|
|
- "updateTime": 1604568915582,
|
|
|
- "activePercent": i * 5,
|
|
|
- "ck": i + 115.1,
|
|
|
- "sex": 1,
|
|
|
- "head": 'flyhead.png'
|
|
|
- }
|
|
|
- )
|
|
|
- }
|
|
|
- return item;
|
|
|
- },
|
|
|
- GetgetUserList() {
|
|
|
- let that = this;
|
|
|
- let param = {
|
|
|
- eqSn: localStorage.eqSn,
|
|
|
- token: localStorage.token,
|
|
|
- };
|
|
|
- let postdata = qs.stringify(param);
|
|
|
- getHello(postdata).then(res => {
|
|
|
- let json = res;
|
|
|
- if (json.Code == 0) {
|
|
|
- that.topMsg = json.Rs[0];
|
|
|
- that.students = json.Rs;
|
|
|
- that.$message.error(json.Memo);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- GetHerosRankingQuery() {
|
|
|
- let that = this;
|
|
|
- let param = {
|
|
|
- eqSn: localStorage.eqSn,
|
|
|
- dispNum: 3
|
|
|
- };
|
|
|
- let postdata = qs.stringify(param);
|
|
|
- HerosRankingQuery(postdata).then(res => {
|
|
|
- let json = res;
|
|
|
- if (json.Code == 0) {
|
|
|
- that.bottom = json.Rs;
|
|
|
- } else {
|
|
|
- that.$message.error(json.Memo);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- GetUserRankingQuery() {
|
|
|
- let that = this;
|
|
|
- let param = {
|
|
|
- eqSn: localStorage.eqSn,
|
|
|
- dispNum: 7
|
|
|
- };
|
|
|
- let postdata = qs.stringify(param);
|
|
|
- UserRankingQuery(postdata).then(res => {
|
|
|
- let json = res;
|
|
|
- if (json.Code == 0) {
|
|
|
- that.rt = json.Rs;
|
|
|
- } else {
|
|
|
- that.$message.error(json.Memo);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- GetCalorieStatsQuery() {
|
|
|
- let that = this;
|
|
|
- let param = {
|
|
|
- eqSn: localStorage.eqSn,
|
|
|
- };
|
|
|
- let postdata = qs.stringify(param);
|
|
|
- CalorieStatsQuery(postdata).then(res => {
|
|
|
- let json = res;
|
|
|
- if (json.Code == 0) {
|
|
|
- that.recordMain = json.Rs;
|
|
|
- } else {
|
|
|
- that.recordMain = [
|
|
|
- {
|
|
|
- Title: '',
|
|
|
- Result: [{'Values': '', Unite: ''}],
|
|
|
- },
|
|
|
- {
|
|
|
- Title: '',
|
|
|
- Result: [{'Values': '', Unite: ''}],
|
|
|
- }
|
|
|
- ];
|
|
|
- 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) {
|
|
|
- // alert(JSON.stringify(json.ClassOn));
|
|
|
- // alert("alert:"+json.ClassOn);
|
|
|
- // 上课了
|
|
|
- if (json.ClassOn == 1) {
|
|
|
- // 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: '/main'});
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- that.$router.push({path: '/pk'});
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- that.$router.push({path: '/threepk'});
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- // that.$message.error(json.Memo);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- '$route': function (val) {
|
|
|
- if (val.path == '/wait') {
|
|
|
- this.autoplayStatus = false;
|
|
|
- if (this.trueDate) {
|
|
|
- this.waitTimer = setInterval(() => {
|
|
|
- this.curgetClassStat();
|
|
|
- this.GetHerosRankingQuery();
|
|
|
- this.GetCalorieStatsQuery();
|
|
|
- this.GetUserRankingQuery();
|
|
|
- }, 1000);
|
|
|
- } else {
|
|
|
- this.students = this.fakeNews();
|
|
|
- this.topMsg = this.students[0];
|
|
|
- }
|
|
|
- } else {
|
|
|
- clearInterval(this.waitTimer);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- components: {
|
|
|
- Headside
|
|
|
- }
|
|
|
- }
|
|
|
-</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;
|
|
|
- /*transform: scale(1,5);*/
|
|
|
- /*-ms-transform: scale(1,5); !* IE 9 *!*/
|
|
|
- /*-webkit-transform: scale(0.8,0.8); !* Safari and Chrome *!*/
|
|
|
- }
|
|
|
-
|
|
|
- /*/deep/ .el-carousel__item--card {*/
|
|
|
- /*width: auto !important;*/
|
|
|
- /*}*/
|
|
|
- /*/deep/ .el-carousel__item {*/
|
|
|
- /*width: auto !important;*/
|
|
|
- /*}*/
|
|
|
- /*/deep/ .el-carousel__item--card.is-active {*/
|
|
|
- /*z-index: 2;*/
|
|
|
- /*position: absolute;*/
|
|
|
- /*left: 50%;*/
|
|
|
- /*transform: translate(-50%, 0px) !important;*/
|
|
|
- /*}*/
|
|
|
-
|
|
|
-
|
|
|
- .rankContainer {
|
|
|
- width: 90%;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
-
|
|
|
- .rankContainer .lt {
|
|
|
- width: 60%;
|
|
|
- height: 100%;
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
- .rankContainer .rt {
|
|
|
- width: 40%;
|
|
|
- float: right;
|
|
|
- }
|
|
|
-
|
|
|
- .recordMain {
|
|
|
- /*height: 6rem;*/
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .rankContainer .lt .recordMain h5 {
|
|
|
- font-family: vista;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 0.6rem;
|
|
|
- text-align: left;
|
|
|
- color: #fff;
|
|
|
- margin: 5% auto;
|
|
|
- }
|
|
|
-
|
|
|
- .recordMain h5 s {
|
|
|
- font-size: 0.8rem;
|
|
|
- }
|
|
|
-
|
|
|
- .rankContainer .sum {
|
|
|
- position: relative;
|
|
|
- top: 0.4rem;
|
|
|
- width: 100%;
|
|
|
- height: 35%;
|
|
|
- overflow: visible;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- text-align: center;
|
|
|
- z-index: 666;
|
|
|
- }
|
|
|
-
|
|
|
- .sumBg {
|
|
|
- position: relative;
|
|
|
- bottom: 0.8rem;
|
|
|
- width: 100%;
|
|
|
- height: 2rem;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- background: url("../static/img/pingtai.png") bottom center;
|
|
|
- background-size: 100% 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- }
|
|
|
-
|
|
|
- .sum em {
|
|
|
- width: 7.2rem;
|
|
|
- float: right;
|
|
|
- font-weight: 900;
|
|
|
- font-family: vista;
|
|
|
- font-weight: 900;
|
|
|
- font-size: 2rem;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- font-style: normal;
|
|
|
- text-shadow: #E85297 5px 0 0, #E85297 0 5px 0, #E85297 -5px 0 0, #E85297 0 -5px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .sum s {
|
|
|
- position: relative;
|
|
|
- bottom: -2rem;
|
|
|
- width: 2rem;
|
|
|
- float: right;
|
|
|
- font-style: normal;
|
|
|
- font-family: vista;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 44px;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- text-decoration: none;
|
|
|
- }
|
|
|
-
|
|
|
- .sumContainer {
|
|
|
- width: 100%;
|
|
|
- height: 4rem;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
-
|
|
|
- .topOne {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
-
|
|
|
- .topOne h5 {
|
|
|
- font-family: vista;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 0.4rem;
|
|
|
- text-align: left;
|
|
|
- color: #fff;
|
|
|
- margin: 1% 0;
|
|
|
- }
|
|
|
-
|
|
|
- ul, li {
|
|
|
- list-style: none;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .topOne ul {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- padding-left: 2px;
|
|
|
- padding-top: 0.1rem;
|
|
|
- padding-bottom: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .topOne li {
|
|
|
- width: 33.3%;
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
- .topOne .dgCenter {
|
|
|
- width: 93%;
|
|
|
- overflow: hidden;
|
|
|
- float: left;
|
|
|
- border-radius: 5px;
|
|
|
- background: rgba(0.0 .0 .0 .1);
|
|
|
- box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
|
|
|
- padding-top: 0.1rem;
|
|
|
- padding-bottom: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .dgCenter .dghead {
|
|
|
- width: 40%;
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
- .dghead img {
|
|
|
- width: 1rem;
|
|
|
- height: 1rem;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- padding: 0;
|
|
|
- border-radius: 250px;
|
|
|
- border: 2px solid #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .dghead s {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 0.3rem;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- font-style: normal;
|
|
|
- text-decoration: none;
|
|
|
- margin-top: 0.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .score {
|
|
|
- width: 60%;
|
|
|
- float: right;
|
|
|
- }
|
|
|
-
|
|
|
- .score em {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- font-family: vista;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 0.7rem;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- font-style: normal;
|
|
|
- height: 1.4rem;
|
|
|
- line-height: 1.4rem;
|
|
|
- }
|
|
|
-
|
|
|
- .score span {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- font-family: vista;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 0.2rem;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .rt {
|
|
|
- padding-top: 0.6rem;
|
|
|
- }
|
|
|
-
|
|
|
- .rt h5 {
|
|
|
- font-family: vista;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 36px;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- margin: 0;
|
|
|
- margin-bottom: 0.6rem;
|
|
|
- text-indent: 0.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .rt ul {
|
|
|
- width: 80%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- padding-top: 3px;
|
|
|
- padding-bottom: 3px;
|
|
|
- }
|
|
|
-
|
|
|
- .rt li {
|
|
|
- width: 80%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- margin-bottom: 0.24rem;
|
|
|
- padding: 0.1rem 4%;
|
|
|
- background: rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 5px;
|
|
|
- box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .rt li img {
|
|
|
- width: 0.6rem;
|
|
|
- height: 0.6rem;
|
|
|
- filter: drop-shadow(0px 0px 6px #bf00ff);
|
|
|
- border: 2px solid #fff;
|
|
|
- float: left;
|
|
|
- border-radius: 250px;
|
|
|
- margin-right: 3%;
|
|
|
- }
|
|
|
-
|
|
|
- .rt li em {
|
|
|
- font-family: vista;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 0.35rem;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- font-style: normal;
|
|
|
- float: left;
|
|
|
- height: 0.6rem;
|
|
|
- line-height: 0.6rem;
|
|
|
- }
|
|
|
-
|
|
|
- .rt li s {
|
|
|
- font-family: vista;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 0.35rem;
|
|
|
- text-align: right;
|
|
|
- color: #fff;
|
|
|
- text-decoration: none;
|
|
|
- height: 0.6rem;
|
|
|
- line-height: 0.6rem;
|
|
|
- float: right;
|
|
|
- }
|
|
|
-
|
|
|
- .heros > h5 {
|
|
|
- font-family: vista;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 0.35rem;
|
|
|
- text-align: left;
|
|
|
- color: #fff;
|
|
|
- margin: 1% 0;
|
|
|
- }
|
|
|
-
|
|
|
- .heros ul {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- padding-left: 3px;
|
|
|
- padding-top: 6px;
|
|
|
- padding-bottom: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- .heros li {
|
|
|
- width: 2.5rem;
|
|
|
- height: 2.35rem;
|
|
|
- float: left;
|
|
|
- border-radius: 5px;
|
|
|
- background: rgba(0.0 .0 .0 .1);
|
|
|
- box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
|
|
|
- padding-top: 0.2rem;
|
|
|
- padding-bottom: 0.2rem;
|
|
|
- color: #fff;
|
|
|
- font-size: 0.3rem;
|
|
|
- text-align: center;
|
|
|
- margin-right: 5%;
|
|
|
- }
|
|
|
-
|
|
|
- .heros li > img {
|
|
|
- width: 1.2rem;
|
|
|
- height: 1.2rem;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- margin-bottom: 0.2rem;
|
|
|
- border-radius: 100%;
|
|
|
- border: 2px solid #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .heros li > img.sex {
|
|
|
- position: relative;
|
|
|
- top: -1.5rem;
|
|
|
- right: 0.55rem;
|
|
|
- width: 0.4rem;
|
|
|
- height: 0.4rem;
|
|
|
- overflow: hidden;
|
|
|
- float: right;
|
|
|
- border: none;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .heros li em {
|
|
|
- font-family: vista;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 30px;
|
|
|
- text-align: center;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
-
|
|
|
- .heros li em#red_0 {
|
|
|
- color: #FA5114;
|
|
|
- }
|
|
|
-
|
|
|
- .heros li em#red_1 {
|
|
|
- color: #FA981F;
|
|
|
- }
|
|
|
-
|
|
|
- .heros li em#red_2 {
|
|
|
- color: #FFE13C;
|
|
|
- }
|
|
|
-
|
|
|
- .heros li #circle_0 {
|
|
|
- border: 2px solid #FA5114;
|
|
|
- }
|
|
|
-
|
|
|
- .heros li #circle_1 {
|
|
|
- border: 2px solid #FA981F;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .heros li #circle_2 {
|
|
|
- border: 2px solid #FFE13C;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .heros li div {
|
|
|
- position: relative;
|
|
|
- top: -0.7rem;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .heros li span {
|
|
|
- position: relative;
|
|
|
- top: -0.67rem;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
-
|
|
|
- .bottom {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- padding-top: 0.1rem;
|
|
|
- bottom: 0.2rem;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .el-carousel__indicators--horizontal {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-</style>
|