<template>

<div>
    <div class="info">
        <p>您好，{{userName}}</p>
        <p>欢迎进入网格化管理系统！</p>
    </div>
    <div class="gridman-navigation">
        <div class="nav-item" v-for="(item,index) in navList" :key="index" :style="{'top':item.top+'px'}" @click="goItem(item)">
            <img :src="'/img/gridman/nav-'+(index+1)+'.png'" alt="" @click="goItem(item)">
            <div class="nav-lable" @click="goItem(item)">{{item.lable}}</div>
        </div>
    </div>
</div>
    
</template>

<script>
  export default {
    name: 'index',
    created(){
       
    },
    data(){
        return {
            userName:localStorage.getItem("userName"),
            navList:[
                {
                    lable:"重点人群",
                    url:"/gridman_emphasis",
                    top:30,
                },{
                    lable:"护林员",
                    url:"/gridman_forestranger",
                    top:90,
                },{
                    lable:"消防值班",
                    url:"/gridman_firefighter",
                    top:140,
                },{
                    lable:"一张图",
                    url:"/gridman_onepicture",
                    top:160,
                },{
                    lable:"网格管理",
                    url:"/gridman_gridmanagement",
                    top:160,
                },{
                    lable:"进山登记",
                    url:"/gridman_record",
                    top:140,
                },{
                    lable:"站点管理",
                    url:"/gridman_site",
                    top:90,
                },{
                    lable:"网格员",
                    url:"/gridman_grid",
                    top:30,
                },
            ]
        }
    },
    methods:{
        goItem(item){
            this.$router.push({'path':item.url})
            this.$emit('updateProjectId',item.lable)
        }
    }
  }
</script>

<style scoped>
 .info{
    width:1370px;
    height:100px;
    position:absolute;
    top:30%;
    left:50%;
    transform: translate(-50%,-80%);
     font-size:28px;
     color:#fff;
     line-height:40px;
 }
  .gridman-navigation{
        height:200px;
        width:1470px;
        margin:0px auto;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-45%);
  }

  .gridman-navigation::after{
      content:"";
      height:0;
      clear:both;
      overflow: hidden;
      display: block;
  }

  .gridman-navigation .nav-item{
      width:120px;
      height:120px;
      float:left;
      margin:0px 30px;
      cursor:pointer;
      position: relative;
      border-radius: 50%;
      transition:all 0.2s;
  }

  .nav-item:hover{
      /* box-shadow: 0px 30px 30px rgba(255,255,255,0.1); */
  }

  .nav-item:hover .nav-lable{
      color:#005edb;
  }
.nav-item:hover img{
    transform: scale(1.1);
}
.gridman-navigation .nav-item img{
    width:120px;
    transition:all 0.2s;
}

.nav-lable{
    width:120px;
    position:relative;
    top:20px;
    font-size:20px;
    letter-spacing: 1px;
    text-align:center;
    color:#fff;
    transition:all 0.2s;
}
</style>