<template>
  <div :class="pageStyle">
    <Headside></Headside>
    <!-- 第一屏 -->
    <div class="container" v-show="!page">
      <div v-show="Listate[0].state" class="lt lists">
        <div class="partTitle" :class="[{'box animate__animated animate__flipInX': Listate[0].state}]">
          周卡路里排名
        </div>
        <div class="listTitle">
          <span>排名</span>
          <span>成员</span>
          <span>卡路里</span>
        </div>
        <ul>
          <li v-for="(s,i) in calcWeekRank" v-show="Listate[i].state" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
            <div class="num">{{ i + 1 }}</div>
            <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" :src="s.Head" alt="" v-if="s.Head">
            <!-- <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head"> -->
            <default-head v-if="!s.Head" :class="[{'headImg':true},{'girl':s.Sex == 2}]"></default-head>
            <span>{{ s.UserName }}</span>
            <!-- <img class="crIcon" v-bind:src="require('../assets/imgs/rank/cr.png')" v-if="i == 0" alt=""> -->
            <img class="pbIcon" src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
            <em>{{ s.Values }}</em>
          </li>
          <li v-if="calcWeekRank == ''">
            <i>还没有排行记录哟~</i>
          </li>
        </ul>
      </div>
      <div v-show="Listate[0].state" class="md">
        <h5 :class="[{'timeTitle weeksTitle':true}, {' box animate__animated animate__flipInX': Listate[0].state}]">
          本周
        </h5>
        <span class="sub" v-show="Listate[2].state" :class="[{'box animate__animated animate__flipInX': Listate[2].state}]">
              场馆卡路里总消耗
            </span>
        <div v-show="Listate[3].state" class="sumCalc">
          <h5 :class="[{'box animate__animated animate__flipInX': Listate[3].state}]">
              {{ recordMain[0].Result[0].Values }}</h5>
            <!-- {{ TodayCalcValues }}</h5> -->
          <em :class="[{'box animate__animated animate__flipInX': Listate[3].state}]">千卡</em>
        </div>
        <div v-show="Listate[7].state" class="persons" :class="[{ 'box animate__animated animate__flipInX': Listate[3].state }]">
          <!-- hero 英雄榜-->
          <h5 v-if="Heros != ''">本周消耗卡路里英雄榜</h5>
          <ul>
            <li v-for="(s,index) in Heros">
              <div class="person">
                <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" :src="s.Head" alt="" v-if="s.Head">
                <!-- <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head"> -->
                <default-head v-if="!s.Head" :class="[{'headImg':true},{'girl':s.Sex == 2}]"></default-head>
                <span class="name">{{ s.UserName }}</span>
                <div class="calcHero">
                  <img src="../assets/imgs/wait/calcIcon.svg" alt="">
                  <em>{{ s.Values }}</em>
                </div>
                <i>{{ index + 1 }}</i>
              </div>
              <!-- <span class="sign">
                <img src="../assets/imgs/wait/newIcon.svg" alt="new">
                <em>场馆新纪录</em>
              </span> -->
            </li>
            <li v-if="Heros == ''">
              <!-- <i>还没有排行记录哟~</i> -->
            </li>
          </ul>
        </div>
      </div>
      <div v-show="Listate[0].state" class="rt lists">
        <div class="partTitle" :class="[{'box animate__animated animate__flipInX': Listate[0].state}]">
          周CK排名
        </div>
        <div class="listTitle">
          <span>排名</span>
          <span>成员</span>
          <span>C K</span>
        </div>
        <ul>
          <li v-for="(s,i) in CKWeekRank" v-show="Listate[i].state" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
            <div class="num">{{ i + 1 }}</div>
            <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" :src="s.Head" alt="" v-if="s.Head">
            <!-- <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head"> -->
            <default-head v-if="!s.Head" :class="[{'headImg':true},{'girl':s.Sex == 2}]"></default-head>
            <span>{{ s.UserName }}</span>
            <!-- <img class="crIcon" v-bind:src="require('../assets/imgs/rank/cr.png')" v-if="i == 0" alt=""> -->
            <img class="pbIcon" src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
            <em>{{ s.Values }}</em>
          </li>
          <li v-if="CKWeekRank == ''">
            <i>还没有排行记录哟~</i>
          </li>
        </ul>
      </div>
    </div>
    <!-- 第二屏 -->
    <div class="container" v-show="page">
      <div v-show="Listate[0].state" class="lt lists">
        <div class="partTitle" :class="[{'box animate__animated animate__flipInX': Listate[0].state}]">
          月卡路里排名
        </div>
        <div class="listTitle">
          <span>排名</span>
          <span>成员</span>
          <span>卡路里</span>
        </div>
        <ul>
          <li v-for="(s,t) in calcMouthRank" v-show="Listate[t].state" :class="[{ 'box animate__animated animate__flipInX': Listate[t].state }]">
            <div class="num">{{ t + 1 }}</div>
            <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" :src="s.Head" alt="" v-if="s.Head">
            <!-- <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head"> -->
            <default-head v-if="!s.Head" :class="[{'headImg':true},{'girl':s.Sex == 2}]"></default-head>
            <span>{{ s.UserName }}</span>
            <!-- <img class="crIcon" v-bind:src="require('../assets/imgs/rank/cr.png')" v-if="t == 0" alt=""> -->
            <img class="pbIcon" src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
            <em>{{ s.Values }}</em>
          </li>
          <li v-if="calcMouthRank == ''">
            <i>还没有排行记录哟~</i>
          </li>
        </ul>
      </div>
      <div v-show="Listate[0].state" class="md">
        <h5 :class="[{'timeTitle monsTitle':true},{ ' box animate__animated animate__flipInX': Listate[0].state }]">
          本月
        </h5>
        <span class="sub" v-show="Listate[2].state" :class="[{'box animate__animated animate__flipInX': Listate[2].state}]">
              场馆卡路里总消耗
            </span>
        <div v-show="Listate[3].state" class="sumCalc">
          <h5 :class="[{ 'box animate__animated animate__flipInX': Listate[3].state }]">
            {{ recordMain[1].Result[0].Values }}</h5>
          <em :class="[{'box animate__animated animate__flipInX': Listate[3].state}]">千卡</em>
        </div>
        <div v-show="Listate[7].state" class="persons" :class="[{ 'box animate__animated animate__flipInX': Listate[3].state }]">
          <!-- 本月上课次数排名 -->
          <h5 v-if="ClassNumToper != ''">本月上课次数排名</h5>
          <ul>
            <li v-for="(s,index) in ClassNumToper">
              <div class="person">
                <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" :src="s.Head" alt="" v-if="s.Head">
                <!-- <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head"> -->
                <default-head v-if="!s.Head" :class="[{'headImg':true},{'girl':s.Sex == 2}]"></default-head>
                <span class="name">{{ s.UserName }}</span>
                <div class="calcHero">
                  <img src="../assets/imgs/wait/classNum.svg" alt="">
                  <em>{{ s.Values }}</em>
                </div>
                <i>{{ index + 1 }}</i>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div v-show="Listate[0].state" class="rt lists">
        <div class="partTitle" :class="[{'box animate__animated animate__flipInX': Listate[0].state}]">
          月CK排名
        </div>
        <div class="listTitle">
          <span>排名</span>
          <span>成员</span>
          <span>C K</span>
        </div>
        <ul>
          <li v-for="(s,i) in CKMonthRank" v-show="Listate[i].state" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
            <div class="num">{{ i + 1 }}</div>
            <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" :src="s.Head" alt="" v-if="s.Head">
            <!-- <img :class="[{'headImg':true},{'girl':s.Sex == 2}]" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head"> -->
            <default-head v-if="!s.Head" :class="[{'headImg':true},{'girl':s.Sex == 2}]"></default-head>
            <span>{{ s.UserName }}</span>
            <!-- <img class="crIcon" v-bind:src="require('../assets/imgs/rank/cr.png')" v-if="i == 0" alt=""> -->
            <img class="pbIcon" src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
            <em>{{ s.Values }}</em>
          </li>
          <li v-if="CKMonthRank == ''">
            <i>还没有排行记录哟~</i>
          </li>
        </ul>
      </div>
    </div>
    <div class="icons" @click="playBell">
      <img src="../assets/imgs/wait/icons2.svg" alt="">
    </div>
    <audio class="success" src="../static/sound/bell.wav" autoplay="autoplay" v-if="bellState">
    </audio>
  </div>
</template>

<script>
import Headside from '@/components/Headside'
import defaultHead from '@/components/defaultHead'

import '../libs/rem';
import '../Global'
import {
  getHello,
  getClassStat,
  HerosRankingQuery,
  CalorieStatsQuery,
  UserRankingQuery
} from '@/api/getApiRes'

import audio from '../static/sound/bell.wav'
import {SignInPasswordRequest} from "@/grpc/im_pb";
import { stringify } from 'qs';

let qs = require('qs');

export default {
  data() {
    return {
      eqSn: '30:9C:23:0C:8B:1E',
      pageStyle: RandomBg2(),
      page: true,
      show: true,
      bellState: false,
      // pageTimer: null,
      waitTimer: null,
      waitTimer2: null,
      Listate: [
        {state: false},
        {state: false},
        {state: false},
        {state: false},
        {state: false},
        {state: false},
        {state: false},
        {state: false},
      ],
      recordMain: [
        {
          Title: '本<s>周</s>场馆卡路里总消耗',
          Result: [{'Values': 0, Unite: '千卡'}],
        },
        {
          Title: '本<s>周</s>场馆卡路里总消耗',
          Result: [{'Values': 0, Unite: '千卡'}],
        }
      ],
      rt: [],
      bottom: [],
      calcWeekRank: [],
      CKWeekRank: [],
      calcMouthRank: [],
      CKMonthRank: [],
      Heros: [],
      // CKtoper: [],
      ClassNumToper: [],
      // TodayCalcValues: 0,
    }
  },
  mounted() {
    console.log("[Wait] mounted");
    // test
    // this.$router.push({path: '/rank'});
    // this.$router.push({path: '/2pkrank'});
    // this.$router.push({path: '/3pkrank'});
    // this.$router.push({path: '/threepk'});

    this.init();
    // this.grpcServe(); 
    
  },
  destroyed() {
    clearInterval(this.waitTimer);//页面销毁时清除定时器
    clearInterval(this.waitTimer2);//页面销毁时清除定时器
  },
  watch: {
    '$route': function (val) {
      console.log("[watch route] val.path=" + val.path);
      let that = this;
      if (val.path == '/') {       
        that.init();
      } else {
        clearInterval(this.waitTimer);
        clearInterval(this.waitTimer2);
      }
    }
  },
  methods: {
    // grpcServe() {
    //   let that = this;
    //   let getRequest = new SignInPasswordRequest();
    //   getRequest.setPassword("asdf*123");
    //   getRequest.setAuth("admin");
    //   getRequest.setExpirationsec(10000);
    //   that.client.signInUserCode(getRequest, {}, (err, response) => {
    //     that.TodayCalcValues = response.getToken();
    //     that.TodayCalcValues = 123456;//不影响展示效果，可注释
    //   });
    // },
    // 流式传输
    // grpcSteam() {
    //   // todo
    //   // let getRequest = new FlushDataRequest();
    //   // getRequest.setName(text);
    //   // let stream = this.client.flushData(getRequest, {
    //   //   token:1122334
    //   // }, (err, response) => {
    //   //   console.log('连接出现问题 err:' + err);
    //   //   // that.grpcSrc = response
    //   // });
    //   //
    //   // // 获取数据流
    //   // stream.on('data', (response) => {
    //   //   that.name = response.getName();
    //   //   that.message = response.getHeartrate();
    //   //   console.log('已推送数据');
    //   // });
    //   //
    //   // // 报错处理
    //   // stream.on('error', (err) => {
    //   //   console.log('当前推送错误 err:' + err);
    //   //   console.log(`Unexpected stream error: code = ${err.code}` +
    //   //       `, message = "${err.message}"`);
    //   // });
    // },
    playBell() {
      this.bellState = !this.bellState
    },
    init() {
      console.log("[Wait] init() run!");

      this.curgetClassStat();
      this.GetHerosRankingQuery();
      this.GetCalorieStatsQuery();
      this.GetUserRankingQuery();
      this.cardPlay();
        
      this.waitTimer = setInterval(() => {
        this.curgetClassStat();
      }, 3000);

      this.waitTimer2 = setInterval(() => {
        this.GetHerosRankingQuery();
        this.GetCalorieStatsQuery();
        this.GetUserRankingQuery();

        this.page = !this.page;
        this.cardPlay();
      }, 10000);
    },
    cardPlay() {
      let that = this;
      // 重置一下状态
      that.Listate.map(function (t) {
        t.state = false;
      })
      let timeScope = 100;  //600
      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);
    },
    curgetClassStat() {
      let that = this;
      let param = {
        token: localStorage.token,
        eqSn: localStorage.eqSn
      };
      let postdata = qs.stringify(param);
      getClassStat(postdata).then(res => {
        let json = res;
        // console.log("[Wait] getClassStat: " + JSON.stringify(json));
        if (json.Code == 0) {
          that.$store.commit('setClassOn', 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;
            }
          }
        }
      })
    },
    GetHerosRankingQuery() {
      let that = this;
      let param = {
        eqSn: localStorage.eqSn,
        dispNum: 3
      };
      let postdata = qs.stringify(param);
      HerosRankingQuery(postdata).then(res => {
        let json = res;
        // console.log("[Wait] HerosRankingQuery: " + JSON.stringify(json));
        if (json.Code == 0) {
          that.Heros = json.Rs[0].Result;
          that.ClassNumToper = json.Rs[1].Result;
        } else {
          if (json.Code == 4002) {
          } 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;
        // console.log("[Wait] CalorieStatsQuery: " + JSON.stringify(json));
        if (json.Code == 0) {
          that.recordMain = json.Rs;
        } else {
          that.recordMain = [
            {
              Title: '',
              Result: [{'Values': '', Unite: ''}],
            },
            {
              Title: '',
              Result: [{'Values': '', Unite: ''}],
            }
          ];
          if (json.Code == 4002) {
            that.dialogVisible = true;
            that.dialogText = json.Memo;
          } else {
            that.$message.error(json.Memo);
          }
        }
      })
    },
    GetUserRankingQuery() {
      let that = this;
      let param = {
        eqSn: localStorage.eqSn,
        dispNum: 8
      };
      let postdata = qs.stringify(param);
      UserRankingQuery(postdata).then(res => {
        let json = res;
        // console.log("UserRankingQuery:" + JSON.stringify(json));
        if (json.Code == 0) {
          // that.rt = json.Rs;
          if (json.Rs != null) {
            that.calcMouthRank  = json.Rs[0].Result;
            that.CKMonthRank    = json.Rs[1].Result;
            that.calcWeekRank   = json.Rs[2].Result;
            that.CKWeekRank     = json.Rs[3].Result;            
          }
        } else {
          if (json.Code == 4002) {
          } else {
            that.$message.error(json.Memo);
          }
        }
      })
    },
  },
  components: {
    Headside, defaultHead
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/bg.scss";

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

// @font-face {
//   font-family: Artifakt;
//   src: url('../assets/font/Artifakt.ttf');
// }

@font-face {
  font-family: Georgia;
  src: url('../assets/font/Georgia.ttf');
}

$font-color: white;
$yellow: #FFEB50;
@mixin cube {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.pages {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  overflow-y: scroll;
  display: block;
  margin: 0 auto;
}

/deep/ .el-carousel {
  height: 100%;
}

.container {
  @include cube;
  width: 96%;
  min-height: 90%;

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

  .lists {
    ul {
      @include cube;
      padding-top: 0.1rem;

      li {
        @include cube;
        width: 98%;
        margin-bottom: 0.3rem;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        background: rgba(255, 255, 255, 0.15);
        height: 0.65rem;
        font-size: 0.3rem;
        color: $font-color;
        overflow: visible;
        border: 0.01rem solid rgba(255, 255, 255, 0.1);

        .num {
          position: relative;
          left: -0.15rem;
          width: 0.9rem;
          height: 0.65rem;
          float: left;
          background: url("../assets/imgs/wait/litr.svg");
          background-size: 100% 100%;
          background-position: left center;
          line-height: 0.65rem;
          font-size: 0.35rem;
          font-weight: bold;
          text-align: left;
          text-indent: 0.2rem;
          font-style: normal;
          color: #fff;
          text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.47);
        }

        .headImg {
          position: relative;
          top: -0.02rem;
          width: 0.65rem;
          height: 0.65rem;
          float: left;
          border: 1.5px solid #39B6FF;
          border-radius: 250px;
        }

        .girl {
          border: 1.5px solid #EA26EA;
        }

        span {
          width: 1.5rem;
          float: left;
          text-align: left;
          line-height: 0.65rem;
          margin-left: 0.4rem;
        }

        .crIcon {
          width: 0.64rem;
          margin-top: 0.1rem;
          float: left;
        }

        .pbIcon {
          width: 0.64rem;
          margin-top: 0.1rem;
          float: left;
        }

        em {
          width: 0.95rem;
          float: right;
          text-align: left;
          font-style: italic;
          font-weight: bold;
          color: $yellow;
          line-height: 0.65rem;
          margin-right: 0.2rem;
        }
      }
    }
  }

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

    .timeTitle {
      @include cube;
      width: 3rem;
      height: 1rem;
      font-size: 0.5rem;
      text-align: center;
      line-height: 0.85rem;
      color: $font-color;
      margin-top: 0.5rem;
    }

    .weeksTitle {
      background: url("../assets/imgs/wait/weeksTitleBg.svg");
      background-repeat: no-repeat;
      background-position: top center;
      background-size: 100%;
      font-weight: bold;
      letter-spacing: 0.05rem;
    }

    .monsTitle {
      background: url("../assets/imgs/wait/monthsTitleBg.svg");
      background-repeat: no-repeat;
      background-position: top center;
      background-size: 100%;
      font-weight: bold;
      letter-spacing: 0.05rem;
    }

    .sub {
      @include cube;
      color: $font-color;
      font-size: 0.3rem;
    }

    .sumCalc {
      @include cube;
      width: 80%;
      height: 5rem;
      color: $font-color;
      font-size: 0.3rem;
      box-shadow: #2b2b2b;
      font-family: "Artifakt Element";
      font-weight: bold;
      font-style: italic;
      text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.47);

      h5 {
        height: 1.6rem;
        line-height: 2rem;
        margin: 0;
        margin-top: 2rem;
        font-size: 1.5rem;
        padding: 0;
        text-align: center;
        font-family: Artifakt;
      }

      em {
        @include cube;
        float: right;
        text-align: right;
        font-size: 0.3rem;
        color: $font-color;
        font-style: normal;
        font-weight: bold;
        margin-right: 0.3rem;
      }
    }

    .persons {
      @include cube;

      h5 {
        @include cube;
        width: 70%;
        font-size: 0.2rem;
        color: white;
        // text-align: left;
        text-align: center;
      }

      ul {
        @include cube;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        height: 100%;
        position: relative;
        bottom: 0.1rem;

        li {
          width: 1.5rem;
          overflow: hidden;
          padding-left: 0.2rem;
          padding-right: 0.2rem;

          i {
            position: relative;
            bottom: 1.6rem;
            left: 0.1rem;
            width: 0.3rem;
            height: 0.4rem;
            float: left;
            color: white;
            text-align: center;
            font-size: 0.2rem;
            background: url("../assets/imgs/wait/besSign.svg");
            background-repeat: no-repeat;
            background-position: top center;
            background-size: 100%;
            font-style: normal;
          }

          div.person {
            width: 1.5rem;
            height: 1.5rem;
            background-image: url("../assets/imgs/wait/person.svg");
            background-position: top center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            // padding: 0 auto;
            padding-top: 0.5rem;

            .headImg {
              width: 0.7rem;
              height: 0.7rem;
              display: block;
              margin: 0 auto;
              border-radius: 250px;
              border: 1.5px solid #39B6FF;
            }

            .girl {
              border: 1.5px solid #EA26EA
            }

            .name {
              @include cube;
              position: relative;
              top: -0.2rem;
              width: 0.8rem;
              text-align: center;
              font-size: 0.2rem;
              color: white;
              background: rgba(0, 0, 0, 0.62);
              border-radius: 250px;
            }

            .calcHero {
              position: relative;
              top: -0.1rem;
              width: 60%;
              margin: 0 auto;
              height: 0.25rem;

              img {
                width: 0.25rem;
                height: 0.25rem;
                float: left;
              }

              em {
                float: right;
                text-align: left;
                font-size: 0.2rem;
                color: $yellow;
                font-style: normal;
              }
            }
          }
        }

        .sign {
          @include cube;
          width: 90%;
          float: left;

          img {
            width: 0.5rem;
            float: left;
          }

          em {
            font-size: 0.2rem;
            color: white;
            float: right;
            font-style: normal;
            text-align: left
          }
        }
      }
    }
  }

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

  .partTitle {
    @include cube;
    background: url("../assets/imgs/wait/title.png");
    width: 80%;
    height: 0.5rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 1rem;
    color: $font-color;
    text-align: center;
    font-size: 0.4rem;
    line-height: 0.5rem;
    font-weight: bold;
    letter-spacing: 0.05rem;
  }

  .listTitle {
    @include cube;
    width: 96%;
    margin-top: 0.3rem;

    span {
      float: left;
      text-align: left;
      color: $font-color;
      font-size: 0.25rem;

      &:first-child {
        width: 2rem;
      }

      &:last-child {
        float: right;
        text-align: right;
        margin-right: 0.35rem;
      }
    }
  }
}

.rt .listTitle span:last-child {
  margin-right: 0.6rem;
}

.icons {
  @include cube;
  // width: 7rem;
  width: 3.6rem;
  font-size: 0.3rem;

  img {
    width: 100%;
  }
}

</style>