<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: '/newsCenter',
				title: '新闻中心',
				imgUrl: require('@/assets/img/n2.png'),
			},
			{
				path: '/loveList',
				title: '爱心榜',
				imgUrl: require('@/assets/img/n3.png'),
			},
			{
				path: '/join',
				title: '我要参与',
				imgUrl: require('@/assets/img/n4.png'),
			},
			{
				path: '/about',
				title: '红十字概况',
				imgUrl: require('@/assets/img/n5.png'),
			},
			// {
			// 	path: '/concat',
			// 	title: '联系我们',
			// 	imgUrl: require('@/assets/img/n6.png'),
			// }
		],
		currentIndex: 0
	};
  },
  computed: {
	  currentUrl() {
		  return this.$route.path
	  }
  },
  methods: {
	  navClick(url,index) {
		  let currentUrl = this.$route.path
		  if(currentUrl === url) {
			  return 
		  }else {
			  console.log(url,currentUrl)
			 this.currentIndex = index
			 this.$router.push(url) 
		  }
		  
		  
	  }
  }
};
</script>

<style lang="scss" scoped>
.top-bar {
  width: 1202px;
  height: 65px;
  margin: 0 auto;
  display: flex;
  background-color: #be0202;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  letter-spacing:3px;
  margin-bottom: 24px;
  .bar-item {
	  background-color: #be0202;
	flex-grow: 1;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFang SC;
	font-size: 24px;
	cursor:pointer;
    img {
      width: 20px;
      height: 20px;
      // background-color: #fff;
      margin-right: 6px;
    }
  }
  .action {
  	background-color: #be0202;
  }
}
</style>