完成公告、排行榜

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>

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Login from '../views/Login.vue'
 import Challenge from '../views/Challenges.vue'
 import Scoreboard from '../views/Scoreboard.vue'
+import Notification from "../views/Notification.vue";
 
 const routerHistory = createWebHistory()
 const router = createRouter({
@@ -31,6 +32,11 @@ const router = createRouter({
             name:'Scoreboard',
             component: Scoreboard,
 
+        },
+        {
+            path:'/notification',
+            name:'Notification',
+            component: Notification,
         }
     ]
 })

src/views/Notification.vue

@@ -0,0 +1,14 @@
+<template>
+  <Navbar></Navbar>
+  <notification></notification>
+</template>
+
+<script>
+import Navbar from '../components/Navbar.vue'
+import notification from '../components/notification.vue'
+export default {
+    components: {
+        Navbar,notification
+    }
+}
+</script>

src/views/Scoreboard.vue

@@ -1,10 +1,13 @@
 <template>
   <Navbar></Navbar>
+  <socre></socre>
 </template>
 <script>
   import Navbar from '../components/Navbar.vue'
+  import Socre from "../components/socre.vue";
   export default {
     components: {
+      Socre,
       Navbar
     }
   }