|
|
@@ -0,0 +1,841 @@
|
|
|
+<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>
|
