<template>
    <header>
        <div class="container">
            <span><img src="../assets/images/logo.png" alt="">
            </span>
            <nav>
                <ul>
                      <router-link v-for="(item, index) in pageMenuList" @click.native="setActive($event,index)" tag='li' :to="{ path: item.listLink }">
                         
                              <div class="list">{{item.text}}</div>
                          
                        </router-link>
                </ul>
            </nav>
        </div>
    </header>
</template>

<script>
    export default {
        name: 'header',
        data() {
            return {
                msg: 'header',
                pageMenuList:[
                    {listLink:'/xmsig/index',text:'首页',},
                    {listLink:'/xmsig/about',text:'关于我们',},
                    {listLink:'/xmsig/investment',text:'投资业务',},
                    {listLink:'/xmsig/news',text:'新闻资讯',},
                    {listLink:'/xmsig/talents',text:'人才招聘',},
                    {listLink:'/xmsig/contact',text:'联系我们',},
                ]
            }
        },
        methods: {
            setActive: function (event,index) {
                    // $('.list').eq(index).addClass('active')
                    $('span').eq(index+1).css({'display':"block","color":'#B59F4C'})
                    $('span').eq(1).css('display','none')
                }
        }
    }

</script>

<style scoped>
    header {
        min-width: 1200px;
        height: 74px;
        font-size: 14px;
        /* background-position: center center;
        background-attachment: fixed; */
        
    }

    .container {
        width: 1200px;
        margin: 0 auto;
    }

    img {
        margin-top: 11px;
    }

    nav {
        width: 750px;
        float: right;
    }

    ul {
        display: flex;
        justify-content: space-between;
        height: 74px;
        line-height: 74px;
    }

    li {
        color: #000;
        text-decoration: none;
        height: 74px;
         text-align: center;
    }
    li:hover{
        cursor: pointer;
    }
    li:nth-child(1){
        width: 30px;
    }
    .router-link-active{
    border-bottom: 3px solid #B59F4C!important;
}
    .router-link-active:nth-child(1){
        width: 30px;
}

</style>