单个题目排行榜功能

src/components/challenges/challenges.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="challenges-all">
     <div class="category">
+      <el-dialog v-model="solvesVisible" :title=challenges.name
+      width="500px">
+        <el-table :data="solves" row-key="id" style="width: 100%">
+          <el-table-column label="用户名" prop="username"/>
+          <el-table-column label="时间" prop="submitted_at"/>
+        </el-table>
+
+      </el-dialog>
+
       <el-container>
         <el-aside width="200px">
         <el-menu
@@ -10,10 +19,7 @@
             active-text-color="#f39c12"
 
             class="el-menu-vertical-demo"
-            @open="handleOpen"
-            @close="handleClose"
             @select="handleSelect"
-
         >
 <!--          background-color="#2d3039"-->
 
@@ -71,9 +77,14 @@
         <div class="challenges-name" >
           {{challenges.name}}
         </div>
-        <el-tag v-for="tag in tags" class="tag">
+        <div class="tag">
+        <el-tag v-for="tag in tags" class="tttag">
           {{tag}}
         </el-tag>
+        </div>
+        <div class="solves">
+        <el-button @click="solvesbycid" circle ><el-icon><Trophy /></el-icon></el-button>
+        </div>
       </div>
       <div class="middle">
         <div class="challenges-solve">
@@ -121,6 +132,7 @@
                       <el-button>hint</el-button>
                     </template>
                   </el-popover>
+
                 </div>
 
               </el-col>
@@ -135,6 +147,8 @@
   </div>
 
 
+
+
 </template>
 
 <script>
@@ -144,9 +158,14 @@ import {
   Location,
   Setting,
 } from '@element-plus/icons-vue'
+import dayjs from "dayjs";
 import axios from "axios";
 import { ElNotification } from 'element-plus';
+import relativeTime from 'dayjs/plugin/relativeTime'
+import 'dayjs/locale/zh-cn' // +
 
+dayjs.extend(relativeTime)
+dayjs.locale('zh-cn') //
 
 export default {
   data() {
@@ -159,6 +178,9 @@ export default {
       challenges:[],
       tags:[],
       attachment:[],
+      solvesVisible:false,
+      solves:[],
+      times:"",
     }
   },
   mounted() {
@@ -176,6 +198,21 @@ export default {
     },
 
   methods: {
+    //解题数据查询
+    solvesbycid(){
+      this.solvesVisible = true;
+      axios.get('/api/v1/user/solves/cid/'+this.challenges.id).then(res => {
+        if(res.data.code===200){
+          this.solves = res.data.data;
+          if(this.solves == undefined){
+            this.solves = [];
+          }
+          this.solves.forEach(function(item,index) {
+            item.submitted_at=  dayjs(item.submitted_at).fromNow()
+          })
+        }
+      })
+    },
     bcard(index){
 
       this.challenges = this.data[index]
@@ -265,10 +302,14 @@ export default {
       .challenges-name{
         font-size: 25px;
         font-weight: normal;
+        width: 100px;
       }
       .tag{
-        margin-top: 4px;
+        margin-top: 5px;
-        margin-right: 5px;
+        width: 500px;
+        display: flex;
+      }
+      .solves{
       }
     }
     .middle{