学生端header处理

src/views/portal/components/Header.vue

@@ -1,14 +1,12 @@
 <template>
 	<div>
-<!--		//根据平台不同传不同参0后台（管理员）1老师2学生   eduIdentity -->
-		<!--		{{userInfo.eduIdentity}}-->
-<!--		管理员-->
+		<!-- //根据平台不同传不同参0后台（管理员）1老师2学生   eduIdentity
+		{{userInfo.eduIdentity}}
+		管理员 -->
 		<div v-if="userInfo.eduIdentity == 0" style="display: flex; width: 100vw; justify-content: space-between; align-items: center">
 			<div style="display: flex; padding-left: 10%">
 				<div style="width: 120px; height: 55px; background-color: brown" />
-
 				<a-menu v-model:selectedKeys="current" mode="horizontal" theme="light" style="line-height: 55px">
-<!--					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal">首页</a-menu-item>-->
 					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">资源管理</a-menu-item>
 					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">全院课程</a-menu-item>
 					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">全院开课</a-menu-item>
@@ -25,22 +23,10 @@
 					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">公告发布</a-menu-item>
 					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">管理员登录</a-menu-item>
 					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">密码找回</a-menu-item>
-<!--					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/personalResources">个人资源</a-menu-item>-->
-<!--					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseCenter">课程中心</a-menu-item>-->
-<!--					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement"-->
-<!--						>课程管理</a-menu-item-->
-<!--					>-->
 				</a-menu>
 			</div>
 
 			<div class="header-right">
-				<!-- <a-input-search placeholder="输入关键词搜索" style="width: 200px" /> -->
-				<!-- <div style="display: flex">
-					<SearchOutlined :style="{ fontSize: '16px', color: '#00000083' }" />
-					<div style="width: 5px"></div>
-					<span style="font-size: 12px; color: #00000083">搜索</span>
-				</div>
-				<div style="width: 20px"></div> -->
 				<div style="display: flex">
 					<UserOutlined :style="{ fontSize: '16px', color: '#00000083' }" />
 					<div style="width: 5px"></div>
@@ -50,15 +36,12 @@
 				<div style="display: flex">
 					<span style="font-size: 12px; color: #00000083">注册</span>
 				</div>
-				<!-- <a-button type="primary">登录</a-button>
-				<a-button>注册</a-button> -->
 			</div>
 		</div>
 		<div v-if="userInfo.eduIdentity == 1" style="display: flex; width: 100vw; justify-content: space-between; align-items: center">
 			<div style="display: flex; padding-left: 10%">
 				<div style="width: 120px; height: 55px; background-color: brown" />
 				<a-menu v-model:selectedKeys="current" mode="horizontal" theme="light" style="line-height: 55px">
-<!--					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal">首页</a-menu-item>-->
 					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceCenter">资源中心</a-menu-item>
 					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/personalResources">个人资源</a-menu-item>
 					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">课程管理</a-menu-item>
@@ -74,21 +57,10 @@
 					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">课程公告发布</a-menu-item>
 					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">登录</a-menu-item>
 					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">密码找回</a-menu-item>
-
-
-<!--					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">资源管理</a-menu-item>-->
-<!--					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseCenter">课程中心</a-menu-item>-->
 				</a-menu>
 			</div>
 
 			<div class="header-right">
-				<!-- <a-input-search placeholder="输入关键词搜索" style="width: 200px" /> -->
-				<!-- <div style="display: flex">
-					<SearchOutlined :style="{ fontSize: '16px', color: '#00000083' }" />
-					<div style="width: 5px"></div>
-					<span style="font-size: 12px; color: #00000083">搜索</span>
-				</div>
-				<div style="width: 20px"></div> -->
 				<div style="display: flex">
 					<UserOutlined :style="{ fontSize: '16px', color: '#00000083' }" />
 					<div style="width: 5px"></div>
@@ -98,63 +70,41 @@
 				<div style="display: flex">
 					<span style="font-size: 12px; color: #00000083">注册</span>
 				</div>
-				<!-- <a-button type="primary">登录</a-button>
-				<a-button>注册</a-button> -->
 			</div>
 		</div>
-		<div v-if="userInfo.eduIdentity == 2" style="display: flex; width: 100vw; justify-content: space-between; align-items: center">
-			<div style="display: flex; padding-left: 10%">
-				<div style="width: 120px; height: 55px; background-color: brown" />
-				<a-menu v-model:selectedKeys="current" mode="horizontal" theme="light" style="line-height: 55px">
-<!--					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal">首页</a-menu-item>-->
-					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceCenter">资源中心</a-menu-item>
-					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseCenter">课程中心</a-menu-item>
-					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceManagement">课程详情</a-menu-item>
+		<div v-if="userInfo.eduIdentity == 2" class="fcbc">
+			<div class="headerBtn">
+				<div style="width: 120px; background-color: brown;" ></div>
+				<a-menu v-model:selectedKeys="current" mode="horizontal">
+					<a-menu-item key="portal/resourceCenter">资源中心</a-menu-item>
+					<a-menu-item key="portal/courseCenter">课程中心</a-menu-item>
+					<a-menu-item key="portal/resourceManagement">课程详情</a-menu-item>
 					<a-sub-menu key="myList">
 						<template #title>我的</template>
-						<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/personalResources">我的考试</a-menu-item>
-						<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">我的作业</a-menu-item>
-						<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/resourceCenter">调查问卷</a-menu-item>
+						<a-menu-item key="portal/personalResources">我的考试</a-menu-item>
+						<a-menu-item key="portal/courseManagement">我的作业</a-menu-item>
+						<a-menu-item key="portal/courseManagement">调查问卷</a-menu-item>
 					</a-sub-menu>
 				</a-menu>
 			</div>
-
 			<div class="header-right">
-				<!-- <a-input-search placeholder="输入关键词搜索" style="width: 200px" /> -->
-				<!-- <div style="display: flex">
-					<SearchOutlined :style="{ fontSize: '16px', color: '#00000083' }" />
-					<div style="width: 5px"></div>
-					<span style="font-size: 12px; color: #00000083">搜索</span>
-				</div>
-				<div style="width: 20px"></div> -->
-				<div style="display: flex">
-					
-					<a-dropdown>
-						<UserOutlined :style="{ fontSize: '16px', color: '#00000083' }" />
-						<template #overlay>
-							<a-menu>
-								<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">个人中心</a-menu-item>
-								<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">论坛</a-menu-item>
-								<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">站内信</a-menu-item>
-								<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">课程公告</a-menu-item>
-								<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/personalResources">学习足迹</a-menu-item>
-								<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">登录</a-menu-item>
-								<a-menu-item style="margin-left: 10px; margin-right: 10px" key="portal/courseManagement">密码找回</a-menu-item>
-								<a-menu-item style="margin-left: 10px; margin-right: 10px" key="outLogin" @click="handleUser('outLogin')">退出登陆</a-menu-item>
-							</a-menu>
-						</template>
-					</a-dropdown>
-					<div style="width: 5px"></div>
-					<span style="font-size: 12px; color: #00000083">登录</span>
-				</div>
-				<div style="width: 20px"></div>
-				<div style="display: flex">
-					<span style="font-size: 12px; color: #00000083">注册</span>
-				</div>
-				<!-- <a-button type="primary">登录</a-button>
-				<a-button>注册</a-button> -->
-
-				
+				<a-dropdown>
+					<UserOutlined :style="{ fontSize: '16px', color: '#00000083' }" />
+					<template #overlay>
+						<a-menu>
+							<a-menu-item key="portal/courseManagement">个人中心</a-menu-item>
+							<a-menu-item key="portal/courseManagement">论坛</a-menu-item>
+							<a-menu-item key="portal/courseManagement">站内信</a-menu-item>
+							<a-menu-item key="portal/courseManagement">课程公告</a-menu-item>
+							<a-menu-item key="portal/personalResources">学习足迹</a-menu-item>
+							<a-menu-item key="portal/courseManagement">登录</a-menu-item>
+							<a-menu-item key="portal/courseManagement">密码找回</a-menu-item>
+							<a-menu-item key="outLogin" @click="handleUser('outLogin')">退出登陆</a-menu-item>
+						</a-menu>
+					</template>
+				</a-dropdown>
+				<div class="ml-2" @click="slogin">登录</div>
+				<div class="ml-2">注册</div>
 			</div>
 		</div>
 		<div class="line" style=""></div>
@@ -170,25 +120,25 @@
 	import { ref } from 'vue'
 	import { useRouter, useRoute } from 'vue-router'
 	const router = useRouter()
-	const current = ref(['1']) // 默认选中“资源中心”
+	const route = useRoute()
+	const current = ref([route.path.slice(1)]) // 默认选中“资源中心”
 	import tool from '@/utils/tool'
 	const emit = defineEmits(['onChangeCurrent'])
 	const userInfo = tool.data.get('USER_INFO')
 	watch(
 		() => current.value,
 		(newVal, oldVal) => {
-			console.log('新的是', newVal, '旧的是', oldVal)
 			if (newVal != oldVal) {
 				emit('onChangeCurrent', newVal)
-
-				// router.push({
-				// 	path: '/' + newVal
-				// })
 			}
 		}
 	)
+	const slogin = () =>{
+		router.push({
+			path: '/slogin'
+		})
+	}
 	const handleUser = (key) => {
-		
 		if (key === 'outLogin') {
 			Modal.confirm({
 				title: '提示',
@@ -226,20 +176,34 @@
 
 </script>
 
-<style scoped>
+<style scoped lang="less">
 	.header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: 0 50px;
 	}
+	.headerBtn {
+		display: flex;
+		padding-left: 10%;
+		flex:1;
+		:deep(.ant-menu-horizontal) {
+			line-height: 55px;
+		}
+	}
 	.header-right {
 		display: flex;
 		align-items: center;
-
 		margin-right: 20%;
 	}
-
+	.fcbc {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+		align-items: center;
+		background-color: #fff;
+	}
+	
 	.line {
 		width: 100%;
 		height: 0.25px;