<template>
	<nav class="homeMain_nav_content">
		<!-- <router-link  :class="['nav_item',$route.name === 'homePage' ? 'select_nav' : '', ]" :to="`/home/homePage`">
			{{$t('Header.HOME')}}
		</router-link>
		<router-link  :class="['nav_item',$route.name === 'library' ? 'select_nav' : '', ]" :to="`/home/library`">
			{{$t('Header.LIBRARY')}}
		</router-link>
		<router-link  :class="['nav_item',$route.name === 'history' ? 'select_nav' : '', ]" :to="`/home/history`">
			{{$t('Header.HISTORY')}}
		</router-link>
		<router-link  :class="['nav_item',$route.name === 'works' ? 'select_nav' : '', ]" :to="`/home/works`">
			{{$t('Header.WORKS')}}
		</router-link> -->
		<router-link v-for="item in routerList" :class="['nav_item',item.routerName.indexOf($route.name) > -1 ? 'select_nav' : '', ]" :to="item.router">{{ item.name }}</router-link>
	</nav>
</template>

<script >
import { defineProps } from 'vue';
import { defineComponent, createVNode, ref, computed } from "vue";
export default defineComponent({
	components: {
    },
	props:['routerList'],
	setup(props,{emit}){
		return {
			
		}
	},
})
</script>

<style lang="less" scoped>
.homeMain_nav_content {
	display: flex;
	// margin-left: 28.9rem;
	// margin-left: 46.2rem;
	align-items: center;
	height: 7rem;
	justify-content: center;
	.nav_item {
		padding: 1.1rem 1rem;
		border-bottom: 0.1rem solid transparent;
		margin-right: 3.4rem;
		font-size: 1.6rem;
		line-height: 1.3rem;
		// color: #333333;
		color: #000;
		cursor: pointer;
		font-weight: 900;
		position: relative;
		&.nav_item:last-child{
			margin: 0;
		}
		&.nav_item::before {
			position: absolute;
			content: "";
			display: block;
			background: #000;
			height: .3rem;
			left: 50%;
			transform: translateX(-50%);
			bottom: .3rem;
			width: 0px;
			transition: 0.3s all;
		}
		&.select_nav {
			color: #000;
			transform: scale(1.15);
		}
		&.select_nav::before {
			width: 80%;
		}
	}
}
</style>