OnlineEducation-back-front/src/views/resourceCenter/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="1">首页</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="2">资源中心</a-menu-item>
					<a-menu-item style="margin-left: 10px; margin-right: 10px" key="3">资源管理</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'
	const current = ref(['2']) // 默认选中“资源中心”
</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>