<template>
  <el-row class="row-bg" justify="center">
    <el-col :span="6">

        <div class="scorecard">
        <div class="left">
          <h1>RANK</h1>
          <p>{{rank}}</p>
        </div>
        <div class="right">
          <div class="score">
            <h1>SCORE</h1>
            <p>{{score}}</p>
          </div>
        </div>
        </div>
    </el-col>
  </el-row>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      score: 0,
      rank: 0,
    };
  },
  mounted(){
    axios.get("/api/v1/user/score/self").then(res => {
      if (res.data.code === 200) {
        this.score = res.data.data.score;
        this.rank = res.data.data.rank;
      }
    })
  }

}
</script>

<style lang="less">


.scorecard{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content:center;
  background-color: #ff7f00;
  border-radius: 10px;
  box-shadow: #9e4f00 0px 0px 10px;

  .left{
    margin: 0 20px;
    display:inline-block;
    text-align: center;
    //background-color: #42b983;
  }
  .right{
    margin: 0 20px;
    display:inline-block;
    text-align: center;
    //background-color: #42b983;
  }
  h1{
    color: white;
  }
  p{
    font-size: x-large;
    color: white;
  }

}

</style>