OnlineEducation-back-front/src/views/portal/components/Header.vue

<template>
	<div>
		<div 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/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>
			</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>
					<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> -->
			</div>
		</div>
		<div class="line" style=""></div>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	const router = useRouter()
	const current = ref(['1']) // 默认选中“资源中心”

	const emit = defineEmits(['onChangeCurrent'])

	watch(
		() => current.value,
		(newVal, oldVal) => {
			console.log('新的是', newVal, '旧的是', oldVal)
			if (newVal != oldVal) {
				emit('onChangeCurrent', newVal)

				// router.push({
				// 	path: '/' + newVal
				// })
			}
		}
	)
</script>

<style scoped>
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 50px;
	}
	.header-right {
		display: flex;
		align-items: center;

		margin-right: 20%;
	}

	.line {
		width: 100%;
		height: 0.25px;
		background-color: #00000013;
	}
</style>