<template>
	<div :class="prefixCls">
		<a-image
			width="100%"
			:preview="false"
			src="/images/index.png" />
		<div
			class="login"
			@click="$router.push('/login')"></div>
		<div class="nav">
			<div
				class="nav-item"
				@click="jump(item)"
				v-for="item in navs"></div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			prefixCls: 'about',
			navs: [
				{
					value: 'index',
					label: '首页'
				},
				{
					value: 'projects',
					label: '发现项目'
				},
				{
					value: 'markets',
					label: '市场交易'
				},
				{
					value: 'about',
					label: '关于我们'
				},
				{
					value: 'help',
					label: '帮助中心'
				}
			]
		}
	},
	methods: {
		jump(item) {
			this.$router.push(`/${item.value}`)
		}
	}
}
</script>

<style lang="less" scoped>
.about {
	.nav {
		display: flex;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		&-item {
			width: 90px;
			height: 60px;
			cursor: pointer;
			&:first-child {
				width: 150px;
			}
		}
	}
	.login {
		position: absolute;
		top: 0;
		right: 0;
		width: 140px;
		height: 50px;
		cursor: pointer;
		// background-color: red;
	}
}
</style>
