单个题目排行榜功能

src/App.vue

@@ -7,6 +7,6 @@
 
 <style>
 body{
- background-color: #2d3039;
+ /*background-color: #2d3039;*/
 }
-</style>
+</style>

src/components/Navbar.vue

@@ -10,9 +10,9 @@
             :default-active="$route.path"
             class="el-menu-demo"
             mode="horizontal"
-            background-color="#2d3039"
+            text-color="#2c3e50"
-            text-color="#fff"
+            active-text-color="#f39c12">
-            active-text-color="#ffd04b">
+          <!--background-color="#2d3039"-->
           <el-menu-item index="/home">Home</el-menu-item>
           <el-menu-item index="/scoreboard">Scoreboard</el-menu-item>
           <el-menu-item index="/users">Users</el-menu-item>
@@ -43,7 +43,7 @@
             <p class="slip">|</p>
           </div>
           <div class="logout">
-            <el-button text color="#626aef" :dark="isDark" @click="logout">退出登录</el-button>
+            <el-button text color="#ffd04b" :dark="isDark" @click="logout">退出登录</el-button>
           </div>
         </div>
         <div v-else class="login">
@@ -153,7 +153,7 @@ export default {
 .wrapper {
   width: 100%;
   height: 100%;
-  background: #2d3039;
+  //background: #2d3039;
 }
 .header {
   position: relative;
@@ -169,7 +169,7 @@ export default {
   height: 29px;
   width: 120px;
   vertical-align: middle;
-  color: #dddddd;
+  color: #2c3e50;
 }
 .header-right {
   float: right;
@@ -186,7 +186,7 @@ export default {
 
       .user-name{
         margin-right: 10px;
-        color: #dddddd;
+        color: #2c3e50;
       }
     }
     .slip{
@@ -227,7 +227,7 @@ export default {
 .el-menu--horizontal > .el-menu-item {
   font-size: 16px;
   margin: 0 15px;
-  color: white;
+  //color: white;
 }
 
 

src/components/admin/admin-Navbar.vue

@@ -9,9 +9,9 @@
             :default-active="$route.path"
             class="el-menu-demo"
             mode="horizontal"
-            background-color="#2d3039"
+            text-color="#2c3e50"
-            text-color="#fff"
             active-text-color="#ffd04b">
+
           <el-menu-item index="/admin/match">比赛管理</el-menu-item>
           <el-menu-item index="/admin/notification">公告管理</el-menu-item>
           <el-menu-item index="/admin/challenges">题目管理</el-menu-item>
@@ -41,7 +41,7 @@
             <p class="slip">|</p>
           </div>
           <div class="logout">
-            <el-button text color="#626aef" @click="$router.push('/home')">返回首页</el-button>
+            <el-button text color="#2c3e50" @click="$router.push('/home')">返回首页</el-button>
           </div>
         </div>
 
@@ -115,7 +115,7 @@ export default {
 .wrapper {
   width: 100%;
   height: 100%;
-  background: #2d3039;
+  //background: #2d3039;
 }
 .header {
   position: relative;
@@ -131,7 +131,7 @@ export default {
   height: 29px;
   width: 120px;
   vertical-align: middle;
-  color: #dddddd;
+  color: #2c3e50;
 }
 .header-right {
   float: right;
@@ -148,7 +148,7 @@ export default {
 
       .user-name{
         margin-right: 10px;
-        color: #dddddd;
+        color: #2c3e50;
       }
     }
     .slip{
@@ -189,7 +189,6 @@ export default {
 .el-menu--horizontal > .el-menu-item {
   font-size: 16px;
   margin: 0 15px;
-  color: white;
 }
 
 

src/components/admin/admin-User.vue

@@ -0,0 +1,132 @@
+<template>
+  <el-row class="row-bg" justify="center">
+    <el-col :span="20">
+
+      <el-dialog v-model="editUserVisible" title="编辑用户">
+        <el-form :model="formData" ref="vForm"  label-position="left" label-width="80px"
+                 size="default" >
+          <el-form-item label="用户名" prop="username">
+            <el-input v-model="formData.username" placeholder="用户名" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="密码(md5)" prop="password">
+            <el-input v-model="formData.password" placeholder="密码"></el-input>
+          </el-form-item>
+          <el-form-item label="邮箱" prop="email" >
+            <el-input v-model="formData.email" placeholder="邮箱" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="是否被ban" prop="banned">
+            <el-input v-model="formData.banned" placeholder="用户状态"></el-input>
+          </el-form-item>
+          <el-form-item label="是否隐藏" prop="hidden">
+            <el-input v-model="formData.hidden" placeholder="用户状态"></el-input>
+          </el-form-item>
+          <el-form-item label="权限" prop="role">
+            <el-input v-model="formData.role" placeholder="0是普通，1是admin"></el-input>
+          </el-form-item>
+          <el-form-item label="描述" prop="affiliation" >
+            <el-input v-model="formData.affiliation" placeholder="" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="网站" prop="website" >
+            <el-input v-model="formData.website" placeholder="" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="country" prop="country">
+            <el-input v-model="formData.country" placeholder="" disabled></el-input>
+          </el-form-item>
+          <el-button type="primary" @click="edit()">提交</el-button>
+        </el-form>
+      </el-dialog>
+
+      <el-table :data="data" row-key="id" style="width: 100%">
+        <el-table-column label="id" prop="id" column-key="id"/>
+        <el-table-column label="用户名" prop="username"/>
+        <el-table-column label="密码(md5值)" prop="password"/>
+        <el-table-column label="是否被ban" prop="banned"/>
+        <el-table-column label="权限" prop="role"/>
+        <el-table-column label="操作" width="180">
+          <template #default="scope">
+            <el-button link type="primary" size="small" @click="editClick(scope.row)"
+            >编辑</el-button>
+            <el-button link type="primary" size="small" @click="handleClick(scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  data(){
+   return{
+     formData:{
+       id:0,
+       username:"",
+       password:"",
+       email:"",
+       affiliation:"",
+       country:"",
+       website:"",
+       banned:0,
+       hidden:0,
+       role:0,
+       team_id:0,
+     },
+     data:[],
+     editUserVisible:false,
+   }
+  },
+  mounted() {
+    axios.get('/api/v1/admin/users').then(res => {
+      if (res.data.code === 200) {
+        this.data = res.data.data;
+        console.log(this.data);
+      }
+    })
+
+  },
+  methods:{
+    // 修改用户
+    editClick(row){
+      this.editUserVisible=true
+      this.formData.id=row.id
+      this.formData.username=row.username
+      this.formData.password=row.password
+      this.formData.email=row.email
+      this.formData.affiliation=row.affiliation
+      this.formData.country=row.country
+      this.formData.website=row.website
+      this.formData.banned=row.banned
+      this.formData.hidden=row.hidden
+      this.formData.role=row.role
+    },
+    //删除用户
+    handleClick(row){
+      axios.delete('/api/v1/admin/user/'+row.id).then(res => {
+        if (res.data.code === 200) {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          });
+          this.data.splice(this.data.indexOf(row),1);
+        }
+      })
+    },
+    edit(){
+      console.log(this.formData)
+      axios.put('/api/v1/admin/user/'+this.formData.id,this.formData).then(res => {
+        if (res.data.code === 200) {
+          this.$message({
+            message: '修改成功',
+            type: 'success'
+          });
+          this.editUserVisible=false
+        }
+      })
+    }
+  }
+}
+
+</script>

src/components/challenges/challenges.vue

@@ -1,18 +1,28 @@
 <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
             default-active="2"
-            background-color="#2d3039"
+
-            text-color="#fff"
+            text-color="#2c3e50"
-            active-text-color="#ffd04b"
+            active-text-color="#f39c12"
+
             class="el-menu-vertical-demo"
-            @open="handleOpen"
-            @close="handleClose"
             @select="handleSelect"
         >
+<!--          background-color="#2d3039"-->
+
          <el-menu-item index="Web">
            <span>WEB</span>
          </el-menu-item>
@@ -35,7 +45,7 @@
     <el-scrollbar height="490px">
     <div class="all-card">
       <el-button v-for="(c,index) in data" class="buttons" @click="bcard(index)"
-                 :type="c.is_solved ? 'warning':''" >
+                 :type="c.is_solved ? 'success':''" >
         <div class="card">
         <div class="card-name">
           {{c.name}}
@@ -67,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">
@@ -117,6 +132,7 @@
                       <el-button>hint</el-button>
                     </template>
                   </el-popover>
+
                 </div>
 
               </el-col>
@@ -131,6 +147,8 @@
   </div>
 
 
+
+
 </template>
 
 <script>
@@ -140,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() {
@@ -155,6 +178,9 @@ export default {
       challenges:[],
       tags:[],
       attachment:[],
+      solvesVisible:false,
+      solves:[],
+      times:"",
     }
   },
   mounted() {
@@ -172,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]
@@ -261,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{
@@ -310,7 +355,7 @@ export default {
 
       width: 240px;
       height: 100px;
-      //background-color: #ff7f00;
+
       margin-top: 15px;
       .card-name{
         font-size:30px;

src/components/challenges/scorecard.vue

@@ -48,7 +48,7 @@ export default {
   width: 100%;
   display: flex;
   justify-content:center;
-  background-color: #ff7f00;
+  background-color: #f39c12;
   border-radius: 10px;
   box-shadow: #9e4f00 0px 0px 10px;
 
@@ -74,4 +74,4 @@ export default {
 
 }
 
-</style>
+</style>

src/components/index/Index.vue

@@ -3,7 +3,7 @@
    <div class="title">
      Welcome to SNCTF
    </div>
-    
+
   </div>
 </template>
 
@@ -19,7 +19,7 @@
     top: 80px;
     width: 100%;
     height: auto;
-    background: #2D3039;
+    //background: #2D3039;
     .title{
       /* Welcome To SNCTF */
 
@@ -28,7 +28,7 @@
       font-size: 50px;
       font-weight: normal;
       margin-top: 10%;
-      color: #FFFFFF;
+      color: #2c3e50;
     }
   }
-</style>
+</style>

src/components/socre.vue

@@ -39,7 +39,7 @@ export default {
 .title{
   display: flex;
   justify-content: center;
-  color: #dddddd;
+  color: #2c3e50;
 }
 .el-table .warning-row {
   --el-table-tr-bg-color: var(--el-color-warning-light-9);

src/components/userid.vue

@@ -15,7 +15,7 @@
         <p>城市：{{userData.country}}</p>
         <p>网站：{{userData.website}}</p>
       </el-dialog>
-      <h1 style="color: #FFFFFF">解题数</h1>
+      <h1 style="color: #2c3e50">解题数</h1>
       <div>
         <el-table :data="formData" style="width: 100%" stripe>
           <el-table-column prop="challenge_name" label="题目" width="180" />
@@ -163,7 +163,7 @@ export default {
     align-items: center;
     //div内标题间隙
     line-height:1px;
-    color: #FFFFFF;
+    color: #2c3e50;
 
   }
 

src/components/userinfo.vue

@@ -45,7 +45,7 @@
         </el-form>
         <el-button type="primary" @click="editUser">提交</el-button>
       </el-dialog>
-      <h1 style="color: #FFFFFF">解题数</h1>
+      <h1 style="color: #2c3e50">解题数</h1>
       <div>
         <el-table :data="formData" style="width: 100%" stripe>
           <el-table-column prop="challenge_name" label="题目" width="180" />
@@ -140,7 +140,7 @@ export default {
     align-items: center;
     //div内标题间隙
     line-height:1px;
-    color: #FFFFFF;
+    color: #2c3e50;
 
   }
 

src/components/userlist.vue

@@ -50,6 +50,6 @@ export default {
 .title{
   display: flex;
   justify-content: center;
-  color: #dddddd;
+  color: #2c3e50;
 }
 </style>

src/router/index.js

@@ -83,6 +83,11 @@ const router = createRouter({
                     path:'challenges',
                     name:'AdminChallenges',
                     component: ()=> import('../views/admin/AdminChal.vue'),
+                },
+                {
+                    path:'user',
+                    name:'AdminUsers',
+                    component: ()=> import('../views/admin/AdminUser.vue'),
                 }
             ]
 

src/views/admin/AdminUser.vue

@@ -0,0 +1,10 @@
+<template>
+  <Auser></Auser>
+</template>
+
+<script>
+import Auser from "../../components/admin/admin-User.vue";
+export default {
+  components: {Auser},
+}
+</script>