完善导航栏
This commit is contained in:
jiayuqi7813
@@ -1,5 +1,10 @@
|
||||
<template>
|
||||
|
||||
<div class="wrapper">
|
||||
<!-- 页面头部部分 -->
|
||||
<div class="header">
|
||||
<div class="logo">SNCTF</div>
|
||||
<!-- 水平一级菜单 -->
|
||||
<div style="float:left;">
|
||||
<el-menu
|
||||
router
|
||||
:default-active="$route.path"
|
||||
@@ -7,29 +12,128 @@
|
||||
mode="horizontal"
|
||||
background-color="#2d3039"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b"
|
||||
|
||||
>
|
||||
|
||||
<el-menu-item index="0">
|
||||
<a href="/home"><img style = "height:50px;width:auto" src="../assets/logo.png" alt="logo"></a>
|
||||
</el-menu-item>
|
||||
|
||||
active-text-color="#ffd04b">
|
||||
<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>
|
||||
<el-menu-item index="/notification">Notification</el-menu-item>
|
||||
<el-menu-item index="/challenges">Challenges</el-menu-item>
|
||||
|
||||
<el-button type="primary" class="login" @click="login">登录/注册</el-button>
|
||||
|
||||
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div v-if="username!=''" class='right'>
|
||||
<div class="userinfo">
|
||||
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
|
||||
<span class="el-dropdown-link" style="font-size: larger">
|
||||
{{ username }}
|
||||
<i class="el-icon-caret-bottom"></i>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item >个人信息</el-dropdown-item>
|
||||
<el-dropdown-item disabled>修改密码</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="slip">
|
||||
<p class="slip">|</p>
|
||||
</div>
|
||||
<div class="logout">
|
||||
<el-button text color="#626aef" :dark="isDark" @click="logout">退出登录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="login">
|
||||
<el-button type="primary" class="login" @click="login">登录/注册</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <el-menu-->
|
||||
<!-- router-->
|
||||
<!-- :default-active="$route.path"-->
|
||||
<!-- class="el-menu-demo"-->
|
||||
<!-- mode="horizontal"-->
|
||||
<!-- background-color="#2d3039"-->
|
||||
<!-- text-color="#fff"-->
|
||||
<!-- active-text-color="#ffd04b"-->
|
||||
|
||||
<!-- >-->
|
||||
<!-- <el-menu-item index="0">-->
|
||||
<!-- <a href="/home"><img style = "height:50px;width:auto" src="../assets/logo.png" alt="logo"></a>-->
|
||||
<!-- </el-menu-item>-->
|
||||
|
||||
<!-- <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>-->
|
||||
<!-- <el-menu-item index="/notification">Notification</el-menu-item>-->
|
||||
<!-- <el-menu-item index="/challenges">Challenges</el-menu-item>-->
|
||||
|
||||
|
||||
<!-- <div v-if="username!=''" class="right">-->
|
||||
<!-- <el-sub-menu index="/profile" class="profile" >-->
|
||||
<!-- <template #title>{{ username }}</template>-->
|
||||
<!-- <el-menu-item index="/edit">修改资料</el-menu-item>-->
|
||||
<!-- </el-sub-menu>-->
|
||||
<!-- <p>|</p>-->
|
||||
<!-- <el-menu-item @click="logout()">Challenges</el-menu-item>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <el-button v-else type="primary" class="login" @click="login">登录/注册</el-button>-->
|
||||
|
||||
|
||||
|
||||
<!-- </el-menu>-->
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Login from "../components/Login.vue";
|
||||
import axios from "axios";
|
||||
import {ElNotification} from "element-plus";
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
username : '',
|
||||
}
|
||||
},
|
||||
|
||||
mounted(){
|
||||
axios.get("/api/v1/user/session").then(res => {
|
||||
if (res.data.code === 200) {
|
||||
console.log(res)
|
||||
this.username = res.data.data.username;
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
methods:{
|
||||
logout(){
|
||||
axios.get("/api/v1/logout").then(res => {
|
||||
if (res.data.code === 200) {
|
||||
ElNotification({
|
||||
title: '退出成功',
|
||||
message: '已成功退出',
|
||||
type: 'success',
|
||||
duration: 3000,
|
||||
});
|
||||
if(this.$route.path === '/') {
|
||||
window.location.reload()
|
||||
} else {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
|
||||
login(){
|
||||
this.$router.push('/login')
|
||||
}
|
||||
@@ -40,11 +144,85 @@ export default {
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.login{
|
||||
margin-top: 12px;
|
||||
margin-left: auto;
|
||||
margin-right: 30px;
|
||||
float:right;
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #2d3039;
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.header .logo {
|
||||
float: left;
|
||||
margin-left: 60px;
|
||||
margin-top: 17.5px;
|
||||
height: 29px;
|
||||
width: 120px;
|
||||
vertical-align: middle;
|
||||
color: #dddddd;
|
||||
}
|
||||
.header-right {
|
||||
float: right;
|
||||
padding-right: 50px;
|
||||
height: 70px;
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transform:translateY(-10%);
|
||||
.userinfo{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
|
||||
.user-name{
|
||||
margin-right: 10px;
|
||||
color: #dddddd;
|
||||
}
|
||||
}
|
||||
.slip{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.logout{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
.login{
|
||||
transform:translateY(20%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-dropdown-menu__item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.el-menu.el-menu--horizontal {
|
||||
border-bottom: none !important;
|
||||
float: left;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.el-menu--horizontal > .el-menu-item.is-active {
|
||||
border-bottom: 2px solid #ffd04b;
|
||||
color: #ffd04b;
|
||||
font-weight: 700;
|
||||
}
|
||||
.el-menu--horizontal > .el-menu-item {
|
||||
font-size: 16px;
|
||||
margin: 0 15px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -5,6 +5,10 @@ const routerHistory = createWebHistory()
|
||||
const router = createRouter({
|
||||
history: routerHistory,
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
redirect:'/home'
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
name:'Home',
|
||||
|
||||
Reference in New Issue
Block a user