98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div class="home">
|
||
|
|
<div class="header">
|
||
|
|
<div class="header-title">应急管理一张图</div>
|
||
|
|
<div class="system-operate">
|
||
|
|
<div class="system-opreate-btn" :style="{'border-bottom':$route.path=='/index' ? '2px solid #428EDA':'2px solid rgba(0,0,0,0)'}" @click="$router.push({'path':'/index'})">监测中心</div>
|
||
|
|
<div class="system-opreate-btn" :style="{'border-bottom':$route.path=='/map' ? '2px solid #428EDA':'2px solid rgba(0,0,0,0)'}" @click="$router.push({'path':'/map'})">数据中心</div>
|
||
|
|
<div class="system-opreate-btn" :style="{'border-bottom':$route.path.match('/data') ? '2px solid #428EDA':'2px solid rgba(0,0,0,0)'}" @click="$router.push({'path':'/data'})">数据管理</div>
|
||
|
|
<div class="system-opreate-btn" @click="logout">退出登录</div>
|
||
|
|
<div class="system-opreate-user">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<router-view/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Home',
|
||
|
|
components:{
|
||
|
|
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created(){
|
||
|
|
console.log(this.$route);
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
logout(){
|
||
|
|
localStorage.setItem("X-Token","");
|
||
|
|
this.$router.push({'path':'/login'});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.home{
|
||
|
|
width:100%;
|
||
|
|
height:100vh;
|
||
|
|
background-image: url(/images/system/home-bg.png);
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.home .header{
|
||
|
|
width:100%;
|
||
|
|
position: relative;
|
||
|
|
z-index:10;
|
||
|
|
|
||
|
|
}
|
||
|
|
.home .header .header-title{
|
||
|
|
width:500px;
|
||
|
|
margin:0px auto;
|
||
|
|
height:60px;
|
||
|
|
line-height: 60px;
|
||
|
|
color:#2fa6f2;
|
||
|
|
text-align:center;
|
||
|
|
font-size:38px;
|
||
|
|
font-family: "微软雅黑";
|
||
|
|
font-weight: 1000;
|
||
|
|
letter-spacing: 5px;
|
||
|
|
}
|
||
|
|
.home .header .system-operate{
|
||
|
|
width:400px;
|
||
|
|
float:right;
|
||
|
|
height:40px;
|
||
|
|
position: absolute;
|
||
|
|
top:50px;
|
||
|
|
right:80px;
|
||
|
|
}
|
||
|
|
.home .header .system-operate .system-opreate-btn{
|
||
|
|
width:85px;
|
||
|
|
text-align: center;
|
||
|
|
float:left;
|
||
|
|
color:#428EDA;
|
||
|
|
margin-right:8px;
|
||
|
|
line-height: 40px;
|
||
|
|
font-size:16px;
|
||
|
|
font-weight: bold;
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
.system-opreate-user{
|
||
|
|
width:24px;
|
||
|
|
height:24px;
|
||
|
|
float:left;
|
||
|
|
background-image: url(/images/system/user.png);
|
||
|
|
margin-top:8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|