118 lines
2.6 KiB
Vue
118 lines
2.6 KiB
Vue
<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> |