169 lines
3.6 KiB
Vue
169 lines
3.6 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { Grid, Link } from '@element-plus/icons-vue'
|
|
|
|
const route = useRoute()
|
|
|
|
const activeMenu = computed(() => route.path)
|
|
</script>
|
|
|
|
<template>
|
|
<el-container class="admin-shell">
|
|
<el-aside width="151px" class="admin-aside">
|
|
<el-menu class="admin-menu" :default-active="activeMenu" router>
|
|
|
|
<el-sub-menu index="coach">
|
|
<template #title>
|
|
<el-icon>
|
|
<Grid />
|
|
</el-icon>
|
|
<span>教练管理</span>
|
|
</template>
|
|
<el-menu-item index="/coach">
|
|
<el-icon>
|
|
<Link />
|
|
</el-icon>
|
|
<span>教练列表</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/addcoach">
|
|
<el-icon>
|
|
<Link />
|
|
</el-icon>
|
|
<span>教练新增</span>
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
|
|
<el-sub-menu index="member">
|
|
<template #title>
|
|
<el-icon>
|
|
<Grid />
|
|
</el-icon>
|
|
<span>会员管理</span>
|
|
</template>
|
|
<el-menu-item index="/member">
|
|
<el-icon>
|
|
<Link />
|
|
</el-icon>
|
|
<span>会员列表</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/addmember">
|
|
<el-icon>
|
|
<Link />
|
|
</el-icon>
|
|
<span>会员新增</span>
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
|
|
<el-sub-menu index="course">
|
|
<template #title>
|
|
<el-icon>
|
|
<Grid />
|
|
</el-icon>
|
|
<span>课程管理</span>
|
|
</template>
|
|
<el-menu-item index="/course">
|
|
<el-icon>
|
|
<Link />
|
|
</el-icon>
|
|
<span>课程列表</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/addcourse">
|
|
<el-icon>
|
|
<Link />
|
|
</el-icon>
|
|
<span>课程新增</span>
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
</el-menu>
|
|
</el-aside>
|
|
|
|
<el-container class="admin-main">
|
|
<el-header class="admin-header">山东石油化工学院史泰龙健身管理系统 V1.0</el-header>
|
|
<el-main class="admin-content">
|
|
<router-view />
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.admin-shell {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.admin-aside {
|
|
min-height: 100vh;
|
|
background: linear-gradient(to bottom, #ffffff 0, #ffffff 220px, #edae37 220px);
|
|
border-right: 1px solid #dcdfe6;
|
|
}
|
|
|
|
.admin-menu {
|
|
width: 151px;
|
|
border-right: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.admin-menu :deep(.el-sub-menu__title) {
|
|
height: 42px;
|
|
padding-left: 10px !important;
|
|
color: #303133;
|
|
font-size: 12px;
|
|
line-height: 42px;
|
|
background: transparent;
|
|
}
|
|
|
|
.admin-menu :deep(.el-menu-item) {
|
|
height: 42px;
|
|
padding-left: 27px !important;
|
|
color: #303133;
|
|
font-size: 12px;
|
|
line-height: 42px;
|
|
background: transparent;
|
|
}
|
|
|
|
.admin-menu :deep(.el-menu-item.is-active) {
|
|
color: #303133;
|
|
background: transparent;
|
|
}
|
|
|
|
.admin-menu :deep(.el-icon) {
|
|
width: 14px;
|
|
margin-right: 8px;
|
|
font-size: 13px;
|
|
color: #303133;
|
|
}
|
|
|
|
.admin-menu :deep(.el-sub-menu__icon-arrow) {
|
|
right: 16px;
|
|
margin-top: -5px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.admin-main {
|
|
min-width: 0;
|
|
}
|
|
|
|
.admin-header {
|
|
height: 54px;
|
|
padding: 0 0 0 15px;
|
|
color: #000000;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
line-height: 54px;
|
|
background: #f1c477;
|
|
}
|
|
|
|
.admin-content {
|
|
padding: 16px 0 0 14px;
|
|
color: #000000;
|
|
font-size: 14px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.el-main {
|
|
display: flex;
|
|
}
|
|
</style>
|