<style scoped>
|
.layout-logo{
|
padding: 0 16px;
|
height: 36px;
|
line-height: 36px;
|
font-size: 20px;
|
font-weight: bold;
|
letter-spacing: 4px;
|
color: #FFFFFF;
|
border-radius: 3px;
|
float: left;
|
position: relative;
|
top: 15px;
|
left: 20px;
|
}
|
.layout-nav{
|
width: 350px;
|
margin: 0 auto;
|
margin-right: 60px;
|
}
|
.user-info-menu {
|
color: #FFFFFF;
|
}
|
.user-info-menu-icon {
|
display: inline-block;
|
text-align: center;
|
font-size: 18px;
|
color: #fff;
|
white-space: nowrap;
|
position: relative;
|
overflow: hidden;
|
vertical-align: middle;
|
width: 32px;
|
height: 32px;
|
line-height: 32px;
|
border-radius: 16px;
|
background-color: #87d068;
|
}
|
.main-page-content {
|
height: calc(100vh - 64px);
|
}
|
</style>
|
<template>
|
<div id="app">
|
<div class="layout">
|
<Layout>
|
<Header>
|
<Menu mode="horizontal" theme="dark" :active-name="activeName">
|
<div class="layout-logo">
|
新能源充电桩在线巡检系统
|
</div>
|
<div class="layout-nav">
|
<MenuItem name="home" to="/">
|
<Icon type="ios-home" />
|
<span>首页</span>
|
</MenuItem>
|
<MenuItem name="control" to="/control">
|
<Icon type="ios-stats" />
|
<span>实时监控</span>
|
</MenuItem>
|
<MenuItem name="history" to="/history">
|
<Icon type="ios-paper" />
|
<span>历史数据</span>
|
</MenuItem>
|
<!-- <MenuItem name="4">
|
<Icon type="ios-notifications" />
|
<span>告警管理</span>
|
</MenuItem>
|
<MenuItem name="5">
|
<Icon type="ios-settings" />
|
<span>系统管理</span>
|
</MenuItem> -->
|
</div>
|
<div class="user-info-menu">
|
<!-- <Avatar style="background-color: #87d068" icon="ios-person" />
|
<Dropdown trigger="hover" style="margin-left: 8px; color: #FFFFFF">
|
<a href="javascript:void(0)" style="color: #FFFFFF">
|
霍东伟
|
<Icon type="ios-arrow-down"></Icon>
|
</a>
|
<DropdownMenu slot="list">
|
<DropdownItem>密码修改</DropdownItem>
|
<DropdownItem>退出系统</DropdownItem>
|
</DropdownMenu>
|
</Dropdown> -->
|
<!-- <Tooltip :content="warnStatus.tooltip" placement="bottom">
|
<span style="font-size: 22px; margin-left:8px"><Icon :type="warnStatus.type" @click="toggleWarnStatus"/></span>
|
</Tooltip> -->
|
<!-- <audio src="./music/smoke_alarm.mp3" controls="controls" autoplay="autoplay"></audio> -->
|
</div>
|
</Menu>
|
</Header>
|
<Content class="main-page-content" :style="{padding: '1px', minHeight: '280px', background: '#fff', overflowY: 'auto' }">
|
<router-view></router-view>
|
</Content>
|
</Layout>
|
</div>
|
</div>
|
</template>
|
<script>
|
|
export default {
|
name: 'app',
|
data: function() {
|
return {
|
activeName: '', // 当前页面所在的路由
|
warnStatus: {
|
type: 'ios-notifications',
|
tooltip: '点击关闭告警音'
|
}
|
}
|
},
|
methods:{
|
openWarnStatus: function() {
|
this.warnStatus = {
|
type: 'ios-notifications',
|
tooltip: '点击关闭告警音'
|
};
|
},
|
offWarnStatus: function() {
|
this.warnStatus = {
|
type: 'ios-notifications-off',
|
tooltip: '点击开启告警音'
|
};
|
},
|
toggleWarnStatus: function() {
|
if(this.warnStatus.type == 'ios-notifications') {
|
this.offWarnStatus();
|
}else {
|
this.openWarnStatus();
|
}
|
}
|
},
|
mounted: function() {
|
var _self = this;
|
this.$bus.$off('setMainNav').$on('setMainNav', function(activeName) {
|
_self.activeName = activeName;
|
});
|
}
|
}
|
</script>
|
