fdzcxy212206203
/
ExamSphere
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

优化导航栏

Browse Source
yzb
yzb 8 months ago
parent 0451e84634
commit eb877ff878
5 changed files with 182 additions and 136 deletions
Show Stats Download Patch File Download Diff File

BIN
admin/public/2.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 832 KiB

BIN
admin/public/adminHead.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

1
admin/src/router.js
Unescape View File

@ -39,6 +39,7 @@ const router = createRouter({
path: 'firstpage', path: 'firstpage',
name: 'FirstPage', name: 'FirstPage',
component: () => import('./view/user/firstpage.vue'), component: () => import('./view/user/firstpage.vue'),
redirect: { name: 'FirstPage1' },
children: [ children: [
{ {
path: '1', path: '1',

1
admin/src/view/user/firstpage.vue
Unescape View File

@ -1,5 +1,6 @@
<template> <template>
<el-container style="height: 1600px;"> <el-container style="height: 1600px;">
<el-main style="height: 500px;"> <el-main style="height: 500px;">
<div> <div>
<el-carousel indicator-position="none" height="450px" autoplay> <el-carousel indicator-position="none" height="450px" autoplay>

316
admin/src/view/user/index.vue
Unescape View File

@ -1,141 +1,185 @@
<template> <template>
<div class="common-layout"> <div class="common-layout">
<!-- <el-container> <el-container>
<el-header> <el-header>
<el-menu class="el-menu-demo" mode="horizontal"> <el-row type="flex" justify="space-between" align="middle">
<el-menu-item index="1">欢迎您：135******111 管理员</el-menu-item> <!-- 菜单部分 -->
</el-menu> <el-col :span="18">
</el-header> --> <el-menu
<el-container> :default-active="activeIndex2"
<el-aside width="200px" class="el-aside"> class="el-menu-demo"
<el-row class="tac"> mode="horizontal"
<el-col> @select="handleSelect"
<el-menu default-active="2" class="el-menu-vertical-demo"> background-color="#545c64"
<el-sub-menu index="1"> text-color="#fff"
<template #title> active-text-color="#ffd04b"
<el-icon> >
<location /> <el-menu-item index="1">处理中心</el-menu-item>
</el-icon> <el-submenu index="2">
<span style="color: #cdd1d3;">编辑用户</span> <el-submenu index="2-4">
</template> <template #title>信息</template>
<el-menu-item-group> <el-menu-item index="2-4-1">选项1</el-menu-item>
<router-link to="/admin/student"> <el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="1-1">学生</el-menu-item> <el-menu-item index="2-4-3">选项3</el-menu-item>
</router-link> </el-submenu>
<router-link to="/admin/teacher"> </el-submenu>
<el-menu-item index="1-2">教师</el-menu-item> <el-menu-item index="3" disabled>消息中心</el-menu-item>
</router-link> <el-menu-item index="4">管理</el-menu-item>
</el-menu-item-group> </el-menu>
</el-sub-menu> </el-col>
<el-sub-menu index="2"> <!-- 头像部分：放在右侧 -->
<template #title><el-icon></el-icon> <el-col :span="3" class="header-avatar">
<span style="color: #cdd1d3;"> <img src="/public/adminHead.jpg" alt="头像" class="avatar" />
首页和通知 </el-col>
</span></template> </el-row>
<router-link to='/admin/firstpage'> </el-header>
<el-menu-item index="2-1">首页</el-menu-item>
</router-link> <el-container>
<el-sub-menu index="2-2"> <el-aside width="200px" class="el-aside">
<template #title><span style="color: #cdd1d3;"> <el-row class="tac">
通知 <el-col>
</span></template> <el-menu default-active="2" class="el-menu-vertical-demo">
<router-link to='/admin/notice'> <el-sub-menu index="1">
<el-menu-item index="2-2-1">通知管理</el-menu-item> <template #title>
</router-link> <el-icon>
</el-sub-menu> <location />
</el-sub-menu> </el-icon>
<span style="color: #cdd1d3;">编辑用户</span>
<router-link to="/admin/myinfo"> </template>
<el-menu-item index="3"> <el-menu-item-group>
<el-icon> <router-link to="/admin/student">
<document /> <el-menu-item index="1-1">学生</el-menu-item>
</el-icon> </router-link>
<span>我的资料</span> <router-link to="/admin/teacher">
</el-menu-item> <el-menu-item index="1-2">教师</el-menu-item>
</router-link> </router-link>
</el-menu-item-group>
<router-link to="/admin/information"> </el-sub-menu>
<el-menu-item index="4">
<el-icon><icon-menu /></el-icon> <el-sub-menu index="2">
<span>用户反馈与建议</span> <template #title>
</el-menu-item> <el-icon></el-icon>
</router-link> <span style="color: #cdd1d3;">首页和通知</span>
</template>
</el-menu> <router-link to='/admin/firstpage'>
</el-col> <el-menu-item index="2-1">首页</el-menu-item>
</el-row> </router-link>
</el-aside> <el-sub-menu index="2-2">
<el-main> <template #title>
<router-view></router-view> <span style="color: #cdd1d3;">通知</span>
</el-main> </template>
</el-container> <router-link to='/admin/notice'>
<!-- </el-container> --> <el-menu-item index="2-2-1">通知管理</el-menu-item>
</div> </router-link>
</el-sub-menu>
</el-sub-menu>
<router-link to="/admin/myinfo">
<el-menu-item index="3">
<el-icon>
<document />
</el-icon>
<span>我的资料</span>
</el-menu-item>
</router-link>
<router-link to="/admin/information">
<el-menu-item index="4">
<el-icon><icon-menu /></el-icon>
<span>用户反馈与建议</span>
</el-menu-item>
</router-link>
</el-menu>
</el-col>
</el-row>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template> </template>
<script setup>
import { ref } from 'vue'
// 组合式 API 语法糖
const activeIndex2 = ref('1') // 当前选中的菜单项
// 处理选择菜单项的函数
const handleSelect = (index) => {
console.log('选中的菜单项是:', index)
activeIndex2.value = index
}
</script>
<style> <style>
.common-layout { .common-layout {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: #eff1f4; background-color: #eff1f4;
} }
.el-container { .el-container {
height: 100%; height: 100%;
} }
.el-header, .el-header,
.el-footer { .el-footer {
background-color: #47484c; background-color: #47484c;
color: #fff; color: #fff;
/* 确保文本颜色为白色 */ text-align: center;
text-align: center; line-height: 60px;
line-height: 60px; }
}
.header-avatar {
.el-aside { display: flex;
background-color: #2d2e36; justify-content: flex-end;
/* 设置侧边栏背景颜色为黑色 */ align-items: center;
color: #fff; padding-right: 20px;
/* 文本颜色为白色 */ }
text-align: center;
} .avatar {
width: 40px;
.el-main { height: 40px;
color: #333; border-radius: 50%;
text-align: center; object-fit: cover;
line-height: 160px; }
background-color: #cdd1d3;
} .el-aside {
background-color: #2d2e36;
body>.el-container { color: #fff;
height: 100%; text-align: center;
} }
.user { .el-main {
height: 58px; color: #333;
} text-align: center;
line-height: 160px;
.el-menu--horizontal>.el-menu-item:nth-child(3) { background-color: #cdd1d3;
margin-right: auto; }
}
.el-menu {
.el-menu { background-color: #2d2e36;
background-color: #2d2e36; }
} .el-menu-item {
color: #cdd1d3;
.el-menu-item { transition: background-color 0.3s ease, color 0.3s ease;
color: #cdd1d3; }
}
.el-menu-item:hover {
/* #fba414 */ background-color: #fba414;
.user-info { color: #fff;
margin-top: 10px; }
/* 添加一些顶部边距，视觉上与其它菜单项分隔开 */
} .el-menu-item[disabled] {
</style> color: #6c757d;
pointer-events: none;
}
</style>

Write Preview
Loading…
Cancel
Save