<template>
|
<Home>
|
<template slot="menu">
|
<div class="menu-container">
|
<ul class="" @click="navigateTo('map')">
|
<li class="active">状态监控</li>
|
<li @click="navigateTo('map')">大屏展示</li>
|
<li>车间地图</li>
|
<li>车间列表</li>
|
<li>设备保养</li>
|
<li>报表生成</li>
|
<li>班次设置</li>
|
<li>工件信息</li>
|
<li>更多菜单</li>
|
</ul>
|
<div class="user">
|
<span>Admin</span>
|
<img @click="logout" src="./logout.png" alt="">
|
</div>
|
</div>
|
</template>
|
<template slot="content">
|
<div class="container">
|
<!-- <div class="welcome">
|
admin您好，欢迎使用千文科技MDC展示系统
|
</div> -->
|
<router-view></router-view>
|
</div>
|
</template>
|
</Home>
|
</template>
|
<script>
|
import { mapGetters } from 'vuex'
|
import Home from '@/components/home/index'
|
export default {
|
components: {
|
Home
|
},
|
methods: {
|
logout() {
|
this.$store.dispatch('LogOut').then(() => {
|
// location.reload() // 为了重新实例化vue-router对象 避免bug
|
this.$router.push('/')
|
})
|
},
|
navigateTo (name) {
|
console.log(name)
|
this.$router.push('/home/map')
|
}
|
},
|
}
|
</script>
|
<style lang="scss" scoped>
|
.container {
|
position: absolute;
|
top: 0;
|
left: 50%;
|
width: 60%;
|
transform: translateX(-50%);
|
height: 100%;
|
background-image: url('./earth.png');
|
background-repeat: no-repeat;
|
background-size: contain;
|
}
|
|
.menu-container {
|
margin-left: auto;
|
display: flex;
|
line-height: 37px;
|
ul {
|
flex: 0 1 auto;
|
color: #AEAFAF;
|
font-size: 18px;
|
list-style: none;
|
display: flex;
|
li {
|
cursor: pointer;
|
background: #27394E;
|
padding: 0 12px;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
// user-select:none;
|
}
|
li~li {
|
margin-left: 10px;
|
}
|
li.active {
|
color: #68D9FF;
|
}
|
}
|
.user {
|
margin-left: 30px;
|
width: 114px;
|
height: 37px;
|
background: rgba(38, 36, 36, 0.58);
|
border-radius: 19px;
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
span {
|
padding: 0 13px;
|
color: #FFFFFF;
|
font-size: 16px;
|
}
|
img {
|
width: 20px;
|
height: 20px;
|
}
|
}
|
}
|
</style>
|
