<template>
|
<Layout>
|
<Header>
|
<div class="layout-logo">
|
<img src="../assets/logo.png" alt="" />
|
</div>
|
<Dropdown
|
trigger="click"
|
style="float: right; color: #fff; font-size: 16px"
|
@on-click="onClick"
|
>
|
<a href="javascript:void(0)" style="color: #fff">
|
你好，
|
<span v-if="isAdmin" style="color: #ed4014">管理员</span>
|
<span v-else>{{ loginName }}</span>
|
<Icon type="ios-arrow-down"></Icon>
|
</a>
|
<DropdownMenu slot="list">
|
<DropdownItem name="logout">退出</DropdownItem>
|
</DropdownMenu>
|
</Dropdown>
|
<!-- <Button @click="showDebug" style="float: right; margin-top: 15px"
|
>网页配置</Button
|
> -->
|
</Header>
|
<Layout>
|
<Sider
|
width="240"
|
hide-trigger
|
collapsible
|
collapsedWidth="78"
|
:value="true"
|
>
|
<Menu
|
:active-name="activeName"
|
width="auto"
|
class="menu-item collapsed-menu"
|
>
|
<MenuItem
|
v-for="menu in menus"
|
:key="menu.id"
|
:name="menu.id"
|
:to="menu.id"
|
>
|
<Icon :type="menu.icon" />
|
<br />
|
<span>{{ menu.title }}</span>
|
</MenuItem>
|
</Menu>
|
</Sider>
|
<Layout>
|
<Content>
|
<router-view></router-view>
|
</Content>
|
</Layout>
|
</Layout>
|
<Debug v-model="debugModalVisible"></Debug>
|
</Layout>
|
</template>
|
|
<script>
|
import Debug from "@/components/debug.modal";
|
import { getSession, checkAdmin, clearSession } from "@/utils";
|
export default {
|
name: "DefaultLayout",
|
components: {
|
Debug,
|
},
|
data() {
|
return {
|
debugModalVisible: false,
|
activeName: "monitor",
|
isAdmin: checkAdmin(),
|
};
|
},
|
computed: {
|
loginName() {
|
return getSession().id;
|
},
|
menus() {
|
var menus = [
|
{
|
id: "monitor",
|
title: "实时监控",
|
icon: "md-speedometer",
|
ace: false,
|
},
|
{
|
id: "setting",
|
title: "设置",
|
icon: "md-settings",
|
ace: true,
|
},
|
];
|
return menus.filter((m) => !m.ace || this.isAdmin);
|
},
|
},
|
methods: {
|
showDebug() {
|
this.debugModalVisible = true;
|
},
|
onClick(name) {
|
if (name == "logout") {
|
clearSession();
|
this.$router.replace({ name: "login" });
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.ivu-layout {
|
height: 100%;
|
overflow: hidden;
|
}
|
.ivu-layout-header {
|
padding: 0 20px;
|
}
|
.layout-logo {
|
width: 183px;
|
height: 65px;
|
position: absolute;
|
top: -1px;
|
left: 0;
|
color: #ddd;
|
img {
|
height: 100%;
|
}
|
}
|
.ivu-layout-content {
|
min-height: auto !important;
|
padding: 9px !important;
|
height: 100% !important;
|
background-color: #f1f1f1;
|
border-radius: 5px;
|
}
|
.ivu-menu-vertical .ivu-menu-item {
|
padding: 14px 0;
|
text-align: center;
|
}
|
.menu-item {
|
height: 100%;
|
}
|
.menu-item span {
|
white-space: nowrap;
|
transition: width 0.2s ease 0.2s;
|
}
|
.menu-item i {
|
margin-bottom: 3px;
|
transform: translateX(0px);
|
transition: font-size 0.2s ease, transform 0.2s ease;
|
vertical-align: middle;
|
font-size: 16px;
|
}
|
.collapsed-menu span {
|
transition: width 0.2s ease;
|
transform: translate(-12px, 3px);
|
}
|
.collapsed-menu i {
|
transform: translateX(5px);
|
transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
|
vertical-align: middle;
|
font-size: 22px;
|
}
|
</style>
|
