完成公告、排行榜

src/components/notification.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-row class="row-bg" justify="center">
+    <el-col :span="16">
+  <el-timeline>
+    <el-timeline-item center v-for="(times) in data" :timestamp="times.created_at" placement="top">
+      <el-card>
+        <h4>{{ times.title}}</h4>
+        <p>{{times.content}}</p>
+      </el-card>
+    </el-timeline-item>
+  </el-timeline>
+    </el-col>
+  </el-row>
+</template>
+
+
+<script>
+import axios from "axios";
+import * as dayjs from 'dayjs';
+export default {
+  data(){
+    return{
+      data:[],
+    }
+  },
+  mounted() {
+    axios.get('/api/v1/notice').then(res => {
+      if (res.data.code === 200) {
+        console.log(res.data.data);
+        this.data = res.data.data;
+        this.data.forEach(function(item,index){
+          item.created_at = dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss');
+        })
+      }
+    })
+  }
+
+}
+
+</script>
+
+<style>
+
+</style>

src/components/socre.vue

@@ -0,0 +1,46 @@
+<template>
+<!--  <div id="myChart"></div>-->
+  <el-row class="row-bg" justify="center">
+    <el-col :span="16">
+      <el-table :data="tableData" style="width: 100%" stripe :row-class-name="tableRowClassName">
+        <el-table-column prop="rank" label="Ranking" width="180" />
+        <el-table-column prop="username" label="User" width="180" />
+        <el-table-column prop="score" label="Score" />
+      </el-table>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data(){
+    return{
+      tableData:[],
+    }
+  },
+  mounted() {
+
+    axios.get('/api/v1/score').then(res => {
+      if (res.data.code === 200) {
+        console.log(res.data.data);
+        this.tableData = res.data.data;
+        this.tableData.forEach(function(item,index){
+          item.rank = index+1;
+        })
+      }
+    })
+  }
+}
+</script>
+
+<style>
+.el-table .warning-row {
+  --el-table-tr-bg-color: var(--el-color-warning-light-9);
+}
+.el-table .success-row {
+  --el-table-tr-bg-color: var(--el-color-success-light-9);
+}
+
+</style>