<template>
	<div>
		<div class="top-bar">
			<div class="bar-item" v-for="( item, index ) in navList" :key="index" @click="navClick(item.path,index)"
				:class="{'action':currentUrl.indexOf(item.path) !=-1}">
				<!-- <img :src="item.imgUrl" alt="" /> -->
				<div>{{item.title}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				navList: [{
						path: '/home',
						title: '首页',
						imgUrl: require('@/assets/img/n1.png')
					},
					{
						path: '/introduce',
						title: '组织介绍',
						imgUrl: require('@/assets/img/n1.png')
					},
					{
						path: '/law',
						title: '政策法规',
						imgUrl: require('@/assets/img/n1.png')

					},

					{
						path: '/cause',
						title: '红十字事业',
						imgUrl: require('@/assets/img/n1.png')
					},
					{
						path: '/help',
						title: '救助项目',
						imgUrl: require('@/assets/img/n2.png'),
					},
					{
						path: '/join',
						title: '公众参与',
						imgUrl: require('@/assets/img/n4.png'),
					},
					{
						path: '/knowledge',
						title: '知识库',
						imgUrl: require('@/assets/img/n4.png'),

					},
					{
						path: '/concat',
						title: '联系我们',
						imgUrl: require('@/assets/img/n5.png'),
					},
				],
				currentIndex: 0
			};
		},
		computed: {
			currentUrl() {
				return this.$route.path
			}
		},
		methods: {
			navClick(url, index) {
				let currentUrl = this.$route.path
				if (currentUrl === url) {
					return
				} else {
					this.currentIndex = index
					this.$router.push(url)
				}


			}
		}
	};
</script>

<style lang="scss" scoped>
	.top-bar {
		width: 1200px;
		height: 60px;
		margin: 0 auto;
		display: flex;
		background: #d82020;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		letter-spacing: 3px;
		margin-bottom: 24px;

		.bar-item {
			background: #d82020;
			flex-grow: 1;
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: PingFang SC;
			font-size: 18px;
			cursor: pointer;

			img {
				width: 20px;
				height: 20px;
				// background-color: #fff;
				margin-right: 6px;
			}
		}

		.action {
			background-color: #c2191c;
		}
	}
</style>
