<template>
  <div class="gridman-container">
    <div class="gridman-header">
        网格化管理
    </div>
    <div class="gridman-navigation">
        <div class="nav-item" v-for="(item,index) in navList" :key="index" :style="{'top':item.top+'px'}">
            <img :src="'/img/gridman/nav-'+(index+1)+'.png'" alt="">
            <div class="nav-lable">{{item.lable}}</div>
        </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'index',
    created(){
       
    },
    data(){
        return {
            navList:[
                {
                    lable:"重点人群",
                    url:"",
                    top:0,
                },{
                    lable:"区域划分",
                    url:"",
                    top:90,
                },{
                    lable:"消防值班",
                    url:"",
                    top:140,
                },{
                    lable:"护林员",
                    url:"",
                    top:160,
                },{
                    lable:"进山登记",
                    url:"",
                    top:140,
                },{
                    lable:"站点管理",
                    url:"",
                    top:90,
                },{
                    lable:"网格员",
                    url:"",
                    top:0,
                },
            ]
        }
    }
  }
</script>

<style scoped>
  .gridman-container{
      width:100%;
      height: 100%;
      background-image:url(/img/gridman/bg.png);
      background-size:100% 100%;
  }

  .gridman-header{
      width:100%;
      height:99px;
      background-image:url(/img/gridman/header.png);
      background-size:100% 100%;
      text-align: center;
      color:#fff;
      line-height:90px;
        font-size:36px;
        letter-spacing: 5px;
  }
  .gridman-navigation{
        height:200px;
        width:1470px;
        margin:0px auto;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        
  }

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

  .gridman-navigation .nav-item{
      width:150px;
      height:150px;
      float:left;
      margin:0px 30px;
      cursor:pointer;
      position:relative;
  }

.gridman-navigation .nav-item img{
    width:150px;
}

.nav-lable{
    width:150px;
    position:relative;
    top:20px;
    font-size:24px;
    text-align:center;
    color:#fff;
}
</style>