mirror of https://gitee.com/pnoker/dc3-web.git
pull/1/head
parent
e842c5b055
commit
d43368aa8a
@ -1,162 +1,26 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<el-col :span="4" class="header_item">
|
||||
<img class="logo" src="./assets/logo.png">
|
||||
</el-col>
|
||||
<el-col :span="16" class="header_item">
|
||||
<el-menu class="menu"
|
||||
:default-active="this.$route.path"
|
||||
mode="horizontal"
|
||||
:router=true>
|
||||
<el-menu-item index="/"><span class="el-icon-menu"/>首页</el-menu-item>
|
||||
<el-menu-item index="/things">物联</el-menu-item>
|
||||
<el-menu-item index="/template">模板</el-menu-item>
|
||||
<el-menu-item index="/now">实时</el-menu-item>
|
||||
<el-menu-item index="/history">历史</el-menu-item>
|
||||
<el-menu-item index="/alarm">报警</el-menu-item>
|
||||
<el-menu-item index="/label">标签</el-menu-item>
|
||||
<el-menu-item index="/picture">图片</el-menu-item>
|
||||
<el-menu-item index="/video">视频</el-menu-item>
|
||||
<el-menu-item index="/setting">设置</el-menu-item>
|
||||
<el-menu-item index="/help">帮助</el-menu-item>
|
||||
<el-menu-item index="/about">关于</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="2" class="header_item">
|
||||
<el-badge :value="12" :max="99" class="badge_item" type="primary">
|
||||
<span class="span_small" @click="handleMessage">消息</span>
|
||||
</el-badge>
|
||||
</el-col>
|
||||
<el-col :span="2" class="header_item">
|
||||
<el-dropdown class="avatar_item" trigger="click" @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
<el-avatar>
|
||||
<img src="./assets/avatar.png">
|
||||
</el-avatar>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="setting">设置</el-dropdown-item>
|
||||
<el-dropdown-item command="help">帮助</el-dropdown-item>
|
||||
<el-dropdown-item command="logout" divided>退出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<span class="span_small avatar">管理员</span>
|
||||
</el-col>
|
||||
</div>
|
||||
<div class="body">
|
||||
<el-scrollbar style="height: 100%;">
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 1366px;
|
||||
min-height: 768px;
|
||||
}
|
||||
|
||||
.container {
|
||||
color: #2c3e50;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.header_item {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 60px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.menu .el-menu-item {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.badge_item {
|
||||
top: 25px;
|
||||
cursor: pointer;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.span_small {
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.span_small.avatar {
|
||||
margin: 20px 10px;
|
||||
}
|
||||
|
||||
.avatar_item {
|
||||
top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.body {
|
||||
top: 65px;
|
||||
bottom: 5px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.view {
|
||||
top: 1px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.operator {
|
||||
text-align: center;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
.page {
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
position: absolute !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "app",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
handleMessage() {
|
||||
this.$message('click on message');
|
||||
},
|
||||
handleCommand(command) {
|
||||
this.$message('click on item ' + command);
|
||||
}
|
||||
}
|
||||
}
|
||||
methods: {},
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in new issue