flyLong/tv/src/views/Rank.vue

<template>
  <div class="rank">
    <Headside></Headside>
    <div class="rankContainer">
      <div class="lt">
        <h5>本周场馆卡路里总消耗</h5>
        <div class="sum">
          <span class="sumBg"></span>
          <em>{{sum}}</em>
          <s>千卡</s>
        </div>
        <div class="bottom">
        <div class="topOne" v-if="false">
          <h5>单次CK值（新个人记录）</h5>
          <ul>
            <li>
              <div class="dgCenter">
                <div class="dghead">
                  <!--                              <img src="../static/img/head.png" height="147" width="147"/>-->
                  <img :src="topMsg.head" height="147" width="147"/>
                  <s>{{ topMsg.name }}</s>
                </div>
                <div class="score">
                  <em>{{ topMsg.ck }}</em>
                  <span>
                      打破了历史记录{{ topMsg.topCk }}
                   </span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="heros" v-else>
          <h5>本周卡路里消耗英雄榜</h5>
          <ul>
            <li v-for="hero in 3">
              <img :src="topMsg.head" height="147" width="147"/>
               <em>No.1</em>{{ topMsg.name }}
              <span>{{ topMsg.topCk }}千卡</span>
            </li>
          </ul>
        </div>
        </div>
      </div>
      <div class="rt">
        <h5>月度CK值排行</h5>
        <ul>
          <li v-for="s in students">
            <img src="../static/img/head.png" height="147" width="147"/>
            <em>刘伟峰</em>
            <s>125.0</s>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Headside from '@/components/Headside'
import {getUserList} from '@/api/getApiRes'

let qs = require('qs');
export default {
  data() {
    return {
      sum: '29177',
      unite:'卡路里',
      topMsg: '',
      students: [],
    }
  },
  mounted() {
    this.GetgetUserList()
  },
  methods: {
    GetgetUserList() {
      let that = this;
      let param = {
        token: localStorage.token,
      };
      let postdata = qs.stringify(param);
      getUserList(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.topMsg = json.Rs[0];
          that.students = json.Rs;
        } else {
          that.$message.error(json.Memo);
        }
      })
    },
  },
  components: {
    Headside
  }
}
</script>

<style scoped>
.rank {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  background: url("../static/img/rankBg.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.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;
}

.rankContainer .lt > h5 {
  font-family: Roboto;
  font-weight: normal;
  font-size: 44px;
  text-align: left;
  color: #fff;
  margin: 5% auto;
}

.rankContainer .sum {
  position: relative;
  bottom: 300px;
  width: 100%;
  height: 35%;
  overflow: visible;
  display: block;
  margin: 0 auto;
  text-align: center;
  z-index: 666;
}
.sumBg {
  position: relative;
  bottom: -450px;
  width: 100%;
  height: 300px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  background: url("../static/img/circle.png") bottom center;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 222;
}

.sum em {
  font-family: Roboto;
  font-weight: 900;
  font-size: 250px;
  text-align: center;
  color: #fff;
  font-family: Roboto;
  font-weight: 900;
  font-size: 250px;
  text-align: center;
  color: #fff;
  text-shadow: 0px 0px 50px rgba(0, 0, 0, 0.52);
  font-style: normal;
  text-shadow: #E85297 5px 0 0, #E85297 0 5px 0, #E85297 -5px 0 0, #E85297 0 -5px 0;
}

.sum s {
  font-style: normal;
  font-family: Roboto;
  font-weight: normal;
  font-size: 44px;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

.topOne {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.topOne h5 {
  font-family: Roboto;
  font-weight: normal;
  font-size: 36px;
  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: 3px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.topOne li {
  width: 44%;
  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: 23px;
  padding-bottom: 20px;
}

.topOne .dgCenter {
  width: 96%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.dgCenter .dghead {
  width: 40%;
  float: left;
}

.dghead img {
  width: 120px;
  height: 120px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  padding: 3px;
  border-radius: 250px;
  border: 2px solid #fff;
}

.dghead s {
  font-family: Roboto;
  font-weight: normal;
  font-size: 30px;
  text-align: center;
  color: #fff;
  font-style: normal;
  text-decoration: none;
  margin-top: 10px;
}

.score {
  width: 60%;
  float: right;
}

.score em {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  font-family: Roboto;
  font-weight: bold;
  font-size: 90px;
  text-align: center;
  color: #fff;
  font-style: normal;
  height: 140px;
  line-height: 140px;
}

.score span {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  font-family: Roboto;
  font-weight: normal;
  font-size: 24px;
  color: #fff;
  text-align: center;
}

.rt > h5 {
  font-family: Roboto;
  font-weight: normal;
  font-size: 36px;
  text-align: center;
  color: #fff;
  margin: 0;
  margin-bottom: 3%;
}

.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: 20px;
  padding: 10px 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: 70px;
  height: 70px;
  filter: drop-shadow(0px 0px 6px #bf00ff);
  border: 2px solid #fff;
  float: left;
  border-radius: 250px;
  margin-right: 3%;
}

.rt li em {
  font-family: Roboto;
  font-weight: normal;
  font-size: 30px;
  text-align: center;
  color: #fff;
  font-style: normal;
  float: left;
  line-height: 80px;
}

.rt li s {
  font-family: Roboto;
  font-weight: normal;
  font-size: 30px;
  text-align: right;
  color: #fff;
  text-decoration: none;
  line-height: 80px;
  float: right;
}
.heros>h5 {
  font-family: Roboto;
  font-weight: normal;
  font-size: 36px;
  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: 220px;
  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: 6px;
  padding-bottom: 8px;
  color: #fff;
  font-size: 30px;
  text-align: center;
  margin-right: 5%;
}
.heros li img {
  width: 120px;
  height: 120px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  padding: 3px;
  border-radius: 250px;
  border: 2px solid #fff;
}
.heros li em {
  font-family: Roboto;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  color: #FA5114;
  font-style: normal;
}
.heros li span {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}
.bottom {
  position: relative;
  width: 100%;
  bottom: 0%;
}
</style>