完善导航栏

src/components/challenges/challenges.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="category">
+    <el-container>
+      <el-aside width="200px">
+      <el-menu
+          default-active="2"
+          background-color="#2d3039"
+          text-color="#fff"
+          class="el-menu-vertical-demo"
+          @open="handleOpen"
+          @close="handleClose"
+      >
+       <el-menu-item index="/challenges/web">
+         <span>WEB</span>
+       </el-menu-item>
+        <el-menu-item index="/challenges/pwn">
+          <span>PWN</span>
+        </el-menu-item>
+        <el-menu-item index="/challenges/misc">
+          <span>MISC</span>
+        </el-menu-item>
+        <el-menu-item index="/challenges/reverse">
+          <span>REVERSE</span>
+        </el-menu-item>
+        <el-menu-item index="/challenges/crypto">
+          <span>CRYPTO</span>
+        </el-menu-item>
+      </el-menu>
+      </el-aside>
+    </el-container>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  Document,
+  Menu as IconMenu,
+  Location,
+  Setting,
+} from '@element-plus/icons-vue'
+
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+</script>
+<style>
+
+
+</style>

src/components/challenges/scorecard.vue

@@ -0,0 +1,26 @@
+<template>
+  <el-row class="row-bg" justify="center">
+    <el-col :span="6">
+      <el-card shadow="always" class="scorecard">
+        <div class="left">
+          <h1>RANK</h1>
+
+
+        </div>
+
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+
+}
+</script>
+
+<style lang="less">
+
+</style>