<template>
    <div class="header-wrap">
      <div class="header">
        <h1 class="fl logo-bg" @click="$router.push({name:'home'})"></h1>
        <ul class="fr nav">
          <!--<li>首页</li>-->
          <!--<li>停车服务</li>-->
          <!--<li>官网中心</li>-->
          <!--<li>黄石停车</li>-->
          <!--<li>联系我们</li>-->
          <router-link
            tag="li"
            :to="{path:list.routerLink}"
            v-for="(list, index) in navList"
            :key="index"
            exact="">
            {{list.name}}
          </router-link>
        </ul>
      </div>
    </div>
</template>

<script>
export default {
  name: 'VHeader',
  data(){
    return {
      navList:[
        {name:'首页',routerLink:'/home'},
        {name:'停车服务',routerLink:'/service'},
        {name:'官网中心',routerLink:'/center'},
        {name:'黄石停车',routerLink:'/park'},
        {name:'联系我们',routerLink:'/about'},
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.header-wrap{
  height: 80px;
  line-height: 80px;
  background:rgba(218,36,49,1);
}
  .header{
    width: 1200px;
    height: 80px;
    margin: 0 auto;
  }
  .logo-bg{
    width: 163px;
    height: 80px;
    background: url("../assets/logo.png") no-repeat 0 center;
    cursor: pointer;
  }
  .nav li{
    height: 80px;
    float: left;
    margin-left: 50px;
    font-size: 16px;
    cursor: pointer;
    border-bottom: 2px solid rgba(218,36,49,1);
  }
</style>
