From 6f28c0dfb78ed9b7564792387eff7f25d2a36923 Mon Sep 17 00:00:00 2001
From: jiayuqi7813 <63686458+jiayuqi7813@users.noreply.github.com>
Date: Mon, 13 Jun 2022 22:50:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=AF=BC=E8=88=AA=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/challenges/scorecard.vue | 62 +++++++++++++++++++++++--
 1 file changed, 57 insertions(+), 5 deletions(-)

diff --git a/src/components/challenges/scorecard.vue b/src/components/challenges/scorecard.vue
index 81f8666..11e2155 100644
--- a/src/components/challenges/scorecard.vue
+++ b/src/components/challenges/scorecard.vue
@@ -1,14 +1,19 @@
 <template>
   <el-row class="row-bg" justify="center">
     <el-col :span="6">
-      <el-card shadow="always" class="scorecard">
+
+        <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-card>
     </el-col>
   </el-row>
 </template>
@@ -17,10 +22,57 @@
 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>
\ No newline at end of file