77 lines
2.5 KiB
Vue
77 lines
2.5 KiB
Vue
<template>
|
|
<el-container class="layout">
|
|
<el-header class="header">
|
|
<div class="logo">三十六计·后台</div>
|
|
<el-menu
|
|
mode="horizontal"
|
|
:default-active="$route.path"
|
|
router
|
|
background-color="#1f2d3d"
|
|
text-color="#c0c4cc"
|
|
active-text-color="#409eff"
|
|
class="top-menu"
|
|
>
|
|
<el-sub-menu index="content">
|
|
<template #title>内容管理</template>
|
|
<el-menu-item index="/content">内容管理</el-menu-item>
|
|
<el-menu-item index="/element">元素库</el-menu-item>
|
|
</el-sub-menu>
|
|
<el-sub-menu index="ops">
|
|
<template #title>运营中心</template>
|
|
<el-menu-item index="/prize">奖品管理</el-menu-item>
|
|
<el-menu-item index="/badge">徽章管理</el-menu-item>
|
|
<el-menu-item index="/life-task">生活任务</el-menu-item>
|
|
<el-menu-item index="/redemption">兑换管理</el-menu-item>
|
|
</el-sub-menu>
|
|
<el-sub-menu index="users">
|
|
<template #title>用户管理</template>
|
|
<el-menu-item index="/parent">家长管理</el-menu-item>
|
|
<el-menu-item index="/child">孩子管理</el-menu-item>
|
|
</el-sub-menu>
|
|
<el-menu-item index="/stats">关卡统计</el-menu-item>
|
|
</el-menu>
|
|
<div class="right">
|
|
<el-button link type="primary" @click="logout">退出登录</el-button>
|
|
</div>
|
|
</el-header>
|
|
<div class="breadcrumb-bar">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item>三十六计·后台</el-breadcrumb-item>
|
|
<el-breadcrumb-item v-if="$route.meta.group">{{ $route.meta.group }}</el-breadcrumb-item>
|
|
<el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<el-main><router-view /></el-main>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
const logout = () => {
|
|
localStorage.removeItem('admin_token')
|
|
router.push('/login')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.layout { height: 100vh; }
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
background: #1f2d3d;
|
|
border-bottom: none;
|
|
}
|
|
.logo { color: #fff; font-weight: 600; font-size: 16px; padding: 0 16px 0 0; white-space: nowrap; }
|
|
.el-menu--horizontal { border-bottom: none; }
|
|
.top-menu { flex: 1; min-width: 0; overflow-x: auto; }
|
|
.right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
|
|
.breadcrumb-bar {
|
|
padding: 10px 16px;
|
|
background: #fff;
|
|
border-bottom: 1px solid #e4e7ed;
|
|
}
|
|
</style>
|