添加网格员导航页

src/views/gridman/index.vue

@@ -1,6 +1,14 @@
 <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>
 
@@ -9,6 +17,41 @@
     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>
@@ -17,7 +60,59 @@
   .gridman-container{
       width:100%;
       height: 100%;
-      background-image:url(/img/gridman-bg.png);
+      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>