<template>
|
<el-container class="layout-container">
|
<!-- 顶部栏 -->
|
<el-header class="layout-header">
|
<div class="header-content">
|
<div class="title-container">
|
<img src="/logo.jpg" alt="蓉易创" class="logo-icon" />
|
<span class="system-title">蓉易创比赛管理</span>
|
</div>
|
<el-dropdown @command="handleCommand">
|
<span class="el-dropdown-link">
|
{{ currentUserName }}
|
<el-icon class="el-icon--right">
|
<arrow-down />
|
</el-icon>
|
</span>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item command="profile">个人信息</el-dropdown-item>
|
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
</el-header>
|
|
<!-- 下方容器：左侧菜单 + 右侧内容 -->
|
<el-container class="main-container">
|
<el-aside width="200px" class="layout-aside">
|
<el-menu
|
:default-active="$route.path"
|
router
|
background-color="transparent"
|
text-color="#666666"
|
active-text-color="#1E3A8A"
|
>
|
>
|
<el-menu-item index="/dashboard">
|
<el-icon><House /></el-icon>
|
<span>工作台</span>
|
</el-menu-item>
|
|
<el-menu-item index="/activity">
|
<el-icon><Calendar /></el-icon>
|
<span>比赛信息</span>
|
</el-menu-item>
|
<el-menu-item index="/judge">
|
<el-icon><User /></el-icon>
|
<span>评委管理</span>
|
</el-menu-item>
|
<el-menu-item index="/rating-scheme">
|
<el-icon><Document /></el-icon>
|
<span>评分模板</span>
|
</el-menu-item>
|
<el-menu-item index="/player">
|
<el-icon><UserFilled /></el-icon>
|
<span>报名审核</span>
|
</el-menu-item>
|
<el-menu-item index="/project-review">
|
<el-icon><Files /></el-icon>
|
<span>项目评审</span>
|
</el-menu-item>
|
<el-menu-item index="/competition-promotion">
|
<el-icon><TrendCharts /></el-icon>
|
<span>比赛晋级</span>
|
</el-menu-item>
|
<el-menu-item index="/carousel">
|
<el-icon><Picture /></el-icon>
|
<span>新闻与推广</span>
|
</el-menu-item>
|
<el-menu-item index="/region">
|
<el-icon><Location /></el-icon>
|
<span>区域管理</span>
|
</el-menu-item>
|
<el-menu-item index="/employee">
|
<el-icon><Avatar /></el-icon>
|
<span>员工管理</span>
|
</el-menu-item>
|
</el-menu>
|
</el-aside>
|
|
<el-main class="layout-main">
|
<router-view />
|
</el-main>
|
</el-container>
|
</el-container>
|
</template>
|
|
<script setup lang="ts">
|
import { computed } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { House, Calendar, User, Document, UserFilled, Files, TrendCharts, Picture, Location, Avatar, ArrowDown } from '@element-plus/icons-vue'
|
|
const router = useRouter()
|
|
const userInfo = computed(() => ({
|
name: '管理员'
|
}))
|
|
const currentUserName = computed(() => userInfo.value.name || '用户')
|
|
const handleCommand = (command: string) => {
|
switch (command) {
|
case 'profile':
|
router.push('/profile')
|
break
|
case 'logout':
|
localStorage.removeItem('token')
|
router.push('/login')
|
break
|
}
|
}
|
</script>
|
|
<style scoped>
|
/* 整体布局容器 */
|
.layout-container {
|
height: 100vh;
|
width: 100vw;
|
}
|
|
/* 顶部栏样式 */
|
.layout-header {
|
background-color: #FFFFFF;
|
color: #333;
|
line-height: 60px;
|
padding: 0 20px;
|
border-bottom: 1px solid #E5E7EB;
|
}
|
|
.header-content {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 100%;
|
}
|
|
.title-container {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
}
|
|
.logo-icon {
|
width: 48px;
|
height: 48px;
|
}
|
|
.system-title {
|
font-size: 20px;
|
font-weight: bold;
|
color: #333;
|
}
|
|
/* 主要容器 */
|
.main-container {
|
height: calc(100vh - 60px);
|
}
|
|
/* 侧边栏样式 */
|
.layout-aside {
|
background-color: #FFFFFF;
|
height: 100%;
|
border-right: 1px solid #E5E7EB;
|
}
|
|
.sidebar-menu {
|
height: 100%;
|
border-right: none;
|
}
|
|
/* 菜单项样式 */
|
.el-menu-item.is-active {
|
background-color: #3B82F6 !important;
|
color: #FFFFFF !important;
|
border-radius: 6px;
|
margin: 2px 8px;
|
}
|
|
.el-menu-item:hover {
|
background-color: #EBF4FF !important;
|
color: #1E3A8A !important;
|
border-radius: 6px;
|
margin: 2px 8px;
|
}
|
|
/* 主内容区域 */
|
.layout-main {
|
background-color: #FFFFFF;
|
padding: 20px;
|
}
|
|
/* 下拉菜单样式 */
|
.el-dropdown-link {
|
cursor: pointer;
|
color: #333;
|
display: flex;
|
align-items: center;
|
}
|
|
.el-dropdown-link:hover {
|
color: #409eff;
|
}
|
</style>
|
