<template>
	<div class="menu-wrapper">
		<div class="menu-item" @click="handleToOverview">
			<div class="menu-item-icon">
				<img src="@/assets/icons/home-header-icon1.png" alt="" />
			</div>
			<div class="menu-item-text">{{ "首页" }}</div>
		</div>
		<div class="menu-item" @click="handleToGjOverview">
			<div class="menu-item-icon1">
				<img src="@/assets/icons/home-header-icon2.png" alt="" />
			</div>
			<div class="menu-item-text">{{ "国家" }}</div>
		</div>
		<div class="menu-item">
			<div class="menu-item-icon2">
				<img src="@/assets/icons/home-header-icon3.png" alt="" />
			</div>
			<div class="menu-item-text">{{ "领域" }}</div>
		</div>
		<div class="menu-item">
			<div class="menu-item-icon3">
				<img src="@/assets/icons/home-header-icon4.png" alt="" />
			</div>
			<div class="menu-item-text">{{ "要素" }}</div>
		</div>
		<div class="menu-item">
			<div class="menu-item-icon4">
				<img src="@/assets/icons/home-header-icon5.png" alt="" />
			</div>
			<div class="menu-item-text">{{ "事件" }}</div>
		</div>
	</div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import router from '@/router';

const handleToOverview = () => {
	router.push({
		path: "/overview"
	});
}

const handleToGjOverview = () => {
	router.push({
		path: "/gjOverview"
	});
}

</script>

<style lang="scss" scoped>
.menu-wrapper {
	width: 644px;
	height: 64px;
	display: flex;
	justify-content: space-between;
	.menu-item {
		display: flex;
		gap: 11px;
		width: 112px;
		height: 64px;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		&:hover{
			background: rgba(5, 95, 194, 0.2);
		}
		.menu-item-icon {
			// margin-top: 2px;
			width: 22px;
			height: 22px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.menu-item-icon1 {
			// margin-top: 4px;
			width: 24px;
			height: 24px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.menu-item-icon2 {
			// margin-top: 4px;
			width: 24px;
			height: 22px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.menu-item-icon3 {
			// margin-top: 2px;
			width: 20px;
			height: 20px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.menu-item-icon4 {
			width: 22px;
			height: 20px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.menu-item-text {
			// margin-top: 16px;
			height: 32px;
			color: rgba(255, 255, 255, 1);
			font-family: Microsoft YaHei;
			font-style: Bold;
			font-size: 24px;
			font-weight: 700;
			line-height: 32px;
			letter-spacing: 0px;
			text-align: left;
		}
	}
}
</style>